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 |
Selector: kbq-select-trigger, [kbq-select-trigger]
| 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-select-matcher, [kbq-select-matcher]
| Name | Description |
|---|---|
@Input() useDefaultHandlers: InputSignalWithTransform |
Selector: [kbq-select-search-empty-result]
Exported as: kbqSelectSearchEmptyResultSelector: kbq-option-action
Exported as: kbqOptionAction| Name | Description |
|---|---|
@Input() disabled: boolean
|
|
| active: boolean | |
| hasFocus: boolean |
Selector: kbq-select-footer, [kbq-select-footer]
Selector: .kbq-form-vertical, .kbq-form-horizontal
Exported as: kbqForm| Name | Description |
|---|---|
| elements: Signal |
Selector: [kbqSelectSearch]
Exported as: kbqSelectSearch| Name | Description |
|---|---|
| changes: EventEmitter |
|
| formField: KbqFormFieldRef | |
| isSearchChanged: boolean | |
| ngControl: any |
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. |
| 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 |
|---|---|
| isOpen: boolean | Whether the pop-up overlay is currently open. |
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 |
|
| formatter: DateFormatter |
| 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 |
`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.
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 |
|---|---|
| changes: BehaviorSubject |
|
| current: any | |
| id: string | |
| locales: any |
| Name | Description |
|---|---|
| disabled: any | |
| onSelectionChange: EventEmitter |
|
| selected: boolean | |
| value: any | |
| viewValue: string |
Provides a set of validators for file-related form controls.
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. |
| 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 |
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 |
|---|---|
| closedStream: Observable |
| Name | Description |
|---|---|
| className: string | |
| name: string | |
| selected: boolean |
| Name | Description |
|---|---|
| disabled: boolean |
| 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; } |
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; } |
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. |
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. |
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
| 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.
const dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element): KeyboardEvent;
| Parameters | Description |
|---|---|
| node: Node | |
| type: string | |
| keyCode: number | |
| target?: Element |
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; }; }; }; select: { hiddenItemsText: 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; 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; 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; }; }; }; select: { hiddenItemsText: 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; 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; 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; }; }; }; select: { hiddenItemsText: 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; 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; 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; }; }; }; select: { hiddenItemsText: 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; 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; 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; }; }; }; select: { hiddenItemsText: 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; 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; 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; }; }; };
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 |
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 |
const mixinErrorState(base: T): CanUpdateErrorStateCtor & T;
| Parameters | Description |
|---|---|
| base: T |
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 |
Whether the current platform is a Mac.
const isMac(): boolean;
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 |
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 |
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 |
const hasModifierKey(event: KeyboardEvent | MouseEvent, ...modifiers: ModifierKey[]): boolean;
| Parameters | Description |
|---|---|
| event: KeyboardEvent | MouseEvent | |
| modifiers: ModifierKey[] |
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 |
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 |
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 |
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';
Locale configuration for `KbqCodeBlockModule`.
type KbqCodeBlockLocaleConfiguration = {
softWrapOnTooltip: string;
softWrapOffTooltip: string;
downloadTooltip: string;
copiedTooltip: string;
copyTooltip: string;
viewAllText: string;
viewLessText: string;
openExternalSystemTooltip: string;
};
Controls flex item wrapping: single-line (`'nowrap'`) or multi-line (`'wrap'`).
type KbqFlexWrap = 'nowrap' | 'wrap';
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;
Locale configuration for `KbqActionsPanelModule`.
type KbqActionsPanelLocaleConfiguration = {
closeTooltip: string;
};
Modifier keys handled by the ListKeyManager.
type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';
Options for overriding locale-based number formatting
type KbqNumberFormatOptions = {
/** Overrides the default group separator in the formatted output */
viewGroupSeparator?: string;
};
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;
type KbqPopUpPlacementValues = KbqEnumValues<PopUpPlacements>;
type KbqStickToWindowPlacementValues = KbqEnumValues<
PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left
>;
Locale configuration for `KbqClampedText`
type KbqClampedTextLocaleConfig = {
openText: string;
closeText: string;
showMoreText: string;
moreText: string;
};
Converts an enumeration (enum) type into a string literal type containing all possible string representations of the values.
type KbqEnumValues = `${T}`;
Locale configuration for `KbqTimeRange`
type KbqTimeRangeLocaleConfig = {
title: {
for: string;
placeholder: string;
};
editor: {
from: string;
to: string;
apply: string;
cancel: string;
rangeLabel: 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 KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
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;
Injects the native element for the current component.
const kbqInjectNativeElement: <T extends Element = HTMLElement>() => T;
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 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 KBQ_TITLE_TEXT_REF: InjectionToken<KbqTitleTextRef>;
const ENTER: number;
Utility provider for `ErrorStateMatcher`.
const kbqErrorStateMatcherProvider: (errorStateMatcher: ErrorStateMatcher | Type<ErrorStateMatcher>) => Provider;
const SHIFT: number;
const enUSLocaleData: { select: { hiddenItemsText: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; ... 4 more ...; browseLinkFolderMixed: string; }; multiple: { ...; }; }; ... 10 more ...; notificationCenter: {...;
const esLALocaleData: { select: { hiddenItemsText: string; }; datepicker: { placeholder: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed:...;
const ptBRLocaleData: { select: { hiddenItemsText: string; }; datepicker: { placeholder: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; captionTextOnlyFolder: string; captionTextWithFolder: string; browseLink: string; browseLinkFolder: string; browseLinkFolderMixed:...;
const ruRULocaleData: { select: { hiddenItemsText: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; ... 4 more ...; browseLinkFolderMixed: string; }; multiple: { ...; }; }; ... 10 more ...; notificationCenter: {...;
const tkTMLocaleData: { select: { hiddenItemsText: string; }; datepicker: { placeholder: string; dateInput: string; }; timepicker: { placeholder: { full: string; short: string; }; }; fileUpload: { single: { captionText: string; ... 4 more ...; browseLinkFolderMixed: string; }; multiple: { ...; }; }; ... 10 more ...; notificationCenter: {...;
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; };
Minimum option count threshold for displaying select search. Search is hidden when fewer options are available.
const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD: number;
const PAUSE: 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 KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<ParsedDigitsInfo>;
const ESCAPE: number;
const SPACE: number;
InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
const KBQ_PARENT_POPUP: InjectionToken<KbqParentPopup>;
const PAGE_UP: number;
const PAGE_DOWN: number;
Whether the value is HTMLElement.
const isHtmlElement: (value: unknown) => value is HTMLElement;
const KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
const END: number;
const HOME: 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 LEFT_ARROW: 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;
Injection token that determines the scroll handling while a select is open.
const KBQ_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const PRINT_SCREEN: number;
const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;
const KBQ_DEFAULT_LOCALE_ID: string;
const INSERT: number;
const DELETE: number;
const ZERO: number;
Whether the value is HTMLElement or null.
const isHtmlElementOrNull: (value: unknown) => value is HTMLElement;
const ONE: number;
const TWO: number;
const THREE: number;
const FOUR: number;
Injection token that can be used to inject an instances of `KbqFormField`. It serves as alternative token to the actual `KbqFormField` class which would cause unnecessary retention of the `KbqFormField` class and its component metadata.
const KBQ_FORM_FIELD_REF: InjectionToken<KbqFormFieldRef>;
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;
const FF_EQUALS: number;
const esLAFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { ...; }; sizeUnits: { ...; }; };
const QUESTION_MARK: number;
const AT_SIGN: number;
const KBQ_SIZE_UNITS_DEFAULT_CONFIG: KbqSizeUnitsConfig;
const A: number;
const B: number;
const C: number;
const D: number;
const E: number;
const F: number;
const G: number;
const H: number;
Configuration for converting sizes in different unit systems.
const KBQ_SIZE_UNITS_CONFIG: InjectionToken<KbqSizeUnitsConfig>;
const KBQ_LOCALE_DATA: InjectionToken<any>;
const I: number;
const J: number;
const K: number;
const L: number;
const M: number;
const N: number;
const O: number;
const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
const P: number;
Utility provider for `KBQ_SIZE_UNITS_CONFIG`.
const kbqFilesizeFormatterConfigurationProvider: (configuration: Partial<KbqSizeUnitsConfig>) => Provider;
const Q: number;
const R: number;
DI token a scrollable wrapper component can provide to expose itself as the scroll source for a co-located `KbqOverflowShadowContainer` (see `KbqScrollbar`).
const KBQ_OVERFLOW_SHADOW_SOURCE: InjectionToken<KbqOverflowShadowSource>;
const S: number;
const T: number;
const U: number;
Default value when configuring overlay in popups (Autocomplete, Datepicker, Dropdown, Select, Tags Autocomplete, Tags Input, Timezone, TreeSelect).
const defaultOffsetY: number;
const V: number;
const W: number;
const X: number;
const Y: number;
const Z: number;
const META: number;
Injection token used to provide the parent component to options.
const KBQ_OPTION_PARENT_COMPONENT: InjectionToken<KbqOptionParentComponent>;
const MAC_WK_CMD_LEFT: number;
const MAC_WK_CMD_RIGHT: number;
const NUMBER_FORMAT_REGEXP: RegExp;
const CONTEXT_MENU: number;
const NUMPAD_ZERO: number;
const NUMPAD_ONE: number;
const NUMPAD_TWO: number;
const NUMPAD_THREE: number;
const EXTENDED_OVERLAY_POSITIONS: ConnectionPositionPair[];
const NUMPAD_FOUR: number;
const NUMPAD_FIVE: number;
const NUMPAD_SIX: number;
const NUMPAD_SEVEN: number;
const NUMPAD_EIGHT: number;
const NUMPAD_NINE: number;
const NUMPAD_MULTIPLY: number;
const ptBRFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; }; }; sizeUnits: { ...; }; };
const NUMPAD_PLUS: number;
const NUMPAD_MINUS: number;
const NUMPAD_PERIOD: number;
const NUMPAD_DIVIDE: number;
const F1: number;
const TOP_POSITION_PRIORITY: ConnectionPositionPair[];
const F2: number;
const F3: number;
const F4: number;
const F5: number;
const F6: number;
const F7: number;
const F8: number;
const F9: number;
const F10: number;
const F11: number;
const BOTTOM_POSITION_PRIORITY: ConnectionPositionPair[];
const F12: number;
const NUM_LOCK: number;
const SCROLL_LOCK: number;
const FIRST_MEDIA: number;
const FF_MINUS: number;
const MUTE: number;
const VOLUME_DOWN: number;
const RIGHT_POSITION_PRIORITY: ConnectionPositionPair[];
const VOLUME_UP: number;
const FF_MUTE: number;
const FF_VOLUME_DOWN: number;
const LAST_MEDIA: number;
const LEFT_POSITION_PRIORITY: ConnectionPositionPair[];
const FF_VOLUME_UP: number;
const ruRUFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { ...; }; sizeUnits: { ...; }; };
const SEMICOLON: number;
const EQUALS: number;
const COMMA: number;
const RIGHT_TOP_POSITION_PRIORITY: ConnectionPositionPair[];
const DASH: number;
const PERIOD: number;
const SLASH: number;
const APOSTROPHE: number;
const TILDE: number;
const OPEN_SQUARE_BRACKET: number;
const RIGHT_BOTTOM_POSITION_PRIORITY: ConnectionPositionPair[];
const BACKSLASH: number;
const CLOSE_SQUARE_BRACKET: number;
const SINGLE_QUOTE: number;
const MAC_META: number;
const LEFT_TOP_POSITION_PRIORITY: ConnectionPositionPair[];
const LEFT_BOTTOM_POSITION_PRIORITY: ConnectionPositionPair[];
const TOP_LEFT_POSITION_PRIORITY: ConnectionPositionPair[];
const tkTMFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; }; }; input: { number: { groupSeparator: string[]; fractionSeparator: string; viewGroupSeparator: string; }; }; sizeUnits: { ...; }; };
const TOP_RIGHT_POSITION_PRIORITY: ConnectionPositionPair[];
const BOTTOM_RIGHT_POSITION_PRIORITY: ConnectionPositionPair[];
const BOTTOM_LEFT_POSITION_PRIORITY: ConnectionPositionPair[];
const POSITION_PRIORITY_STRATEGY: { top: ConnectionPositionPair[]; topLeft: ConnectionPositionPair[]; topRight: ConnectionPositionPair[]; bottom: ConnectionPositionPair[]; ... 7 more ...; rightBottom: ConnectionPositionPair[]; };
const POSITION_TO_CSS_MAP: { [key: string]: string; };
const KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER: <T>(token: InjectionToken<T>, factory: (overlay: Overlay) => () => ScrollStrategy) => { provide: InjectionToken<T>; deps: (typeof Overlay)[]; useFactory: (overlay: Overlay) => () => ScrollStrategy; };
Providers that route all CDK overlays into a shadow root via {@link KbqShadowDomOverlayContainer}. Add it to the bootstrap providers of an application rendered inside a shadow root: ```ts bootstrapApplication(AppComponent, { providers: kbqShadowDomOverlayProvider(() => document.querySelector('my-mfe-root')!) }); ``` The provider replaces the global `OverlayContainer` token, so it cannot be combined with another custom `OverlayContainer` (e.g. CDK's `FullscreenOverlayContainer`) — the last provider wins. Apps that need both must subclass `KbqShadowDomOverlayContainer`.
const kbqShadowDomOverlayProvider: (host?: KbqShadowDomOverlayHost) => Provider[];