Selector: [kbqNormalizeWhitespace]
Shared directive to count lines inside a text area, such as a list item. Line elements can be extracted with a @ContentChildren(KbqLine) query, then counted by checking the query list's length.
Selector: [kbq-line], [mcLine]
Selector: kbq-action-container
Exported as: kbqActionContainerSelector: .kbq-form__row, .kbq-form__fieldset, .kbq-form__legend
Exported as: kbqFormElement| Name | Description |
|---|---|
| elements: Signal |
|
| hasLegend: boolean | |
| isFieldSet: boolean | |
| isHorizontal: boolean | |
| isRow: boolean | |
| margin: boolean |
| Name | Description |
|---|---|
| read: BehaviorSubject |
|
| timeToRead: number | |
| timestamp: number |
Component that is used to group instances of `kbq-option`. When options aren't provided as `ng-content`, used as a Group Header with styling.
Selector: kbq-optgroup
Exported as: kbqOptgroup| Name | Description |
|---|---|
@Input() disabled: boolean
|
|
@Input() label: InputSignal |
|
| labelId: string | Unique id for the underlying label. |
| Name | Description |
|---|---|
| collapsed: boolean | |
| isBrowser: boolean | |
| nativeElement: HTMLElement | |
| state: Subject |
| Name | Description |
|---|---|
| arrow: boolean | |
| changeDetectorRef: ChangeDetectorRef | |
| classMap: {} | |
| closeOnInteraction: boolean | |
| content: string | TemplateRef |
|
| context: { $implicit: any; } | |
| defaultPaddings: boolean | |
| destroyRef: DestroyRef | |
| elementRef: ElementRef |
|
| header: string | TemplateRef |
|
| hovered: BehaviorSubject |
Stream that emits when the popup item is hovered. |
| offset: number | |
| onHideSubject: Subject |
Subject for notifying that the tooltip has been hidden from the view |
| prefix: string | |
| renderer: Renderer2 | |
| trigger: KbqPopUpTrigger |
|
| visibility: PopUpVisibility | |
| visibleChange: EventEmitter |
|
| warning: boolean |
Selector: kbq-option-action
Exported as: kbqOptionAction| Name | Description |
|---|---|
@Input() disabled: boolean
|
|
| active: boolean | |
| hasFocus: boolean |
Selector: kbq-select-trigger, [kbq-select-trigger]
Selector: .kbq-form-vertical, .kbq-form-horizontal
Exported as: kbqForm| Name | Description |
|---|---|
| elements: Signal |
Selector: kbq-select-matcher, [kbq-select-matcher]
| Name | Description |
|---|---|
@Input() useDefaultHandlers: InputSignalWithTransform |
Selector: [kbq-select-search-empty-result]
Exported as: kbqSelectSearchEmptyResultSelector: kbq-select-footer, [kbq-select-footer]
Container directive that sits on the scrollable element. Listens for scroll events and keeps the `overflow` signal up to date, which is then read by `KbqOverflowShadowTop` and `KbqOverflowShadowBottom`. The scroll source is auto-detected: if `KBQ_OVERFLOW_SHADOW_SOURCE` is provided in the host's DI, that source is used; otherwise the native `scroll` event on the host element is observed. In addition to scroll events, the directive observes the scroll source's box-size changes via CDK's `SharedResizeObserver` — this covers layout changes that happen without a scroll and alter the viewport size (modal open/close animation, window resize, reflow that resizes the element). Content that only grows `scrollHeight` without changing the element's box size is not detected by the resize observer; call `checkOverflow()` manually for those cases.
Selector: [kbqOverflowShadowContainer]
Exported as: kbqOverflowShadowContainer| Name | Description |
|---|---|
@Input() debounce: InputSignalWithTransform |
Optional debounce for scroll events, in milliseconds. Default is 0. |
| overflow: WritableSignal |
Current shadow state. Updated on every scroll event. |
Action inside a `kbq-select-footer`, drawn as a row of the drop-down menu rather than as a form button. Apply it to a native `button` or `a` so activation and semantics stay native.
Selector: [kbq-select-footer-item]
Selector: [kbqSelectSearch]
Exported as: kbqSelectSearch| Name | Description |
|---|---|
| changes: EventEmitter |
|
| formField: KbqFormFieldRef | |
| isSearchChanged: boolean | |
| ngControl: any |
Shared behavior for checkbox-like controls: checked/disabled/indeterminate/tabIndex state, the click-to-toggle algorithm, ARIA-checked computation, and `ControlValueAccessor` change plumbing. Meant to be applied via `hostDirectives` by components that render their own native `` and markup (e.g. `KbqCheckbox`, `KbqToggleComponent`, or custom checkbox-like primitives). Hosts stay responsible for their own public inputs/outputs, `FocusMonitor` wiring, and emitting their own typed `change` event - this directive only centralizes the state and decisions behind them.
Selector: [kbqCheckable]
Exported as: kbqCheckable| Name | Description |
|---|---|
@Input() @Output('checkedChange')
checked: ModelSignal |
|
@Input() @Output('disabledChange')
disabled: ModelSignal |
|
@Input() @Output('indeterminateChange')
indeterminate: ModelSignal |
|
| effectiveTabIndex: Signal |
The tab index actually applied to the native input: forced to `-1` while disabled. |
| Name | Description |
|---|---|
@Input() color: string
|
|
| colorClassName: string | current class name of color |
Abstract base directive for hover/focus/click-triggered pop-ups (e.g. tooltip and popover). It manages the CDK overlay lifecycle, binds the trigger event listeners, resolves placement via a flexible connected position strategy, and controls show/hide timing. Concrete subclasses supply the pop-up component type, its content, and the overlay configuration.
| Name | Description |
|---|---|
| isAttached: boolean | Whether the pop-up overlay is currently attached. Unlike `isOpen`, which follows the visibility of the pop-up component and therefore lags a task behind `show()`/`hide()`, this flips synchronously — it is the window during which the overlay (and its backdrop) is present in the DOM. Part of the {@link KbqSiblingPopup} contract. |
| isOpen: boolean | Whether the pop-up overlay is currently open. |
| openedChange: Observable |
Emits `true` when the pop-up opens and `false` when it closes. Part of the {@link KbqSiblingPopup} contract. |
Single option inside of a `
Selector: kbq-option
Exported as: kbqOption| Name | Description |
|---|---|
@Input() disabled: any
|
|
@Input() selectable: InputSignalWithTransform |
|
@Input() showCheckbox: boolean
|
|
@Input() userSelect: InputSignalWithTransform |
|
@Input() value: any
|
The form value of the option. |
@Input() viewValue: string
|
The displayed value of the option. It is necessary to show the selected option in the select's trigger. |
@Output('onSelectionChange')
onSelectionChange: EventEmitter |
Event emitted when the option is selected or deselected. |
| active: boolean | Whether or not the option is currently active and ready to be selected. An active option displays styles as if it is focused, but the focus is actually retained somewhere else. This comes in handy for components like autocomplete where focus must remain on the input. |
| group: KbqOptgroup | |
| id: string | |
| multiple: boolean | Whether the wrapping component is in multiple selection mode. |
| parent: KbqOptionParentComponent | |
| selected: boolean | |
| stateChanges: Subject |
Emits when the state of the option changes and any parents have to be notified. |
| textElement: ElementRef |
Marker directive for the top-shadow indicator. Linked to the container directive via a template ref: `
Selector: [kbqOverflowShadowTop]
Exported as: kbqOverflowShadowTop| Name | Description |
|---|---|
@Input('kbqOverflowShadowTop')
ref: InputSignal |
Reference to the container directive. May be `undefined` if the container has not been rendered yet (e.g. the indicator lives in one |
@Input() shadow: InputSignal |
Value of `box-shadow` when the shadow is active. Defaults to the standard Koobiq token. |
Marker directive for the bottom-shadow indicator. Linked to the container directive via a template ref: `
Provides a set of validators for password form controls.
| Name | Description |
|---|---|
| document: Document | |
| scrollBarWidth: number |
| Name | Description |
|---|---|
| adapter: DateAdapter |
|
| config: FormatterConfig | |
| invalidDateErrorText: string | |
| localeService: KbqLocaleService | |
| messageFormat: MessageFormat<"string"> |
| Name | Description |
|---|---|
| activeItem: T | |
| activeItemIndex: number | |
| change: Subject |
Stream that emits whenever the active item of the list manager changes. |
| previousActiveItemIndex: number | |
| tabOut: Subject |
Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list. |
| Name | Description |
|---|---|
| config: DateAdapterConfig | |
| locale: any | The locale to use for all dates. |
| localeChanges: Observable |
A stream that emits when the locale changes. |
| Name | Description |
|---|---|
| activeItem: T | |
| activeItemIndex: number | |
| change: Subject |
Stream that emits whenever the active item of the list manager changes. |
| previousActiveItemIndex: number | |
| tabOut: Subject |
Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list. |
Error state matcher that matches when a control is invalid and form is submitted. Requires use FormGroupDirective or NgForm.
This class manages keyboard events for selectable lists. If you pass it a query list of items, it will set the active item correctly when arrow events occur.
| Name | Description |
|---|---|
| activeItem: T | |
| activeItemIndex: number | |
| change: Subject |
Stream that emits whenever the active item of the list manager changes. |
| previousActiveItemIndex: number | |
| tabOut: Subject |
Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list. |
Event object emitted by KbqOption when selected or deselected.
| Name | Description |
|---|---|
| isUserInput: boolean | |
| source: T |
Error state matcher with split behavior based on error's type: - `required` errors are shown only after the form is submitted. - All other errors are shown as soon as the control is invalid and touched.
| Name | Description |
|---|---|
| current: BehaviorSubject |
|
| document: Document | |
| renderer: Renderer2 | |
| rendererFactory: RendererFactory2 | |
| subscription: Subscription | |
| themes: T[] | |
| update: ([prev, current]: T[]) => void |
Scroll strategy that repositions the overlay on scroll and reports when the tracked element moves outside its boundary: - With `originElement`: tracks the origin against each ancestor `CdkScrollable` container. - Without `originElement`: tracks the overlay panel against the viewport. Two ways to react to the out-of-bounds event, usable independently or together: - Subscribe to `hide` — a handle for callers that don't control how this strategy is constructed (e.g. reaching into an existing component's `overlayRef.getConfig().scrollStrategy` from the outside). - Pass `onHide` via the factory returned by `kbqAutoHideScrollStrategyFactory` — for callers that construct the strategy themselves.
| Name | Description |
|---|---|
| hide: Observable |
Emits once when the tracked element scrolls outside its boundary. |
`OverlayContainer` that places the `.cdk-overlay-container` inside a shadow root instead of `document.body`. The default CDK `OverlayContainer` always appends its container to `document.body`. When the application is rendered inside a shadow root (e.g. a Module Federation micro-frontend), overlays — toasts, modals, dropdowns, tooltips, etc. — escape the shadow tree into the light DOM. There they lose access to the styles and theme tokens scoped to the shadow root (Koobiq theme tokens are defined on the `.kbq-light` / `.kbq-dark` ancestor), which results in unstyled overlays. This container resolves the target shadow root from {@link KBQ_SHADOW_DOM_OVERLAY_HOST} (or the root component when the token is absent) and relocates the overlay container into it. After relocating, it also clones CDK's own structural overlay stylesheet (`position`/`z-index`/backdrop, `.cdk-overlay-container:empty`) into the shadow root, since those `document.head` styles do not cross the shadow boundary. If no shadow root is found — the common case for an app rendered directly in the light DOM — the container is left on `document.body`, so it is safe to provide unconditionally. Only **open** shadow roots can be resolved: a closed shadow root exposes neither `Element.shadowRoot` nor a `ShadowRoot` from `getRootNode()`, so pass an element that already lives inside the closed tree if you must use one. Note: this fixes the overlay container *placement* and delivers the CDK structural overlay styles. The host application is still responsible for delivering the **Koobiq component/theme styles** (the `.kbq-light` / `.kbq-dark` tokens and component CSS) into the shadow root, since global `document.head` stylesheets do not cascade across a shadow boundary.
Error state matcher that matches when a control is invalid and dirty or form is submitted.
| Name | Description |
|---|---|
| disabled: boolean | |
| onSelectionChange: EventEmitter |
|
| value: any | |
| viewValue: string |
Provider that defines how form controls behave with regards to displaying error messages. Error state matcher that matches when a control is invalid and touched or form is submitted.
| Name | Description |
|---|---|
| changes: BehaviorSubject |
|
| current: any | |
| id: string | |
| locales: any |
| Name | Description |
|---|---|
| disabled: any | |
| onSelectionChange: EventEmitter |
|
| selected: boolean | |
| value: any | |
| viewValue: string |
Error state matcher that also shows an error set on a `FormGroup` on the controls that error concerns, which the default matcher cannot: it is handed the field's own `FormControl` and never looks further. `scope` maps an error to those controls, so no error shape is imposed on validators. The error is revealed once every one of them is touched, or the form is submitted — override `shouldReveal` to change that. ## Usage: ```typescript providers: [ kbqErrorStateMatcherProvider( new ShowOnCrossFieldErrorStateMatcher((key) => key === 'passwordsMismatch' ? ['newPassword', 'confirmPassword'] : null ) ) ] ``` Always pass an instance, as above — never the bare class (or a subclass) to `kbqErrorStateMatcherProvider`. `scope` has no injection token, so Angular cannot construct this class on its own; passing the class throws `NG0204` the first time anything injects `ErrorStateMatcher`. ## Combining with another matcher Cross-field display timing is this class's one job; timing for a control's own, non-cross-field errors is not, so it is delegated to `own` (default: the plain `ErrorStateMatcher`) rather than hard-coded — pass any other matcher to combine its timing with cross-field support, instead of subclassing: ```typescript new ShowOnCrossFieldErrorStateMatcher( (key) => (key === 'passwordsMismatch' ? ['newPassword', 'confirmPassword'] : null), new ShowRequiredOnSubmitErrorStateMatcher() ) ```
Event emitted by the `onSelectAll` outputs when the select-all toggle runs.
| Name | Description |
|---|---|
| options: T[] | The selectable options affected by the toggle. |
| selected: boolean | `true` when all options were selected, `false` when all were deselected. |
| source: S | Component that emitted the event. |
| Name | Description |
|---|---|
| adapter: DateAdapter |
|
| formatter: DateFormatter |
Provides a set of validators for file-related form controls.
Holds the time zone every date the library creates, parses and formats is rendered in. Provided in root, so {@link KBQ_DATE_TIMEZONE} in the application providers configures the whole application. To scope a zone to one subtree, list {@link kbqDateTimezoneProvider} in that component's `providers` together with the date adapter and the `DateFormatter`: the adapter captures the service of the injector that created it, and keeps using it.
| Name | Description |
|---|---|
| changes: Observable |
Emits when the active time zone changes. The counterpart of `DateAdapter.localeChanges`, for the surfaces that render a date once instead of through an impure pipe — the date inputs and the calendar. |
| timezone: Signal |
Active time zone. |
| Name | Description |
|---|---|
| parentTextElement: ElementRef |
|
| textElement: ElementRef |
This is the interface for highlightable items (used by the ActiveDescendantKeyManager). Each item must know how to style itself as active or inactive and whether or not it is currently disabled.
| Name | Description |
|---|---|
| disabled: boolean |
Adapter describing how a component reads and writes selection state for a set of items, so the shared select-all logic can operate regardless of how selection is stored (per-option setter, `SelectionModel` on data nodes, etc.).
| Name | Description |
|---|---|
| isSelectable: (item: T) => boolean | Whether the item may participate (e.g. not disabled, and — for tree — `selectable()`). |
| isSelected: (item: T) => boolean | Current selected state of the item. |
| items: readonly T[] | All candidate items, in render/model order. |
| setSelected: (item: T, selected: boolean) => void | Applies the new selected state to the item. Must be idempotent — a no-op, with no further side effects (no emitted events, no notifications) — when `selected` already matches the item's current state: {@link toggleSelectAll} calls this for every selectable item, not just the ones whose state actually changes, and relies on implementations to absorb the redundant calls silently. |
This is the interface for focusable items (used by the FocusKeyManager). Each item must know how to focus itself, whether or not it is currently disabled and be able to supply it's label.
| Name | Description |
|---|---|
| disabled: boolean |
| Name | Description |
|---|---|
| color: string |
| Name | Description |
|---|---|
| disabled: boolean |
| Name | Description |
|---|---|
| className: string | |
| name: string | |
| selected: boolean |
| Name | Description |
|---|---|
| closedStream: Observable |
| Name | Description |
|---|---|
| disabled: boolean |
Configuration options for `KbqAutoHideScrollStrategy`.
| Name | Description |
|---|---|
| originElement: HTMLElement | Element whose position is tracked against ancestor scroll container boundaries. When omitted, the overlay panel is checked against the viewport instead. |
| scrollThrottle: number | Scroll event throttle in ms. Defaults to 20. |
| Name | Description |
|---|---|
| abbreviations: string[] | |
| base: number | |
| power: number |
Shadow visibility state — which of the two shadows should be rendered.
| Name | Description |
|---|---|
| bottom: boolean | Whether the bottom (footer) shadow should be visible — more content remains below the fold. |
| top: boolean | Whether the top (header) shadow should be visible — content is scrolled past the top. |
| Name | Description |
|---|---|
| dropdownTrigger: { opened: boolean; restoreFocus: boolean; dropdownClosed: EventEmitter |
|
| tooltipTrigger: { disabled: boolean; } |
Contract of a pop-up anchored to the same element as a tooltip — a popover, a dropdown, a select and so on. A tooltip sharing its host with such a pop-up mutes itself while the pop-up is on screen, so the two never compete for the same anchor and the focus restored by the closing pop-up does not re-open the tooltip.
| Name | Description |
|---|---|
| isAttached: boolean | Whether the pop-up overlay is currently attached. Unlike a visibility flag it must flip synchronously, both when the overlay is attached and when it is detached. |
| openedChange: Observable |
Emits `true` when the pop-up opens and `false` when it closes. |
Configuration for file size formatting options. Defines the default unit system, precision, and available unit systems.
| Name | Description |
|---|---|
| defaultPrecision: number | Default number of decimal places to display in formatted output. |
| defaultUnitSystem: "SI" | "IEC" | Default unit system to use (e.g., 'SI' or 'IEC'). |
| unitSystems: { SI: KbqUnitSystem; IEC: KbqUnitSystem; } |
Source of scroll events and scroll metrics. Can be provided by a component that wraps the scrollable element (e.g. `KbqScrollbar`) so that `KbqOverflowShadowContainer` does not have to subscribe to the native `scroll` event directly.
| Name | Description |
|---|---|
| onScroll: Observable |
Emits whenever the wrapped element scrolls. |
Lifecycle hooks for `KbqAutoHideScrollStrategy`, passed via `kbqAutoHideScrollStrategyFactory`.
| Name | Description |
|---|---|
| onHide: () => void | Called (inside Angular zone) when the tracked element scrolls outside its scroll container boundary. |
Contract for an ancestor that wants to override where overlays opened by a nested `KbqFormField`'s control (e.g. a select's dropdown, a datepicker's calendar) are anchored, instead of the form-field's own container.
Options for {@link toggleSelectAll}.
| Name | Description |
|---|---|
| allowDeselect: boolean | When `true`, a repeated toggle deselects everything once all selectable items are already selected. When `false` (default), the toggle only ever selects. |
Special contract between `KbqDecimalPipe` and `KbqTableNumberPipe`, so they can be interchangeable in the cases of usage
Handler that will update scroll position of elements inside overlay
Result of resolving a click on a checkable control's native input. See {@link KbqCheckable.resolveClick}.
| Name | Description |
|---|---|
| shouldClearIndeterminate: boolean | Whether `indeterminate` should be cleared and an `indeterminateChange` event emitted. |
| shouldToggle: boolean | Whether `checked` should be toggled and a `change` event emitted. |
| Name | Description |
|---|---|
| browseLink: string | |
| browseLinkFolder: string | |
| browseLinkFolderMixed: string | |
| captionText: string | |
| captionTextOnlyFolder: string | |
| captionTextWithFolder: string |
| Name | Description |
|---|---|
| browseLink: string | |
| browseLinkFolder: string | |
| browseLinkFolderMixed: string | |
| captionText: string | |
| captionTextForCompactSize: string | |
| captionTextOnlyFolder: string | |
| captionTextWhenSelected: string | |
| captionTextWithFolder: string | |
| title: string |
Creates a browser MouseEvent with the specified options.
const createMouseEvent(type: string, x?: number, y?: number, button?: number): MouseEvent;
| Parameters | Description |
|---|---|
| type: string | |
| x?: number | |
| y?: number | |
| button?: number |
const wrappedErrorMessage(e: Error): RegExp;
| Parameters | Description |
|---|---|
| e: Error |
const isBoolean(value: unknown): value is boolean;
| Parameters | Description |
|---|---|
| value: unknown |
Patches an elements focus and blur methods to emit events consistently and predictably. This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously, while others won't fire them at all if the browser window is not focused.
const patchElementFocus(element: HTMLElement): void;
| Parameters | Description |
|---|---|
| element: HTMLElement |
Focuses an input, sets its value and dispatches the `input` event, simulating the user typing.
const typeInElement(value: string, element: HTMLInputElement): void;
| Parameters | Description |
|---|---|
| value: string | Value to be set on the input. |
| element: HTMLInputElement | Element onto which to set the value. |
Utility to dispatch any event on a Node.
const dispatchEvent(node: Node | Window, event: Event): Event;
| Parameters | Description |
|---|---|
| node: Node | Window | |
| event: Event |
Converts a byte value into locale-independent file size parts: numeric value and unit abbreviation.
const getFormattedSizeParts(value: number, system: KbqUnitSystem): { value: string; unit: string; };
| Parameters | Description |
|---|---|
| value: number | - size in bytes. |
| system: KbqUnitSystem | - unit system defining abbreviations and base scaling (SI/IEC). |
Escapes characters in the specified string that have special meaning in a regular expression.
const escapeRegExp(value: string): string;
| Parameters | Description |
|---|---|
| value: string |
Shorthand to dispatch a fake event on a specified node.
const dispatchFakeEvent(node: Node | Window, type: string, canBubble?: boolean): Event;
| Parameters | Description |
|---|---|
| node: Node | Window | |
| type: string | |
| canBubble?: boolean |
const mixinDisabled(base: T): Constructor<CanDisable> & Function & { prototype: CanDisable; } & T;
| Parameters | Description |
|---|---|
| base: T |
const mixinTabIndex(base: T, defaultTabIndex?: number): Constructor<HasTabIndex> & Function & { prototype: HasTabIndex; } & T;
| Parameters | Description |
|---|---|
| base: T | |
| defaultTabIndex?: number |
Shorthand to dispatch a keyboard event with a specified key code and, optionally, a `KeyboardEvent.key`.
const dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element, key?: string): KeyboardEvent;
| Parameters | Description |
|---|---|
| node: Node | |
| type: string | |
| keyCode: number | |
| target?: Element | |
| key?: string |
Formats a number value according to locale and formatting options
const formatNumberWithLocale(value: unknown, formatter: NumberFormat, options?: KbqNumberFormatOptions): string;
| Parameters | Description |
|---|---|
| value: unknown | |
| formatter: NumberFormat | |
| options?: KbqNumberFormatOptions |
Creates a browser TouchEvent with the specified pointer coordinates.
const createTouchEvent(type: string, pageX?: number, pageY?: number): UIEvent;
| Parameters | Description |
|---|---|
| type: string | |
| pageX?: number | |
| pageY?: number |
Returns an exception to be thrown when assigning a non-function value to the comparator used to determine if a value corresponds to an option. Note that whether the function actually takes two values and returns a boolean is not checked.
const getKbqSelectNonFunctionValueError(): Error;
const KBQ_DEFAULT_LOCALE_DATA_FACTORY(): { items: { id: string; name: string; }[]; 'en-US': { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; }; }; sizeUnits: { defaultUnitSystem: "SI"; defaultPrecision: number; unitSystems: { SI: { abbreviations: string[]; base: number; power: number; }; IEC: { abbreviations: string[]; base: number; power: number; }; }; }; a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; select: { hiddenItemsText: string; selectAll: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; }; multiple: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; captionTextWhenSelected: string; captionTextForCompactSize: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; title: string; }; }; codeBlock: { softWrapOnTooltip: string; softWrapOffTooltip: string; downloadTooltip: string; copiedTooltip: string; copyTooltip: string; viewAllText: string; viewLessText: string; openExternalSystemTooltip: string; }; timezone: { searchPlaceholder: string; }; actionsPanel: { closeTooltip: string; }; filterBar: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }; clampedText: { openText: string; closeText: string; showMoreText: string; moreText: string; }; navbarIc: { toggle: { pinButton: string; collapseButton: string; }; }; navbar: { toggle: { expand: string; collapse: string; }; }; searchExpandable: { tooltip: string; placeholder: string; }; appSwitcher: { searchPlaceholder: string; searchEmptyResult: string; sitesHeader: string; }; timeRange: { title: { for: string; placeholder: string; }; editor: { from: string; to: string; apply: string; cancel: string; rangeLabel: string; outOfBoundsError: string; allTime: string; currentQuarter: string; currentYear: string; allTimeOption: string; currentQuarterOption: string; currentYearOption: string; }; durationTemplate: { title: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; option: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; }; }; notificationCenter: { notifications: string; remove: string; doNotDisturb: string; showPopUpNotifications: string; noNotifications: string; failedToLoadNotifications: string; repeat: string; loadingMore: string; }; }; 'es-LA': { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; viewGroupSeparator: string; }; }; sizeUnits: { defaultUnitSystem: string; defaultPrecision: number; unitSystems: { SI: { abbreviations: string[]; base: number; power: number; }; IEC: { abbreviations: string[]; base: number; power: number; }; }; }; a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; select: { hiddenItemsText: string; selectAll: string; }; datepicker: { placeholder: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; }; multiple: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; captionTextWhenSelected: string; captionTextForCompactSize: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; title: string; }; }; codeBlock: { softWrapOnTooltip: string; softWrapOffTooltip: string; downloadTooltip: string; copiedTooltip: string; copyTooltip: string; viewAllText: string; viewLessText: string; openExternalSystemTooltip: string; }; timezone: { searchPlaceholder: string; }; actionsPanel: { closeTooltip: string; }; filterBar: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }; clampedText: { openText: string; closeText: string; showMoreText: string; moreText: string; }; navbarIc: { toggle: { pinButton: string; collapseButton: string; }; }; navbar: { toggle: { expand: string; collapse: string; }; }; searchExpandable: { tooltip: string; placeholder: string; }; appSwitcher: { searchPlaceholder: string; searchEmptyResult: string; sitesHeader: string; }; timeRange: { title: { for: string; placeholder: string; }; editor: { from: string; to: string; apply: string; cancel: string; rangeLabel: string; outOfBoundsError: string; allTime: string; currentQuarter: string; currentYear: string; allTimeOption: string; currentQuarterOption: string; currentYearOption: string; }; durationTemplate: { title: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; option: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; }; }; notificationCenter: { notifications: string; remove: string; doNotDisturb: string; showPopUpNotifications: string; noNotifications: string; failedToLoadNotifications: string; repeat: string; loadingMore: string; }; }; 'pt-BR': { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; }; }; sizeUnits: { defaultUnitSystem: string; defaultPrecision: number; unitSystems: { SI: { abbreviations: string[]; base: number; power: number; }; IEC: { abbreviations: string[]; base: number; power: number; }; }; }; a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; select: { hiddenItemsText: string; selectAll: string; }; datepicker: { placeholder: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; }; multiple: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; captionTextWhenSelected: string; captionTextForCompactSize: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; title: string; }; }; codeBlock: { softWrapOnTooltip: string; softWrapOffTooltip: string; downloadTooltip: string; copiedTooltip: string; copyTooltip: string; viewAllText: string; viewLessText: string; openExternalSystemTooltip: string; }; timezone: { searchPlaceholder: string; }; actionsPanel: { closeTooltip: string; }; filterBar: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }; clampedText: { openText: string; closeText: string; showMoreText: string; moreText: string; }; navbarIc: { toggle: { pinButton: string; collapseButton: string; }; }; navbar: { toggle: { expand: string; collapse: string; }; }; searchExpandable: { tooltip: string; placeholder: string; }; appSwitcher: { searchPlaceholder: string; searchEmptyResult: string; sitesHeader: string; }; timeRange: { title: { for: string; placeholder: string; }; editor: { from: string; to: string; apply: string; cancel: string; rangeLabel: string; outOfBoundsError: string; allTime: string; currentQuarter: string; currentYear: string; allTimeOption: string; currentQuarterOption: string; currentYearOption: string; }; durationTemplate: { title: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; option: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; }; }; notificationCenter: { notifications: string; remove: string; doNotDisturb: string; showPopUpNotifications: string; noNotifications: string; failedToLoadNotifications: string; repeat: string; loadingMore: string; }; }; 'ru-RU': { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; startFormattingFrom: number; viewGroupSeparator: string; }; }; sizeUnits: { defaultUnitSystem: string; defaultPrecision: number; unitSystems: { SI: { abbreviations: string[]; base: number; power: number; }; IEC: { abbreviations: string[]; base: number; power: number; }; }; }; a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; select: { hiddenItemsText: string; selectAll: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; }; multiple: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; captionTextWhenSelected: string; captionTextForCompactSize: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; title: string; }; }; codeBlock: { softWrapOnTooltip: string; softWrapOffTooltip: string; downloadTooltip: string; copiedTooltip: string; copyTooltip: string; viewAllText: string; viewLessText: string; openExternalSystemTooltip: string; }; timezone: { searchPlaceholder: string; }; actionsPanel: { closeTooltip: string; }; filterBar: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }; clampedText: { openText: string; closeText: string; showMoreText: string; moreText: string; }; navbarIc: { toggle: { pinButton: string; collapseButton: string; }; }; navbar: { toggle: { expand: string; collapse: string; }; }; searchExpandable: { tooltip: string; placeholder: string; }; appSwitcher: { searchPlaceholder: string; searchEmptyResult: string; sitesHeader: string; }; timeRange: { title: { for: string; placeholder: string; }; editor: { from: string; to: string; apply: string; cancel: string; rangeLabel: string; outOfBoundsError: string; allTime: string; currentQuarter: string; currentYear: string; allTimeOption: string; currentQuarterOption: string; currentYearOption: string; }; durationTemplate: { title: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; option: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; }; }; notificationCenter: { notifications: string; remove: string; doNotDisturb: string; showPopUpNotifications: string; noNotifications: string; failedToLoadNotifications: string; repeat: string; loadingMore: string; }; }; 'tk-TM': { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; viewGroupSeparator: string; }; }; sizeUnits: { defaultUnitSystem: string; defaultPrecision: number; unitSystems: { SI: { abbreviations: string[]; base: number; power: number; }; IEC: { abbreviations: string[]; base: number; power: number; }; }; }; a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; select: { hiddenItemsText: string; selectAll: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; }; multiple: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; captionTextWhenSelected: string; captionTextForCompactSize: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed: string; title: string; }; }; codeBlock: { softWrapOnTooltip: string; softWrapOffTooltip: string; downloadTooltip: string; copiedTooltip: string; copyTooltip: string; viewAllText: string; viewLessText: string; openExternalSystemTooltip: string; }; timezone: { searchPlaceholder: string; }; actionsPanel: { closeTooltip: string; }; filterBar: { reset: { buttonName: string; }; search: { tooltip: string; placeholder: string; }; filters: { defaultName: string; saveNewFilterTooltip: string; searchPlaceholder: string; searchEmptyResult: string; saveAsNewFilter: string; saveChanges: string; saveAsNew: string; change: string; resetChanges: string; remove: string; name: string; error: string; errorHint: string; saveButton: string; cancelButton: string; actionsTooltip: string; }; add: { tooltip: string; addedAnnouncement: string; }; refresher: { refresh: string; settings: string; }; pipe: { clearButtonTooltip: string; removeButtonTooltip: string; applyButton: string; emptySearchResult: string; selectAll: string; }; datePipe: { customPeriod: string; customPeriodFrom: string; customPeriodTo: string; customPeriodErrorHint: string; customPeriodMinIntervalErrorHint: string; customPeriodMaxIntervalErrorHint: string; backToPeriodSelection: string; }; }; clampedText: { openText: string; closeText: string; showMoreText: string; moreText: string; }; navbarIc: { toggle: { pinButton: string; collapseButton: string; }; }; navbar: { toggle: { expand: string; collapse: string; }; }; searchExpandable: { tooltip: string; placeholder: string; }; appSwitcher: { searchPlaceholder: string; searchEmptyResult: string; sitesHeader: string; }; timeRange: { title: { for: string; placeholder: string; }; editor: { from: string; to: string; apply: string; cancel: string; rangeLabel: string; outOfBoundsError: string; allTime: string; currentQuarter: string; currentYear: string; allTimeOption: string; currentQuarterOption: string; currentYearOption: string; }; durationTemplate: { title: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; option: { SEPARATOR: string; LAST_PART_SEPARATOR: string; YEARS: string; MONTHS: string; WEEKS: string; DAYS: string; HOURS: string; MINUTES: string; SECONDS: string; YEARS_FRACTION: string; MONTHS_FRACTION: string; }; }; }; notificationCenter: { notifications: string; remove: string; doNotDisturb: string; showPopUpNotifications: string; noNotifications: string; failedToLoadNotifications: string; repeat: string; loadingMore: string; }; }; };
Normalizes a string for case- and diacritic-insensitive search comparison: trims the ends, decomposes accented characters (NFKD), strips the resulting combining marks (while preserving `й`/`Й` as distinct letters), and lowercases using the current locale. Internal whitespace and punctuation are left untouched.
const normalizeSearchValue(value: string): string;
| Parameters | Description |
|---|---|
| value: string |
Shorthand to dispatch a mouse event on the specified coordinates.
const dispatchMouseEvent(node: Node, type: string, x?: number, y?: number, event?: MouseEvent): MouseEvent;
| Parameters | Description |
|---|---|
| node: Node | |
| type: string | |
| x?: number | |
| y?: number | |
| event?: MouseEvent |
const mixinColor(base: T, defaultColor?: KbqComponentColors | ThemePalette): Constructor<CanColor> & Function & { prototype: CanColor; } & T;
| Parameters | Description |
|---|---|
| base: T | |
| defaultColor?: KbqComponentColors | ThemePalette |
const mixinErrorState(base: T): CanUpdateErrorStateCtor & T;
| Parameters | Description |
|---|---|
| base: T |
Whether the current platform is a Mac.
const isMac(): boolean;
Shorthand to dispatch a touch event on the specified coordinates.
const dispatchTouchEvent(node: Node, type: string, x?: number, y?: number): Event;
| Parameters | Description |
|---|---|
| node: Node | |
| type: string | |
| x?: number | |
| y?: number |
Locates every case- and diacritic-insensitive match of `tokens` in `value`, returning `[start, end)` ranges in `value`'s own (unfolded) coordinates — overlapping or adjacent ranges are merged. This is what a highlighter needs to stay in sync with {@link createSearchPredicate}: matching a folded value like `cafe` against `Café` only tells you *that* it matched, not *where* in the original string to mark, since folding can change which letters look alike without changing the string's length.
const findSearchMatchRanges(value: string, tokens: readonly string[]): [number, number][];
| Parameters | Description |
|---|---|
| value: string | |
| tokens: readonly string[] |
Dispatches a keydown event from an element.
const createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string): any;
| Parameters | Description |
|---|---|
| type: string | |
| keyCode: number | |
| target?: Element | |
| key?: string |
Canonical "select all / deselect all" toggle shared by the multi-select components (`Ctrl`/`Cmd` + `A`). Considers only selectable items and selects them all. When `allowDeselect` is `true` and every selectable item is already selected, deselects them all instead; otherwise a repeated call is a no-op. No-op when there are no selectable items.
const toggleSelectAll(adapter: KbqSelectAllAdapter<T>, options?: KbqToggleSelectAllOptions): T[];
| Parameters | Description |
|---|---|
|
adapter:
KbqSelectAllAdapter |
|
| options?: KbqToggleSelectAllOptions |
Creates a fake event object with any desired event type.
const createFakeEvent(type: string, canBubble?: boolean, cancelable?: boolean): Event;
| Parameters | Description |
|---|---|
| type: string | |
| canBubble?: boolean | |
| cancelable?: boolean |
State of a "select all" master checkbox over the same items {@link toggleSelectAll} would act on. Considers only selectable items, so items the toggle cannot reach (disabled, non-selectable) never pin the checkbox to `indeterminate`. An empty selectable set reads as `unchecked`: there is nothing to select, and `[].every()` being `true` would otherwise report a full selection.
const getSelectAllState(adapter: KbqSelectAllAdapter<T>): KbqPseudoCheckboxState;
| Parameters | Description |
|---|---|
|
adapter:
KbqSelectAllAdapter |
const hasModifierKey(event: KeyboardEvent | MouseEvent, ...modifiers: ModifierKey[]): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent | MouseEvent | |
| modifiers: ModifierKey[] |
Whether `Ctrl`/`Cmd` + `A` should select the text of a search `` rather than toggle options. Returns `true` only when the input has text that is not already fully selected (nothing selected, a partial selection, or just a caret). Returns `false` for an empty input (so select-all falls straight through to the options) and when the whole value is already selected (a second press then acts on the options).
const shouldSelectSearchText(input: HTMLInputElement): boolean;
| Parameters | Description |
|---|---|
| input: HTMLInputElement |
Splits a raw query into tokens, treating whitespace as a separator and `"quoted phrases"` as a single token (spaces inside the quotes are preserved). A `"` with no matching closing quote stays part of its token instead of being dropped, so a half-open quote yields a token no realistic haystack contains — and therefore no results — until the quote is closed.
const tokenizeSearchQuery(query: string): string[];
| Parameters | Description |
|---|---|
| query: string |
const isControl(event: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent |
const isNumberKey({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
const isNumpadKey({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
const isLetterKey({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
Moves focus from an option to its trailing action button on Tab. Shared by `KbqListOption` and `KbqTreeOption` so the two cannot drift apart. Tab is swallowed only when focus actually landed: the action lives in a `display: none` container until the option is hovered or keyboard-focused, and focusing a hidden element is a no-op, so suppressing Tab there would trap focus on the option.
const kbqFocusOptionActionOnTab($event: KeyboardEvent, actionButton: KbqOptionActionComponent): void;
| Parameters | Description |
|---|---|
| $event: KeyboardEvent | |
| actionButton: KbqOptionActionComponent |
const isFunctionKey({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
Function that returns a string representation of a number without localized separators
const normalizeNumber(value: string, customConfig: Pick<KbqNumberInputLocaleConfig, "fractionSeparator" | "groupSeparator">): string;
| Parameters | Description |
|---|---|
| value: string | |
|
customConfig:
Pick |
Builds a case- and diacritic-insensitive substring predicate for the given query. The query is tokenized (bare words + `"quoted phrases"`) and every token must match (AND) against at least one of the supplied haystacks (OR across fields) — pass a single string for a single-field search, or an array for multi-field rows. An empty/whitespace-only query matches everything.
const createSearchPredicate(query: string): (value: string | readonly string[]) => boolean;
| Parameters | Description |
|---|---|
| query: string |
const isVerticalMovement({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
const isHorizontalMovement({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
const isSelectAll(event: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent |
const isCopy(event: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent |
const isInput(event: Event): boolean;
| Parameters | Description |
|---|---|
| event: Event |
Function that parse string and return a number. The string can be in any locale.
const checkAndNormalizeLocalizedNumber(num: string, locale?: string): number;
| Parameters | Description |
|---|---|
| num: string | |
| locale?: string |
const isLeftBracket(event: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent |
const isRightBracket(event: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent |
const isDigit({ keyCode }: KeyboardEvent): boolean;
| Parameters | Description |
|---|---|
| { keyCode }: KeyboardEvent |
Factory function for `KbqAutoHideScrollStrategy`. Use it directly as a `useFactory` value when providing a component-level scroll strategy token (e.g. `KBQ_POPOVER_SCROLL_STRATEGY`). The returned function accepts an optional `hooks` object (see `KbqAutoHideScrollStrategyHooks`) and an optional `config` (see `KbqAutoHideScrollStrategyConfig`).
const kbqAutoHideScrollStrategyFactory(scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, ngZone: NgZone): (hooks?: KbqAutoHideScrollStrategyHooks, config?: KbqAutoHideScrollStrategyConfig) => KbqAutoHideScrollStrategy;
| Parameters | Description |
|---|---|
| scrollDispatcher: ScrollDispatcher | |
| viewportRuler: ViewportRuler | |
| ngZone: NgZone |
const isWithin(startRange: number, endRange: number, valueToCheck: number): boolean;
| Parameters | Description |
|---|---|
| startRange: number | |
| endRange: number | |
| valueToCheck: number |
Defines the available size options for Koobiq components.
type KbqDefaultSizes = 'compact' | 'normal' | 'big';
Tri-state checkbox values
type KbqCheckedState = 'true' | 'false' | 'mixed';
Controls the direction of flex items: horizontal (`'row'`) or vertical (`'column'`).
type KbqFlexDirection = 'row' | 'column';
Defines component orientation.
type KbqOrientation = 'horizontal' | 'vertical';
Maximum height of an overlay panel's scrollable content, in pixels. `null` falls back to the `--kbq-select-panel-size-max-height` design token. The cap covers the scrollable list only — a search field or a footer rendered beside it adds to the panel's total height. With a `cdk-virtual-scroll-viewport` the value is an exact height rather than a cap, because the viewport pins both its `min-height` and its `max-height` to the token.
type KbqPanelMaxHeight = number | null;
Text the library exposes to assistive tech only: accessible names for the icon-only buttons it renders itself, and live-region announcements. An icon carries no text, so without one of these a button has no accessible name at all (AXE `button-name`). None of these strings are ever displayed.
type KbqA11yLocaleConfiguration = {
/** Close button of a modal, popover, sidepanel, content panel or notification center. */
close: string;
/** Confirm button of an inline edit. */
save: string;
/** Announced while an inline edit saves a value in the background. */
saving: string;
/** Announced when a background save of an inline edit fails. */
saveFailed: string;
/** Discard button of an inline edit. */
cancel: string;
/** Button removing every notification at once. */
removeAll: string;
/** Breadcrumbs button revealing the items hidden by overflow. */
expandBreadcrumbs: string;
/** Calendar button switching to the previous month. */
previousMonth: string;
/** Calendar button switching back to the current date. */
currentDate: string;
/** Calendar button switching to the next month. */
nextMonth: string;
/** Form field button that clears the control value. */
clear: string;
/** Password form field button that reveals the password. */
showPassword: string;
/** Password form field button that masks the password. */
hidePassword: string;
/** Separator that resizes the columns of a description list. */
resizeColumns: string;
};
Controls flex item wrapping: single-line (`'nowrap'`) or multi-line (`'wrap'`).
type KbqFlexWrap = 'nowrap' | 'wrap';
Time zone the library renders dates in. Accepts an IANA name (`'Europe/Moscow'`), a fixed offset — in minutes east of UTC (`180`) or as a string (`'+03:00'`, `'UTC+3'`, `'03:00:00'`) — `'utc'`, or `'system'` for the zone of the host the code runs on. The `string & {}` arm keeps IANA names open while still offering the special values as completions.
type KbqTimezoneLike = 'system' | 'utc' | number | (string & {});
type KbqPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate' | boolean;
Reference to the element used to locate the shadow root that should host the CDK overlay container. It can be the shadow host element itself (the common case — the MFE root element) or any element that already lives inside the shadow tree. Provide it directly, as an `ElementRef`, or as a getter (useful when the element is created after the providers are declared, e.g. resolved lazily at bootstrap).
type KbqShadowDomOverlayHost = HTMLElement | ElementRef<HTMLElement> | (() => Element | null | undefined);
type KbqDateFormats = DateFormats;
type HasTabIndexCtor = Constructor<HasTabIndex> & AbstractConstructor<HasTabIndex>;
Unit systems as union type
type KbqMeasurementSystemType = keyof typeof KbqMeasurementSystem;
Width of an overlay panel. - `'auto'` — matches the trigger width, but never narrower than `panelMinWidth`. - `number` — an explicit width in pixels. `panelMinWidth` is not applied. - `string` — an explicit CSS width (e.g. `fit-content`, `20rem`). `panelMinWidth` is not applied. - `null`/`''` — the panel sizes to its content, but never narrower than the trigger or `panelMinWidth`.
type KbqPanelWidth = 'auto' | number | (string & {}) | null | '';
Modifier keys handled by the ListKeyManager.
type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';
Click action shared by checkable controls (checkbox, toggle, and custom checkbox-like primitives). noop: Do not toggle checked or indeterminate. check: Only toggle checked status, ignore indeterminate. check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior. undefined: Same as `check-indeterminate`.
type KbqCheckableClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
Minimum width of an overlay panel, in pixels. `null` applies no additional minimum.
type KbqPanelMinWidth = number | null;
Maximum width of an overlay panel, in pixels. `null` falls back to the `--kbq-panel-size-width-max` design token. The cap is soft: it limits how far a panel grows with its content, but never makes a panel narrower than its trigger, and never overrides an explicit `panelWidth`.
type KbqPanelMaxWidth = number | null;
Converts an enumeration (enum) type into a string literal type containing all possible string representations of the values.
type KbqEnumValues = `${T}`;
Axis a scroll-overflow check applies to.
type KbqScrollAxis = 'horizontal' | 'vertical';
Locale configuration for `KbqCodeBlockModule`.
type KbqCodeBlockLocaleConfiguration = {
softWrapOnTooltip: string;
softWrapOffTooltip: string;
downloadTooltip: string;
copiedTooltip: string;
copyTooltip: string;
viewAllText: string;
viewLessText: string;
openExternalSystemTooltip: string;
};
Locale configuration for `KbqActionsPanelModule`.
type KbqActionsPanelLocaleConfiguration = {
closeTooltip: string;
};
Locale configuration shared by the components that render a "select all" row: `hiddenItemsText` is read by `KbqSelectModule` (`kbq-select`) only, while `selectAll` is read by `KbqSelectModule`, by `KbqTreeModule` (`kbq-tree-selection`, including standalone usage outside `KbqTreeSelectModule`) and by `KbqListModule` (`kbq-list-selection`).
type KbqSelectLocaleConfiguration = {
/** Counter of the selected values that did not fit into the trigger. Supports the `{{ number }}` placeholder. */
hiddenItemsText: string;
/** Label of the "select all" master checkbox rendered by the `selectAll` input. */
selectAll: string;
};
Resolves which controls a group-level error concerns. Called with one error of a group at a time. Return the names of the controls the error applies to, relative to the group holding it — `AbstractControl.get` paths such as `'passwords.confirm'` are supported — or `null` for errors this scope does not know. It is called from change detection, so keep it cheap and allocation-free.
type CrossFieldErrorScope = (errorKey: string, errorValue: unknown) => readonly string[] | null;
type KbqPopUpPlacementValues = KbqEnumValues<PopUpPlacements>;
type KbqStickToWindowPlacementValues = KbqEnumValues<
PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left
>;
Options for overriding locale-based number formatting
type KbqNumberFormatOptions = {
/** Overrides the default group separator in the formatted output */
viewGroupSeparator?: string;
};
type KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
Locale configuration for `KbqNumberInput`.
type KbqNumberInputLocaleConfig = {
/** Characters recognized as group (thousands) separators. */
groupSeparator: string[];
/** Character used for the decimal separator */
fractionSeparator: string;
/** Number of digits before applying group separators */
startFormattingFrom?: number;
} & KbqNumberFormatOptions;
Locale configuration for `KbqClampedText`
type KbqClampedTextLocaleConfig = {
openText: string;
closeText: string;
showMoreText: string;
moreText: string;
};
Locale configuration for `KbqTimeRange`
type KbqTimeRangeLocaleConfig = {
title: {
for: string;
placeholder: string;
};
editor: {
from: string;
to: string;
apply: string;
cancel: string;
rangeLabel: string;
/**
* Reported when both ends of the range leave `minDate`/`maxDate`. Supports the `{{ value }}` placeholder.
* Optional, so a configuration written before it existed still compiles and gets the default wording.
*/
outOfBoundsError?: string;
allTime: string;
currentQuarter: string;
currentYear: string;
/** Label for the `allTime` option in the presets list, as opposed to the trigger label in `allTime` */
allTimeOption?: string;
/** Label for the `currentQuarter` option in the presets list, as opposed to the trigger label in `currentQuarter` */
currentQuarterOption?: string;
/** Label for the `currentYear` option in the presets list, as opposed to the trigger label in `currentYear` */
currentYearOption?: string;
};
durationTemplate: {
title: FormatterDurationTemplate;
option: FormatterDurationTemplate;
};
};
type KbqFileUploadLocaleConfig = {
single: KbqBaseFileUploadLocaleConfig;
multiple: KbqMultipleFileUploadLocaleConfig;
};
Type helper describing accepted file types, referring to:
type KbqFileTypeSpecifier = Parameters<typeof FileValidators.isCorrectExtension>[0];
const selectEvents: string;
const VERSION: Version;
const KBQ_INVALID_VALUE_ERROR: string;
const applyPopupMargins: (renderer: Renderer2, element: HTMLElement, name: string, value: string) => void;
const MAC_ENTER: number;
const BACKSPACE: number;
const KBQ_DATE_FORMATS: InjectionToken<DateFormats>;
const fadeAnimation: AnimationTriggerMetadata;
const TAB: number;
const NUM_CENTER: number;
const POSITION_MAP: { [key: string]: ConnectionPositionPair; };
Whether the value is undefined.
const isUndefined: (value: unknown) => value is undefined;
An abstraction over the global `window` object.
const KBQ_WINDOW: InjectionToken<Window>;
const enUSFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; }; }; sizeUnits: { ...; }; };
const KBQ_TITLE_TEXT_REF: InjectionToken<KbqTitleTextRef>;
const ENTER: number;
const SHIFT: number;
Injects the native element for the current component.
const kbqInjectNativeElement: <T extends Element = HTMLElement>() => T;
Utility provider for `ErrorStateMatcher`.
const kbqErrorStateMatcherProvider: (errorStateMatcher: ErrorStateMatcher | Type<ErrorStateMatcher>) => Provider;
const CONTROL: number;
const ALT: number;
The following are all the animations for the kbq-select component, with each const containing the metadata for one animation.
const kbqSelectAnimations: { readonly transformPanel: AnimationTriggerMetadata; readonly fadeInContent: AnimationTriggerMetadata; };
const enUSLocaleData: { a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; ... 14 more ...; notificationCen...;
const esLALocaleData: { a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; ... 14 more ...; notificationCen...;
const ptBRLocaleData: { a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; ... 14 more ...; notificationCen...;
const ruRULocaleData: { a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; ... 14 more ...; notificationCen...;
const tkTMLocaleData: { a11y: { close: string; save: string; saving: string; saveFailed: string; cancel: string; removeAll: string; expandBreadcrumbs: string; previousMonth: string; currentDate: string; nextMonth: string; clear: string; showPassword: string; hidePassword: string; resizeColumns: string; }; ... 14 more ...; notificationCen...;
const PAUSE: number;
Minimum option count threshold for displaying select search. Search is hidden when fewer options are available.
const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD: number;
InjectionToken for datepicker that can be used to override default locale code.
const KBQ_DATE_LOCALE: InjectionToken<string>;
Whether the value is null.
const isNull: (value: unknown) => value is null;
const CAPS_LOCK: number;
const ESCAPE: number;
const KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<ParsedDigitsInfo>;
const SPACE: number;
const PAGE_UP: number;
InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
const KBQ_PARENT_POPUP: InjectionToken<KbqParentPopup>;
const PAGE_DOWN: number;
Default minimum width of an overlay panel, in pixels. Kept in sync by hand with `--kbq-dropdown-size-container-width-min` in `dropdown-tokens.scss`, which expresses the same default for the dropdown's CSS-driven sizing.
const KBQ_PANEL_DEFAULT_MIN_WIDTH: number;
Whether the value is HTMLElement.
const isHtmlElement: (value: unknown) => value is HTMLElement;
Localization configuration for the accessible names of the icon-only buttons the library renders itself.
const KBQ_A11Y_LOCALE_CONFIGURATION: InjectionToken<KbqA11yLocaleConfiguration>;
const END: number;
const HOME: number;
const KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
const LEFT_ARROW: number;
The select panel will only "fit" inside the viewport if it is positioned at this value or more away from the viewport boundary.
const SELECT_PANEL_VIEWPORT_PADDING: number;
const UP_ARROW: number;
const RIGHT_ARROW: number;
const DOWN_ARROW: number;
Whether the value is Element.
const isElement: (value: unknown) => value is Element;
const KBQ_LOCALE_ID: InjectionToken<string>;
const PLUS_SIGN: number;
const PRINT_SCREEN: number;
const KBQ_DEFAULT_LOCALE_ID: string;
const INSERT: number;
Utility provider for `KBQ_A11Y_LOCALE_CONFIGURATION`.
const kbqA11yLocaleConfigurationProvider: (configuration: KbqA11yLocaleConfiguration) => Provider;
const DELETE: number;
const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;
const ZERO: number;
Whether the value is HTMLElement or null.
const isHtmlElementOrNull: (value: unknown) => value is HTMLElement;
const ONE: number;
Scrolls a text field horizontally so that its current selection is visible. Browsers scroll a field to the caret only for edits the user makes: a selection set from script leaves the field at whatever offset the last keystroke produced. A masked field re-renders its value and moves the caret between value parts on every keystroke, so without this the field keeps the offset of the part that was edited before and clips the one being edited now. Leaves the field alone when it is not focused, when it renders something other than its value, and in right-to-left text, where the browser's own caret following is already correct.
const kbqRevealSelection: (element: HTMLInputElement) => void;
const TWO: number;
const THREE: number;
const FOUR: number;
const FIVE: number;
const KbqDefaultThemes: KbqTheme[];
const getNodesWithoutComments: (nodes: NodeList) => Node[];
const SIX: number;
const KBQ_OPTION_ACTION_PARENT: InjectionToken<KbqOptionActionParent>;
const SEVEN: number;
const EIGHT: number;
Converts bytes to Kb, Mb, Gb
const getHumanizedBytes: (value: number, system: KbqUnitSystem, threshold?: number) => { result: number; unit: string; };
Element used by {@link KbqShadowDomOverlayContainer} to locate the shadow root that should host overlays. When not provided, the container falls back to the application root component element.
const KBQ_SHADOW_DOM_OVERLAY_HOST: InjectionToken<KbqShadowDomOverlayHost>;
const NINE: number;
const FF_SEMICOLON: number;
InjectionToken for the time zone every date the library formats is rendered in. Read once, by the {@link KbqDateTimezoneService} constructor, out of the injector that created the service — call {@link KbqDateTimezoneService.setTimezone} to change the zone afterwards. Defaults to `'system'`, the zone of the host the code runs on.
const KBQ_DATE_TIMEZONE: InjectionToken<KbqTimezoneLike>;
Injection token that determines the scroll handling while a select is open. The root default keeps the select usable when it is reached outside `KbqSelectModule`'s injector - imported as a bare standalone component, pulled in through another standalone component (`KbqTimezoneSelect`, `KbqCalendarHeader`), or rendered in a component built from the root injector, as `KbqModalService` does. Providing the token anywhere still wins over this default.
const KBQ_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
Focuses `element` and scrolls it into view by the shortest distance, leaving a visible one alone. The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers it to a later rendering update, where it lands after — and undoes — any scrolling the reader did in the meantime. Letting the element reveal itself keeps every consumer working, whatever it uses as a scroll container, and the browser resolves that container rather than the caller guessing at it. Pass `skipReveal` when the pointer caused the focus: the element is already under the cursor, so revealing it would shift the list out from under it.
const kbqFocusAndReveal: (element: HTMLElement, skipReveal?: boolean) => void;
const FF_EQUALS: number;
Tracks whether the current control's value was filled in by the browser, as a signal. Call it from an injection context on a directive whose host is the element the browser actually fills — a text `` or a `