@koobiq/components 18.31.0 → 18.33.0

package/form-field/form-field.d.ts

@@ -1,5 +1,5 @@
-import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ElementRef, InjectionToken, OnDestroy, Provider, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { KbqColorDirective } from '@koobiq/components/core';
 import { KbqCleaner } from './cleaner';
@@ -11,69 +11,257 @@ import { KbqPrefix } from './prefix';
 import { KbqStepper } from './stepper';
 import { KbqSuffix } from './suffix';
 import * as i0 from "@angular/core";
-export declare class KbqFormField extends KbqColorDirective implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
-    private changeDetectorRef;
-    private focusMonitor;
-    control: KbqFormFieldControl<any>;
-    stepper: KbqStepper;
+/** @docs-private */
+export declare function getKbqFormFieldMissingControlError(): Error;
+/** @docs-private */
+export declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError(): Error;
+/**
+ * Default options for the kbq-form-field that can be configured using the `KBQ_FORM_FIELD_DEFAULT_OPTIONS`
+ * injection token.
+ */
+export type KbqFormFieldDefaultOptions = Partial<{
+    /** Disables form field borders and shadows. */
+    noBorders: boolean;
+}>;
+/**
+ * Injection token that can be used to configure the default options for all kbq-form-field's.
+ */
+export declare const KBQ_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<Partial<{
+    /** Disables form field borders and shadows. */
+    noBorders: boolean;
+}>>;
+/** Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`. */
+export declare const kbqFormFieldDefaultOptionsProvider: (options: KbqFormFieldDefaultOptions) => Provider;
+/** Container for form controls that applies styling and behavior. */
+export declare class KbqFormField extends KbqColorDirective implements AfterContentInit, AfterViewInit, OnDestroy, AfterContentChecked {
+    private readonly destroyRef;
+    private readonly changeDetectorRef;
+    private readonly focusMonitor;
+    private readonly defaultOptions;
+    /**
+     * @docs-private
+     */
+    readonly elementRef: ElementRef<any>;
+    /** Disables form field borders and shadows. */
+    readonly noBorders: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * The form field control.
+     *
+     * @docs-private
+     */
+    control: KbqFormFieldControl<unknown>;
+    /**
+     * @docs-private
+     */
+    readonly stepper: KbqStepper;
+    /**
+     * @docs-private
+     *
+     * @TODO Should be readonly (#DS-3883)
+     */
     cleaner: KbqCleaner | null;
+    /**
+     * @docs-private
+     */
     passwordToggle: KbqPasswordToggle | null;
+    /**
+     * @docs-private
+     */
     hint: QueryList<KbqHint>;
+    /**
+     * @docs-private
+     */
     passwordHints: QueryList<KbqPasswordHint>;
+    /**
+     * @docs-private
+     */
     suffix: QueryList<KbqSuffix>;
+    /**
+     * @docs-private
+     */
     prefix: QueryList<KbqPrefix>;
+    /**
+     * @docs-private
+     */
     connectionContainerRef: ElementRef;
-    labelId: string;
+    private readonly reactivePasswordHint;
+    private readonly error;
+    private readonly label;
+    /**
+     * @docs-private
+     */
     hovered: boolean;
+    /**
+     * @docs-private
+     */
     canCleanerClearByEsc: boolean;
-    private readonly destroyRef;
+    /** Whether the form field is invalid. */
+    get invalid(): boolean;
+    /**
+     * Whether the form field control has an reactive password hint.
+     *
+     * @docs-private
+     */
+    protected get hasReactivePasswordHint(): boolean;
+    /**
+     * Whether the form-field contains kbq-error.
+     *
+     * @docs-private
+     */
+    protected get hasError(): boolean;
+    /**
+     * Whether the form-field contains kbq-label.
+     *
+     * @docs-private
+     */
+    protected get hasLabel(): boolean;
+    /**
+     * Whether the form-field contains kbq-password-hint.
+     *
+     * @docs-private
+     */
+    get hasPasswordHint(): boolean;
+    /**
+     * Current focus origin state.
+     *
+     * @docs-private
+     */
     get focusOrigin(): FocusOrigin;
     private _focusOrigin;
+    /**
+     * @docs-private
+     */
     get hasFocus(): boolean;
+    /**
+     * Whether the form-field contains kbq-hint.
+     *
+     * @docs-private
+     */
     get hasHint(): boolean;
+    /**
+     * Whether the form-field contains kbqSuffix.
+     *
+     * @docs-private
+     */
     get hasSuffix(): boolean;
+    /**
+     * Whether the form-field contains kbqPrefix.
+     *
+     * @docs-private
+     */
     get hasPrefix(): boolean;
+    /**
+     * Whether the form-field contains kbq-cleaner.
+     *
+     * @docs-private
+     */
     get hasCleaner(): boolean;
+    /**
+     * Whether the form-field contains kbq-stepper.
+     *
+     * @docs-private
+     */
     get hasStepper(): boolean;
+    /**
+     * Whether the form-field contains kbq-password-toggle.
+     *
+     * @docs-private
+     */
     get hasPasswordToggle(): boolean;
+    /**
+     * @docs-private
+     */
     get canShowCleaner(): boolean;
+    /** Whether the form field is disabled. */
     get disabled(): boolean;
-    /** @deprecated stepper should be always visible when provided, so this parameter is redundant,
-     * use `hasStepper` instead */
+    /**
+     * @deprecated stepper should be always visible when provided, so this parameter is redundant,
+     * use `hasStepper` instead
+     *
+     * @docs-private
+     */
     canShowStepper: boolean;
-    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /** Focuses the control. */
     focus(options?: FocusOptions): void;
     /**
      * @deprecated Use `focus` instead.
+     *
+     * @docs-private
      */
     focusViaKeyboard(options?: FocusOptions): void;
-    clearValue($event: any): void;
-    onContainerClick($event: any): void;
+    /**
+     * @docs-private
+     */
+    clearValue(event: Event): void;
+    /**
+     * Handles a click on the control's container.
+     *
+     * @docs-private
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Handles keydown events.
+     *
+     * @docs-private
+     */
     onKeyDown(event: KeyboardEvent): void;
+    /**
+     * @docs-private
+     */
     onHoverChanged(isHovered: boolean): void;
     /**
-     * Gets an ElementRef for the element that a overlay attached to the form-field should be
-     * positioned relative to.
+     * Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.
      */
     getConnectedOverlayOrigin(): ElementRef;
-    /** Determines whether a class from the NgControl should be forwarded to the host element. */
+    /**
+     * Determines whether a class from the NgControl should be forwarded to the host element.
+     *
+     * @docs-private
+     */
     shouldForward(prop: keyof NgControl): boolean;
-    ngOnDestroy(): void;
+    /**
+     * Runs the focus monitor for the form field.
+     *
+     * @docs-private
+     */
     runFocusMonitor: () => void;
+    /**
+     * Stops the focus monitor for the form field.
+     *
+     * @docs-private
+     */
     stopFocusMonitor(): void;
-    /** Throws an error if the form field's control is missing. */
+    /**
+     * Throws an error if the form-field control is missing.
+     *
+     * @docs-private
+     */
     protected validateControlChild(): void;
+    /** Initializes the form field control. */
+    private initializeControl;
+    /** Initializes the kbqPrefix and kbqSuffix containers. */
+    private initializePrefixAndSuffix;
+    /** Initializes the KbqHint, KbqPasswordHint, KbqReactivePasswordHint and KbqError containers. */
+    private initializeHint;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], {}, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[kbqSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "noBorders": { "alias": "noBorders"; "required": false; "isSignal": true; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "label", "hint", "passwordHints", "suffix", "prefix", "reactivePasswordHint", "error"], ["kbq-label", "[kbqPrefix]", "*", "kbq-cleaner", "kbq-password-toggle, kbq-stepper, [kbqSuffix]", "kbq-error", "kbq-hint, kbq-password-hint, kbq-reactive-password-hint"], true, never>;
 }
+/**
+ * @docs-private
+ *
+ * @deprecated Will be removed in next major release, use `noBorders` input instead.
+ */
 export declare class KbqFormFieldWithoutBorders {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldWithoutBorders, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[kbqFormFieldWithoutBorders]", ["kbqFormFieldWithoutBorders"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[kbqFormFieldWithoutBorders]", ["kbqFormFieldWithoutBorders"], {}, {}, never, never, true, never>;
 }
+/**
+ * @docs-private
+ */
 export declare class KbqTrim {
     private readonly noTrim;
     private ngControl;
@@ -82,5 +270,5 @@ export declare class KbqTrim {
     trim(value: any): any;
     private registerOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTrim, [{ attribute: "no-trim"; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, true, never>;
 }

package/form-field/form-field.module.d.ts

@@ -1,17 +1,19 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./form-field";
-import * as i2 from "./hint";
-import * as i3 from "./password-hint";
-import * as i4 from "./prefix";
-import * as i5 from "./suffix";
-import * as i6 from "./cleaner";
-import * as i7 from "./stepper";
-import * as i8 from "./validate.directive";
-import * as i9 from "./password-toggle";
-import * as i10 from "@koobiq/components/icon";
-import * as i11 from "@angular/common";
+import * as i1 from "./cleaner";
+import * as i2 from "./form-field";
+import * as i3 from "./prefix";
+import * as i4 from "./suffix";
+import * as i5 from "./password-toggle";
+import * as i6 from "./stepper";
+import * as i7 from "./label";
+import * as i8 from "./hint";
+import * as i9 from "./error";
+import * as i10 from "./reactive-password-hint";
+import * as i11 from "./fieldset";
+import * as i12 from "./password-hint";
+import * as i13 from "./validate.directive";
 export declare class KbqFormFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormFieldModule, [typeof i1.KbqFormField, typeof i1.KbqFormFieldWithoutBorders, typeof i2.KbqHint, typeof i3.KbqPasswordHint, typeof i4.KbqPrefix, typeof i5.KbqSuffix, typeof i6.KbqCleaner, typeof i7.KbqStepper, typeof i8.KbqValidateDirective, typeof i1.KbqTrim, typeof i9.KbqPasswordToggle], [typeof i10.KbqIconModule, typeof i11.NgClass], [typeof i1.KbqFormField, typeof i1.KbqFormFieldWithoutBorders, typeof i2.KbqHint, typeof i3.KbqPasswordHint, typeof i4.KbqPrefix, typeof i5.KbqSuffix, typeof i6.KbqCleaner, typeof i7.KbqStepper, typeof i8.KbqValidateDirective, typeof i1.KbqTrim, typeof i9.KbqPasswordToggle]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormFieldModule, never, [typeof i1.KbqCleaner, typeof i2.KbqFormField, typeof i3.KbqPrefix, typeof i4.KbqSuffix, typeof i5.KbqPasswordToggle, typeof i6.KbqStepper, typeof i7.KbqLabel, typeof i8.KbqHint, typeof i9.KbqError, typeof i10.KbqReactivePasswordHint, typeof i11.KbqLegend, typeof i11.KbqFieldset, typeof i11.KbqFieldsetItem, typeof i12.KbqPasswordHint, typeof i2.KbqFormFieldWithoutBorders, typeof i13.KbqValidateDirective, typeof i2.KbqTrim], [typeof i1.KbqCleaner, typeof i2.KbqFormField, typeof i3.KbqPrefix, typeof i4.KbqSuffix, typeof i5.KbqPasswordToggle, typeof i6.KbqStepper, typeof i7.KbqLabel, typeof i8.KbqHint, typeof i9.KbqError, typeof i10.KbqReactivePasswordHint, typeof i11.KbqLegend, typeof i11.KbqFieldset, typeof i11.KbqFieldsetItem, typeof i12.KbqPasswordHint, typeof i2.KbqFormFieldWithoutBorders, typeof i13.KbqValidateDirective, typeof i2.KbqTrim]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormFieldModule>;
 }

package/form-field/form-field.scss

@@ -1,29 +1,72 @@
-/* stylelint-disable scss/operator-no-newline-after */
-
 @use '../core/forms/forms';
+@use './form-field-theme' as theme;
 
-@use '../core/styles/common/tokens' as *;
+@mixin kbq-form-field-hint-geometry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kbq-size-xxs);
+    margin-top: var(--kbq-form-field-hint-size-margin-top);
 
-@use './form-field-theme' as *;
+    .kbq-password-hint:first-child {
+        margin-top: var(--kbq-size-s);
+    }
+}
 
 .kbq-form-field {
     position: relative;
     display: inline-block;
     width: 100%;
 
+    .kbq-form-field__label {
+        display: flex;
+        margin-bottom: var(--kbq-size-xs);
+    }
+
+    // We should override suffix spacing for select type, because it has custom suffix
+    &.kbq-form-field-type-select .kbq-form-field__suffix {
+        margin-right: 0;
+    }
+
     .kbq-form-field__container {
         box-sizing: border-box;
-        position: relative;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
         border-width: var(--kbq-form-field-size-border-width);
         border-style: solid;
         border-color: transparent;
         border-radius: var(--kbq-form-field-size-border-radius);
+
+        padding-left: var(--kbq-form-field-size-container-left-padding);
+        padding-right: var(--kbq-form-field-size-container-right-padding);
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
         height: var(--kbq-form-field-size-height);
     }
 
+    .kbq-form-field__infix {
+        width: 100%;
+        max-width: calc(100% - var(--kbq-size-xs));
+        flex-grow: 1;
+
+        padding-left: var(--kbq-form-field-size-infix-left-padding);
+
+        &:has(.kbq-select_multiple, .kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),
+        &:has(.kbq-tag-list) {
+            padding-left: 0;
+
+            max-width: 100%;
+        }
+
+        & .kbq-input,
+        & .kbq-tag-input {
+            padding-right: var(--kbq-form-field-size-infix-right-padding);
+        }
+    }
+
     &,
     .kbq-input,
     .kbq-textarea {
@@ -36,99 +79,36 @@
 
     &.cdk-focused,
     &.kbq-focused {
-        z-index: 2;
+        z-index: 3;
     }
 
-    &.kbq-form-field_without-borders .kbq-form-field__container {
+    &.kbq-form-field_without-borders .kbq-form-field__container,
+    &.kbq-form-field_no-borders .kbq-form-field__container {
         border-color: transparent !important;
         box-shadow: none !important;
     }
 
-    &.kbq-form-field_has-prefix {
-        .kbq-input {
-            padding-left: kbq-sum-series-css-variables([form-field-size-icon-size, size-m, size-s]);
-        }
-    }
-
-    &.kbq-form-field_has-password-toggle,
-    &.kbq-form-field_has-cleaner,
-    &.kbq-form-field_has-stepper,
-    &.kbq-form-field_has-suffix {
-        .kbq-input {
-            padding-right: kbq-sum-series-css-variables(
-                [form-field-size-icon-button-size,
-                form-field-size-icon-button-margin-left,
-                form-field-size-icon-button-margin-right]
-            );
-        }
-    }
-
     & + .kbq-password-hint {
         margin-top: var(--kbq-size-m);
     }
 
     .kbq-form-field__prefix,
     .kbq-form-field__suffix {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-
         display: flex;
-        flex-direction: row;
         justify-content: center;
         align-items: center;
-    }
-
-    .kbq-form-field__prefix {
-        left: 0;
-        padding-left: var(--kbq-size-m);
-        padding-right: var(--kbq-size-s);
-    }
-
-    .kbq-form-field__suffix {
-        right: 0;
-        padding-right: var(--kbq-size-m);
-        padding-left: var(--kbq-size-s);
-    }
-
-    .kbq-form-field__cleaner,
-    .kbq-password-toggle,
-    .kbq-stepper {
-        position: absolute;
 
-        top: 0;
-        bottom: 0;
-        right: 0;
+        min-width: var(--kbq-form-field-size-addon-width);
     }
 
-    .kbq-stepper {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--kbq-form-field-size-icon-button-size);
-
-        .kbq-stepper-step-up,
-        .kbq-stepper-step-down {
-            cursor: pointer;
-            width: var(--kbq-form-field-size-icon-button-size);
-            text-align: center;
-        }
-
-        .kbq-stepper-step-up {
-            transform: scaleY(-1);
+    .kbq-form-field__prefix {
+        & + .kbq-form-field__infix {
+            padding-left: 0;
         }
     }
 
     .kbq-form-field__hint {
-        display: flex;
-        flex-direction: column;
-        margin-top: var(--kbq-form-field-hint-size-margin-top);
-
-        & .kbq-password-hint:first-child {
-            margin-top: var(--kbq-size-s);
-        }
+        @include kbq-form-field-hint-geometry();
     }
 
     .kbq-password-hint {
@@ -136,5 +116,5 @@
     }
 }
 
-@include kbq-form-field-theme();
-@include kbq-form-field-typography();
+@include theme.kbq-form-field-theme();
+@include theme.kbq-form-field-typography();

package/form-field/hint.d.ts

@@ -1,11 +1,15 @@
 import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
+/** Hint text to be shown below the form field control. */
 export declare class KbqHint extends KbqColorDirective {
+    /** Unique ID for the hint. */
     id: string;
+    /** Disables `color` for the hint text. */
     fillTextOff: boolean;
+    /** Makes the hint size smaller. */
     compact: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], true, never>;
     static ngAcceptInputType_fillTextOff: unknown;
     static ngAcceptInputType_compact: unknown;
 }

package/form-field/hint.scss

@@ -1,6 +1,4 @@
-@use '../core/styles/common/tokens' as *;
-
-@use './hint-theme' as *;
+@use './hint-theme' as theme;
 
 .kbq-hint {
     display: flex;
@@ -18,5 +16,5 @@
     }
 }
 
-@include kbq-hint-theme();
-@include kbq-hint-typography();
+@include theme.kbq-hint-theme();
+@include theme.kbq-hint-typography();

package/form-field/label.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+/** Label for the form field. */
+export declare class KbqLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLabel, "kbq-label", ["kbqLabel"], {}, {}, never, never, true, never>;
+}

