@koobiq/components-experimental 19.8.0 → 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.
- package/index.d.ts +2 -1
- package/package.json +5 -10
- package/fesm2022/koobiq-components-experimental-form-field.mjs +0 -742
- package/fesm2022/koobiq-components-experimental-form-field.mjs.map +0 -1
- package/form-field/_form-field-theme.scss +0 -93
- package/form-field/_hint-theme.scss +0 -59
- package/form-field/cleaner.d.ts +0 -14
- package/form-field/cleaner.scss +0 -5
- package/form-field/form-field-tokens.scss +0 -44
- package/form-field/form-field.d.ts +0 -187
- package/form-field/form-field.module.d.ts +0 -18
- package/form-field/form-field.scss +0 -89
- package/form-field/hint-tokens.scss +0 -23
- package/form-field/hint.d.ts +0 -55
- package/form-field/hint.scss +0 -18
- package/form-field/index.d.ts +0 -1
- package/form-field/label.d.ts +0 -8
- package/form-field/password-toggle.d.ts +0 -16
- package/form-field/password-toggle.scss +0 -13
- package/form-field/prefix.d.ts +0 -6
- package/form-field/public-api.d.ts +0 -9
- package/form-field/stepper.d.ts +0 -15
- package/form-field/stepper.scss +0 -24
- package/form-field/suffix.d.ts +0 -6
- package/public-api.d.ts +0 -1
|
@@ -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
|