import { KbqClampedTextModule } from '@koobiq/components/clamped-text';Clamps projected text to rows lines and offers a disclosure control that reveals the rest.
The control only appears once a measurement has shown the content does not fit.
@Component({ selector: 'kbq-clamped-text', exportAs: 'kbqClampedText' }) class KbqClampedText implements KbqClamped { readonly rows = input<number>(kbqClampedTextDefaultMaxRows); readonly isCollapsed = model<boolean | undefined>(); readonly debounceTime = input<number>(0); readonly scrollOnCollapse = input<boolean>(true); readonly contentId: string; readonly hasToggle: Signal<boolean>; toggle(event: Event): void; }
rowsnumber Max rows before text is clamped. Defaults to kbqClampedTextDefaultMaxRows.
isCollapsedboolean | undefined Collapsed state: true = collapsed, false = expanded, undefined = auto.
Writable half of the [(isCollapsed)] two-way binding — written when the user operates the
toggle, never by the component's own measurement.
debounceTimenumber Debounce time on resize observer when recalculating toggle and text visibility. Defaults to 0.
scrollOnCollapseboolean Whether collapsing scrolls the component back into view. Defaults to true.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
contentIdstring Id of the clamped region, published by the toggle as its aria-controls.
hasToggleSignal<boolean> Whether the content overflows rows lines by enough to be worth a toggle.
toggle()void Flips the collapsed state. Stops event propagation.
Renders a long list compactly: keeps the first collapsedVisibleCount items and lets a projected
kbqClampedListTrigger reveal the rest.
@Directive({ selector: '[kbqClampedList]', exportAs: 'kbqClampedList' }) class KbqClampedList<T> implements KbqClamped { readonly isCollapsed = model<boolean>(true); readonly items = input<T[]>([]); readonly collapsedVisibleCount = input<number>(10); readonly hiddenThreshold = input<number>(6); readonly contentId: string; readonly exceededItemCount: Signal<number>; readonly hasToggle: Signal<boolean>; readonly visibleItems: Signal<T[]>; readonly showMoreCountText: Signal<string>; readonly localeConfiguration: Signal<KbqClampedTextLocaleConfiguration>; toggle(event: Event): void; }
isCollapsedboolean Collapsed state: true = collapsed, false = expanded, undefined = expanded.
itemsT[] The list of items to display.
collapsedVisibleCountnumber Maximum number of items visible in collapsed state. Defaults to 10.
hiddenThresholdnumber Minimum number of hidden items required to show the toggle trigger. Defaults to 6.
localeOverridesKbqPartialLocaleData | undefined Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
contentIdstring Id the trigger points its aria-controls at. Keeps an id the host already carries.
exceededItemCountSignal<number> Number of items hidden when the list is collapsed.
hasToggleSignal<boolean> Whether the number of hidden items meets the threshold to render the toggle trigger.
visibleItemsSignal<T[]> Slice of items currently rendered — truncated to minVisibleCount when collapsed, a full list otherwise.
showMoreCountTextSignal<string> Localized "show more" label with the exceeded item count interpolated into the {exceededItemCount} placeholder.
localeConfigurationSignal<KbqClampedTextLocaleConfiguration> Clamped text locale configuration.
toggle()void Toggles the collapsed state of the list. Stops event propagation.
Disclosure control for the clamped container it is projected into — [kbqClampedList] or
<kbq-clamped-text>. Supplies the button semantics itself, so a host element does not have to:
role, tabindex, aria-expanded and aria-controls all come from here, and a role or
tabindex written on the element wins over the defaults.
@Directive({ selector: '[kbqClampedListTrigger]', exportAs: 'kbqClampedListTrigger' }) class KbqClampedListTrigger {}
Contract a clamped container exposes to KbqClampedListTrigger.
interface KbqClamped { isCollapsed: Signal<boolean | undefined>; hasToggle: Signal<boolean>; contentId: string; localeConfiguration: Signal<KbqClampedTextLocaleConfiguration>; toggle(event: Event): void; }
isCollapsedSignal<boolean | undefined> Collapsed state: true = collapsed, false = expanded, undefined = auto.
Behavior for auto may vary according to clamped-list/clamped-text
hasToggleSignal<boolean> Whether the toggle trigger should be shown.
contentIdstring Id of the region the trigger expands and collapses, published as its aria-controls.
localeConfigurationSignal<KbqClampedTextLocaleConfiguration> Reactive locale strings for open/close labels.
toggle()void Toggles the collapsed state of the list. Stops event propagation.
Localization configuration provider.
const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION: InjectionToken<KbqClampedTextLocaleConfiguration>;Token the clamped containers of this package provide themselves under, so that
KbqClampedListTrigger can drive whichever of them it is projected into without naming a
concrete class.
const KbqClampedRoot: InjectionToken<KbqClamped>;Default maximum number of visible rows for the clamped text component before truncation and the "collapse/expand" toggle is shown.
const kbqClampedTextDefaultMaxRows: number;Utility provider of KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION. Only the strings you pass are overridden;
the rest keep following the active locale.
const kbqClampedTextLocaleConfigurationProvider: ( configuration: KbqDeepPartial<KbqClampedTextLocaleConfiguration> ) => Provider;