package/form-field/password-hint.d.ts

@@ -42,5 +42,5 @@ export declare class KbqPasswordHint extends KbqHint implements AfterContentInit
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/form-field/password-toggle.d.ts

@@ -1,22 +1,36 @@
-import { AfterViewInit, ChangeDetectorRef, TemplateRef } from '@angular/core';
-import { KbqFormFieldRef } from '@koobiq/components/core';
+import { TemplateRef } from '@angular/core';
 import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
-export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit {
-    private formField;
-    private changeDetector;
-    icon: KbqIconButton;
+/** Component which changes password visibility. */
+export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+    private readonly formField;
+    /**
+     * @docs-private
+     */
+    readonly icon: KbqIconButton;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     kbqTooltipHidden: string | TemplateRef<any>;
+    /** Form field password control. */
+    private get control();
+    /**
+     * @docs-private
+     */
     get hidden(): boolean;
+    /**
+     * @docs-private
+     */
     get iconClass(): string;
-    get visibility(): string;
-    constructor(formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
-    ngAfterViewInit(): void;
+    /**
+     * @docs-private
+     */
+    get visibility(): 'hidden' | 'visible';
+    constructor();
+    /**
+     * @docs-private
+     */
     toggle(event: KeyboardEvent): void;
-    private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, true, never>;
 }

package/form-field/password-toggle.scss

@@ -3,8 +3,7 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size);
-    margin-right: var(--kbq-form-field-size-icon-button-margin-right);
+    width: var(--kbq-form-field-size-addon-width);
     height: 100%;
 
     &::-moz-focus-inner {

package/form-field/prefix.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
+/** Element to be placed in front of the form field. */
 export declare class KbqPrefix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPrefix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[kbqPrefix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[kbqPrefix]", ["kbqPrefix"], {}, {}, never, never, true, never>;
 }

package/form-field/public-api.d.ts

@@ -1,12 +1,15 @@
 export * from './cleaner';
+export * from './error';
+export * from './fieldset';
 export * from './form-field';
 export * from './form-field-control';
-export * from './form-field-errors';
 export * from './form-field.module';
 export * from './hint';
+export * from './label';
 export * from './password-hint';
 export * from './password-toggle';
 export * from './prefix';
+export * from './reactive-password-hint';
 export * from './stepper';
 export * from './suffix';
 export * from './validate.directive';