@koobiq/components-experimental 19.8.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,742 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, booleanAttribute, Input, Directive, InjectionToken, ChangeDetectorRef, DestroyRef, ElementRef, afterNextRender, ContentChildren, ContentChild, ViewChild, NgModule } from '@angular/core';
3
- import { KBQ_FORM_FIELD_REF, KbqComponentColors } from '@koobiq/components/core';
4
- import * as i1 from '@koobiq/components/icon';
5
- import { KbqIconModule } from '@koobiq/components/icon';
6
- import { FocusMonitor } from '@angular/cdk/a11y';
7
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
8
- import { F8, ESCAPE } from '@koobiq/cdk/keycodes';
9
- import { KbqFormFieldControl } from '@koobiq/components/form-field';
10
- import { merge, EMPTY } from 'rxjs';
11
- import { NgClass } from '@angular/common';
12
- import { KbqInputPassword, KbqInput } from '@koobiq/components/input';
13
-
14
- /**
15
- * KbqCleaner to be placed in end of the form field.
16
- * Resets form control by click.
17
- */
18
- class KbqCleaner {
19
- constructor() {
20
- // @TODO fix types (#DS-2915)
21
- this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
22
- }
23
- /** Whether to display the cleaner. */
24
- get visible() {
25
- return !this.formField?.disabled && !!this.formField?.control?.ngControl?.value;
26
- }
27
- /** Clean the form field control. */
28
- clean(event) {
29
- event.stopPropagation();
30
- this.formField?.control?.ngControl?.reset();
31
- this.formField?.control?.focus();
32
- }
33
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
34
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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: `
35
- <i color="contrast-fade" kbq-icon-button="kbq-circle-xmark_16" [autoColor]="true"></i>
36
- `, 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: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
37
- }
38
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCleaner, decorators: [{
39
- type: Component,
40
- args: [{ selector: 'kbq-cleaner', imports: [KbqIconModule], template: `
41
- <i color="contrast-fade" kbq-icon-button="kbq-circle-xmark_16" [autoColor]="true"></i>
42
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqCleaner', host: {
43
- class: 'kbq-cleaner___EXPERIMENTAL',
44
- '(click)': 'clean($event)',
45
- '[style.visibility]': 'visible ? "visible" : "hidden"',
46
- '[attr.aria-hidden]': '!visible'
47
- }, styles: [".kbq-cleaner___EXPERIMENTAL{display:flex;align-items:center;justify-content:center}\n"] }]
48
- }] });
49
-
50
- let nextUniqueId$1 = 0;
51
- /** Hint text to be shown below the form field control. */
52
- class KbqHint {
53
- constructor() {
54
- /** Unique ID for the hint. */
55
- this.id = `kbq-hint-${nextUniqueId$1++}`;
56
- /** Component colors */
57
- this.colors = KbqComponentColors;
58
- this._fillTextOff = false;
59
- /** Makes the hint size smaller. */
60
- this.compact = false;
61
- }
62
- /** Hint color */
63
- get color() {
64
- return this._color;
65
- }
66
- set color(color) {
67
- this._color = color;
68
- }
69
- /** Disables `color` for the hint text. */
70
- get fillTextOff() {
71
- return this._fillTextOff;
72
- }
73
- set fillTextOff(fillTextOff) {
74
- this._fillTextOff = fillTextOff;
75
- }
76
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
77
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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 }); }
78
- }
79
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHint, decorators: [{
80
- type: Component,
81
- args: [{ selector: 'kbq-hint', exportAs: 'kbqHint', host: {
82
- class: 'kbq-hint___EXPERIMENTAL',
83
- '[attr.id]': 'id',
84
- '[class.kbq-error]': 'color === colors.Error',
85
- '[class.kbq-contrast-fade]': 'color === colors.ContrastFade',
86
- '[class.kbq-success]': 'color === colors.Success',
87
- '[class.kbq-warning]': 'color === colors.Warning',
88
- '[class.kbq-hint_fill-text-off]': 'fillTextOff',
89
- '[class.kbq-hint_compact]': 'compact'
90
- }, 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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"] }]
91
- }], propDecorators: { id: [{
92
- type: Input
93
- }], color: [{
94
- type: Input
95
- }], fillTextOff: [{
96
- type: Input,
97
- args: [{ transform: booleanAttribute }]
98
- }], compact: [{
99
- type: Input,
100
- args: [{ transform: booleanAttribute }]
101
- }] } });
102
- /** Error text to be shown below the form field control. */
103
- class KbqError extends KbqHint {
104
- /** @docs-private */
105
- /** Overrides the hint `color` property. */
106
- get color() {
107
- return KbqComponentColors.Error;
108
- }
109
- set color(_color) { }
110
- /** @docs-private */
111
- /** Overrides the hint `fillTextOff` property. */
112
- get fillTextOff() {
113
- return false;
114
- }
115
- set fillTextOff(_fillTextOff) { }
116
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqError, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
117
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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 }); }
118
- }
119
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqError, decorators: [{
120
- type: Component,
121
- args: [{ 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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"] }]
122
- }], propDecorators: { color: [{
123
- type: Input
124
- }], fillTextOff: [{
125
- type: Input
126
- }] } });
127
- /** Password hint to be shown below the password form field control. */
128
- class KbqPasswordHint extends KbqHint {
129
- constructor() {
130
- super(...arguments);
131
- /** Whether the form field control has an error. */
132
- this.hasError = false;
133
- // @TODO fix types (#DS-2915)
134
- this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
135
- }
136
- /** @docs-private */
137
- /** Overrides the hint `fillTextOff` property. */
138
- get fillTextOff() {
139
- return true;
140
- }
141
- set fillTextOff(_fillTextOff) { }
142
- /** @docs-private */
143
- /** Overrides the hint `color` property. */
144
- get color() {
145
- if (this.formField?.invalid && this.hasError) {
146
- return KbqComponentColors.Error;
147
- }
148
- if ((!this.formField?.invalid && !this.hasError) || !this.hasError) {
149
- return KbqComponentColors.Success;
150
- }
151
- return KbqComponentColors.ContrastFade;
152
- }
153
- set color(_color) { }
154
- /** The form field hint icon. */
155
- get icon() {
156
- return this.hasError ? 'kbq-xmark-s_16' : 'kbq-check-s_16';
157
- }
158
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPasswordHint, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
159
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", 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: `
160
- <i kbq-icon="" [ngClass]="icon"></i>
161
-
162
- <span class="kbq-hint__text">
163
- <ng-content />
164
- </span>
165
- `, isInline: true, 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
166
- }
167
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPasswordHint, decorators: [{
168
- type: Component,
169
- args: [{ selector: 'kbq-password-hint', imports: [NgClass, KbqIconModule], template: `
170
- <i kbq-icon="" [ngClass]="icon"></i>
171
-
172
- <span class="kbq-hint__text">
173
- <ng-content />
174
- </span>
175
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
176
- class: 'kbq-password-hint___EXPERIMENTAL'
177
- }, 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.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)}.kbq-hint___EXPERIMENTAL.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint___EXPERIMENTAL.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)}.kbq-hint___EXPERIMENTAL.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint___EXPERIMENTAL.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)}.kbq-hint___EXPERIMENTAL.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint___EXPERIMENTAL.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)}.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.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)}.kbq-hint___EXPERIMENTAL .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-hint___EXPERIMENTAL.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);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);--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"] }]
178
- }], propDecorators: { hasError: [{
179
- type: Input,
180
- args: [{ transform: booleanAttribute }]
181
- }], fillTextOff: [{
182
- type: Input
183
- }], color: [{
184
- type: Input
185
- }] } });
186
-
187
- let nextUniqueId = 0;
188
- /** Label for the form field. */
189
- class KbqLabel {
190
- constructor() {
191
- /** Unique id for the label. */
192
- this.id = `kbq-label-${nextUniqueId++}`;
193
- }
194
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
195
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqLabel, isStandalone: true, selector: "kbq-label", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "kbq-label___EXPERIMENTAL" }, ngImport: i0 }); }
196
- }
197
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLabel, decorators: [{
198
- type: Directive,
199
- args: [{
200
- selector: 'kbq-label',
201
- host: {
202
- class: 'kbq-label___EXPERIMENTAL',
203
- '[attr.id]': 'id'
204
- }
205
- }]
206
- }], propDecorators: { id: [{
207
- type: Input
208
- }] } });
209
-
210
- const getKbqPasswordToggleMissingControlError = () => {
211
- return Error('kbq-password-toggle should use with kbqInputPassword');
212
- };
213
- /** Component which changes password visibility. */
214
- class KbqPasswordToggle {
215
- constructor() {
216
- // @TODO fix types (#DS-2915)
217
- this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
218
- }
219
- /** Form field password control. */
220
- get control() {
221
- const control = this.formField?.control;
222
- if (!(control instanceof KbqInputPassword)) {
223
- throw getKbqPasswordToggleMissingControlError();
224
- }
225
- return control;
226
- }
227
- /** The icon selector. */
228
- get icon() {
229
- return this.control.elementType === 'password' ? 'kbq-eye_16' : 'kbq-eye-slash_16';
230
- }
231
- /** Whether to display the password toggle. */
232
- get visible() {
233
- return !this.formField?.disabled;
234
- }
235
- /** Toggles the password visibility. */
236
- toggleType(event) {
237
- event.stopPropagation();
238
- this.control.toggleType();
239
- }
240
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
241
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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: `
242
- <i color="contrast-fade" kbq-icon-button="" [ngClass]="icon" [autoColor]="true"></i>
243
- `, 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: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
244
- }
245
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPasswordToggle, decorators: [{
246
- type: Component,
247
- args: [{ selector: `kbq-password-toggle`, imports: [NgClass, KbqIconModule], template: `
248
- <i color="contrast-fade" kbq-icon-button="" [ngClass]="icon" [autoColor]="true"></i>
249
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqPasswordToggle', host: {
250
- class: 'kbq-password-toggle___EXPERIMENTAL',
251
- '[style.visibility]': 'visible ? "visible" : "hidden"',
252
- '[attr.aria-hidden]': '!visible',
253
- '(click)': 'toggleType($event)',
254
- '(keydown.ENTER)': 'toggleType($event)',
255
- '(keydown.SPACE)': 'toggleType($event)'
256
- }, 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"] }]
257
- }] });
258
-
259
- /** KbqPrefix to be placed in front of the form field. */
260
- class KbqPrefix {
261
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
262
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPrefix, isStandalone: true, selector: "[kbqPrefix]", host: { classAttribute: "kbq-prefix___EXPERIMENTAL" }, ngImport: i0 }); }
263
- }
264
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPrefix, decorators: [{
265
- type: Directive,
266
- args: [{
267
- selector: '[kbqPrefix]',
268
- host: {
269
- class: 'kbq-prefix___EXPERIMENTAL'
270
- }
271
- }]
272
- }] });
273
-
274
- const getKbqStepperToggleMissingControlError = () => {
275
- return Error('kbq-stepper should use with kbqNumberInput');
276
- };
277
- /** Component which allow to increment or decrement number value. */
278
- class KbqStepper {
279
- constructor() {
280
- // @TODO fix types (#DS-2915)
281
- this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
282
- /** Whether the stepper is visible.
283
- * @deprecated stepper should be always visible when provided, so this parameter is redundant */
284
- this.visible = true;
285
- }
286
- /** Form field number control. */
287
- get control() {
288
- const control = this.formField?.control;
289
- if (!(control instanceof KbqInput && control.numberInput)) {
290
- throw getKbqStepperToggleMissingControlError();
291
- }
292
- return control.numberInput;
293
- }
294
- stepUp(event) {
295
- event.stopPropagation();
296
- this.control.stepUp(this.control.step);
297
- }
298
- stepDown(event) {
299
- event.stopPropagation();
300
- this.control.stepDown(this.control.step);
301
- }
302
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
303
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqStepper, isStandalone: true, selector: "kbq-stepper", host: { classAttribute: "kbq-stepper___EXPERIMENTAL" }, exportAs: ["kbqStepper"], ngImport: i0, template: `
304
- <i
305
- class="kbq-stepper__step-up"
306
- color="contrast-fade"
307
- kbq-icon-button="kbq-chevron-up-s_16"
308
- [tabindex]="-1"
309
- [autoColor]="true"
310
- [disabled]="control.disabled"
311
- (mousedown)="stepUp($event)"
312
- ></i>
313
- <i
314
- class="kbq-stepper__step-down"
315
- color="contrast-fade"
316
- kbq-icon-button="kbq-chevron-down-s_16"
317
- [tabindex]="-1"
318
- [autoColor]="true"
319
- [disabled]="control.disabled"
320
- (mousedown)="stepDown($event)"
321
- ></i>
322
- `, isInline: true, styles: [".kbq-stepper___EXPERIMENTAL{--kbq-form-field-size-icon-button-size: var(--kbq-size-3xl);display:flex;flex-direction:column;justify-content:center;align-items:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-up{margin-bottom:-2px}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-down{margin-top:-2px}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-up,.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-down{width:var(--kbq-form-field-size-icon-button-size);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
323
- }
324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqStepper, decorators: [{
325
- type: Component,
326
- args: [{ selector: 'kbq-stepper', imports: [KbqIconModule], template: `
327
- <i
328
- class="kbq-stepper__step-up"
329
- color="contrast-fade"
330
- kbq-icon-button="kbq-chevron-up-s_16"
331
- [tabindex]="-1"
332
- [autoColor]="true"
333
- [disabled]="control.disabled"
334
- (mousedown)="stepUp($event)"
335
- ></i>
336
- <i
337
- class="kbq-stepper__step-down"
338
- color="contrast-fade"
339
- kbq-icon-button="kbq-chevron-down-s_16"
340
- [tabindex]="-1"
341
- [autoColor]="true"
342
- [disabled]="control.disabled"
343
- (mousedown)="stepDown($event)"
344
- ></i>
345
- `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqStepper', host: {
346
- class: 'kbq-stepper___EXPERIMENTAL'
347
- }, styles: [".kbq-stepper___EXPERIMENTAL{--kbq-form-field-size-icon-button-size: var(--kbq-size-3xl);display:flex;flex-direction:column;justify-content:center;align-items:center}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-up{margin-bottom:-2px}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-down{margin-top:-2px}.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-up,.kbq-stepper___EXPERIMENTAL .kbq-stepper__step-down{width:var(--kbq-form-field-size-icon-button-size);text-align:center}\n"] }]
348
- }] });
349
-
350
- /** KbqSuffix to be placed at the end of the form field. */
351
- class KbqSuffix {
352
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
353
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSuffix, isStandalone: true, selector: "[kbqSuffix]", host: { classAttribute: "kbq-suffix___EXPERIMENTAL" }, ngImport: i0 }); }
354
- }
355
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSuffix, decorators: [{
356
- type: Directive,
357
- args: [{
358
- selector: '[kbqSuffix]',
359
- host: {
360
- class: 'kbq-suffix___EXPERIMENTAL'
361
- }
362
- }]
363
- }] });
364
-
365
- /** Injection token that can be used to configure the default options for all kbq-form-field's. */
366
- const KBQ_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('KBQ_FORM_FIELD_DEFAULT_OPTIONS___EXPERIMENTAL');
367
- /** Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`. */
368
- const kbqFormFieldDefaultOptionsProvider = (options) => ({
369
- provide: KBQ_FORM_FIELD_DEFAULT_OPTIONS,
370
- useValue: options
371
- });
372
- /** @docs-private */
373
- const getKbqFormFieldMissingControlError = () => {
374
- return Error('kbq-form-field must contain a KbqFormFieldControl');
375
- };
376
- /** Container for form controls that applies styling and behavior. */
377
- class KbqFormField {
378
- /** The form field control. */
379
- get control() {
380
- if (!this._control) {
381
- throw getKbqFormFieldMissingControlError();
382
- }
383
- return this._control;
384
- }
385
- /**
386
- * Whether the form field control is focused.
387
- *
388
- * @docs-private
389
- */
390
- get focused() {
391
- return !!this.control?.focused;
392
- }
393
- /**
394
- * Whether the form field is hovered.
395
- *
396
- * @docs-private
397
- */
398
- get hovered() {
399
- return !!this._hovered;
400
- }
401
- /** Whether the form field is invalid. */
402
- get invalid() {
403
- return !!this.control?.errorState;
404
- }
405
- /**
406
- * Whether the form-field contains kbq-hint.
407
- *
408
- * @docs-private
409
- */
410
- get hasHint() {
411
- return this.hint?.length > 0;
412
- }
413
- /**
414
- * Whether the form-field contains kbq-password-hint.
415
- *
416
- * @docs-private
417
- */
418
- get hasPasswordHint() {
419
- return this.passwordHint?.length > 0;
420
- }
421
- /**
422
- * Whether the form-field contains kbq-password-toggle.
423
- *
424
- * @docs-private
425
- */
426
- get hasPasswordToggle() {
427
- return !!this.passwordToggle;
428
- }
429
- /**
430
- * Whether the form-field contains kbq-label.
431
- *
432
- * @docs-private
433
- */
434
- get hasLabel() {
435
- return !!this.label;
436
- }
437
- /**
438
- * Whether the form-field contains kbqSuffix.
439
- *
440
- * @docs-private
441
- */
442
- get hasSuffix() {
443
- return this.suffix?.length > 0;
444
- }
445
- /**
446
- * Whether the form-field contains kbqPrefix.
447
- *
448
- * @docs-private
449
- */
450
- get hasPrefix() {
451
- return this.prefix?.length > 0;
452
- }
453
- /**
454
- * Whether the form-field contains kbq-cleaner.
455
- *
456
- * @docs-private
457
- */
458
- get hasCleaner() {
459
- return !!this.cleaner;
460
- }
461
- /**
462
- * Whether the form-field contains kbq-stepper.
463
- *
464
- * @docs-private
465
- */
466
- get hasStepper() {
467
- return !!this.stepper;
468
- }
469
- /**
470
- * Whether the form-field contains kbq-error.
471
- *
472
- * @docs-private
473
- */
474
- get hasError() {
475
- return this.error.length > 0;
476
- }
477
- /** Whether the form field is disabled. */
478
- get disabled() {
479
- return !!this.control?.disabled;
480
- }
481
- /**
482
- * Current focus origin state.
483
- *
484
- * @docs-private
485
- */
486
- get focusOrigin() {
487
- return this._focusOrigin;
488
- }
489
- constructor() {
490
- this.changeDetectorRef = inject(ChangeDetectorRef);
491
- this.destroyRef = inject(DestroyRef);
492
- this.elementRef = inject(ElementRef);
493
- this.defaultOptions = inject(KBQ_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
494
- this.focusMonitor = inject(FocusMonitor);
495
- /** Disables form field borders and shadows. */
496
- this.noBorders = this.defaultOptions?.noBorders;
497
- /**
498
- * @docs-private
499
- */
500
- this.canCleanerClearByEsc = true;
501
- this._hovered = false;
502
- this._focusOrigin = null;
503
- afterNextRender(() => {
504
- // Should be called after the view has been initialized
505
- this.changeDetectorRef.detectChanges();
506
- });
507
- }
508
- ngAfterContentInit() {
509
- this.initializeControl();
510
- this.initializePrefixAndSuffix();
511
- this.initializeHint();
512
- }
513
- ngAfterViewInit() {
514
- this.runFocusMonitor();
515
- }
516
- ngOnDestroy() {
517
- this.stopFocusMonitor();
518
- }
519
- /** Focuses the control. */
520
- focus(options) {
521
- this.control.focus(options);
522
- }
523
- /**
524
- * @deprecated Use `focus` instead.
525
- */
526
- focusViaKeyboard(options) {
527
- this.control.focus(options);
528
- }
529
- /**
530
- * Runs the focus monitor for the form field.
531
- *
532
- * @docs-private
533
- */
534
- runFocusMonitor() {
535
- this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => {
536
- this._focusOrigin = origin;
537
- });
538
- }
539
- /**
540
- * Stops the focus monitor for the form field.
541
- *
542
- * @docs-private
543
- */
544
- stopFocusMonitor() {
545
- this.focusMonitor.stopMonitoring(this.elementRef);
546
- }
547
- /** Handles a click on the control's container. */
548
- onContainerClick(event) {
549
- if (this.control.onContainerClick) {
550
- this.control.onContainerClick(event);
551
- }
552
- }
553
- /**
554
- * Handles keydown events.
555
- *
556
- * @docs-private
557
- */
558
- onKeyDown(event) {
559
- // @TODO should move into KbqPasswordToggle (#DS-2910)
560
- if (this.control.controlType === 'input-password' && event.altKey && event.keyCode === F8) {
561
- this.control.toggleType();
562
- }
563
- // @TODO should move into KbqCleaner (#DS-2910)
564
- if (this.canCleanerClearByEsc && event.keyCode === ESCAPE && this.focused && this.hasCleaner) {
565
- this.control?.ngControl?.reset();
566
- event.preventDefault();
567
- }
568
- }
569
- /**
570
- * Handles mouseenter events.
571
- *
572
- * @docs-private
573
- */
574
- mouseenter(_event) {
575
- this._hovered = true;
576
- }
577
- /**
578
- * Handles mouseleave events.
579
- *
580
- * @docs-private
581
- */
582
- mouseleave(_event) {
583
- this._hovered = false;
584
- }
585
- /**
586
- * Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.
587
- */
588
- getConnectedOverlayOrigin() {
589
- return this.connectionContainerRef || this.elementRef;
590
- }
591
- /**
592
- * Determines whether a class from the AbstractControlDirective should be forwarded to the host element.
593
- *
594
- * @docs-private
595
- */
596
- shouldBeForwarded(property) {
597
- return this.control.ngControl?.[property];
598
- }
599
- /** Initializes the kbqPrefix and kbqSuffix containers. */
600
- initializePrefixAndSuffix() {
601
- // Mark the form field as dirty whenever the prefix or suffix children change. This is necessary because we
602
- // conditionally display the prefix/suffix containers based on whether there is projected content.
603
- merge(this.prefix.changes, this.suffix.changes)
604
- .pipe(takeUntilDestroyed(this.destroyRef))
605
- .subscribe(() => {
606
- this.changeDetectorRef.markForCheck();
607
- });
608
- }
609
- /** Initializes the KbqHint, KbqError and KbqPasswordHint containers. */
610
- initializeHint() {
611
- merge(this.hint.changes, this.error.changes, this.passwordHint.changes)
612
- .pipe(takeUntilDestroyed(this.destroyRef))
613
- .subscribe(() => {
614
- this.changeDetectorRef.markForCheck();
615
- });
616
- }
617
- /** Initializes the form field control. */
618
- initializeControl() {
619
- if (this.control.controlType) {
620
- this.elementRef.nativeElement.classList.add(`kbq-form-field-type-${this.control.controlType}`);
621
- }
622
- merge(this.control.stateChanges, this.control.ngControl?.valueChanges || EMPTY)
623
- .pipe(takeUntilDestroyed(this.destroyRef))
624
- .subscribe(() => {
625
- this.changeDetectorRef.markForCheck();
626
- });
627
- }
628
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
629
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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_disabled": "disabled", "class.kbq-form-field_no-borders": "noBorders", "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 class=\"kbq-form-field__label\" [attr.for]=\"control.id\">\n <ng-content select=\"kbq-label\" />\n </label>\n}\n\n<div #connectionContainer class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\">\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);padding-left:var(--kbq-form-field-size-container-left-padding);padding-right:var(--kbq-form-field-size-container-right-padding)}.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{width:100%;flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field___EXPERIMENTAL .kbq-form-field__control:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field___EXPERIMENTAL .kbq-form-field__control:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field___EXPERIMENTAL .kbq-form-field__control .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-form-field__control .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.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__suffix:has(>.kbq-stepper___EXPERIMENTAL){margin-right:0}.kbq-form-field___EXPERIMENTAL .kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top);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.cdk-focused:not(.kbq-form-field-type-select) .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .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.cdk-focused:not(.kbq-form-field-type-select) .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.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.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .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_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_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.kbq-empty{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 .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field___EXPERIMENTAL .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field___EXPERIMENTAL{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-style:var(--kbq-typography-text-compact-font-style);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-left: var(--kbq-size-xxs);--kbq-form-field-hint-size-margin-top: var(--kbq-size-m);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-form-field-size-container-right-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-form-field-size-infix-left-padding: var(--kbq-size-xs);--kbq-form-field-size-infix-right-padding: var(--kbq-size-xxs);--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-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-less);--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){--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-secondary)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none}.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}.kbq-input{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:var(--kbq-input-size-padding-vertical) var(--kbq-input-size-padding-horizontal)}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-style:var(--kbq-typography-text-normal-font-style);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,.kbq-input.kbq-input_monospace{font-size:var(--kbq-typography-mono-normal-font-size);font-style:var(--kbq-typography-mono-normal-font-style);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);font-variant-ligatures:none;font-feature-settings:\"liga\" 0,\"clig\" 0,\"calt\" 0}\n", ".kbq-input{--kbq-input-size-padding-horizontal: 0;--kbq-input-size-padding-vertical: var(--kbq-form-field-size-container-vertical-padding)}\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:136px}\n", ".kbq-form-field-type-datepicker{width:136px}\n", ":where(.kbq-textarea){--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: 11px;--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%238a8fa8\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}:where(.kbq-dark .kbq-textarea){--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%23626884\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}.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.kbq-textarea-resizable::-webkit-resizer{background:var(--kbq-textarea-resizer-icon) center no-repeat}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\n", ":where(.kbq-textarea){--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: 11px;--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%238a8fa8\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}:where(.kbq-dark .kbq-textarea){--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%23626884\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
630
- }
631
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormField, decorators: [{
632
- type: Component,
633
- args: [{ selector: 'kbq-form-field', exportAs: 'kbqFormField', host: {
634
- class: 'kbq-form-field___EXPERIMENTAL',
635
- '[class.kbq-form-field_invalid]': 'invalid',
636
- '[class.kbq-form-field_disabled]': 'disabled',
637
- '[class.kbq-form-field_no-borders]': 'noBorders',
638
- '[class.ng-untouched]': 'shouldBeForwarded("untouched")',
639
- '[class.ng-touched]': 'shouldBeForwarded("touched")',
640
- '[class.ng-pristine]': 'shouldBeForwarded("pristine")',
641
- '[class.ng-dirty]': 'shouldBeForwarded("dirty")',
642
- '[class.ng-valid]': 'shouldBeForwarded("valid")',
643
- '[class.ng-invalid]': 'shouldBeForwarded("invalid")',
644
- '[class.ng-pending]': 'shouldBeForwarded("pending")',
645
- '(keydown)': 'onKeyDown($event)',
646
- '(mouseenter)': 'mouseenter($event)',
647
- '(mouseleave)': 'mouseleave($event)'
648
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }], template: "@if (hasLabel) {\n <label class=\"kbq-form-field__label\" [attr.for]=\"control.id\">\n <ng-content select=\"kbq-label\" />\n </label>\n}\n\n<div #connectionContainer class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\">\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);padding-left:var(--kbq-form-field-size-container-left-padding);padding-right:var(--kbq-form-field-size-container-right-padding)}.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{width:100%;flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field___EXPERIMENTAL .kbq-form-field__control:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field___EXPERIMENTAL .kbq-form-field__control:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field___EXPERIMENTAL .kbq-form-field__control .kbq-input,.kbq-form-field___EXPERIMENTAL .kbq-form-field__control .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.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__suffix:has(>.kbq-stepper___EXPERIMENTAL){margin-right:0}.kbq-form-field___EXPERIMENTAL .kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top);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.cdk-focused:not(.kbq-form-field-type-select) .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .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.cdk-focused:not(.kbq-form-field-type-select) .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-textarea::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select) .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.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.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field___EXPERIMENTAL.cdk-focused:not(.kbq-form-field-type-select).kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field___EXPERIMENTAL.cdk-keyboard-focused.kbq-form-field-type-select.kbq-form-field_invalid .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_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_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.kbq-empty{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 .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field___EXPERIMENTAL .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field___EXPERIMENTAL{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-style:var(--kbq-typography-text-compact-font-style);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-left: var(--kbq-size-xxs);--kbq-form-field-hint-size-margin-top: var(--kbq-size-m);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-form-field-size-container-right-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-form-field-size-infix-left-padding: var(--kbq-size-xs);--kbq-form-field-size-infix-right-padding: var(--kbq-size-xxs);--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-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-less);--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){--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-secondary)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none}.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}.kbq-input{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:var(--kbq-input-size-padding-vertical) var(--kbq-input-size-padding-horizontal)}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-style:var(--kbq-typography-text-normal-font-style);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,.kbq-input.kbq-input_monospace{font-size:var(--kbq-typography-mono-normal-font-size);font-style:var(--kbq-typography-mono-normal-font-style);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);font-variant-ligatures:none;font-feature-settings:\"liga\" 0,\"clig\" 0,\"calt\" 0}\n", ".kbq-input{--kbq-input-size-padding-horizontal: 0;--kbq-input-size-padding-vertical: var(--kbq-form-field-size-container-vertical-padding)}\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:136px}\n", ".kbq-form-field-type-datepicker{width:136px}\n", ":where(.kbq-textarea){--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: 11px;--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%238a8fa8\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}:where(.kbq-dark .kbq-textarea){--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%23626884\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}.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.kbq-textarea-resizable::-webkit-resizer{background:var(--kbq-textarea-resizer-icon) center no-repeat}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\n", ":where(.kbq-textarea){--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: 11px;--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%238a8fa8\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}:where(.kbq-dark .kbq-textarea){--kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path fill=\"%23626884\" d=\"m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z\"/></svg>')}\n"] }]
649
- }], ctorParameters: () => [], propDecorators: { noBorders: [{
650
- type: Input,
651
- args: [{ transform: booleanAttribute }]
652
- }], _control: [{
653
- type: ContentChild,
654
- args: [KbqFormFieldControl]
655
- }], connectionContainerRef: [{
656
- type: ViewChild,
657
- args: ['connectionContainer']
658
- }], stepper: [{
659
- type: ContentChild,
660
- args: [KbqStepper]
661
- }], cleaner: [{
662
- type: ContentChild,
663
- args: [KbqCleaner]
664
- }], label: [{
665
- type: ContentChild,
666
- args: [KbqLabel]
667
- }], passwordToggle: [{
668
- type: ContentChild,
669
- args: [KbqPasswordToggle]
670
- }], hint: [{
671
- type: ContentChildren,
672
- args: [KbqHint]
673
- }], passwordHint: [{
674
- type: ContentChildren,
675
- args: [KbqPasswordHint]
676
- }], suffix: [{
677
- type: ContentChildren,
678
- args: [KbqSuffix]
679
- }], prefix: [{
680
- type: ContentChildren,
681
- args: [KbqPrefix]
682
- }], error: [{
683
- type: ContentChildren,
684
- args: [KbqError]
685
- }] } });
686
-
687
- const COMPONENTS = [
688
- KbqFormField,
689
- KbqHint,
690
- KbqError,
691
- KbqPrefix,
692
- KbqSuffix,
693
- KbqCleaner,
694
- KbqStepper,
695
- KbqPasswordToggle,
696
- KbqLabel,
697
- KbqPasswordHint
698
- ];
699
- /**
700
- * @deprecated Will be removed in the next major release.
701
- * Module functionality has been moved to the original package (`@koobiq/components/form-field`).
702
- */
703
- class KbqFormFieldModule {
704
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
705
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqFormFieldModule, imports: [KbqFormField,
706
- KbqHint,
707
- KbqError,
708
- KbqPrefix,
709
- KbqSuffix,
710
- KbqCleaner,
711
- KbqStepper,
712
- KbqPasswordToggle,
713
- KbqLabel,
714
- KbqPasswordHint], exports: [KbqFormField,
715
- KbqHint,
716
- KbqError,
717
- KbqPrefix,
718
- KbqSuffix,
719
- KbqCleaner,
720
- KbqStepper,
721
- KbqPasswordToggle,
722
- KbqLabel,
723
- KbqPasswordHint] }); }
724
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormFieldModule, imports: [KbqCleaner,
725
- KbqStepper,
726
- KbqPasswordToggle,
727
- KbqPasswordHint] }); }
728
- }
729
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormFieldModule, decorators: [{
730
- type: NgModule,
731
- args: [{
732
- imports: COMPONENTS,
733
- exports: COMPONENTS
734
- }]
735
- }] });
736
-
737
- /**
738
- * Generated bundle index. Do not edit.
739
- */
740
-
741
- export { KBQ_FORM_FIELD_DEFAULT_OPTIONS, KbqCleaner, KbqError, KbqFormField, KbqFormFieldModule, KbqHint, KbqLabel, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqStepper, KbqSuffix, getKbqFormFieldMissingControlError, kbqFormFieldDefaultOptionsProvider };
742
- //# sourceMappingURL=koobiq-components-experimental-form-field.mjs.map