@koobiq/components 17.4.0 → 17.5.0

package/fesm2022/koobiq-components-ellipsis-center.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';\nimport {\n    AfterViewInit,\n    Directive,\n    ElementRef,\n    Inject,\n    Input,\n    NgModule,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Renderer2,\n    ViewContainerRef\n} from '@angular/core';\nimport { KBQ_TOOLTIP_SCROLL_STRATEGY, KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center',\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n    }\n\n    @Input() minVisibleLength: number = MIN_VISIBLE_LENGTH;\n\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly debounceInterval: number = 50;\n\n    constructor(\n        overlay: Overlay,\n        elementRef: ElementRef<HTMLElement>,\n        ngZone: NgZone,\n        scrollDispatcher: ScrollDispatcher,\n        hostView: ViewContainerRef,\n        @Inject(KBQ_TOOLTIP_SCROLL_STRATEGY) scrollStrategy: any,\n        @Optional() direction: Directionality,\n        focusMonitor: FocusMonitor,\n        private renderer: Renderer2\n    ) {\n        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);\n    }\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.debounceInterval))\n            .subscribe(() => this.refresh());\n    }\n\n    ngOnDestroy() {\n        super.ngOnDestroy();\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private refresh() {\n        let start = '';\n        let end = '';\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n            const newElement = this.renderer.createElement('span');\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n        setTimeout(() => {\n            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n            if (this.disabled) {\n                start = '';\n                end = this._kbqEllipsisCenter;\n            } else {\n                const averageCharWidth = 7;\n                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);\n                const sliceIndex: number = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            }\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [],\n    exports: [KbqEllipsisCenterDirective],\n    declarations: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AASxB,MAAO,0BAA2B,SAAQ,iBAAiB,CAAA;IAC7D,IAAa,iBAAiB,CAAC,KAAa,EAAA;AACxC,QAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,EAAE,CAAC;KAClB;AAYD,IAAA,WAAA,CACI,OAAgB,EAChB,UAAmC,EACnC,MAAc,EACd,gBAAkC,EAClC,QAA0B,EACW,cAAmB,EAC5C,SAAyB,EACrC,YAA0B,EAClB,QAAmB,EAAA;AAE3B,QAAA,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;QAFhG,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;QAnBtB,IAAgB,CAAA,gBAAA,GAAW,kBAAkB,CAAC;AAE9C,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAS,CAAC;AAIrC,QAAA,IAAA,CAAA,kBAAkB,GAAG,YAAY,CAAC,KAAK,CAAC;QAE/B,IAAgB,CAAA,gBAAA,GAAW,EAAE,CAAC;KAc9C;IAEQ,QAAQ,GAAA;QACb,KAAK,CAAC,QAAQ,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACvC,IAAI,CAAC,OAAO,EAAE,CAAC;KAClB;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY;AACtC,aAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACzC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACxC;IAED,WAAW,GAAA;QACP,KAAK,CAAC,WAAW,EAAE,CAAC;AACpB,QAAA,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;KACzC;IAEO,OAAO,GAAA;QACX,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,GAAG,GAAG,EAAE,CAAC;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC;AAEvC,QAAA,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,KAAI;AAC5F,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,aAAa,CAAA,CAAE,CAAC,CAAC;YACjF,IAAI,OAAO,EAAE;AACT,gBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aACrE;YACD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAElD,YAAA,OAAO,UAAU,CAAC;AACtB,SAAC,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC5F,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QACtE,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC;AACtF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,KAAK,GAAG,EAAE,CAAC;AACX,gBAAA,GAAG,GAAG,IAAI,CAAC,kBAAkB,CAAC;aACjC;iBAAM;gBACH,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,gBAAA,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC;AACrG,gBAAA,MAAM,UAAU,GAAW,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,eAAe,CAAC,CAAC;gBACxF,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;gBACrD,GAAG,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;aACnD;AACD,YAAA,aAAa,CAAC,SAAS,GAAG,KAAK,CAAC;AAChC,YAAA,WAAW,CAAC,SAAS,GAAG,GAAG,CAAC;AAChC,SAAC,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACxE,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;KACzE;AAnFQ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,0BAA0B,yJAsBvB,2BAA2B,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAtB9B,0BAA0B,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,2BAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE,qBAAqB;AAC5B,wBAAA,iBAAiB,EAAE,2BAA2B;AACjD,qBAAA;AACJ,iBAAA,CAAA;;0BAuBQ,MAAM;2BAAC,2BAA2B,CAAA;;0BAClC,QAAQ;4FAtBA,iBAAiB,EAAA,CAAA;sBAA7B,KAAK;gBAKG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;;MAqFG,uBAAuB,CAAA;iIAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;kIAAvB,uBAAuB,EAAA,YAAA,EAAA,CA3FvB,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAA1B,0BAA0B,CAAA,EAAA,CAAA,CAAA,EAAA;kIA2F1B,uBAAuB,EAAA,CAAA,CAAA,EAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,EAAE;oBACX,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,YAAY,EAAE,CAAC,0BAA0B,CAAC;AAC7C,iBAAA,CAAA;;;ACxHD;;AAEG;;;;"}
+{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import { AfterViewInit, Directive, inject, Input, NgModule, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center',\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    private renderer: Renderer2 = inject(Renderer2);\n\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n    }\n\n    @Input() minVisibleLength: number = MIN_VISIBLE_LENGTH;\n\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly debounceInterval: number = 50;\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.debounceInterval))\n            .subscribe(() => this.refresh());\n    }\n\n    ngOnDestroy() {\n        super.ngOnDestroy();\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private refresh() {\n        let start = '';\n        let end = '';\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n            const newElement = this.renderer.createElement('span');\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n        setTimeout(() => {\n            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n            if (this.disabled) {\n                start = '';\n                end = this._kbqEllipsisCenter;\n            } else {\n                const averageCharWidth = 7;\n                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);\n                const sliceIndex: number = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            }\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [],\n    exports: [KbqEllipsisCenterDirective],\n    declarations: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-form-field.mjs

@@ -1,20 +1,18 @@
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, forwardRef, Optional, Inject, ViewChild, Directive, EventEmitter, Output, ContentChild, ContentChildren, Attribute, Self, NgModule } from '@angular/core';
-import * as i1 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconButton, KbqIconModule } from '@koobiq/components/icon';
-import * as i2 from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { NgModel, FormControlName, FormControlDirective, RequiredValidator, NG_VALIDATORS } from '@angular/forms';
 import { F8, ESCAPE } from '@koobiq/cdk/keycodes';
 import { mixinColor, KbqComponentColors, toBoolean, KBQ_FORM_FIELD_REF, PopUpTriggers, KBQ_VALIDATION } from '@koobiq/components/core';
 import { Subject, EMPTY, merge } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/bidi';
-import * as i1$2 from '@angular/cdk/overlay';
-import { KbqTooltipTrigger, KBQ_TOOLTIP_SCROLL_STRATEGY } from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 
 class KbqCleaner {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -23,7 +21,7 @@ class KbqCleaner {
             [autoColor]="true"
             kbq-icon-button="mc-close-circle_16"
         ></i>
-    `, isInline: true, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqCleaner, decorators: [{
             type: Component,
@@ -77,7 +75,7 @@ class KbqHint extends KbqHintMixinBase {
         <span class="kbq-hint__text">
             <ng-content />
         </span>
-    `, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text, )}.kbq-hint.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon, )!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text, )}.kbq-hint.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon, )!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text, )}.kbq-hint.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon, )!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text, )}.kbq-hint.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon, )!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-hint-font-normal-text-font-size, 14px);font-weight:var(--kbq-hint-font-normal-text-font-weight, 500);line-height:var(--kbq-hint-font-normal-text-line-height, 20px);font-family:var(--kbq-hint-font-normal-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-normal-text-text-transform, );font-feature-settings:var(--kbq-hint-font-normal-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-normal-text-letter-spacing, -.006em)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-hint-font-compact-text-font-size, 12px);font-weight:var(--kbq-hint-font-compact-text-font-weight, normal);line-height:var(--kbq-hint-font-compact-text-line-height, 16px);font-family:var(--kbq-hint-font-compact-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-compact-text-text-transform, );font-feature-settings:var(--kbq-hint-font-compact-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-compact-text-letter-spacing, normal)}\n", ".kbq-hint{--kbq-hint-size-normal-margin-top: 2px;--kbq-hint-size-normal-content-padding: 4px;--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: 4px;--kbq-hint-font-normal-text-font-size: 14px;--kbq-hint-font-normal-text-line-height: 20px;--kbq-hint-font-normal-text-letter-spacing: -.006em;--kbq-hint-font-normal-text-font-weight: 500;--kbq-hint-font-normal-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-hint-font-normal-text-text-transform: null;--kbq-hint-font-normal-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-hint-font-compact-text-font-size: 12px;--kbq-hint-font-compact-text-line-height: 16px;--kbq-hint-font-compact-text-letter-spacing: normal;--kbq-hint-font-compact-text-font-weight: normal;--kbq-hint-font-compact-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-hint-font-compact-text-text-transform: null;--kbq-hint-font-compact-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 60%, 100%);--kbq-hint-fill-text-off-success-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 40%, 100%);--kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 42%, 100%);--kbq-hint-fill-text-off-error-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 45%, 100%);--kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 60%, 100%);--kbq-hint-fill-text-on-success-text: hsla(104, 64%, 30%, 100%);--kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 40%, 100%);--kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 33%, 100%);--kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 42%, 100%);--kbq-hint-fill-text-on-error-text: hsla(7, 97%, 40%, 100%);--kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 45%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 45%, 100%);--kbq-hint-fill-text-off-success-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-off-error-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 60%, 100%);--kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 45%, 100%);--kbq-hint-fill-text-on-success-text: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-on-error-text: hsla(7, 97%, 60%, 100%);--kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 60%, 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqHint, decorators: [{
             type: Component,
@@ -92,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[attr.id]': 'id',
                         '[class.kbq-hint_fill-text-off]': 'fillTextOff',
                         '[class.kbq-hint_compact]': 'compact'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text, )}.kbq-hint.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon, )!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text, )}.kbq-hint.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon, )!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text, )}.kbq-hint.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon, )!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text, )}.kbq-hint.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon, )!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-hint-font-normal-text-font-size, 14px);font-weight:var(--kbq-hint-font-normal-text-font-weight, 500);line-height:var(--kbq-hint-font-normal-text-line-height, 20px);font-family:var(--kbq-hint-font-normal-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-normal-text-text-transform, );font-feature-settings:var(--kbq-hint-font-normal-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-normal-text-letter-spacing, -.006em)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-hint-font-compact-text-font-size, 12px);font-weight:var(--kbq-hint-font-compact-text-font-weight, normal);line-height:var(--kbq-hint-font-compact-text-line-height, 16px);font-family:var(--kbq-hint-font-compact-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-compact-text-text-transform, );font-feature-settings:var(--kbq-hint-font-compact-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-compact-text-letter-spacing, normal)}\n", ".kbq-hint{--kbq-hint-size-normal-margin-top: 2px;--kbq-hint-size-normal-content-padding: 4px;--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: 4px;--kbq-hint-font-normal-text-font-size: 14px;--kbq-hint-font-normal-text-line-height: 20px;--kbq-hint-font-normal-text-letter-spacing: -.006em;--kbq-hint-font-normal-text-font-weight: 500;--kbq-hint-font-normal-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-hint-font-normal-text-text-transform: null;--kbq-hint-font-normal-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-hint-font-compact-text-font-size: 12px;--kbq-hint-font-compact-text-line-height: 16px;--kbq-hint-font-compact-text-letter-spacing: normal;--kbq-hint-font-compact-text-font-weight: normal;--kbq-hint-font-compact-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-hint-font-compact-text-text-transform: null;--kbq-hint-font-compact-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 60%, 100%);--kbq-hint-fill-text-off-success-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 40%, 100%);--kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 42%, 100%);--kbq-hint-fill-text-off-error-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 45%, 100%);--kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 15%, 100%);--kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 60%, 100%);--kbq-hint-fill-text-on-success-text: hsla(104, 64%, 30%, 100%);--kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 40%, 100%);--kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 33%, 100%);--kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 42%, 100%);--kbq-hint-fill-text-on-error-text: hsla(7, 97%, 40%, 100%);--kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 45%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 45%, 100%);--kbq-hint-fill-text-off-success-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-off-error-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 60%, 100%);--kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 80%, 100%);--kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 45%, 100%);--kbq-hint-fill-text-on-success-text: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 45%, 100%);--kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 60%, 100%);--kbq-hint-fill-text-on-error-text: hsla(7, 97%, 60%, 100%);--kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 60%, 100%)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], fillTextOff: [{
@@ -204,7 +202,7 @@ class KbqPasswordHint extends KbqHint {
         <span class="kbq-hint__text">
             <ng-content />
         </span>
-    `, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text, )}.kbq-hint.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon, )!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text, )}.kbq-hint.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon, )!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text, )}.kbq-hint.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon, )!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text, )}.kbq-hint.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon, )!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-hint-font-normal-text-font-size, 14px);font-weight:var(--kbq-hint-font-normal-text-font-weight, 500);line-height:var(--kbq-hint-font-normal-text-line-height, 20px);font-family:var(--kbq-hint-font-normal-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-normal-text-text-transform, );font-feature-settings:var(--kbq-hint-font-normal-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-normal-text-letter-spacing, -.006em)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-hint-font-compact-text-font-size, 12px);font-weight:var(--kbq-hint-font-compact-text-font-weight, normal);line-height:var(--kbq-hint-font-compact-text-line-height, 16px);font-family:var(--kbq-hint-font-compact-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-compact-text-text-transform, );font-feature-settings:var(--kbq-hint-font-compact-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-compact-text-letter-spacing, normal)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPasswordHint, decorators: [{
             type: Component,
@@ -225,7 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[class.kbq-error]': 'hasError',
                         '[class.kbq-hint_fill-text-off]': 'fillTextOff',
                         '[class.kbq-hint_compact]': 'compact'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top, 2px);margin-right:var(--kbq-hint-size-normal-content-padding, 4px)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top, 0);margin-right:var(--kbq-hint-size-compact-content-padding, 4px)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text, )}.kbq-hint.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon, )!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text, )}.kbq-hint.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon, )!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text, )}.kbq-hint.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon, )!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text, )}.kbq-hint.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon, )!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text, )}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon, )!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-hint-font-normal-text-font-size, 14px);font-weight:var(--kbq-hint-font-normal-text-font-weight, 500);line-height:var(--kbq-hint-font-normal-text-line-height, 20px);font-family:var(--kbq-hint-font-normal-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-normal-text-text-transform, );font-feature-settings:var(--kbq-hint-font-normal-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-normal-text-letter-spacing, -.006em)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-hint-font-compact-text-font-size, 12px);font-weight:var(--kbq-hint-font-compact-text-font-weight, normal);line-height:var(--kbq-hint-font-compact-text-line-height, 16px);font-family:var(--kbq-hint-font-compact-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-hint-font-compact-text-text-transform, );font-feature-settings:var(--kbq-hint-font-compact-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-hint-font-compact-text-letter-spacing, normal)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -267,8 +265,8 @@ class KbqPasswordToggle extends KbqTooltipTrigger {
     get visibility() {
         return this.disabled && this.formField.control.empty ? 'hidden' : 'visible';
     }
-    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, focusMonitor, direction, formField, changeDetector) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
+    constructor(formField, changeDetector) {
+        super();
         this.formField = formField;
         this.changeDetector = changeDetector;
         this.updateState = () => {
@@ -287,8 +285,8 @@ class KbqPasswordToggle extends KbqTooltipTrigger {
         this.updateData();
         event.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPasswordToggle, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i2.FocusMonitor }, { token: i3.Directionality, optional: true }, { token: forwardRef(() => KBQ_FORM_FIELD_REF) }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqPasswordToggle, selector: "kbq-password-toggle", inputs: { content: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility" }, classAttribute: "kbq-password-toggle" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIconButton, descendants: true }], exportAs: ["kbqPasswordToggle"], usesInheritance: true, ngImport: i0, template: '<i kbq-icon-button="" [ngClass]="iconClass"></i>', isInline: true, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPasswordToggle, deps: [{ token: forwardRef(() => KBQ_FORM_FIELD_REF) }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqPasswordToggle, selector: "kbq-password-toggle", inputs: { content: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility" }, classAttribute: "kbq-password-toggle" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIconButton, descendants: true }], exportAs: ["kbqPasswordToggle"], usesInheritance: true, ngImport: i0, template: '<i kbq-icon-button="" [ngClass]="iconClass"></i>', isInline: true, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPasswordToggle, decorators: [{
             type: Component,
@@ -299,12 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '(keydown.ENTER)': 'toggle($event)',
                         '(keydown.SPACE)': 'toggle($event)'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
-                }] }, { type: i2.FocusMonitor }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => KBQ_FORM_FIELD_REF)]
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
@@ -370,7 +363,7 @@ class KbqStepper {
             (mousedown)="onStepDown($event)"
             kbq-icon-button="mc-angle-down-L_16"
         ></i>
-    `, isInline: true, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-stepper .kbq-icon-button.kbq-icon-button_small{padding:0}\n"], dependencies: [{ kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-stepper .kbq-icon-button.kbq-icon-button_small{padding:0}\n"], dependencies: [{ kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqStepper, decorators: [{
             type: Component,
@@ -554,10 +547,10 @@ class KbqFormField extends KbqFormFieldMixinBase {
             throw getKbqFormFieldMissingControlError();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFormField, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFormField, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqFormField, selector: "kbq-form-field", inputs: { color: "color" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onHoverChanged(true)", "mouseleave": "onHoverChanged(false)" }, properties: { "class.kbq-form-field_invalid": "control.errorState", "class.kbq-form-field_has-prefix": "hasPrefix", "class.kbq-form-field_has-suffix": "hasSuffix", "class.kbq-form-field_has-password-toggle": "hasPasswordToggle", "class.kbq-form-field_has-cleaner": "canShowCleaner", "class.kbq-form-field_has-stepper": "canShowStepper", "class.kbq-disabled": "control.disabled", "class.ng-untouched": "shouldForward(\"untouched\")", "class.ng-touched": "shouldForward(\"touched\")", "class.ng-pristine": "shouldForward(\"pristine\")", "class.ng-dirty": "shouldForward(\"dirty\")", "class.ng-valid": "shouldForward(\"valid\")", "class.ng-invalid": "shouldForward(\"invalid\")", "class.ng-pending": "shouldForward(\"pending\")" }, classAttribute: "kbq-form-field" }, providers: [
             { provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }
-        ], queries: [{ propertyName: "control", first: true, predicate: KbqFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: KbqStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, descendants: true }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHints", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["kbqFormField"], usesInheritance: true, ngImport: i0, template: "<div\n    #connectionContainer\n    class=\"kbq-form-field__container\"\n    (click)=\"onContainerClick($event)\"\n>\n    <div\n        *ngIf=\"hasPrefix\"\n        class=\"kbq-form-field__prefix\"\n    >\n        <ng-content select=\"[kbqPrefix]\" />\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content />\n    </div>\n\n    <div\n        *ngIf=\"hasSuffix\"\n        class=\"kbq-form-field__suffix\"\n    >\n        <ng-content select=\"[kbqSuffix]\" />\n    </div>\n\n    <div\n        *ngIf=\"canShowCleaner && !hasSuffix\"\n        class=\"kbq-form-field__cleaner\"\n        (click)=\"clearValue($event)\"\n    >\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\" />\n\n    <ng-content\n        *ngIf=\"canShowStepper\"\n        select=\"kbq-stepper\"\n    />\n</div>\n\n<div\n    *ngIf=\"hasHint || passwordHints.length\"\n    class=\"kbq-form-field__hint\"\n>\n    <ng-content select=\"kbq-hint, kbq-password-hint\" />\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m, 12px)}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px)}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}.kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s, 8px)}.kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap, 8px)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right, )}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 6px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "control", first: true, predicate: KbqFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: KbqStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, descendants: true }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHints", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["kbqFormField"], usesInheritance: true, ngImport: i0, template: "<div\n    #connectionContainer\n    class=\"kbq-form-field__container\"\n    (click)=\"onContainerClick($event)\"\n>\n    <div\n        *ngIf=\"hasPrefix\"\n        class=\"kbq-form-field__prefix\"\n    >\n        <ng-content select=\"[kbqPrefix]\" />\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content />\n    </div>\n\n    <div\n        *ngIf=\"hasSuffix\"\n        class=\"kbq-form-field__suffix\"\n    >\n        <ng-content select=\"[kbqSuffix]\" />\n    </div>\n\n    <div\n        *ngIf=\"canShowCleaner && !hasSuffix\"\n        class=\"kbq-form-field__cleaner\"\n        (click)=\"clearValue($event)\"\n    >\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\" />\n\n    <ng-content\n        *ngIf=\"canShowStepper\"\n        select=\"kbq-stepper\"\n    />\n</div>\n\n<div\n    *ngIf=\"hasHint || passwordHints.length\"\n    class=\"kbq-form-field__hint\"\n>\n    <ng-content select=\"kbq-hint, kbq-password-hint\" />\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m, 12px)}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px)}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}.kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s, 8px)}.kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap, 8px)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color, );background-color:var(--kbq-form-field-default-background, )}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text, )}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background, );-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text, );caret-color:var(--kbq-form-field-states-autofill-text, )}.kbq-form-field.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color, );background-color:var(--kbq-form-field-states-focused-background, )}.kbq-form-field.cdk-focused .kbq-input,.kbq-form-field.cdk-focused .kbq-tag-input,.kbq-form-field.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text, )}.kbq-form-field.cdk-focused .kbq-input::placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline, )}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color, );background-color:var(--kbq-form-field-states-error-background, )}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.ng-invalid .kbq-input,.kbq-form-field.ng-invalid .kbq-tag-input,.kbq-form-field.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.ng-invalid .kbq-input::placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline, )}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color, );background-color:var(--kbq-form-field-states-disabled-background, )}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text, )}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-icon{color:var(--kbq-form-field-states-disabled-text, );-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text, )}.kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text, )}.kbq-form-field{font-size:var(--kbq-form-field-font-text-font-size, 14px);font-weight:var(--kbq-form-field-font-text-font-weight, normal);line-height:var(--kbq-form-field-font-text-line-height, 20px);font-family:var(--kbq-form-field-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-font-text-letter-spacing, -.006em)}.kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint) .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-input-font-text-font-size, 14px);font-weight:var(--kbq-input-font-text-font-weight, normal);line-height:var(--kbq-input-font-text-line-height, 20px);font-family:var(--kbq-input-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-input-font-text-text-transform, );font-feature-settings:var(--kbq-input-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-input-font-text-letter-spacing, -.006em)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size, 14px);font-weight:var(--kbq-typography-mono-normal-font-weight, normal);line-height:var(--kbq-typography-mono-normal-line-height, 20px);font-family:var(--kbq-typography-mono-normal-font-family, \"JetBrains Mono\", \"Roboto Mono\", \"Consolas\", \"Menlo\", \"Monaco\", monospace);text-transform:var(--kbq-typography-mono-normal-text-transform, );font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings, initial);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing, normal)}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right, )}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 6px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-form-field{--kbq-form-field-size-height: 32px;--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: 8px;--kbq-form-field-size-icon-size: 16px;--kbq-form-field-size-icon-margin-left: 8px;--kbq-form-field-size-icon-margin-right: 8px;--kbq-form-field-size-icon-button-size: 24px;--kbq-form-field-size-icon-button-margin-right: 4px;--kbq-form-field-size-icon-button-margin-left: 4px;--kbq-form-field-font-text-font-size: 14px;--kbq-form-field-font-text-line-height: 20px;--kbq-form-field-font-text-letter-spacing: -.006em;--kbq-form-field-font-text-font-weight: normal;--kbq-form-field-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-font-text-text-transform: null;--kbq-form-field-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-form-field-default-border-color: hsla(229, 15%, 80%, 100%);--kbq-form-field-default-background: hsla(0, 0%, 100%, 100%);--kbq-form-field-default-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-default-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-focused-background: hsla(0, 0%, 100%, 100%);--kbq-form-field-states-focused-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-states-focused-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-error-border-color: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-error-background: hsla(7, 97%, 99%, 100%);--kbq-form-field-states-error-placeholder: hsla(7, 97%, 70%, 100%);--kbq-form-field-states-error-text: hsla(7, 97%, 40%, 100%);--kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-autofill-background: hsla(216, 100%, 85%, 100%);--kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-states-autofill-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-disabled-border-color: hsla(229, 15%, 15%, 32%);--kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);--kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 15%, 32%);--kbq-form-field-states-disabled-text: hsla(229, 15%, 15%, 32%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-form-field-default-border-color: hsla(229, 15%, 30%, 100%);--kbq-form-field-default-background: hsla(229, 15%, 12%, 100%);--kbq-form-field-default-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-default-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-focused-background: hsla(229, 15%, 12%, 100%);--kbq-form-field-states-focused-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-states-focused-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-error-border-color: hsla(7, 97%, 35%, 100%);--kbq-form-field-states-error-background: hsla(7, 97%, 6%, 100%);--kbq-form-field-states-error-placeholder: hsla(7, 97%, 25%, 100%);--kbq-form-field-states-error-text: hsla(7, 97%, 60%, 100%);--kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-autofill-background: hsla(216, 100%, 20%, 100%);--kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-states-autofill-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-disabled-border-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);--kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 40%, 100%);--kbq-form-field-states-disabled-text: hsla(229, 15%, 40%, 100%)}\n", ".kbq-input{--kbq-input-size-padding-horizontal: 12px;--kbq-input-size-padding-vertical: 6px;--kbq-input-font-text-font-size: 14px;--kbq-input-font-text-line-height: 20px;--kbq-input-font-text-letter-spacing: -.006em;--kbq-input-font-text-font-weight: normal;--kbq-input-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-input-font-text-text-transform: null;--kbq-input-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFormField, decorators: [{
             type: Component,
@@ -582,8 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '(mouseleave)': 'onHoverChanged(false)'
                     }, inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }
-                    ], template: "<div\n    #connectionContainer\n    class=\"kbq-form-field__container\"\n    (click)=\"onContainerClick($event)\"\n>\n    <div\n        *ngIf=\"hasPrefix\"\n        class=\"kbq-form-field__prefix\"\n    >\n        <ng-content select=\"[kbqPrefix]\" />\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content />\n    </div>\n\n    <div\n        *ngIf=\"hasSuffix\"\n        class=\"kbq-form-field__suffix\"\n    >\n        <ng-content select=\"[kbqSuffix]\" />\n    </div>\n\n    <div\n        *ngIf=\"canShowCleaner && !hasSuffix\"\n        class=\"kbq-form-field__cleaner\"\n        (click)=\"clearValue($event)\"\n    >\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\" />\n\n    <ng-content\n        *ngIf=\"canShowStepper\"\n        select=\"kbq-stepper\"\n    />\n</div>\n\n<div\n    *ngIf=\"hasHint || passwordHints.length\"\n    class=\"kbq-form-field__hint\"\n>\n    <ng-content select=\"kbq-hint, kbq-password-hint\" />\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m, 12px)}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px)}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}.kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s, 8px)}.kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap, 8px)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right, )}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 6px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.FocusMonitor }], propDecorators: { control: [{
+                    ], template: "<div\n    #connectionContainer\n    class=\"kbq-form-field__container\"\n    (click)=\"onContainerClick($event)\"\n>\n    <div\n        *ngIf=\"hasPrefix\"\n        class=\"kbq-form-field__prefix\"\n    >\n        <ng-content select=\"[kbqPrefix]\" />\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content />\n    </div>\n\n    <div\n        *ngIf=\"hasSuffix\"\n        class=\"kbq-form-field__suffix\"\n    >\n        <ng-content select=\"[kbqSuffix]\" />\n    </div>\n\n    <div\n        *ngIf=\"canShowCleaner && !hasSuffix\"\n        class=\"kbq-form-field__cleaner\"\n        (click)=\"clearValue($event)\"\n    >\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\" />\n\n    <ng-content\n        *ngIf=\"canShowStepper\"\n        select=\"kbq-stepper\"\n    />\n</div>\n\n<div\n    *ngIf=\"hasHint || passwordHints.length\"\n    class=\"kbq-form-field__hint\"\n>\n    <ng-content select=\"kbq-hint, kbq-password-hint\" />\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m, 12px)}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px)}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size, 24px);text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}.kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s, 8px)}.kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap, 8px)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color, );background-color:var(--kbq-form-field-default-background, )}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text, )}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder, )}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background, );-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text, );caret-color:var(--kbq-form-field-states-autofill-text, )}.kbq-form-field.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color, );background-color:var(--kbq-form-field-states-focused-background, )}.kbq-form-field.cdk-focused .kbq-input,.kbq-form-field.cdk-focused .kbq-tag-input,.kbq-form-field.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text, )}.kbq-form-field.cdk-focused .kbq-input::placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder, )}.kbq-form-field.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline, )}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color, );background-color:var(--kbq-form-field-states-error-background, )}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.ng-invalid .kbq-input,.kbq-form-field.ng-invalid .kbq-tag-input,.kbq-form-field.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.ng-invalid .kbq-input::placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder, )}.kbq-form-field.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline, )}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color, );background-color:var(--kbq-form-field-states-disabled-background, )}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text, )}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder, )}.kbq-form-field.kbq-disabled .kbq-icon{color:var(--kbq-form-field-states-disabled-text, );-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text, )}.kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text, )}.kbq-form-field{font-size:var(--kbq-form-field-font-text-font-size, 14px);font-weight:var(--kbq-form-field-font-text-font-weight, normal);line-height:var(--kbq-form-field-font-text-line-height, 20px);font-family:var(--kbq-form-field-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-font-text-letter-spacing, -.006em)}.kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint) .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 6px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-input-font-text-font-size, 14px);font-weight:var(--kbq-input-font-text-font-weight, normal);line-height:var(--kbq-input-font-text-line-height, 20px);font-family:var(--kbq-input-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-input-font-text-text-transform, );font-feature-settings:var(--kbq-input-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-input-font-text-letter-spacing, -.006em)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size, 14px);font-weight:var(--kbq-typography-mono-normal-font-weight, normal);line-height:var(--kbq-typography-mono-normal-line-height, 20px);font-family:var(--kbq-typography-mono-normal-font-family, \"JetBrains Mono\", \"Roboto Mono\", \"Consolas\", \"Menlo\", \"Monaco\", monospace);text-transform:var(--kbq-typography-mono-normal-text-transform, );font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings, initial);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing, normal)}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right, )}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 6px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-form-field{--kbq-form-field-size-height: 32px;--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: 8px;--kbq-form-field-size-icon-size: 16px;--kbq-form-field-size-icon-margin-left: 8px;--kbq-form-field-size-icon-margin-right: 8px;--kbq-form-field-size-icon-button-size: 24px;--kbq-form-field-size-icon-button-margin-right: 4px;--kbq-form-field-size-icon-button-margin-left: 4px;--kbq-form-field-font-text-font-size: 14px;--kbq-form-field-font-text-line-height: 20px;--kbq-form-field-font-text-letter-spacing: -.006em;--kbq-form-field-font-text-font-weight: normal;--kbq-form-field-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-font-text-text-transform: null;--kbq-form-field-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-form-field-default-border-color: hsla(229, 15%, 80%, 100%);--kbq-form-field-default-background: hsla(0, 0%, 100%, 100%);--kbq-form-field-default-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-default-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-focused-background: hsla(0, 0%, 100%, 100%);--kbq-form-field-states-focused-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-states-focused-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-error-border-color: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-error-background: hsla(7, 97%, 99%, 100%);--kbq-form-field-states-error-placeholder: hsla(7, 97%, 70%, 100%);--kbq-form-field-states-error-text: hsla(7, 97%, 40%, 100%);--kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-autofill-background: hsla(216, 100%, 85%, 100%);--kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 60%, 100%);--kbq-form-field-states-autofill-text: hsla(229, 15%, 15%, 100%);--kbq-form-field-states-disabled-border-color: hsla(229, 15%, 15%, 32%);--kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);--kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 15%, 32%);--kbq-form-field-states-disabled-text: hsla(229, 15%, 15%, 32%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-form-field-default-border-color: hsla(229, 15%, 30%, 100%);--kbq-form-field-default-background: hsla(229, 15%, 12%, 100%);--kbq-form-field-default-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-default-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-focused-background: hsla(229, 15%, 12%, 100%);--kbq-form-field-states-focused-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-states-focused-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-error-border-color: hsla(7, 97%, 35%, 100%);--kbq-form-field-states-error-background: hsla(7, 97%, 6%, 100%);--kbq-form-field-states-error-placeholder: hsla(7, 97%, 25%, 100%);--kbq-form-field-states-error-text: hsla(7, 97%, 60%, 100%);--kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);--kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);--kbq-form-field-states-autofill-background: hsla(216, 100%, 20%, 100%);--kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 45%, 100%);--kbq-form-field-states-autofill-text: hsla(229, 15%, 80%, 100%);--kbq-form-field-states-disabled-border-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);--kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 40%, 100%);--kbq-form-field-states-disabled-text: hsla(229, 15%, 40%, 100%)}\n", ".kbq-input{--kbq-input-size-padding-horizontal: 12px;--kbq-input-size-padding-vertical: 6px;--kbq-input-font-text-font-size: 14px;--kbq-input-font-text-line-height: 20px;--kbq-input-font-text-letter-spacing: -.006em;--kbq-input-font-text-font-weight: normal;--kbq-input-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-input-font-text-text-transform: null;--kbq-input-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.FocusMonitor }], propDecorators: { control: [{
                 type: ContentChild,
                 args: [KbqFormFieldControl, { static: false }]
             }], stepper: [{
@@ -643,7 +636,7 @@ class KbqTrim {
         }
         return typeof value === 'string' ? value.trim() : value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTrim, deps: [{ token: 'no-trim', attribute: true }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTrim, deps: [{ token: 'no-trim', attribute: true }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqTrim, selector: "[kbqInput], [kbqTextarea]", host: { classAttribute: "kbq-trim" }, exportAs: ["KbqTrim"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTrim, decorators: [{
@@ -656,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['no-trim']
-                }] }, { type: i1$3.NgControl, decorators: [{
+                }] }, { type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -774,7 +767,7 @@ class KbqValidateDirective {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqValidateDirective, deps: [{ token: forwardRef(() => KbqFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$3.NgControl, optional: true, self: true }, { token: i1$3.NgForm, optional: true }, { token: i1$3.FormGroupDirective, optional: true }, { token: KBQ_VALIDATION, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqValidateDirective, deps: [{ token: forwardRef(() => KbqFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgForm, optional: true }, { token: i1$2.FormGroupDirective, optional: true }, { token: KBQ_VALIDATION, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqValidateDirective, selector: "\n        input[kbqInput],\n        input[kbqInputPassword],\n        input[kbqTimepicker],\n        input[kbqDatepicker],\n        textarea[kbqTextarea],\n        kbq-select,\n        kbq-tree-select,\n        kbq-tag-list\n    ", exportAs: ["KbqValidate"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqValidateDirective, decorators: [{
@@ -802,13 +795,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }, {
                     type: Inject,
                     args: [NG_VALIDATORS]
-                }] }, { type: i1$3.NgControl, decorators: [{
+                }] }, { type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i1$3.NgForm, decorators: [{
+                }] }, { type: i1$2.NgForm, decorators: [{
                     type: Optional
-                }] }, { type: i1$3.FormGroupDirective, decorators: [{
+                }] }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional