Form field · Koobiq

KbqLabel

Label for the form field.

Selector: kbq-label

Exported as: kbqLabel

KbqPrefix

Element to be placed in front of the form field.

Selector: [kbqPrefix]

Exported as: kbqPrefix

KbqSuffix

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

Selector: [kbqSuffix]

KbqLegend

Directive for marking an element as legend of `KbqFieldset`

Selector: [kbqLegend]

KbqError extends KbqHint

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: InputSignal	Unique ID for the hint.

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: InputSignal

Unique ID for the hint.

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqHint

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: InputSignal	Unique ID for the hint.
color: string
colorClassName: string	current class name of color

Name

Description

@Input()

compact: boolean

Makes the hint size smaller.

@Input()

fillTextOff: boolean

Disables `color` for the hint text.

@Input()

id: InputSignal

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".

KbqCleaner

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
destroyRef: DestroyRef
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
registry: KbqIconRegistry
small: InputSignal
tabindex: any

Name

Description

autoColor: boolean

changeDetectorRef: ChangeDetectorRef

color: string

colorClassName: string

current class name of color

destroyRef: DestroyRef

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

registry: KbqIconRegistry

small: InputSignal

tabindex: any

Methods

getHostElement

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

updateMaxHeight

KbqFieldsetItem

Directive for marking elements as items inside `KbqFieldset`

Selector: [kbqFieldsetItem]

KbqFieldset

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

Selector: kbq-fieldset

KbqReactivePasswordHint extends KbqHint

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: InputSignal	Unique ID for the hint.

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: InputSignal

Unique ID for the hint.

Methods

setDefaultColor

this color will be used as a default value. For example [color]="'' | false | undefined | null".

KbqPasswordHint extends KbqHint

Selector: kbq-password-hint

Properties

Name	Description
@Input('checkRule') customCheckRule: InputSignal<(value: string) => boolean>
@Input() fillTextOff: boolean
@Input() id: InputSignal
@Input() max: InputSignal
@Input() min: InputSignal
@Input() regex: RegExp
@Input() rule: InputSignal
@Input() viewFormField: InputSignal
checked: boolean
color: string
colorClassName: string	current class name of color
compact: boolean	Makes the hint size smaller.
hasError: boolean
icon: string

Name

Description

@Input('checkRule')

customCheckRule: InputSignal<(value: string) => boolean>

@Input()

fillTextOff: boolean

@Input()

id: InputSignal

@Input()

max: InputSignal

@Input()

min: InputSignal

@Input()

regex: RegExp

@Input()

rule: InputSignal

@Input()

viewFormField: InputSignal

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".

KbqPasswordToggle

Component which changes password visibility.

Selector: kbq-password-toggle

Exported as: kbqPasswordToggle

Properties

Name	Description
@Input('kbqTooltipNotHidden') content: string \| TemplateRef
@Input() kbqTooltipHidden: InputSignal>
@Input() tabindex: InputSignalWithTransform
arrow: boolean	Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.
changeDetectorRef: ChangeDetectorRef
color: string	Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.
context: any	Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.
customClass: string	Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.
disabled: boolean	Input (`kbqTooltipDisabled`) controlling whether the tooltip is disabled; setting it to `true` hides it.
enterDelay: number	Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.
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
header: string \| TemplateRef	Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.
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.
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`.
isOpen: boolean	Whether the pop-up overlay is currently open.
leaveDelay: number	Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.
modifier: TooltipModifier \| "default" \| "warning" \| "extended"	Visual variant of the tooltip. Accepts `'default'` \| `'warning'` \| `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).
nativeElement: HTMLElement
offset: number	Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.
placementChange: EventEmitter	Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.
relativeToPointer: boolean	Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
tooltipPlacement: "top" \| "topLeft" \| "topRight" \| "right" \| "rightTop" \| "rightBottom" \| "left" \| "leftTop" \| "leftBottom" \| "bottom" \| "bottomLeft" \| "bottomRight"	Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.
tooltipPlacementPriority: string \| string[]	Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.
tooltipVisible: boolean	Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.
trigger: string	Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.
visibleChange: EventEmitter	Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Name

Description

@Input('kbqTooltipNotHidden')

content: string | TemplateRef

@Input()

kbqTooltipHidden: InputSignal>

@Input()

tabindex: InputSignalWithTransform

arrow: boolean

Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.

changeDetectorRef: ChangeDetectorRef

color: string

Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.

context: any

Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.

customClass: string

Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.

disabled: boolean

Input (`kbqTooltipDisabled`) controlling whether the tooltip is disabled; setting it to `true` hides it.

enterDelay: number

Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.

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

header: string | TemplateRef

Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.

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.

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`.

isOpen: boolean

Whether the pop-up overlay is currently open.

leaveDelay: number

Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.

modifier: TooltipModifier | "default" | "warning" | "extended"

Visual variant of the tooltip. Accepts `'default'` | `'warning'` | `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).

nativeElement: HTMLElement

offset: number

Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.

placementChange: EventEmitter

Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.

relativeToPointer: boolean

Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.

Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.

tooltipPlacementPriority: string | string[]

Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.

tooltipVisible: boolean

Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.

trigger: string

Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.

visibleChange: EventEmitter

Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Methods

show

Shows the tooltip after `delay` ms. Suppresses showing on a focus trigger that did not originate from the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.

KbqStepper

Component which allow to increment or decrement number value.

Selector: kbq-stepper

Exported as: kbqStepper

Properties

Name	Description
@Output('stepDown') stepDown: OutputEmitterRef	Emitted when the stepper is decremented.
@Output('stepUp') stepUp: OutputEmitterRef	Emitted when the stepper is incremented.

Name

Description

@Output('stepDown')

stepDown: OutputEmitterRef

Emitted when the stepper is decremented.

@Output('stepUp')

stepUp: OutputEmitterRef

Emitted when the stepper is incremented.

KbqFormField

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.

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".

KbqFormFieldControl

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.

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.

KbqFormFieldDefaultOptions

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>;
}>;

regExpPasswordValidator

const regExpPasswordValidator: { 2: RegExp; 1: RegExp; 3: RegExp; 4: RegExp; };

hasPasswordStrengthError

const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint> | readonly KbqPasswordHint[]) => boolean;

KBQ_FORM_FIELD_DEFAULT_OPTIONS

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>; }>>;

kbqFormFieldDefaultOptionsProvider

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;