import { KbqFormFieldModule } from '@koobiq/components/form-field';Label for the form field.
Selector: kbq-label
Exported as: kbqLabelElement to be placed in front of the form field.
Selector: [kbqPrefix]
Exported as: kbqPrefixElement 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| 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. |
Hint text to be shown below the form field control.
Selector: kbq-hint
Exported as: kbqHint| 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 |
Element to be placed in end of the form field. Resets form control by click.
Selector: kbq-cleaner
Exported as: kbqCleaner| 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 |
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| 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. |
Selector: kbq-password-hint
| 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 |
Component which changes password visibility.
Selector: kbq-password-toggle
Exported as: kbqPasswordToggle| 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 |
Component which allow to increment or decrement number value.
Selector: kbq-stepper
Exported as: kbqStepper| 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| 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. |
An interface which allows a control to work inside of a `KbqFormField`.
| 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. |
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;