import { KbqFormsModule } from '@koobiq/components/core';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: QueryList |
|
| 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: string
|
|
| 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-select-trigger, [kbq-select-trigger]
Selector: kbq-select-matcher, [kbq-select-matcher]
| Name | Description |
|---|---|
@Input() useDefaultHandlers: boolean
|
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: QueryList |
Selector: [kbqSelectSearch]
Exported as: kbqSelectSearch| Name | Description |
|---|---|
| changes: EventEmitter |
|
| isSearchChanged: boolean | |
| ngControl: any |
| Name | Description |
|---|---|
@Input() color: string
|
|
| colorClassName: string | current class name of color |
| Name | Description |
|---|---|
| arrow: boolean | |
| availablePositions: { [key: string]: ConnectionPositionPair; } | |
| closingActionsSubscription: Subscription | |
| container: HTMLElement | |
| content: string | TemplateRef |
|
| customClass: string | |
| destroyRef: DestroyRef | |
| detach: () => void | |
| direction: Directionality | |
| disabled: boolean | |
| elementRef: ElementRef |
|
| enterDelay: number | |
| hideWithTimeout: boolean | Hide pop-up with timeout. Need if you want to show pop-up after leaving trigger |
| hostView: ViewContainerRef | |
| hovered: BehaviorSubject |
Stream that emits when the popupTrigger is hovered. |
| instance: any | |
| isOpen: boolean | |
| leaveDelay: number | |
| listeners: Map |
|
| mouseEvent: MouseEvent | |
| ngZone: NgZone | |
| onPositionChange: ($event: ConnectedOverlayPositionChange) => void | |
| originSelector: string | |
| overlay: Overlay | |
| overlayConfig: OverlayConfig | |
| overlayRef: OverlayRef | |
| placement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight" | |
| placementChange: EventEmitter |
|
| placementPriority: string | string[] | |
| portal: ComponentPortal |
|
| preventClose: boolean | prevents closure by any event |
| scheduler: AsyncScheduler | |
| scrollDispatcher: ScrollDispatcher | |
| scrollStrategy: () => ScrollStrategy | |
| scrollable: CdkScrollable | |
| stickToWindow: "top" | "right" | "left" | "bottom" | |
| strategy: FlexibleConnectedPositionStrategy | |
| trigger: string | |
| triggerName: string | |
| visible: boolean | |
| visibleChange: EventEmitter |
Single option inside of a `
Selector: kbq-option
Exported as: kbqOption| Name | Description |
|---|---|
@Input() disabled: any
|
|
@Input() selectable: boolean
|
|
@Input() showCheckbox: boolean
|
|
@Input() userSelect: boolean
|
|
@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. |
| id: string | |
| multiple: boolean | Whether the wrapping component is in multiple selection mode. |
| selected: boolean | |
| stateChanges: Subject |
Emits when the state of the option changes and any parents have to be notified. |
| textElement: ElementRef |
Provides a set of validators for password form controls.
| Name | Description |
|---|---|
| document: Document | |
| scrollBarWidth: number |
| Name | Description |
|---|---|
| adapter: DateAdapter |
|
| formatter: DateFormatter |
| Name | Description |
|---|---|
| config: FormatterConfig | |
| invalidDateErrorText: string | |
| localeService: KbqLocaleService | |
| messageFormat: MessageFormat<"string"> |
| Name | Description |
|---|---|
| config: DateAdapterConfig | |
| locale: any | The locale to use for all dates. |
| localeChanges: Observable |
A stream that emits when the locale changes. |
Error state matcher that matches when a control is invalid and form is submitted. Requires use FormGroupDirective or NgForm.
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 |
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 |
Provides a set of validators for file-related form controls.
| Name | Description |
|---|---|
| parentTextElement: ElementRef |
|
| textElement: ElementRef |
| Name | Description |
|---|---|
| canCleanerClearByEsc: boolean | |
| control: any | |
| inOverlay: ModelSignal |
Use when KbqFormField is in an overlay container. |
| Name | Description |
|---|---|
| disabled: boolean |
| Name | Description |
|---|---|
| color: string |
| Name | Description |
|---|---|
| closedStream: Observable |
| Name | Description |
|---|---|
| className: string | |
| name: string | |
| selected: boolean |
| Name | Description |
|---|---|
| dropdownTrigger: { opened: boolean; restoreFocus: boolean; dropdownClosed: EventEmitter |
|
| tooltipTrigger: { disabled: boolean; } |
| Name | Description |
|---|---|
| abbreviations: string[] | |
| base: number | |
| power: number |
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; } |
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 |
const isBoolean: ;
const mixinDisabled: ;
const mixinTabIndex: ;
const escapeRegExp: ;
Formats a number value according to locale and formatting options
const formatNumberWithLocale: ;
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: ;
const getFormattedSizeParts: ;
const KBQ_DEFAULT_LOCALE_DATA_FACTORY: ;
Will be removed in the next major release
const toBoolean: ;
const mixinColor: ;
const mixinErrorState: ;
Whether the current platform is a Mac.
const isMac: ;
Function that returns a string representation of a number without localized separators
const normalizeNumber: ;
Function that parse string and return a number. The string can be in any locale.
const checkAndNormalizeLocalizedNumber: ;
const isWithin: ;
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;
type KbqDateFormats = DateFormats;
type HasTabIndexCtor = Constructor<HasTabIndex> & AbstractConstructor<HasTabIndex>;
Locale configuration for `KbqActionsPanelModule`.
type KbqActionsPanelLocaleConfiguration = {
closeTooltip: string;
};
Unit systems as union type
type KbqMeasurementSystemType = keyof typeof KbqMeasurementSystem;
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;
};
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;
};
durationTemplate: {
title: FormatterDurationTemplate;
option: FormatterDurationTemplate;
};
};
type KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
Converts an enumeration (enum) type into a string literal type containing all possible string representations of the values.
type KbqEnumValues = `${T}`;
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 KBQ_DATE_FORMATS: InjectionToken<DateFormats>;
const fadeAnimation: AnimationTriggerMetadata;
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 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>;
Utility provider for `ErrorStateMatcher`.
const kbqErrorStateMatcherProvider: (errorStateMatcher: ErrorStateMatcher | Type$1<ErrorStateMatcher>) => Provider;
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: {...;
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;
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 KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<ParsedDigitsInfo>;
InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
const KBQ_PARENT_POPUP: InjectionToken<KbqParentPopup>;
Whether the value is HTMLElement.
const isHtmlElement: (value: unknown) => value is HTMLElement;
const KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
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;
Whether the value is Element.
const isElement: (value: unknown) => value is Element;
const KBQ_LOCALE_ID: InjectionToken<string>;
Injection token that determines the scroll handling while a select is open.
const KBQ_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const KBQ_DEFAULT_LOCALE_ID: string;
Utility provider which disables legacy validation directive. Will be removed in next major release.
const kbqDisableLegacyValidationDirectiveProvider: () => Provider;
const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;
Whether the value is HTMLElement or null.
const isHtmlElementOrNull: (value: unknown) => value is HTMLElement;
const KbqDefaultThemes: KbqTheme[];
const KBQ_OPTION_ACTION_PARENT: InjectionToken<KbqOptionActionParent>;
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 esLAFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { ...; }; sizeUnits: { ...; }; };
const getNodesWithoutComments: (nodes: NodeList) => Node[];
const KBQ_LOCALE_DATA: InjectionToken<any>;
const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
Default value when configuring overlay in popups (Autocomplete, Datepicker, Dropdown, Select, Tags Autocomplete, Tags Input, Timezone, TreeSelect).
const defaultOffsetY: number;
const KBQ_SIZE_UNITS_DEFAULT_CONFIG: KbqSizeUnitsConfig;
Injection token used to provide the parent component to options.
const KBQ_OPTION_PARENT_COMPONENT: InjectionToken<KbqOptionParentComponent>;
const NUMBER_FORMAT_REGEXP: RegExp;
Configuration for converting sizes in different unit systems.
const KBQ_SIZE_UNITS_CONFIG: InjectionToken<KbqSizeUnitsConfig>;
const EXTENDED_OVERLAY_POSITIONS: ConnectionPositionPair[];
Utility provider for `KBQ_SIZE_UNITS_CONFIG`.
const kbqFilesizeFormatterConfigurationProvider: (configuration: Partial<KbqSizeUnitsConfig>) => Provider;
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 TOP_POSITION_PRIORITY: ConnectionPositionPair[];
const BOTTOM_POSITION_PRIORITY: ConnectionPositionPair[];
Converts bytes to Kb, Mb, Gb
const getHumanizedBytes: (value: number, system: KbqUnitSystem, threshold?: number) => { result: number; unit: string; };
const RIGHT_POSITION_PRIORITY: ConnectionPositionPair[];
const LEFT_POSITION_PRIORITY: ConnectionPositionPair[];
const ruRUFormattersData: { formatters: { number: { rounding: { separator: string; groupSeparator: string; thousand: string; million: string; billion: string; trillion: string; }; decimal: { viewGroupSeparator: string; }; }; }; input: { ...; }; sizeUnits: { ...; }; };
const RIGHT_TOP_POSITION_PRIORITY: ConnectionPositionPair[];
const RIGHT_BOTTOM_POSITION_PRIORITY: ConnectionPositionPair[];
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; };