@koobiq/components-experimental 18.5.1

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

@@ -0,0 +1,668 @@
+import * as i0 from '@angular/core';
+import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, booleanAttribute, Input, Directive, InjectionToken, ChangeDetectorRef, DestroyRef, ElementRef, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { KBQ_FORM_FIELD_REF, KbqComponentColors } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { F8, ESCAPE } from '@koobiq/cdk/keycodes';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { merge } from 'rxjs';
+import { NgClass } from '@angular/common';
+import { KbqInputPassword, KbqInput } from '@koobiq/components/input';
+
+/**
+ * KbqCleaner to be placed in end of the form field.
+ * Resets form control by click.
+ */
+class KbqCleaner {
+    constructor() {
+        // @TODO fix types (#DS-2915)
+        this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
+    }
+    /** Whether to display the cleaner. */
+    get visible() {
+        return !this.formField?.disabled && !!this.formField?.control?.ngControl?.value;
+    }
+    /** Clean the form field control. */
+    clean(event) {
+        event.stopPropagation();
+        this.formField?.control?.ngControl?.reset();
+        this.formField?.control?.focus();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqCleaner, isStandalone: true, selector: "kbq-cleaner", host: { listeners: { "click": "clean($event)" }, properties: { "style.visibility": "visible ? \"visible\" : \"hidden\"", "attr.aria-hidden": "!visible" }, classAttribute: "kbq-cleaner___EXPERIMENTAL" }, exportAs: ["kbqCleaner"], ngImport: i0, template: `
+        <i
+            [autoColor]="true"
+            kbq-icon-button="kbq-xmark-circle_16"
+        ></i>
+    `, isInline: true, styles: [".kbq-cleaner___EXPERIMENTAL{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.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: "18.2.6", ngImport: i0, type: KbqCleaner, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [KbqIconModule], selector: 'kbq-cleaner', exportAs: 'kbqCleaner', template: `
+        <i
+            [autoColor]="true"
+            kbq-icon-button="kbq-xmark-circle_16"
+        ></i>
+    `, host: {
+                        class: 'kbq-cleaner___EXPERIMENTAL',
+                        '(click)': 'clean($event)',
+                        '[style.visibility]': 'visible ? "visible" : "hidden"',
+                        '[attr.aria-hidden]': '!visible'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-cleaner___EXPERIMENTAL{display:flex;align-items:center;justify-content:center}\n"] }]
+        }] });
+
+let nextUniqueId$1 = 0;
+/** Hint text to be shown below the form field control. */
+class KbqHint {
+    constructor() {
+        /** Unique ID for the hint. */
+        this.id = `kbq-hint-${nextUniqueId$1++}`;
+        /** Component colors */
+        this.colors = KbqComponentColors;
+        this._fillTextOff = false;
+        /** Makes the hint size smaller. */
+        this.compact = false;
+    }
+    /** Hint color */
+    set color(color) {
+        this._color = color;
+    }
+    get color() {
+        return this._color;
+    }
+    /** Disables `color` for the hint text. */
+    set fillTextOff(fillTextOff) {
+        this._fillTextOff = fillTextOff;
+    }
+    get fillTextOff() {
+        return this._fillTextOff;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.6", type: KbqHint, isStandalone: true, selector: "kbq-hint", inputs: { id: "id", color: "color", fillTextOff: ["fillTextOff", "fillTextOff", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "attr.id": "id", "class.kbq-error": "color === colors.Error", "class.kbq-contrast-fade": "color === colors.ContrastFade", "class.kbq-success": "color === colors.Success", "class.kbq-warning": "color === colors.Warning", "class.kbq-hint_fill-text-off": "fillTextOff", "class.kbq-hint_compact": "compact" }, classAttribute: "kbq-hint___EXPERIMENTAL" }, exportAs: ["kbqHint"], ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<span class=\"kbq-hint_text\">\n    <ng-content />\n</span>\n", styles: [".kbq-hint___EXPERIMENTAL{display:flex;align-items:center;justify-content:start}.kbq-hint___EXPERIMENTAL .kbq-icon{margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-icon{margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint___EXPERIMENTAL .kbq-hint_text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint___EXPERIMENTAL{--kbq-hint-size-normal-margin-top: var(--kbq-size-3xs);--kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqHint, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-hint', exportAs: 'kbqHint', host: {
+                        class: 'kbq-hint___EXPERIMENTAL',
+                        '[attr.id]': 'id',
+                        '[class.kbq-error]': 'color === colors.Error',
+                        '[class.kbq-contrast-fade]': 'color === colors.ContrastFade',
+                        '[class.kbq-success]': 'color === colors.Success',
+                        '[class.kbq-warning]': 'color === colors.Warning',
+                        '[class.kbq-hint_fill-text-off]': 'fillTextOff',
+                        '[class.kbq-hint_compact]': 'compact'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[kbq-icon]\" />\n\n<span class=\"kbq-hint_text\">\n    <ng-content />\n</span>\n", styles: [".kbq-hint___EXPERIMENTAL{display:flex;align-items:center;justify-content:start}.kbq-hint___EXPERIMENTAL .kbq-icon{margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-icon{margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint___EXPERIMENTAL .kbq-hint_text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint___EXPERIMENTAL{--kbq-hint-size-normal-margin-top: var(--kbq-size-3xs);--kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], fillTextOff: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], compact: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+/** Error text to be shown below the form field control. */
+class KbqError extends KbqHint {
+    /** @docs-private */
+    set color(_color) { }
+    /** Overrides the hint `color` property. */
+    get color() {
+        return KbqComponentColors.Error;
+    }
+    /** @docs-private */
+    set fillTextOff(_fillTextOff) { }
+    /** Overrides the hint `fillTextOff` property. */
+    get fillTextOff() {
+        return false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqError, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqError, isStandalone: true, selector: "kbq-error", inputs: { color: "color", fillTextOff: "fillTextOff" }, exportAs: ["kbqError"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\" />\n\n<span class=\"kbq-hint_text\">\n    <ng-content />\n</span>\n", styles: [".kbq-hint___EXPERIMENTAL{display:flex;align-items:center;justify-content:start}.kbq-hint___EXPERIMENTAL .kbq-icon{margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-icon{margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint___EXPERIMENTAL .kbq-hint_text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint___EXPERIMENTAL{--kbq-hint-size-normal-margin-top: var(--kbq-size-3xs);--kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqError, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-error', exportAs: 'kbqError', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[kbq-icon]\" />\n\n<span class=\"kbq-hint_text\">\n    <ng-content />\n</span>\n", styles: [".kbq-hint___EXPERIMENTAL{display:flex;align-items:center;justify-content:start}.kbq-hint___EXPERIMENTAL .kbq-icon{margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-icon{margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-success .kbq-icon{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-warning .kbq-icon{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint___EXPERIMENTAL.kbq-hint_fill-text-off.kbq-error .kbq-icon{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint___EXPERIMENTAL .kbq-hint_text{font-size:var(--kbq-typography-text-normal-medium-font-size);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint___EXPERIMENTAL{--kbq-hint-size-normal-margin-top: var(--kbq-size-3xs);--kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);--kbq-hint-size-compact-margin-top: 0;--kbq-hint-size-compact-content-padding: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], fillTextOff: [{
+                type: Input
+            }] } });
+/** Password hint to be shown below the password form field control. */
+class KbqPasswordHint extends KbqHint {
+    constructor() {
+        super(...arguments);
+        /** Whether the form field control has an error. */
+        this.hasError = false;
+        // @TODO fix types (#DS-2915)
+        this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
+    }
+    /** @docs-private */
+    set fillTextOff(_fillTextOff) { }
+    /** Overrides the hint `fillTextOff` property. */
+    get fillTextOff() {
+        return true;
+    }
+    /** @docs-private */
+    set color(_color) { }
+    /** Overrides the hint `color` property. */
+    get color() {
+        if (this.formField?.invalid && this.hasError) {
+            return KbqComponentColors.Error;
+        }
+        if ((!this.formField?.invalid && !this.hasError) || !this.hasError) {
+            return KbqComponentColors.Success;
+        }
+        return KbqComponentColors.ContrastFade;
+    }
+    /** The form field hint icon. */
+    get icon() {
+        return this.hasError ? 'kbq-xmark-s_16' : 'kbq-check-s_16';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPasswordHint, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.6", type: KbqPasswordHint, isStandalone: true, selector: "kbq-password-hint", inputs: { hasError: ["hasError", "hasError", booleanAttribute], fillTextOff: "fillTextOff", color: "color" }, host: { classAttribute: "kbq-password-hint___EXPERIMENTAL" }, usesInheritance: true, ngImport: i0, template: `
+        <i
+            [ngClass]="icon"
+            kbq-icon=""
+        ></i>
+
+        <span class="kbq-hint_text">
+            <ng-content />
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPasswordHint, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass, KbqIconModule],
+                    selector: 'kbq-password-hint',
+                    template: `
+        <i
+            [ngClass]="icon"
+            kbq-icon=""
+        ></i>
+
+        <span class="kbq-hint_text">
+            <ng-content />
+        </span>
+    `,
+                    host: {
+                        class: 'kbq-password-hint___EXPERIMENTAL'
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { hasError: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fillTextOff: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+let nextUniqueId = 0;
+/** Label for the form field. */
+class KbqLabel {
+    constructor() {
+        /** Unique id for the label. */
+        this.id = `kbq-label-${nextUniqueId++}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqLabel, isStandalone: true, selector: "kbq-label", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "kbq-label___EXPERIMENTAL" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-label',
+                    standalone: true,
+                    host: {
+                        class: 'kbq-label___EXPERIMENTAL',
+                        '[attr.id]': 'id'
+                    }
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }] } });
+
+/** @docs-private */
+const getKbqPasswordToggleMissingControlError = () => {
+    return Error('kbq-password-toggle should use with kbqInputPassword');
+};
+/** Component which changes password visibility. */
+class KbqPasswordToggle {
+    constructor() {
+        // @TODO fix types (#DS-2915)
+        this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
+    }
+    /** Form field password control. */
+    get control() {
+        const control = this.formField?.control;
+        if (!(control instanceof KbqInputPassword)) {
+            throw getKbqPasswordToggleMissingControlError();
+        }
+        return control;
+    }
+    /** The icon selector. */
+    get icon() {
+        return this.control.elementType === 'password' ? 'kbq-eye_16' : 'kbq-eye-slash_16';
+    }
+    /** Whether to display the password toggle. */
+    get visible() {
+        return !this.formField?.disabled && !!this.control?.ngControl?.value;
+    }
+    /** Toggles the password visibility. */
+    toggleType(event) {
+        event.stopPropagation();
+        this.control.toggleType();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqPasswordToggle, isStandalone: true, selector: "kbq-password-toggle", host: { listeners: { "click": "toggleType($event)", "keydown.ENTER": "toggleType($event)", "keydown.SPACE": "toggleType($event)" }, properties: { "style.visibility": "visible ? \"visible\" : \"hidden\"", "attr.aria-hidden": "!visible" }, classAttribute: "kbq-password-toggle___EXPERIMENTAL" }, exportAs: ["kbqPasswordToggle"], ngImport: i0, template: `
+        <i
+            [ngClass]="icon"
+            [autoColor]="true"
+            kbq-icon-button=""
+        ></i>
+    `, isInline: true, styles: [".kbq-password-toggle___EXPERIMENTAL{display:flex;align-items:center;justify-content:center}.kbq-password-toggle___EXPERIMENTAL::-moz-focus-inner{border:0}.kbq-password-toggle___EXPERIMENTAL:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.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: "18.2.6", ngImport: i0, type: KbqPasswordToggle, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgClass, KbqIconModule], selector: `kbq-password-toggle`, exportAs: 'kbqPasswordToggle', template: `
+        <i
+            [ngClass]="icon"
+            [autoColor]="true"
+            kbq-icon-button=""
+        ></i>
+    `, host: {
+                        class: 'kbq-password-toggle___EXPERIMENTAL',
+                        '[style.visibility]': 'visible ? "visible" : "hidden"',
+                        '[attr.aria-hidden]': '!visible',
+                        '(click)': 'toggleType($event)',
+                        '(keydown.ENTER)': 'toggleType($event)',
+                        '(keydown.SPACE)': 'toggleType($event)'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-toggle___EXPERIMENTAL{display:flex;align-items:center;justify-content:center}.kbq-password-toggle___EXPERIMENTAL::-moz-focus-inner{border:0}.kbq-password-toggle___EXPERIMENTAL:focus{outline:none}\n"] }]
+        }] });
+
+/** KbqPrefix to be placed in front of the form field. */
+class KbqPrefix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqPrefix, isStandalone: true, selector: "[kbqPrefix]", host: { classAttribute: "kbq-prefix___EXPERIMENTAL" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqPrefix]',
+                    host: {
+                        class: 'kbq-prefix___EXPERIMENTAL'
+                    }
+                }]
+        }] });
+
+/** @docs-private */
+const getKbqStepperToggleMissingControlError = () => {
+    return Error('kbq-stepper should use with kbqNumberInput');
+};
+/** Component which allow to increment or decrement number value. */
+class KbqStepper {
+    constructor() {
+        // @TODO fix types (#DS-2915)
+        this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
+    }
+    /** Whether the stepper is visible. */
+    get visible() {
+        return !!((this.formField?.focused || this.formField?.hovered) && !this.formField?.disabled);
+    }
+    /** Form field number control. */
+    get control() {
+        const control = this.formField?.control;
+        if (!(control instanceof KbqInput && control.numberInput)) {
+            throw getKbqStepperToggleMissingControlError();
+        }
+        return control.numberInput;
+    }
+    stepUp(event) {
+        event.stopPropagation();
+        this.control.stepUp(this.control.step);
+    }
+    stepDown(event) {
+        event.stopPropagation();
+        this.control.stepDown(this.control.step);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqStepper, isStandalone: true, selector: "kbq-stepper", host: { properties: { "style.visibility": "visible ? \"visible\" : \"hidden\"", "attr.aria-hidden": "!visible" }, classAttribute: "kbq-stepper___EXPERIMENTAL" }, exportAs: ["kbqStepper"], ngImport: i0, template: `
+        <i
+            class="kbq-stepper_step-up"
+            [small]="true"
+            [tabindex]="-1"
+            [autoColor]="true"
+            (click)="stepUp($event)"
+            kbq-icon-button="kbq-chevron-down_16"
+        ></i>
+        <i
+            class="kbq-stepper_step-down"
+            [small]="true"
+            [tabindex]="-1"
+            [autoColor]="true"
+            (mousedown)="stepDown($event)"
+            kbq-icon-button="kbq-chevron-down_16"
+        ></i>
+    `, isInline: true, styles: [".kbq-stepper___EXPERIMENTAL{display:flex;flex-direction:column;justify-content:center;align-items:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-up,.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size);text-align:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-up{transform:scaleY(-1)}.kbq-stepper___EXPERIMENTAL .kbq-icon-button.kbq-icon-button_small{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.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: "18.2.6", ngImport: i0, type: KbqStepper, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-stepper', exportAs: 'kbqStepper', imports: [KbqIconModule], template: `
+        <i
+            class="kbq-stepper_step-up"
+            [small]="true"
+            [tabindex]="-1"
+            [autoColor]="true"
+            (click)="stepUp($event)"
+            kbq-icon-button="kbq-chevron-down_16"
+        ></i>
+        <i
+            class="kbq-stepper_step-down"
+            [small]="true"
+            [tabindex]="-1"
+            [autoColor]="true"
+            (mousedown)="stepDown($event)"
+            kbq-icon-button="kbq-chevron-down_16"
+        ></i>
+    `, host: {
+                        class: 'kbq-stepper___EXPERIMENTAL',
+                        '[style.visibility]': 'visible ? "visible" : "hidden"',
+                        '[attr.aria-hidden]': '!visible'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-stepper___EXPERIMENTAL{display:flex;flex-direction:column;justify-content:center;align-items:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-up,.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size);text-align:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper_step-up{transform:scaleY(-1)}.kbq-stepper___EXPERIMENTAL .kbq-icon-button.kbq-icon-button_small{padding:0}\n"] }]
+        }] });
+
+/** KbqSuffix to be placed at the end of the form field. */
+class KbqSuffix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqSuffix, isStandalone: true, selector: "[kbqSuffix]", host: { classAttribute: "kbq-suffix___EXPERIMENTAL" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqSuffix]',
+                    host: {
+                        class: 'kbq-suffix___EXPERIMENTAL'
+                    }
+                }]
+        }] });
+
+/** Injection token that can be used to configure the default options for all kbq-form-field's. */
+const KBQ_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('KBQ_FORM_FIELD_DEFAULT_OPTIONS');
+/** @docs-private */
+const getKbqFormFieldMissingControlError = () => {
+    return Error('kbq-form-field must contain a KbqFormFieldControl');
+};
+/** Container for form controls that applies styling and behavior. */
+class KbqFormField {
+    constructor() {
+        this.canCleanerClearByEsc = true;
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject(ElementRef);
+        this.defaultOptions = inject(KBQ_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
+        this._hovered = false;
+    }
+    /** The form field's control. */
+    get control() {
+        if (!this._control) {
+            throw getKbqFormFieldMissingControlError();
+        }
+        return this._control;
+    }
+    /** Determines if borders and shadows should be disabled. */
+    get shouldDisableBorders() {
+        return this.noBorders || !!this.defaultOptions?.noBorders;
+    }
+    /** Whether the form field control is focused. */
+    get focused() {
+        return !!this.control?.focused;
+    }
+    /** Whether the form field is hovered. */
+    get hovered() {
+        return !!this._hovered;
+    }
+    /** Whether the form field is invalid. */
+    get invalid() {
+        return !!this.control?.errorState;
+    }
+    /** Checks whether the form-field contains kbq-hint */
+    get hasHint() {
+        return this.hint?.length > 0;
+    }
+    /** Checks whether the form-field contains kbq-password-hint */
+    get hasPasswordHint() {
+        return this.passwordHint?.length > 0;
+    }
+    /** Checks whether the form-field contains kbq-password-toggle */
+    get hasPasswordToggle() {
+        return !!this.passwordToggle;
+    }
+    /** Checks whether the form-field contains kbq-label */
+    get hasLabel() {
+        return !!this.label;
+    }
+    /** Checks whether the form-field contains kbqSuffix */
+    get hasSuffix() {
+        return this.suffix?.length > 0;
+    }
+    /** Checks whether the form-field contains kbqPrefix */
+    get hasPrefix() {
+        return this.prefix?.length > 0;
+    }
+    /** Checks whether the form-field contains kbq-cleaner */
+    get hasCleaner() {
+        return !!this.cleaner;
+    }
+    /** Checks whether the form-field contains kbq-stepper */
+    get hasStepper() {
+        return !!this.stepper;
+    }
+    /** Checks whether the form-field contains kbq-error */
+    get hasError() {
+        return this.error.length > 0;
+    }
+    /** Whether the form field is disabled. */
+    get disabled() {
+        return !!this.control?.disabled;
+    }
+    ngAfterContentInit() {
+        this.initializeControl();
+        this.initializePrefixAndSuffix();
+        this.initializeHint();
+    }
+    ngAfterViewInit() {
+        // Because the above changes a value used in the template after it was checked, we need
+        // to trigger CD or the change might not be reflected if there is no other CD scheduled.
+        this.changeDetectorRef.detectChanges();
+    }
+    /** Focuses the control. */
+    focus(options) {
+        this.control.focus(options);
+    }
+    /** Handles a click on the control's container. */
+    onContainerClick(event) {
+        if (this.control.onContainerClick) {
+            this.control.onContainerClick(event);
+        }
+    }
+    /** Handles keydown events. */
+    onKeyDown(event) {
+        // @TODO should move into KbqPasswordToggle (#DS-2910)
+        if (this.control.controlType === 'input-password' && event.altKey && event.keyCode === F8) {
+            this.control.toggleType();
+        }
+        // @TODO should move into KbqCleaner (#DS-2910)
+        if (this.canCleanerClearByEsc && event.keyCode === ESCAPE && this.focused && this.hasCleaner) {
+            this.control?.ngControl?.reset();
+            event.preventDefault();
+        }
+    }
+    /** Handles mouseenter events. */
+    mouseenter(_event) {
+        this._hovered = true;
+    }
+    /** Handles mouseleave events. */
+    mouseleave(_event) {
+        this._hovered = false;
+    }
+    /**
+     * Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.
+     */
+    getConnectedOverlayOrigin() {
+        return this.connectionContainerRef || this.elementRef;
+    }
+    /**
+     * Determines whether a class from the AbstractControlDirective should be forwarded to the host element.
+     */
+    shouldBeForwarded(property) {
+        return this.control.ngControl?.[property];
+    }
+    /** Initializes the kbqPrefix and kbqSuffix containers. */
+    initializePrefixAndSuffix() {
+        // Mark the form field as dirty whenever the prefix or suffix children change. This is necessary because we
+        // conditionally display the prefix/suffix containers based on whether there is projected content.
+        merge(this.prefix.changes, this.suffix.changes)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    /** Initializes the KbqHint, KbqError and KbqPasswordHint containers. */
+    initializeHint() {
+        merge(this.hint.changes, this.error.changes, this.passwordHint.changes)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    /** Initializes the form field control. */
+    initializeControl() {
+        if (this.control.controlType) {
+            this.elementRef.nativeElement.classList.add(`kbq-form-field-type-${this.control.controlType}`);
+        }
+        this.control.stateChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+        this.control.ngControl?.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqFormField, isStandalone: true, selector: "kbq-form-field", inputs: { noBorders: ["noBorders", "noBorders", booleanAttribute] }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)" }, properties: { "class.kbq-form-field_invalid": "invalid", "class.kbq-form-field_focused": "focused", "class.kbq-form-field_disabled": "disabled", "class.kbq-form-field_no-borders": "shouldDisableBorders", "class.ng-untouched": "shouldBeForwarded(\"untouched\")", "class.ng-touched": "shouldBeForwarded(\"touched\")", "class.ng-pristine": "shouldBeForwarded(\"pristine\")", "class.ng-dirty": "shouldBeForwarded(\"dirty\")", "class.ng-valid": "shouldBeForwarded(\"valid\")", "class.ng-invalid": "shouldBeForwarded(\"invalid\")", "class.ng-pending": "shouldBeForwarded(\"pending\")" }, classAttribute: "kbq-form-field___EXPERIMENTAL" }, 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: "label", first: true, predicate: KbqLabel, descendants: true }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHint", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }, { propertyName: "error", predicate: KbqError }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true }], exportAs: ["kbqFormField"], ngImport: i0, template: "@if (hasLabel) {\n    <label\n        class=\"kbq-form-field_label\"\n        [attr.for]=\"control.id\"\n    >\n        <ng-content select=\"kbq-label\" />\n    </label>\n}\n\n<div\n    #connectionContainer\n    class=\"kbq-form-field_container\"\n    (click)=\"onContainerClick($event)\"\n>\n    @if (hasPrefix) {\n        <div class=\"kbq-form-field_prefix\">\n            <ng-content select=\"[kbqPrefix]\" />\n        </div>\n    }\n\n    <div class=\"kbq-form-field_control\">\n        <ng-content />\n    </div>\n\n    @if (hasSuffix || hasCleaner || hasPasswordToggle || hasStepper) {\n        <div class=\"kbq-form-field_suffix\">\n            <ng-content select=\"kbq-cleaner\" />\n\n            <ng-content select=\"kbq-password-toggle\" />\n\n            <ng-content select=\"kbq-stepper\" />\n\n            <ng-content select=\"[kbqSuffix]\" />\n        </div>\n    }\n</div>\n\n@if (hasHint || hasPasswordHint || hasError) {\n    <div class=\"kbq-form-field_hint\">\n        @if (invalid) {\n            <ng-content select=\"kbq-error\" />\n        }\n\n        <ng-content select=\"kbq-hint, kbq-password-hint\" />\n    </div>\n}\n", styles: [".kbq-form-field___EXPERIMENTAL{display:inline-block;width:100%}.kbq-form-field___EXPERIMENTAL .kbq-form-field_container{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;border-width:var(--kbq-form-field-size-border-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field___EXPERIMENTAL .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field___EXPERIMENTAL,.kbq-form-field___EXPERIMENTAL .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_no-borders .kbq-form-field_container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field___EXPERIMENTAL .kbq-form-field_control{flex-grow:1}.kbq-form-field___EXPERIMENTAL .kbq-form-field_label{display:flex;margin-bottom:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_prefix,.kbq-form-field___EXPERIMENTAL .kbq-form-field_suffix{display:flex;justify-content:center;align-items:center;gap:var(--kbq-size-xxs)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_prefix{margin-left:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_suffix{margin-right:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_hint{display:flex;flex-direction:column;margin-top:var(--kbq-size-s);gap:var(--kbq-size-xxs)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field___EXPERIMENTAL .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-tag-input,.kbq-form-field___EXPERIMENTAL .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field___EXPERIMENTAL .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input:-webkit-autofill,.kbq-form-field___EXPERIMENTAL .kbq-input:-webkit-autofill:hover,.kbq-form-field___EXPERIMENTAL .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___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_focused .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-form-field_container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid.kbq-form-field_focused .kbq-form-field_container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_disabled .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL .kbq-hint___EXPERIMENTAL{color:var(--kbq-form-field-hint-text)}.kbq-form-field___EXPERIMENTAL{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-form-field___EXPERIMENTAL .kbq-hint___EXPERIMENTAL:not(.kbq-password-hint___EXPERIMENTAL) .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-form-field___EXPERIMENTAL{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: var(--kbq-size-border-radius);--kbq-form-field-size-icon-size: var(--kbq-size-l);--kbq-form-field-size-icon-margin-left: var(--kbq-size-s);--kbq-form-field-size-icon-margin-right: var(--kbq-size-s);--kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);--kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);--kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);--kbq-form-field-default-background: var(--kbq-background-bg);--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-default-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-focused-background: var(--kbq-background-bg);--kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-form-field-states-error-border-color: var(--kbq-line-error);--kbq-form-field-states-error-background: var(--kbq-states-background-error-less);--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);--kbq-form-field-states-error-text: var(--kbq-foreground-error);--kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);--kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);--kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);--kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);--kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);--kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);--kbq-form-field-default-background: var(--kbq-background-bg);--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-default-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-focused-background: var(--kbq-background-bg);--kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-form-field-states-error-border-color: var(--kbq-line-error);--kbq-form-field-states-error-background: var(--kbq-states-background-error-less);--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);--kbq-form-field-states-error-text: var(--kbq-foreground-error);--kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);--kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);--kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);--kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);--kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);--kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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-size-3xl) - var(--kbq-size-border-width) * 2);padding:calc(var(--kbq-input-size-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-input-size-padding-horizontal)}.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-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size);font-weight:var(--kbq-typography-mono-normal-font-weight);line-height:var(--kbq-typography-mono-normal-line-height);font-family:var(--kbq-typography-mono-normal-font-family);text-transform:var(--kbq-typography-mono-normal-text-transform);font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing)}\n", ".kbq-input{--kbq-input-size-padding-horizontal: var(--kbq-size-m);--kbq-input-size-padding-vertical: var(--kbq-size-xs)}\n", ".kbq-form-field-type-tag-list{--kbq-tag-input-size-padding-left: var(--kbq-size-xxs);--kbq-tag-input-size-padding-right: var(--kbq-size-m);--kbq-tag-input-size-padding-vertical: var(--kbq-size-xxs);--kbq-tag-input-size-content-gap: var(--kbq-size-s)}\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{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: var(--kbq-size-xs);--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}.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) var(--kbq-textarea-size-padding-horizontal);-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)}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-textarea{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: var(--kbq-size-xs);--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqFormField, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-form-field', exportAs: 'kbqFormField', host: {
+                        class: 'kbq-form-field___EXPERIMENTAL',
+                        '[class.kbq-form-field_invalid]': 'invalid',
+                        '[class.kbq-form-field_focused]': 'focused',
+                        '[class.kbq-form-field_disabled]': 'disabled',
+                        '[class.kbq-form-field_no-borders]': 'shouldDisableBorders',
+                        '[class.ng-untouched]': 'shouldBeForwarded("untouched")',
+                        '[class.ng-touched]': 'shouldBeForwarded("touched")',
+                        '[class.ng-pristine]': 'shouldBeForwarded("pristine")',
+                        '[class.ng-dirty]': 'shouldBeForwarded("dirty")',
+                        '[class.ng-valid]': 'shouldBeForwarded("valid")',
+                        '[class.ng-invalid]': 'shouldBeForwarded("invalid")',
+                        '[class.ng-pending]': 'shouldBeForwarded("pending")',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(mouseenter)': 'mouseenter($event)',
+                        '(mouseleave)': 'mouseleave($event)'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }], template: "@if (hasLabel) {\n    <label\n        class=\"kbq-form-field_label\"\n        [attr.for]=\"control.id\"\n    >\n        <ng-content select=\"kbq-label\" />\n    </label>\n}\n\n<div\n    #connectionContainer\n    class=\"kbq-form-field_container\"\n    (click)=\"onContainerClick($event)\"\n>\n    @if (hasPrefix) {\n        <div class=\"kbq-form-field_prefix\">\n            <ng-content select=\"[kbqPrefix]\" />\n        </div>\n    }\n\n    <div class=\"kbq-form-field_control\">\n        <ng-content />\n    </div>\n\n    @if (hasSuffix || hasCleaner || hasPasswordToggle || hasStepper) {\n        <div class=\"kbq-form-field_suffix\">\n            <ng-content select=\"kbq-cleaner\" />\n\n            <ng-content select=\"kbq-password-toggle\" />\n\n            <ng-content select=\"kbq-stepper\" />\n\n            <ng-content select=\"[kbqSuffix]\" />\n        </div>\n    }\n</div>\n\n@if (hasHint || hasPasswordHint || hasError) {\n    <div class=\"kbq-form-field_hint\">\n        @if (invalid) {\n            <ng-content select=\"kbq-error\" />\n        }\n\n        <ng-content select=\"kbq-hint, kbq-password-hint\" />\n    </div>\n}\n", styles: [".kbq-form-field___EXPERIMENTAL{display:inline-block;width:100%}.kbq-form-field___EXPERIMENTAL .kbq-form-field_container{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;border-width:var(--kbq-form-field-size-border-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field___EXPERIMENTAL .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field___EXPERIMENTAL,.kbq-form-field___EXPERIMENTAL .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_no-borders .kbq-form-field_container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field___EXPERIMENTAL .kbq-form-field_control{flex-grow:1}.kbq-form-field___EXPERIMENTAL .kbq-form-field_label{display:flex;margin-bottom:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_prefix,.kbq-form-field___EXPERIMENTAL .kbq-form-field_suffix{display:flex;justify-content:center;align-items:center;gap:var(--kbq-size-xxs)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_prefix{margin-left:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_suffix{margin-right:var(--kbq-size-s)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_hint{display:flex;flex-direction:column;margin-top:var(--kbq-size-s);gap:var(--kbq-size-xxs)}.kbq-form-field___EXPERIMENTAL .kbq-form-field_container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field___EXPERIMENTAL .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-tag-input,.kbq-form-field___EXPERIMENTAL .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field___EXPERIMENTAL .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field___EXPERIMENTAL .kbq-input:-webkit-autofill,.kbq-form-field___EXPERIMENTAL .kbq-input:-webkit-autofill:hover,.kbq-form-field___EXPERIMENTAL .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___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_focused .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_focused .kbq-form-field_container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_invalid.kbq-form-field_focused .kbq-form-field_container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL.kbq-form-field_disabled .kbq-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.kbq-form-field_disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field___EXPERIMENTAL.kbq-form-field_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___EXPERIMENTAL .kbq-hint___EXPERIMENTAL{color:var(--kbq-form-field-hint-text)}.kbq-form-field___EXPERIMENTAL{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-form-field___EXPERIMENTAL .kbq-hint___EXPERIMENTAL:not(.kbq-password-hint___EXPERIMENTAL) .kbq-hint_text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-form-field___EXPERIMENTAL{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: var(--kbq-size-border-radius);--kbq-form-field-size-icon-size: var(--kbq-size-l);--kbq-form-field-size-icon-margin-left: var(--kbq-size-s);--kbq-form-field-size-icon-margin-right: var(--kbq-size-s);--kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);--kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);--kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);--kbq-form-field-default-background: var(--kbq-background-bg);--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-default-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-focused-background: var(--kbq-background-bg);--kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-form-field-states-error-border-color: var(--kbq-line-error);--kbq-form-field-states-error-background: var(--kbq-states-background-error-less);--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);--kbq-form-field-states-error-text: var(--kbq-foreground-error);--kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);--kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);--kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);--kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);--kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);--kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);--kbq-form-field-default-background: var(--kbq-background-bg);--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-default-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-focused-background: var(--kbq-background-bg);--kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);--kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-form-field-states-error-border-color: var(--kbq-line-error);--kbq-form-field-states-error-background: var(--kbq-states-background-error-less);--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);--kbq-form-field-states-error-text: var(--kbq-foreground-error);--kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);--kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);--kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);--kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);--kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);--kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);--kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);--kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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-size-3xl) - var(--kbq-size-border-width) * 2);padding:calc(var(--kbq-input-size-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-input-size-padding-horizontal)}.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-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size);font-weight:var(--kbq-typography-mono-normal-font-weight);line-height:var(--kbq-typography-mono-normal-line-height);font-family:var(--kbq-typography-mono-normal-font-family);text-transform:var(--kbq-typography-mono-normal-text-transform);font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing)}\n", ".kbq-input{--kbq-input-size-padding-horizontal: var(--kbq-size-m);--kbq-input-size-padding-vertical: var(--kbq-size-xs)}\n", ".kbq-form-field-type-tag-list{--kbq-tag-input-size-padding-left: var(--kbq-size-xxs);--kbq-tag-input-size-padding-right: var(--kbq-size-m);--kbq-tag-input-size-padding-vertical: var(--kbq-size-xxs);--kbq-tag-input-size-content-gap: var(--kbq-size-s)}\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{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: var(--kbq-size-xs);--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}.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) var(--kbq-textarea-size-padding-horizontal);-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)}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-textarea{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: var(--kbq-size-xs);--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}\n"] }]
+        }], propDecorators: { noBorders: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], _control: [{
+                type: ContentChild,
+                args: [KbqFormFieldControl]
+            }], connectionContainerRef: [{
+                type: ViewChild,
+                args: ['connectionContainer']
+            }], stepper: [{
+                type: ContentChild,
+                args: [KbqStepper]
+            }], cleaner: [{
+                type: ContentChild,
+                args: [KbqCleaner]
+            }], label: [{
+                type: ContentChild,
+                args: [KbqLabel]
+            }], passwordToggle: [{
+                type: ContentChild,
+                args: [KbqPasswordToggle]
+            }], hint: [{
+                type: ContentChildren,
+                args: [KbqHint]
+            }], passwordHint: [{
+                type: ContentChildren,
+                args: [KbqPasswordHint]
+            }], suffix: [{
+                type: ContentChildren,
+                args: [KbqSuffix]
+            }], prefix: [{
+                type: ContentChildren,
+                args: [KbqPrefix]
+            }], error: [{
+                type: ContentChildren,
+                args: [KbqError]
+            }] } });
+
+const COMPONENTS = [
+    KbqFormField,
+    KbqHint,
+    KbqError,
+    KbqPrefix,
+    KbqSuffix,
+    KbqCleaner,
+    KbqStepper,
+    KbqPasswordToggle,
+    KbqLabel,
+    KbqPasswordHint
+];
+class KbqFormFieldModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: KbqFormFieldModule, imports: [KbqFormField,
+            KbqHint,
+            KbqError,
+            KbqPrefix,
+            KbqSuffix,
+            KbqCleaner,
+            KbqStepper,
+            KbqPasswordToggle,
+            KbqLabel,
+            KbqPasswordHint], exports: [KbqFormField,
+            KbqHint,
+            KbqError,
+            KbqPrefix,
+            KbqSuffix,
+            KbqCleaner,
+            KbqStepper,
+            KbqPasswordToggle,
+            KbqLabel,
+            KbqPasswordHint] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqFormFieldModule, imports: [KbqCleaner,
+            KbqStepper,
+            KbqPasswordToggle,
+            KbqPasswordHint] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KBQ_FORM_FIELD_DEFAULT_OPTIONS, KbqCleaner, KbqError, KbqFormField, KbqFormFieldModule, KbqHint, KbqLabel, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqStepper, KbqSuffix, getKbqFormFieldMissingControlError };
+//# sourceMappingURL=koobiq-components-experimental-form-field.mjs.map