Form field
import { KbqFormFieldModule } from '@koobiq/components/form-field';

Label for the form field.

Selector: kbq-label

Exported as: kbqLabel

Element to be placed in front of the form field.

Selector: [kbqPrefix]

Exported as: kbqPrefix

Element to be placed at the end of the form field.

Selector: [kbqSuffix]

Directive for marking an element as legend of `KbqFieldset`

Selector: [kbqLegend]

Error text to be shown below the form field control.

Selector: kbq-error

Exported as: kbqError
Properties
Name Description
color: string
colorClassName: string current class name of color
compact: boolean Makes the hint size smaller.
fillTextOff: boolean Disables `color` for the hint text.
id: string Unique ID for the hint.
Methods
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

Hint text to be shown below the form field control.

Selector: kbq-hint

Exported as: kbqHint
Properties
Name Description
@Input()
compact: boolean
Makes the hint size smaller.
@Input()
fillTextOff: boolean
Disables `color` for the hint text.
@Input()
id: string
Unique ID for the hint.
color: string
colorClassName: string current class name of color
Methods
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

Element to be placed in end of the form field. Resets form control by click.

Selector: kbq-cleaner

Exported as: kbqCleaner
Properties
Name Description
autoColor: boolean
changeDetectorRef: ChangeDetectorRef
color: string
colorClassName: string current class name of color
disabled: boolean Whether the button is disabled.
elementRef: ElementRef
focusMonitor: FocusMonitor
formField: KbqFormFieldRef
hasError: boolean
iconName: string Name of an icon within a
name: string
small: boolean
tabindex: any
Methods
getHostElement
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".
updateMaxHeight

Directive for marking elements as items inside `KbqFieldset`

Selector: [kbqFieldsetItem]

A group of form-fields and related controls. Container component emulating the native `fieldset` element.

Selector: kbq-fieldset

Password hint to be shown below the password form field control.

Selector: kbq-reactive-password-hint

Exported as: kbqReactivePasswordHint
Properties
Name Description
@Input()
hasError: InputSignalWithTransform
Whether the form field control has an error.
color: string
colorClassName: string current class name of color
compact: boolean Makes the hint size smaller.
fillTextOff: boolean Disables `color` for the hint text.
id: string Unique ID for the hint.
Methods
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

Selector: kbq-password-hint

Properties
Name Description
@Input('checkRule')
customCheckRule: (value: string) => boolean
@Input()
fillTextOff: boolean
@Input()
id: string
@Input()
max: number
@Input()
min: number
@Input()
regex: RegExp
@Input()
rule: any
@Input()
viewFormField: KbqFormField
checked: boolean
color: string
colorClassName: string current class name of color
compact: boolean Makes the hint size smaller.
hasError: boolean
icon: string
Methods
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

Component which changes password visibility.

Selector: kbq-password-toggle

Exported as: kbqPasswordToggle
Properties
Name Description
@Input('kbqTooltipNotHidden')
content: string | TemplateRef
@Input()
kbqTooltipHidden: string | TemplateRef
@Input()
tabindex: number
arrow: boolean
availablePositions: { [key: string]: ConnectionPositionPair; }
changeDetectorRef: ChangeDetectorRef
closingActionsSubscription: Subscription
color: string
container: HTMLElement
context: any
customClass: string
destroyRef: DestroyRef
detach: () => void
direction: Directionality
disabled: boolean
elementRef: ElementRef
enterDelay: number
focusMonitor: FocusMonitor
forDisabledComponent: InputSignal>> Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
hasError: boolean
hideWithTimeout: boolean Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
hostView: ViewContainerRef
hovered: BehaviorSubject Stream that emits when the popupTrigger is hovered.
ignoreTooltipPointerEvents: InputSignal Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
instance: any
isOpen: boolean
leaveDelay: number
listeners: Map
modifier: TooltipModifier
mouseEvent: MouseEvent
nativeElement: HTMLElement
ngZone: NgZone
offset: number
onPositionChange: ($event: ConnectedOverlayPositionChange) => void
originSelector: string
overlay: Overlay
overlayConfig: OverlayConfig
overlayRef: OverlayRef
parentPopup: KbqParentPopup
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
relativeToPointer: boolean Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
scheduler: AsyncScheduler
scrollDispatcher: ScrollDispatcher
scrollStrategy: () => ScrollStrategy
scrollable: CdkScrollable
stickToWindow: "top" | "right" | "left" | "bottom"
strategy: FlexibleConnectedPositionStrategy
tooltipPlacement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
tooltipPlacementPriority: string | string[]
tooltipVisible: boolean
trigger: string
triggerName: string
visible: boolean
visibleChange: EventEmitter
Methods
applyRelativeToPointer
clearListeners
closingActions
createOverlay
Create the overlay config and position strategy
focus
getAdjustedPositions
Returns a list of positions that are aligned with the element's dimensions and offsets.
getMouseLeaveListener
getOverlayHandleComponentType
getPrioritizedPositions
getPriorityPlacementStrategy
hide
initListeners
keydownHandler
resetOrigin
show
showForElement
method allows to show the tooltip relative to the element Use this approach when it is not possible to define a trigger in the template. For example: const tooltip = new KbqTooltipTrigger(); tooltip.showForElement(element);
showForMouseEvent
method allows to show the tooltip relative to the given mouse event.
touchendHandler
updateClassMap
updateData
updatePlacement
updatePlacementPriority
updatePosition
Updates the position of the current popover.
updateVisible

Component which allow to increment or decrement number value.

Selector: kbq-stepper

Exported as: kbqStepper
Properties
Name Description
@Output('stepDown')
stepDown: EventEmitter
Emitted when the stepper is decremented.
@Output('stepUp')
stepUp: EventEmitter
Emitted when the stepper is incremented.

Container for form controls that applies styling and behavior.

Selector: kbq-form-field

Exported as: kbqFormField
Properties
Name Description
@Input()
contentClass: InputSignal>
Additional CSS classes applied to the content wrapper element.
@Input()
horizontal: InputSignalWithTransform
Whether the form field is displayed horizontally.
@Input()
@Output('inOverlayChange')
inOverlay: ModelSignal
Use when KbqFormField is in an overlay container.
@Input()
labelClass: InputSignal>
Additional CSS classes applied to the label element.
@Input()
noBorders: InputSignalWithTransform
Disables form field borders and shadows.
color: string
colorClassName: string current class name of color
disabled: boolean Whether the form field is disabled.
invalid: boolean Whether the form field is invalid.
Methods
focus
Focuses the control.
getConnectedOverlayOrigin
Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

An interface which allows a control to work inside of a `KbqFormField`.

Properties
Name Description
controlType: string An optional name for the control type that can be used to distinguish `kbq-form-field` elements based on their control type. The form field will add a class, `kbq-form-field-type-{{controlType}}` to its root element.
disabled: boolean Whether the control is disabled.
empty: boolean Whether the control is empty.
errorState: boolean Whether the control is in an error state.
focused: boolean Whether the control is focused.
id: string The element ID for this control.
ngControl: NgControl Gets the NgControl for this control.
placeholder: string The placeholder for this control.
required: boolean Whether the control is required.
stateChanges: Observable Stream that emits whenever the state of the control changes such that the parent `KbqFormField` needs to run change detection.
value: T The value of the control.
Methods
focus
Focuses the control.
onContainerClick
Handles a click on the control's container.
open
Opens control's overlay.

Default options for the kbq-form-field that can be configured using the `KBQ_FORM_FIELD_DEFAULT_OPTIONS` injection token.

type KbqFormFieldDefaultOptions = Partial<{
    /** Disables form field borders and shadows. */
    noBorders: boolean;
    /** Use when KbqFormField is in an overlay container. */
    inOverlay: boolean;
    /** Whether the form field is displayed horizontally. */
    horizontal: boolean;
    /** Additional CSS classes applied to the label element. */
    labelClass: string | string[] | Set<string>;
    /** Additional CSS classes applied to the content wrapper element. */
    contentClass: string | string[] | Set<string>;
}>;
const regExpPasswordValidator: { 2: RegExp; 1: RegExp; 3: RegExp; 4: RegExp; };
const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint>) => boolean;

Injection token that can be used to configure the default options for all kbq-form-field's.

const KBQ_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<Partial<{ noBorders: boolean; inOverlay: boolean; horizontal: boolean; labelClass: string | string[] | Set<string>; contentClass: string | string[] | Set<string>; }>>;

Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`.

const kbqFormFieldDefaultOptionsProvider: (options: Partial<{ noBorders: boolean; inOverlay: boolean; horizontal: boolean; labelClass: string | string[] | Set<string>; contentClass: string | string[] | Set<string>; }>) => Provider;
Вопросы и предложения по документации
Если у вас есть вопросы или вы хотите внести свой вклад в написание документации, пожалуйста, создайте issue в нашем репозитории на GitHub.