@koobiq/components 18.31.0 → 18.33.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/accordion/accordion-trigger.component.scss +2 -0
- package/actions-panel/actions-panel-config.d.ts +2 -0
- package/actions-panel/actions-panel.d.ts +3 -57
- package/autocomplete/autocomplete-trigger.directive.d.ts +3 -4
- package/autocomplete/autocomplete.component.d.ts +1 -0
- package/autocomplete/autocomplete.module.d.ts +1 -1
- package/button-toggle/button-toggle.module.d.ts +3 -4
- package/code-block/code-block-highlight.d.ts +1 -2
- package/code-block/code-block.d.ts +57 -10
- package/core/common-behaviors/color.d.ts +3 -0
- package/core/common-behaviors/common-module.d.ts +16 -3
- package/core/form-field/form-field-ref.d.ts +5 -3
- package/core/option/action-container.d.ts +5 -0
- package/core/option/action-container.scss +45 -0
- package/core/option/action.d.ts +1 -4
- package/core/option/action.scss +13 -12
- package/core/option/index.d.ts +1 -0
- package/core/option/option.d.ts +6 -5
- package/core/public-api.d.ts +1 -0
- package/core/styles/common/_select.scss +60 -37
- package/core/styles/common/_tokens.scss +2 -0
- package/core/styles/theming/_theming.scss +0 -4
- package/core/tokens/index.d.ts +1 -0
- package/core/tokens/window.d.ts +5 -0
- package/core/validation/validation.d.ts +23 -2
- package/datepicker/datepicker-input.scss +1 -5
- package/dropdown/dropdown-trigger.directive.d.ts +1 -0
- package/ellipsis-center/ellipsis-center.directive.d.ts +7 -1
- package/esm2022/accordion/accordion-trigger.component.mjs +2 -2
- package/esm2022/accordion/accordion.component.mjs +2 -2
- package/esm2022/actions-panel/actions-panel-config.mjs +1 -1
- package/esm2022/actions-panel/actions-panel.mjs +16 -113
- package/esm2022/alert/alert.component.mjs +2 -2
- package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +9 -13
- package/esm2022/autocomplete/autocomplete.component.mjs +10 -2
- package/esm2022/autocomplete/autocomplete.module.mjs +5 -11
- package/esm2022/badge/badge.component.mjs +2 -2
- package/esm2022/breadcrumbs/breadcrumbs.mjs +3 -6
- package/esm2022/button/button.component.mjs +4 -3
- package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
- package/esm2022/button-toggle/button-toggle.module.mjs +5 -6
- package/esm2022/checkbox/checkbox.mjs +2 -2
- package/esm2022/code-block/code-block-highlight.mjs +8 -12
- package/esm2022/code-block/code-block.mjs +60 -18
- package/esm2022/core/common-behaviors/color.mjs +4 -1
- package/esm2022/core/common-behaviors/common-module.mjs +19 -26
- package/esm2022/core/form-field/form-field-ref.mjs +3 -4
- package/esm2022/core/option/action-container.mjs +23 -0
- package/esm2022/core/option/action.mjs +16 -30
- package/esm2022/core/option/index.mjs +2 -1
- package/esm2022/core/option/optgroup.mjs +2 -2
- package/esm2022/core/option/option.mjs +10 -8
- package/esm2022/core/public-api.mjs +2 -1
- package/esm2022/core/tokens/index.mjs +2 -0
- package/esm2022/core/tokens/window.mjs +19 -0
- package/esm2022/core/utils/utils.mjs +2 -1
- package/esm2022/core/validation/validation.mjs +21 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-body.component.mjs +3 -3
- package/esm2022/datepicker/calendar-header.component.mjs +3 -3
- package/esm2022/datepicker/datepicker-input.directive.mjs +5 -1
- package/esm2022/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/dl/dl.component.mjs +2 -2
- package/esm2022/dropdown/dropdown-trigger.directive.mjs +4 -3
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +8 -1
- package/esm2022/empty-state/empty-state.component.mjs +2 -2
- package/esm2022/file-upload/multiple-file-upload.component.mjs +4 -4
- package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
- package/esm2022/filter-bar/filter-bar.mjs +21 -5
- package/esm2022/filter-bar/filter-bar.types.mjs +1 -1
- package/esm2022/filter-bar/filter-reset.mjs +2 -1
- package/esm2022/filter-bar/filter-search.mjs +2 -2
- package/esm2022/filter-bar/filters.mjs +4 -3
- package/esm2022/filter-bar/pipe-add.mjs +2 -2
- package/esm2022/filter-bar/pipes/base-pipe.mjs +7 -2
- package/esm2022/filter-bar/pipes/pipe-date.mjs +6 -12
- package/esm2022/filter-bar/pipes/pipe-datetime.mjs +6 -12
- package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +2 -2
- package/esm2022/filter-bar/pipes/pipe-multi-tree-select.mjs +2 -2
- package/esm2022/filter-bar/pipes/pipe-select.mjs +2 -2
- package/esm2022/filter-bar/pipes/pipe-text.mjs +2 -2
- package/esm2022/filter-bar/pipes/pipe-tree-select.mjs +2 -2
- package/esm2022/form-field/cleaner.mjs +11 -6
- package/esm2022/form-field/error.mjs +20 -0
- package/esm2022/form-field/fieldset.mjs +84 -0
- package/esm2022/form-field/form-field-control.mjs +2 -2
- package/esm2022/form-field/form-field.mjs +247 -74
- package/esm2022/form-field/form-field.module.mjs +59 -47
- package/esm2022/form-field/hint.mjs +10 -18
- package/esm2022/form-field/label.mjs +19 -0
- package/esm2022/form-field/password-hint.mjs +7 -6
- package/esm2022/form-field/password-toggle.mjs +52 -27
- package/esm2022/form-field/prefix.mjs +9 -3
- package/esm2022/form-field/public-api.mjs +5 -2
- package/esm2022/form-field/reactive-password-hint.mjs +65 -0
- package/esm2022/form-field/stepper.mjs +34 -16
- package/esm2022/form-field/suffix.mjs +8 -3
- package/esm2022/form-field/validate.directive.mjs +16 -19
- package/esm2022/input/input-number.mjs +7 -2
- package/esm2022/input/input-password.mjs +2 -2
- package/esm2022/input/input.module.mjs +1 -5
- package/esm2022/list/list-selection.component.mjs +5 -5
- package/esm2022/list/list.component.mjs +2 -2
- package/esm2022/list/list.module.mjs +12 -5
- package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
- package/esm2022/modal/modal-util.mjs +2 -1
- package/esm2022/modal/modal.component.mjs +2 -2
- package/esm2022/navbar/navbar-item.component.mjs +12 -13
- package/esm2022/navbar/navbar.component.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
- package/esm2022/overflow-items/overflow-items.mjs +27 -10
- package/esm2022/popover/popover-confirm.component.mjs +3 -3
- package/esm2022/popover/popover.component.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.component.mjs +2 -2
- package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
- package/esm2022/radio/radio.component.mjs +2 -2
- package/esm2022/radio/radio.module.mjs +4 -5
- package/esm2022/risk-level/risk-level.component.mjs +2 -2
- package/esm2022/scrollbar/scrollbar.component.mjs +14 -11
- package/esm2022/scrollbar/scrollbar.directive.mjs +2 -1
- package/esm2022/select/select.component.mjs +42 -22
- package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
- package/esm2022/sidepanel/sidepanel.module.mjs +1 -5
- package/esm2022/splitter/splitter.component.mjs +5 -3
- package/esm2022/table/table.component.mjs +2 -2
- package/esm2022/tabs/paginated-tab-header.mjs +6 -2
- package/esm2022/tabs/tabs.module.mjs +1 -5
- package/esm2022/tags/tag-list.component.mjs +2 -2
- package/esm2022/textarea/textarea.component.mjs +7 -6
- package/esm2022/textarea/textarea.module.mjs +4 -5
- package/esm2022/timezone/timezone-option.component.mjs +2 -2
- package/esm2022/timezone/timezone-select.component.mjs +6 -4
- package/esm2022/toast/toast-animations.mjs +2 -2
- package/esm2022/toast/toast.component.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/esm2022/toggle/toggle.module.mjs +4 -5
- package/esm2022/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/top-bar/top-bar.mjs +2 -2
- package/esm2022/tree/padding.directive.mjs +8 -6
- package/esm2022/tree/toggle.mjs +2 -2
- package/esm2022/tree/tree-option.component.mjs +3 -3
- package/esm2022/tree/tree-selection.component.mjs +2 -2
- package/esm2022/tree/tree.mjs +2 -2
- package/esm2022/tree/tree.module.mjs +8 -5
- package/esm2022/tree-select/tree-select.component.mjs +50 -31
- package/fesm2022/koobiq-components-accordion.mjs +4 -4
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-actions-panel.mjs +16 -112
- package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +2 -2
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +21 -24
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +2 -2
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-breadcrumbs.mjs +2 -5
- package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +7 -7
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +3 -2
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +2 -2
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +65 -28
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +109 -69
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +10 -6
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +2 -2
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +5 -4
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-ellipsis-center.mjs +7 -0
- package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +2 -2
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +5 -5
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +45 -35
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +611 -220
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-input.mjs +8 -6
- package/fesm2022/koobiq-components-input.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +17 -10
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +3 -2
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +15 -16
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-overflow-items.mjs +26 -9
- package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +4 -4
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +2 -2
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +6 -6
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-risk-level.mjs +2 -2
- package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar.mjs +14 -10
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +42 -22
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +3 -6
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter.mjs +4 -2
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-table.mjs +2 -2
- package/fesm2022/koobiq-components-table.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +5 -5
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +2 -2
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +9 -8
- package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +7 -5
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +3 -3
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +6 -6
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +2 -2
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-top-bar.mjs +2 -2
- package/fesm2022/koobiq-components-top-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +50 -31
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +22 -17
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/file-upload/_file-upload-theme.scss +9 -0
- package/file-upload/multiple-file-upload.component.d.ts +1 -1
- package/filter-bar/filter-bar.d.ts +2 -0
- package/filter-bar/filter-bar.types.d.ts +2 -2
- package/form-field/_fiedset-theme.scss +13 -0
- package/form-field/_form-field-theme.scss +29 -13
- package/form-field/_hint-theme.scss +21 -22
- package/form-field/cleaner.d.ts +5 -1
- package/form-field/cleaner.scss +1 -4
- package/form-field/error.d.ts +8 -0
- package/form-field/fieldset-tokens.scss +5 -0
- package/form-field/fieldset.d.ts +27 -0
- package/form-field/fieldset.scss +93 -0
- package/form-field/form-field-control.d.ts +1 -1
- package/form-field/form-field-tokens.scss +13 -3
- package/form-field/form-field.d.ts +210 -22
- package/form-field/form-field.module.d.ts +14 -12
- package/form-field/form-field.scss +58 -78
- package/form-field/hint.d.ts +5 -1
- package/form-field/hint.scss +3 -5
- package/form-field/label.d.ts +6 -0
- package/form-field/password-hint.d.ts +1 -1
- package/form-field/password-toggle.d.ts +25 -11
- package/form-field/password-toggle.scss +1 -2
- package/form-field/prefix.d.ts +2 -1
- package/form-field/public-api.d.ts +4 -1
- package/form-field/reactive-password-hint.d.ts +19 -0
- package/form-field/stepper.d.ts +20 -8
- package/form-field/stepper.scss +12 -11
- package/form-field/suffix.d.ts +2 -1
- package/form-field/validate.directive.d.ts +10 -12
- package/input/input-tokens.scss +2 -2
- package/input/input.module.d.ts +3 -4
- package/input/input.scss +1 -2
- package/list/_list-theme.scss +4 -1
- package/list/list.module.d.ts +2 -1
- package/list/list.scss +6 -12
- package/navbar/navbar-item.component.d.ts +3 -1
- package/overflow-items/overflow-items.d.ts +12 -5
- package/package.json +4 -4
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/radio/radio.module.d.ts +1 -2
- package/schematics/ng-add/index.js +3 -3
- package/scrollbar/scrollbar.component.d.ts +1 -0
- package/select/select-tokens.scss +5 -4
- package/select/select.component.d.ts +12 -3
- package/sidepanel/sidepanel.module.d.ts +5 -6
- package/splitter/splitter.component.d.ts +1 -0
- package/tabs/paginated-tab-header.d.ts +1 -0
- package/tabs/tabs.module.d.ts +5 -6
- package/tags/tag-list.scss +8 -4
- package/textarea/textarea.component.d.ts +1 -0
- package/textarea/textarea.module.d.ts +2 -3
- package/timepicker/timepicker.scss +1 -1
- package/toast/toast.component.scss +2 -0
- package/toggle/_toggle-theme.scss +10 -2
- package/toggle/toggle-tokens.scss +7 -1
- package/toggle/toggle.module.d.ts +1 -2
- package/toggle/toggle.scss +6 -6
- package/top-bar/top-bar.scss +48 -32
- package/tree/_tree-theme.scss +13 -2
- package/tree/padding.directive.d.ts +1 -1
- package/tree/tree-option.scss +12 -17
- package/tree/tree.module.d.ts +1 -1
- package/tree-select/tree-select.component.d.ts +10 -1
- package/esm2022/form-field/form-field-errors.mjs +0 -7
- package/form-field/form-field-errors.d.ts +0 -2
|
@@ -1,77 +1,61 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation,
|
|
2
|
+
import { Component, ViewEncapsulation, ChangeDetectionStrategy, booleanAttribute, Input, Directive, contentChild, ElementRef, computed, forwardRef, Optional, Inject, inject, ViewChild, DestroyRef, input, afterNextRender, EventEmitter, Output, InjectionToken, ChangeDetectorRef, ContentChild, ContentChildren, Attribute, Self, Host, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@koobiq/components/icon';
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
4
|
+
import { KbqIconModule, KbqIconButton } from '@koobiq/components/icon';
|
|
5
|
+
import { KbqColorDirective, KbqComponentColors, KBQ_FORM_FIELD_REF, PopUpTriggers, KBQ_VALIDATION } from '@koobiq/components/core';
|
|
6
|
+
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
6
7
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
7
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
|
-
import * as i1$
|
|
8
|
+
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
|
+
import * as i1$1 from '@angular/forms';
|
|
9
10
|
import { NgModel, FormControlName, FormControlDirective, RequiredValidator, NG_VALIDATORS } from '@angular/forms';
|
|
10
11
|
import { F8, ESCAPE } from '@koobiq/cdk/keycodes';
|
|
11
|
-
import {
|
|
12
|
-
import { EMPTY, merge } from 'rxjs';
|
|
12
|
+
import { merge, EMPTY } from 'rxjs';
|
|
13
13
|
import { startWith } from 'rxjs/operators';
|
|
14
|
-
import * as i2 from '@angular/common';
|
|
15
14
|
import { NgClass } from '@angular/common';
|
|
16
|
-
import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
|
|
15
|
+
import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
|
|
17
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Element to be placed in end of the form field.
|
|
19
|
+
* Resets form control by click.
|
|
20
|
+
*/
|
|
18
21
|
class KbqCleaner {
|
|
19
22
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqCleaner, selector: "kbq-cleaner", host: { classAttribute: "kbq-cleaner" }, exportAs: ["kbqCleaner"], ngImport: i0, template: `
|
|
23
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqCleaner, isStandalone: true, selector: "kbq-cleaner", host: { classAttribute: "kbq-cleaner" }, exportAs: ["kbqCleaner"], ngImport: i0, template: `
|
|
21
24
|
<i [autoColor]="true" color="contrast-fade" kbq-icon-button="kbq-xmark-circle_16"></i>
|
|
22
|
-
`, isInline: true, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-
|
|
25
|
+
`, isInline: true, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-addon-width);height:100%}\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 }); }
|
|
23
26
|
}
|
|
24
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqCleaner, decorators: [{
|
|
25
28
|
type: Component,
|
|
26
|
-
args: [{ selector: 'kbq-cleaner', exportAs: 'kbqCleaner', template: `
|
|
29
|
+
args: [{ standalone: true, imports: [KbqIconModule], selector: 'kbq-cleaner', exportAs: 'kbqCleaner', template: `
|
|
27
30
|
<i [autoColor]="true" color="contrast-fade" kbq-icon-button="kbq-xmark-circle_16"></i>
|
|
28
31
|
`, host: {
|
|
29
32
|
class: 'kbq-cleaner'
|
|
30
|
-
}, encapsulation: ViewEncapsulation.None, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-
|
|
33
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-addon-width);height:100%}\n"] }]
|
|
31
34
|
}] });
|
|
32
35
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function getKbqFormFieldMissingControlError() {
|
|
38
|
-
return Error('kbq-form-field must contain a KbqFormFieldControl.');
|
|
39
|
-
}
|
|
40
|
-
function getKbqFormFieldYouCanNotUseCleanerInNumberInputError() {
|
|
41
|
-
return Error(`You can't use kbq-cleaner with input that have type="number"`);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
let nextHintUniqueId = 0;
|
|
36
|
+
let nextUniqueId = 0;
|
|
37
|
+
/** Hint text to be shown below the form field control. */
|
|
45
38
|
class KbqHint extends KbqColorDirective {
|
|
46
39
|
constructor() {
|
|
47
40
|
super(...arguments);
|
|
48
|
-
|
|
41
|
+
/** Unique ID for the hint. */
|
|
42
|
+
this.id = `kbq-hint-${nextUniqueId++}`;
|
|
43
|
+
/** Disables `color` for the hint text. */
|
|
49
44
|
this.fillTextOff = false;
|
|
45
|
+
/** Makes the hint size smaller. */
|
|
50
46
|
this.compact = false;
|
|
51
47
|
}
|
|
52
48
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqHint, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
53
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: KbqHint, selector: "kbq-hint", inputs: { id: "id", fillTextOff: ["fillTextOff", "fillTextOff", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "attr.id": "id", "class.kbq-hint_fill-text-off": "fillTextOff", "class.kbq-hint_compact": "compact" }, classAttribute: "kbq-hint" }, exportAs: ["kbqHint"], usesInheritance: true, ngImport: i0, template:
|
|
54
|
-
<ng-content select="[kbq-icon]" />
|
|
55
|
-
|
|
56
|
-
<span class="kbq-hint__text">
|
|
57
|
-
<ng-content />
|
|
58
|
-
</span>
|
|
59
|
-
`, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint{--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 }); }
|
|
49
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: KbqHint, isStandalone: true, selector: "kbq-hint", inputs: { id: "id", fillTextOff: ["fillTextOff", "fillTextOff", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, host: { properties: { "attr.id": "id", "class.kbq-hint_fill-text-off": "fillTextOff", "class.kbq-hint_compact": "compact" }, classAttribute: "kbq-hint" }, exportAs: ["kbqHint"], 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{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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 }); }
|
|
60
50
|
}
|
|
61
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqHint, decorators: [{
|
|
62
52
|
type: Component,
|
|
63
|
-
args: [{ selector: 'kbq-hint', exportAs: 'kbqHint',
|
|
64
|
-
<ng-content select="[kbq-icon]" />
|
|
65
|
-
|
|
66
|
-
<span class="kbq-hint__text">
|
|
67
|
-
<ng-content />
|
|
68
|
-
</span>
|
|
69
|
-
`, host: {
|
|
53
|
+
args: [{ standalone: true, selector: 'kbq-hint', exportAs: 'kbqHint', host: {
|
|
70
54
|
class: 'kbq-hint',
|
|
71
55
|
'[attr.id]': 'id',
|
|
72
56
|
'[class.kbq-hint_fill-text-off]': 'fillTextOff',
|
|
73
57
|
'[class.kbq-hint_compact]': 'compact'
|
|
74
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint{--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"] }]
|
|
58
|
+
}, 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{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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"] }]
|
|
75
59
|
}], propDecorators: { id: [{
|
|
76
60
|
type: Input
|
|
77
61
|
}], fillTextOff: [{
|
|
@@ -82,6 +66,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
82
66
|
args: [{ transform: booleanAttribute }]
|
|
83
67
|
}] } });
|
|
84
68
|
|
|
69
|
+
/** Error text to be shown below the form field control. */
|
|
70
|
+
class KbqError extends KbqHint {
|
|
71
|
+
constructor() {
|
|
72
|
+
super();
|
|
73
|
+
this.color = KbqComponentColors.Error;
|
|
74
|
+
}
|
|
75
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
76
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqError, isStandalone: true, selector: "kbq-error", host: { classAttribute: "kbq-error" }, 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{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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 }); }
|
|
77
|
+
}
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqError, decorators: [{
|
|
79
|
+
type: Component,
|
|
80
|
+
args: [{ standalone: true, selector: 'kbq-error', exportAs: 'kbqError', host: {
|
|
81
|
+
class: 'kbq-error'
|
|
82
|
+
}, 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{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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"] }]
|
|
83
|
+
}], ctorParameters: () => [] });
|
|
84
|
+
|
|
85
|
+
/** Directive for marking an element as legend of `KbqFieldset` */
|
|
86
|
+
class KbqLegend {
|
|
87
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
88
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqLegend, isStandalone: true, selector: "[kbqLegend]", host: { classAttribute: "kbq-legend" }, ngImport: i0 }); }
|
|
89
|
+
}
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqLegend, decorators: [{
|
|
91
|
+
type: Directive,
|
|
92
|
+
args: [{
|
|
93
|
+
standalone: true,
|
|
94
|
+
selector: '[kbqLegend]',
|
|
95
|
+
host: {
|
|
96
|
+
class: 'kbq-legend'
|
|
97
|
+
}
|
|
98
|
+
}]
|
|
99
|
+
}] });
|
|
100
|
+
/** Directive for marking elements as items inside `KbqFieldset` */
|
|
101
|
+
class KbqFieldsetItem {
|
|
102
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFieldsetItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
103
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqFieldsetItem, isStandalone: true, selector: "[kbqFieldsetItem]", host: { classAttribute: "kbq-fieldset-item" }, ngImport: i0 }); }
|
|
104
|
+
}
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFieldsetItem, decorators: [{
|
|
106
|
+
type: Directive,
|
|
107
|
+
args: [{
|
|
108
|
+
standalone: true,
|
|
109
|
+
selector: '[kbqFieldsetItem]',
|
|
110
|
+
host: {
|
|
111
|
+
class: 'kbq-fieldset-item'
|
|
112
|
+
}
|
|
113
|
+
}]
|
|
114
|
+
}] });
|
|
115
|
+
/**
|
|
116
|
+
* A group of form-fields and related controls.
|
|
117
|
+
* Container component emulating the native `fieldset` element.
|
|
118
|
+
*/
|
|
119
|
+
class KbqFieldset {
|
|
120
|
+
constructor() {
|
|
121
|
+
this.legend = contentChild(KbqLegend, {
|
|
122
|
+
read: ElementRef
|
|
123
|
+
});
|
|
124
|
+
/**
|
|
125
|
+
* Computes the aria-label from the inner text of the legend element.
|
|
126
|
+
* Used to enhance accessibility by labeling the group.
|
|
127
|
+
* @docs-private
|
|
128
|
+
*/
|
|
129
|
+
this.ariaLabel = computed(() => this.legend()?.nativeElement?.innerText);
|
|
130
|
+
}
|
|
131
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
132
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: KbqFieldset, isStandalone: true, selector: "kbq-fieldset", host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "kbq-fieldset" }, queries: [{ propertyName: "legend", first: true, predicate: KbqLegend, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
|
|
133
|
+
<ng-content select="[kbqLegend]" />
|
|
134
|
+
|
|
135
|
+
<div class="kbq-fieldset__container">
|
|
136
|
+
<ng-content />
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="kbq-form-field__hint">
|
|
140
|
+
<ng-content select="kbq-error" />
|
|
141
|
+
|
|
142
|
+
<ng-content select="kbq-hint, kbq-password-hint, kbq-reactive-password-hint" />
|
|
143
|
+
</div>
|
|
144
|
+
`, isInline: true, styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__label{display:flex;margin-bottom:var(--kbq-size-xs)}.kbq-form-field.kbq-form-field-type-select .kbq-form-field__suffix{margin-right:0}.kbq-form-field .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 .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field .kbq-form-field__infix{width:100%;max-width:calc(100% - var(--kbq-size-xs));flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field .kbq-form-field__infix:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field .kbq-form-field__infix:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field .kbq-form-field__infix .kbq-input,.kbq-form-field .kbq-form-field__infix .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:3}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container,.kbq-form-field.kbq-form-field_no-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{display:flex;justify-content:center;align-items:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field .kbq-form-field__prefix+.kbq-form-field__infix{padding-left:0}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-error-text);-webkit-text-fill-color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-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 .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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)}.kbq-fieldset{display:flex;flex-direction:column}.kbq-fieldset .kbq-legend{margin-bottom:var(--kbq-fieldset-legend-margin)}.kbq-fieldset .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-fieldset .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}:where(.kbq-fieldset .kbq-form-field.kbq-form-field_invalid,.kbq-fieldset .kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid){z-index:2}.kbq-fieldset .kbq-form-field .kbq-form-field__container{height:100%}.kbq-fieldset .kbq-form-field:first-child:not(:last-child) .kbq-form-field__container,.kbq-fieldset .kbq-form-field:first-child:not(:last-child) .kbq-form-field__container .kbq-input{border-top-right-radius:0;border-bottom-right-radius:0}.kbq-fieldset .kbq-form-field:not(:first-child):not(:last-child){--kbq-form-field-size-border-radius: 0}.kbq-fieldset .kbq-form-field:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-fieldset .kbq-form-field:last-child:not(:first-child) .kbq-form-field__container,.kbq-fieldset .kbq-form-field:last-child:not(:first-child) .kbq-form-field__container .kbq-input{border-top-left-radius:0;border-bottom-left-radius:0}.kbq-fieldset .kbq-form-field:not(:first-child){margin-left:calc(var(--kbq-size-border-width) * -1)}.kbq-fieldset .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-fieldset .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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)}.kbq-fieldset .kbq-form-field__hint:empty{margin-top:0}.kbq-fieldset__container{display:flex;flex-direction:row;position:relative}.kbq-fieldset__container>.kbq-fieldset-item.cdk-focused,.kbq-fieldset__container>.kbq-fieldset-item.kbq-focused{z-index:3}.kbq-fieldset__container>.kbq-fieldset-item:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:not(:first-child):not(:last-child){border-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:not(:first-child){margin-left:calc(var(--kbq-size-border-width) * -1)}\n", ".kbq-fieldset{--kbq-fieldset-legend-margin: var(--kbq-size-s);--kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
145
|
+
}
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFieldset, decorators: [{
|
|
147
|
+
type: Component,
|
|
148
|
+
args: [{ standalone: true, selector: 'kbq-fieldset', host: {
|
|
149
|
+
class: 'kbq-fieldset',
|
|
150
|
+
role: 'group',
|
|
151
|
+
'[attr.aria-label]': 'ariaLabel()'
|
|
152
|
+
}, template: `
|
|
153
|
+
<ng-content select="[kbqLegend]" />
|
|
154
|
+
|
|
155
|
+
<div class="kbq-fieldset__container">
|
|
156
|
+
<ng-content />
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="kbq-form-field__hint">
|
|
160
|
+
<ng-content select="kbq-error" />
|
|
161
|
+
|
|
162
|
+
<ng-content select="kbq-hint, kbq-password-hint, kbq-reactive-password-hint" />
|
|
163
|
+
</div>
|
|
164
|
+
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__label{display:flex;margin-bottom:var(--kbq-size-xs)}.kbq-form-field.kbq-form-field-type-select .kbq-form-field__suffix{margin-right:0}.kbq-form-field .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 .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field .kbq-form-field__infix{width:100%;max-width:calc(100% - var(--kbq-size-xs));flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field .kbq-form-field__infix:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field .kbq-form-field__infix:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field .kbq-form-field__infix .kbq-input,.kbq-form-field .kbq-form-field__infix .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:3}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container,.kbq-form-field.kbq-form-field_no-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{display:flex;justify-content:center;align-items:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field .kbq-form-field__prefix+.kbq-form-field__infix{padding-left:0}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-error-text);-webkit-text-fill-color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-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 .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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)}.kbq-fieldset{display:flex;flex-direction:column}.kbq-fieldset .kbq-legend{margin-bottom:var(--kbq-fieldset-legend-margin)}.kbq-fieldset .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-fieldset .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}:where(.kbq-fieldset .kbq-form-field.kbq-form-field_invalid,.kbq-fieldset .kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid){z-index:2}.kbq-fieldset .kbq-form-field .kbq-form-field__container{height:100%}.kbq-fieldset .kbq-form-field:first-child:not(:last-child) .kbq-form-field__container,.kbq-fieldset .kbq-form-field:first-child:not(:last-child) .kbq-form-field__container .kbq-input{border-top-right-radius:0;border-bottom-right-radius:0}.kbq-fieldset .kbq-form-field:not(:first-child):not(:last-child){--kbq-form-field-size-border-radius: 0}.kbq-fieldset .kbq-form-field:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-fieldset .kbq-form-field:last-child:not(:first-child) .kbq-form-field__container,.kbq-fieldset .kbq-form-field:last-child:not(:first-child) .kbq-form-field__container .kbq-input{border-top-left-radius:0;border-bottom-left-radius:0}.kbq-fieldset .kbq-form-field:not(:first-child){margin-left:calc(var(--kbq-size-border-width) * -1)}.kbq-fieldset .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-fieldset .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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)}.kbq-fieldset .kbq-form-field__hint:empty{margin-top:0}.kbq-fieldset__container{display:flex;flex-direction:row;position:relative}.kbq-fieldset__container>.kbq-fieldset-item.cdk-focused,.kbq-fieldset__container>.kbq-fieldset-item.kbq-focused{z-index:3}.kbq-fieldset__container>.kbq-fieldset-item:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:not(:first-child):not(:last-child){border-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.kbq-fieldset__container>.kbq-fieldset-item:not(:first-child){margin-left:calc(var(--kbq-size-border-width) * -1)}\n", ".kbq-fieldset{--kbq-fieldset-legend-margin: var(--kbq-size-s);--kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\n"] }]
|
|
165
|
+
}] });
|
|
166
|
+
|
|
167
|
+
/** An interface which allows a control to work inside of a `KbqFormField`. */
|
|
168
|
+
class KbqFormFieldControl {
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/** Label for the form field. */
|
|
172
|
+
class KbqLabel {
|
|
173
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
174
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqLabel, isStandalone: true, selector: "kbq-label", host: { classAttribute: "kbq-label" }, exportAs: ["kbqLabel"], ngImport: i0 }); }
|
|
175
|
+
}
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqLabel, decorators: [{
|
|
177
|
+
type: Directive,
|
|
178
|
+
args: [{
|
|
179
|
+
selector: 'kbq-label',
|
|
180
|
+
exportAs: 'kbqLabel',
|
|
181
|
+
standalone: true,
|
|
182
|
+
host: {
|
|
183
|
+
class: 'kbq-label'
|
|
184
|
+
}
|
|
185
|
+
}]
|
|
186
|
+
}] });
|
|
187
|
+
|
|
85
188
|
let nextPasswordHintUniqueId = 0;
|
|
86
189
|
var PasswordRules;
|
|
87
190
|
(function (PasswordRules) {
|
|
@@ -180,17 +283,17 @@ class KbqPasswordHint extends KbqHint {
|
|
|
180
283
|
return this.lastControlValue !== this.formField.control.value;
|
|
181
284
|
}
|
|
182
285
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPasswordHint, deps: [{ token: i0.ChangeDetectorRef }, { token: forwardRef(() => KBQ_FORM_FIELD_REF), optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
183
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqPasswordHint, selector: "kbq-password-hint", inputs: { id: "id", rule: "rule", min: "min", max: "max", regex: "regex", customCheckRule: ["checkRule", "customCheckRule"], viewFormField: "viewFormField", fillTextOff: "fillTextOff" }, host: { properties: { "attr.id": "id", "class.kbq-success": "checked", "class.kbq-error": "hasError", "class.kbq-hint_fill-text-off": "fillTextOff", "class.kbq-hint_compact": "compact" }, classAttribute: "kbq-hint kbq-password-hint" }, usesInheritance: true, ngImport: i0, template: `
|
|
286
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqPasswordHint, isStandalone: true, selector: "kbq-password-hint", inputs: { id: "id", rule: "rule", min: "min", max: "max", regex: "regex", customCheckRule: ["checkRule", "customCheckRule"], viewFormField: "viewFormField", fillTextOff: "fillTextOff" }, host: { properties: { "attr.id": "id", "class.kbq-success": "checked", "class.kbq-error": "hasError", "class.kbq-hint_fill-text-off": "fillTextOff", "class.kbq-hint_compact": "compact" }, classAttribute: "kbq-hint kbq-password-hint" }, usesInheritance: true, ngImport: i0, template: `
|
|
184
287
|
<i class="kbq-password-hint__icon" [ngClass]="icon" kbq-icon=""></i>
|
|
185
288
|
|
|
186
289
|
<span class="kbq-hint__text">
|
|
187
290
|
<ng-content />
|
|
188
291
|
</span>
|
|
189
|
-
`, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint{--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: "
|
|
292
|
+
`, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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 }); }
|
|
190
293
|
}
|
|
191
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPasswordHint, decorators: [{
|
|
192
295
|
type: Component,
|
|
193
|
-
args: [{ selector: 'kbq-password-hint', template: `
|
|
296
|
+
args: [{ standalone: true, imports: [NgClass, KbqIconModule], selector: 'kbq-password-hint', template: `
|
|
194
297
|
<i class="kbq-password-hint__icon" [ngClass]="icon" kbq-icon=""></i>
|
|
195
298
|
|
|
196
299
|
<span class="kbq-hint__text">
|
|
@@ -203,7 +306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
203
306
|
'[class.kbq-error]': 'hasError',
|
|
204
307
|
'[class.kbq-hint_fill-text-off]': 'fillTextOff',
|
|
205
308
|
'[class.kbq-hint_compact]': 'compact'
|
|
206
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-hint.kbq-hint_compact .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-hint{--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"] }]
|
|
309
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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"] }]
|
|
207
310
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
208
311
|
type: Optional
|
|
209
312
|
}, {
|
|
@@ -228,59 +331,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
228
331
|
type: Input
|
|
229
332
|
}] } });
|
|
230
333
|
|
|
334
|
+
// @TODO Temporary solution to resolve circular dependency (#DS-3893)
|
|
335
|
+
const isInputPassword = (control) => {
|
|
336
|
+
return 'elementType' in control;
|
|
337
|
+
};
|
|
338
|
+
const getKbqPasswordToggleMissingControlError = () => {
|
|
339
|
+
return Error('kbq-password-toggle should use with kbqInputPassword');
|
|
340
|
+
};
|
|
341
|
+
/** Component which changes password visibility. */
|
|
231
342
|
class KbqPasswordToggle extends KbqTooltipTrigger {
|
|
232
343
|
get content() {
|
|
233
|
-
return this.
|
|
344
|
+
return this.control.elementType === 'password' ? this.kbqTooltipHidden : this._content;
|
|
234
345
|
}
|
|
235
346
|
set content(content) {
|
|
236
347
|
this._content = content;
|
|
237
348
|
this.updateData();
|
|
238
349
|
}
|
|
350
|
+
/** Form field password control. */
|
|
351
|
+
get control() {
|
|
352
|
+
const control = this.formField?.control;
|
|
353
|
+
if (!control || !isInputPassword(control)) {
|
|
354
|
+
throw getKbqPasswordToggleMissingControlError();
|
|
355
|
+
}
|
|
356
|
+
return control;
|
|
357
|
+
}
|
|
358
|
+
/**
|
|
359
|
+
* @docs-private
|
|
360
|
+
*/
|
|
239
361
|
get hidden() {
|
|
240
|
-
return this.
|
|
362
|
+
return this.control.elementType === 'password';
|
|
241
363
|
}
|
|
364
|
+
/**
|
|
365
|
+
* @docs-private
|
|
366
|
+
*/
|
|
242
367
|
get iconClass() {
|
|
243
368
|
return this.hidden ? 'kbq-eye_16' : 'kbq-eye-slash_16';
|
|
244
369
|
}
|
|
370
|
+
/**
|
|
371
|
+
* @docs-private
|
|
372
|
+
*/
|
|
245
373
|
get visibility() {
|
|
246
|
-
return this.disabled
|
|
374
|
+
return this.control.disabled || this.control.empty ? 'hidden' : 'visible';
|
|
247
375
|
}
|
|
248
|
-
constructor(
|
|
376
|
+
constructor() {
|
|
249
377
|
super();
|
|
250
|
-
|
|
251
|
-
this.
|
|
252
|
-
this.updateState = () => {
|
|
253
|
-
this.icon.hasError = this.formField.control.errorState;
|
|
254
|
-
this.changeDetector.markForCheck();
|
|
255
|
-
};
|
|
378
|
+
// @TODO fix types (#DS-2915)
|
|
379
|
+
this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
|
|
256
380
|
this.trigger = `${PopUpTriggers.Hover}`;
|
|
257
381
|
}
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
382
|
+
/**
|
|
383
|
+
* @docs-private
|
|
384
|
+
*/
|
|
261
385
|
toggle(event) {
|
|
262
386
|
this.hide();
|
|
263
|
-
const input = this.
|
|
387
|
+
const input = this.control;
|
|
264
388
|
input.toggleType();
|
|
265
389
|
this.updateData();
|
|
266
390
|
event.preventDefault();
|
|
267
391
|
}
|
|
268
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPasswordToggle, deps: [
|
|
269
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqPasswordToggle, selector: "kbq-password-toggle", inputs: { content: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility"
|
|
392
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
393
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqPasswordToggle, isStandalone: true, selector: "kbq-password-toggle", inputs: { content: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility", "class.cdk-visually-hidden": "visibility === \"hidden\"", "attr.aria-hidden": "visibility === \"hidden\"" }, classAttribute: "kbq-password-toggle" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIconButton, descendants: true }], exportAs: ["kbqPasswordToggle"], usesInheritance: true, ngImport: i0, template: `
|
|
394
|
+
<i [ngClass]="iconClass" [autoColor]="true" kbq-icon-button="" color="contrast-fade"></i>
|
|
395
|
+
`, isInline: true, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-addon-width);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle: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"] }, { kind: "ngmodule", type: KbqToolTipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
270
396
|
}
|
|
271
397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPasswordToggle, decorators: [{
|
|
272
398
|
type: Component,
|
|
273
|
-
args: [{ selector: `kbq-password-toggle`, exportAs: 'kbqPasswordToggle', template:
|
|
399
|
+
args: [{ standalone: true, imports: [NgClass, KbqIconModule, KbqToolTipModule], selector: `kbq-password-toggle`, exportAs: 'kbqPasswordToggle', template: `
|
|
400
|
+
<i [ngClass]="iconClass" [autoColor]="true" kbq-icon-button="" color="contrast-fade"></i>
|
|
401
|
+
`, host: {
|
|
274
402
|
class: 'kbq-password-toggle',
|
|
403
|
+
// legacy style for backward compatibility
|
|
275
404
|
'[style.visibility]': 'visibility',
|
|
405
|
+
'[class.cdk-visually-hidden]': 'visibility === "hidden"',
|
|
406
|
+
'[attr.aria-hidden]': 'visibility === "hidden"',
|
|
276
407
|
'(click)': 'toggle($event)',
|
|
277
408
|
'(keydown.ENTER)': 'toggle($event)',
|
|
278
409
|
'(keydown.SPACE)': 'toggle($event)'
|
|
279
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-
|
|
280
|
-
}], ctorParameters: () => [
|
|
281
|
-
type: Inject,
|
|
282
|
-
args: [forwardRef(() => KBQ_FORM_FIELD_REF)]
|
|
283
|
-
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
|
|
410
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-addon-width);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"] }]
|
|
411
|
+
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
284
412
|
type: ViewChild,
|
|
285
413
|
args: [KbqIconButton]
|
|
286
414
|
}], content: [{
|
|
@@ -290,34 +418,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
290
418
|
type: Input
|
|
291
419
|
}] } });
|
|
292
420
|
|
|
421
|
+
/** Element to be placed in front of the form field. */
|
|
293
422
|
class KbqPrefix {
|
|
294
423
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
295
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqPrefix, selector: "[kbqPrefix]", ngImport: i0 }); }
|
|
424
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqPrefix, isStandalone: true, selector: "[kbqPrefix]", host: { classAttribute: "kbq-prefix" }, exportAs: ["kbqPrefix"], ngImport: i0 }); }
|
|
296
425
|
}
|
|
297
426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqPrefix, decorators: [{
|
|
298
427
|
type: Directive,
|
|
299
428
|
args: [{
|
|
300
|
-
|
|
429
|
+
standalone: true,
|
|
430
|
+
selector: '[kbqPrefix]',
|
|
431
|
+
exportAs: 'kbqPrefix',
|
|
432
|
+
host: {
|
|
433
|
+
class: 'kbq-prefix'
|
|
434
|
+
}
|
|
301
435
|
}]
|
|
302
436
|
}] });
|
|
303
437
|
|
|
438
|
+
/** Password hint to be shown below the password form field control. */
|
|
439
|
+
class KbqReactivePasswordHint extends KbqHint {
|
|
440
|
+
constructor() {
|
|
441
|
+
super();
|
|
442
|
+
// @TODO fix types (#DS-2915)
|
|
443
|
+
this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
|
|
444
|
+
this.destroyRef = inject(DestroyRef);
|
|
445
|
+
/** Whether the form field control has an error. */
|
|
446
|
+
this.hasError = input(false, { transform: booleanAttribute });
|
|
447
|
+
/**
|
|
448
|
+
* The form field hint icon.
|
|
449
|
+
*
|
|
450
|
+
* @docs-private
|
|
451
|
+
*/
|
|
452
|
+
this.icon = computed(() => (this.hasError() ? 'kbq-xmark-s_16' : 'kbq-check-s_16'));
|
|
453
|
+
this.fillTextOff = true;
|
|
454
|
+
this.compact = false;
|
|
455
|
+
this.color = KbqComponentColors.ContrastFade;
|
|
456
|
+
const hasError = toObservable(this.hasError);
|
|
457
|
+
afterNextRender(() => {
|
|
458
|
+
merge(this.formField?.control?.stateChanges || EMPTY, hasError)
|
|
459
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
460
|
+
.subscribe(() => (this.color = this.makeColor()));
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
makeColor() {
|
|
464
|
+
const invalid = this.formField?.invalid;
|
|
465
|
+
const hasError = this.hasError();
|
|
466
|
+
if (invalid && hasError)
|
|
467
|
+
return KbqComponentColors.Error;
|
|
468
|
+
if ((!invalid && !hasError) || !hasError)
|
|
469
|
+
return KbqComponentColors.Success;
|
|
470
|
+
return KbqComponentColors.ContrastFade;
|
|
471
|
+
}
|
|
472
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqReactivePasswordHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
473
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: KbqReactivePasswordHint, isStandalone: true, selector: "kbq-reactive-password-hint", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-reactive-password-hint" }, exportAs: ["kbqReactivePasswordHint"], usesInheritance: true, ngImport: i0, template: `
|
|
474
|
+
<i [ngClass]="icon()" kbq-icon=""></i>
|
|
475
|
+
|
|
476
|
+
<span class="kbq-hint__text">
|
|
477
|
+
<ng-content />
|
|
478
|
+
</span>
|
|
479
|
+
`, isInline: true, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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 }); }
|
|
480
|
+
}
|
|
481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqReactivePasswordHint, decorators: [{
|
|
482
|
+
type: Component,
|
|
483
|
+
args: [{ standalone: true, imports: [NgClass, KbqIconModule], selector: 'kbq-reactive-password-hint', exportAs: 'kbqReactivePasswordHint', template: `
|
|
484
|
+
<i [ngClass]="icon()" kbq-icon=""></i>
|
|
485
|
+
|
|
486
|
+
<span class="kbq-hint__text">
|
|
487
|
+
<ng-content />
|
|
488
|
+
</span>
|
|
489
|
+
`, host: {
|
|
490
|
+
class: 'kbq-reactive-password-hint'
|
|
491
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-hint{display:flex}.kbq-hint .kbq-icon{margin-top:var(--kbq-hint-size-normal-margin-top);margin-right:var(--kbq-hint-size-normal-content-padding)}.kbq-hint.kbq-hint_compact .kbq-icon{margin-top:var(--kbq-hint-size-compact-margin-top);margin-right:var(--kbq-hint-size-compact-content-padding)}.kbq-hint.kbq-contrast-fade{color:var(--kbq-hint-fill-text-on-fade-contrast-text)}.kbq-hint.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-fade-contrast-icon)!important}.kbq-hint.kbq-success{color:var(--kbq-hint-fill-text-on-success-text)}.kbq-hint.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-success-icon)!important}.kbq-hint.kbq-warning{color:var(--kbq-hint-fill-text-on-warning-text)}.kbq-hint.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-warning-icon)!important}.kbq-hint.kbq-error{color:var(--kbq-hint-fill-text-on-error-text)}.kbq-hint.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-on-error-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade{color:var(--kbq-hint-fill-text-off-fade-contrast-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-contrast-fade .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-fade-contrast-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-success{color:var(--kbq-hint-fill-text-off-success-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-success .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-success-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-warning{color:var(--kbq-hint-fill-text-off-warning-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-warning .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-warning-icon)!important}.kbq-hint.kbq-hint_fill-text-off.kbq-error{color:var(--kbq-hint-fill-text-off-error-text)}.kbq-hint.kbq-hint_fill-text-off.kbq-error .kbq-icon.kbq-empty{color:var(--kbq-hint-fill-text-off-error-icon)!important}.kbq-hint .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.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{--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"] }]
|
|
492
|
+
}], ctorParameters: () => [] });
|
|
493
|
+
|
|
494
|
+
// @TODO Temporary solution to resolve circular dependency (#DS-3893)
|
|
495
|
+
const isNumberInput = (control) => {
|
|
496
|
+
return 'stepUp' in control && 'stepDown' in control;
|
|
497
|
+
};
|
|
304
498
|
const getKbqStepperToggleMissingControlError = () => {
|
|
305
499
|
return Error('kbq-stepper should use with kbqNumberInput');
|
|
306
500
|
};
|
|
501
|
+
/** Component which allow to increment or decrement number value. */
|
|
307
502
|
class KbqStepper {
|
|
308
503
|
constructor() {
|
|
309
504
|
this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
|
|
505
|
+
/** Emitted when the stepper is incremented. */
|
|
310
506
|
this.stepUp = new EventEmitter();
|
|
507
|
+
/** Emitted when the stepper is decremented. */
|
|
311
508
|
this.stepDown = new EventEmitter();
|
|
312
509
|
}
|
|
313
|
-
/**
|
|
510
|
+
/**
|
|
511
|
+
* Form field number control.
|
|
512
|
+
*
|
|
513
|
+
* @docs-private
|
|
514
|
+
*/
|
|
314
515
|
get control() {
|
|
315
516
|
const control = this.formField?.control;
|
|
316
|
-
|
|
517
|
+
const input = control.numberInput;
|
|
518
|
+
if (!isNumberInput(input)) {
|
|
317
519
|
throw getKbqStepperToggleMissingControlError();
|
|
318
520
|
}
|
|
319
|
-
return
|
|
521
|
+
return input;
|
|
320
522
|
}
|
|
523
|
+
/**
|
|
524
|
+
* @docs-private
|
|
525
|
+
*/
|
|
321
526
|
connectTo(numberInput) {
|
|
322
527
|
if (!numberInput)
|
|
323
528
|
return;
|
|
@@ -328,187 +533,320 @@ class KbqStepper {
|
|
|
328
533
|
numberInput.stepDown(numberInput.step);
|
|
329
534
|
});
|
|
330
535
|
}
|
|
536
|
+
/**
|
|
537
|
+
* @docs-private
|
|
538
|
+
*/
|
|
331
539
|
onStepUp($event) {
|
|
332
540
|
this.stepUp.emit();
|
|
333
541
|
$event.preventDefault();
|
|
334
542
|
}
|
|
543
|
+
/**
|
|
544
|
+
* @docs-private
|
|
545
|
+
*/
|
|
335
546
|
onStepDown($event) {
|
|
336
547
|
this.stepDown.emit();
|
|
337
548
|
$event.preventDefault();
|
|
338
549
|
}
|
|
339
550
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
340
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqStepper, selector: "kbq-stepper", outputs: { stepUp: "stepUp", stepDown: "stepDown" }, host: { classAttribute: "kbq-stepper" }, ngImport: i0, template: `
|
|
551
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqStepper, isStandalone: true, selector: "kbq-stepper", outputs: { stepUp: "stepUp", stepDown: "stepDown" }, host: { classAttribute: "kbq-stepper" }, exportAs: ["kbqStepper"], ngImport: i0, template: `
|
|
341
552
|
<i
|
|
342
553
|
class="kbq-stepper-step-up"
|
|
343
|
-
[small]="true"
|
|
344
554
|
[tabindex]="-1"
|
|
345
555
|
[autoColor]="true"
|
|
346
556
|
[disabled]="control.disabled"
|
|
347
557
|
(mousedown)="onStepUp($event)"
|
|
348
558
|
color="contrast-fade"
|
|
349
|
-
kbq-icon-button="kbq-chevron-
|
|
559
|
+
kbq-icon-button="kbq-chevron-up-s_16"
|
|
350
560
|
></i>
|
|
351
561
|
<i
|
|
352
562
|
class="kbq-stepper-step-down"
|
|
353
|
-
[small]="true"
|
|
354
563
|
[tabindex]="-1"
|
|
355
564
|
[autoColor]="true"
|
|
356
565
|
[disabled]="control.disabled"
|
|
357
566
|
(mousedown)="onStepDown($event)"
|
|
358
567
|
color="contrast-fade"
|
|
359
|
-
kbq-icon-button="kbq-chevron-
|
|
568
|
+
kbq-icon-button="kbq-chevron-down-s_16"
|
|
360
569
|
></i>
|
|
361
|
-
`, isInline: true, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-
|
|
570
|
+
`, isInline: true, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-addon-width);height:100%}.kbq-stepper .kbq-stepper-step-up{margin-bottom:-2px}.kbq-stepper .kbq-stepper-step-down{margin-top:-2px}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{width:100%;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 }); }
|
|
362
571
|
}
|
|
363
572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqStepper, decorators: [{
|
|
364
573
|
type: Component,
|
|
365
|
-
args: [{ selector: 'kbq-stepper', template: `
|
|
574
|
+
args: [{ standalone: true, selector: 'kbq-stepper', exportAs: 'kbqStepper', imports: [KbqIconModule], template: `
|
|
366
575
|
<i
|
|
367
576
|
class="kbq-stepper-step-up"
|
|
368
|
-
[small]="true"
|
|
369
577
|
[tabindex]="-1"
|
|
370
578
|
[autoColor]="true"
|
|
371
579
|
[disabled]="control.disabled"
|
|
372
580
|
(mousedown)="onStepUp($event)"
|
|
373
581
|
color="contrast-fade"
|
|
374
|
-
kbq-icon-button="kbq-chevron-
|
|
582
|
+
kbq-icon-button="kbq-chevron-up-s_16"
|
|
375
583
|
></i>
|
|
376
584
|
<i
|
|
377
585
|
class="kbq-stepper-step-down"
|
|
378
|
-
[small]="true"
|
|
379
586
|
[tabindex]="-1"
|
|
380
587
|
[autoColor]="true"
|
|
381
588
|
[disabled]="control.disabled"
|
|
382
589
|
(mousedown)="onStepDown($event)"
|
|
383
590
|
color="contrast-fade"
|
|
384
|
-
kbq-icon-button="kbq-chevron-
|
|
591
|
+
kbq-icon-button="kbq-chevron-down-s_16"
|
|
385
592
|
></i>
|
|
386
593
|
`, host: {
|
|
387
594
|
class: 'kbq-stepper'
|
|
388
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-
|
|
595
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-addon-width);height:100%}.kbq-stepper .kbq-stepper-step-up{margin-bottom:-2px}.kbq-stepper .kbq-stepper-step-down{margin-top:-2px}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{width:100%;text-align:center}\n"] }]
|
|
389
596
|
}], propDecorators: { stepUp: [{
|
|
390
597
|
type: Output
|
|
391
598
|
}], stepDown: [{
|
|
392
599
|
type: Output
|
|
393
600
|
}] } });
|
|
394
601
|
|
|
602
|
+
/** Element to be placed at the end of the form field. */
|
|
395
603
|
class KbqSuffix {
|
|
396
604
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
397
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqSuffix, selector: "[kbqSuffix]", ngImport: i0 }); }
|
|
605
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqSuffix, isStandalone: true, selector: "[kbqSuffix]", host: { classAttribute: "kbq-suffix" }, ngImport: i0 }); }
|
|
398
606
|
}
|
|
399
607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqSuffix, decorators: [{
|
|
400
608
|
type: Directive,
|
|
401
609
|
args: [{
|
|
402
|
-
|
|
610
|
+
standalone: true,
|
|
611
|
+
selector: '[kbqSuffix]',
|
|
612
|
+
host: {
|
|
613
|
+
class: 'kbq-suffix'
|
|
614
|
+
}
|
|
403
615
|
}]
|
|
404
616
|
}] });
|
|
405
617
|
|
|
406
|
-
|
|
618
|
+
/** @docs-private */
|
|
619
|
+
function getKbqFormFieldMissingControlError() {
|
|
620
|
+
return Error('kbq-form-field must contain a KbqFormFieldControl');
|
|
621
|
+
}
|
|
622
|
+
/** @docs-private */
|
|
623
|
+
function getKbqFormFieldYouCanNotUseCleanerInNumberInputError() {
|
|
624
|
+
return Error(`You can't use kbq-cleaner with input that have type="number"`);
|
|
625
|
+
}
|
|
626
|
+
/**
|
|
627
|
+
* Injection token that can be used to configure the default options for all kbq-form-field's.
|
|
628
|
+
*/
|
|
629
|
+
const KBQ_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('KBQ_FORM_FIELD_DEFAULT_OPTIONS');
|
|
630
|
+
/** Utility provider for `KBQ_FORM_FIELD_DEFAULT_OPTIONS`. */
|
|
631
|
+
const kbqFormFieldDefaultOptionsProvider = (options) => ({
|
|
632
|
+
provide: KBQ_FORM_FIELD_DEFAULT_OPTIONS,
|
|
633
|
+
useValue: options
|
|
634
|
+
});
|
|
635
|
+
/** Container for form controls that applies styling and behavior. */
|
|
407
636
|
class KbqFormField extends KbqColorDirective {
|
|
637
|
+
constructor() {
|
|
638
|
+
super(...arguments);
|
|
639
|
+
this.destroyRef = inject(DestroyRef);
|
|
640
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
641
|
+
this.focusMonitor = inject(FocusMonitor);
|
|
642
|
+
this.defaultOptions = inject(KBQ_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });
|
|
643
|
+
/**
|
|
644
|
+
* @docs-private
|
|
645
|
+
*/
|
|
646
|
+
this.elementRef = inject(ElementRef);
|
|
647
|
+
/** Disables form field borders and shadows. */
|
|
648
|
+
this.noBorders = input(this.defaultOptions?.noBorders, { transform: booleanAttribute });
|
|
649
|
+
/**
|
|
650
|
+
* @docs-private
|
|
651
|
+
*/
|
|
652
|
+
this.hovered = false;
|
|
653
|
+
/**
|
|
654
|
+
* @docs-private
|
|
655
|
+
*/
|
|
656
|
+
this.canCleanerClearByEsc = true;
|
|
657
|
+
/**
|
|
658
|
+
* @deprecated stepper should be always visible when provided, so this parameter is redundant,
|
|
659
|
+
* use `hasStepper` instead
|
|
660
|
+
*
|
|
661
|
+
* @docs-private
|
|
662
|
+
*/
|
|
663
|
+
this.canShowStepper = true;
|
|
664
|
+
/**
|
|
665
|
+
* Runs the focus monitor for the form field.
|
|
666
|
+
*
|
|
667
|
+
* @docs-private
|
|
668
|
+
*/
|
|
669
|
+
this.runFocusMonitor = () => {
|
|
670
|
+
this.focusMonitor
|
|
671
|
+
.monitor(this.elementRef.nativeElement, true)
|
|
672
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
673
|
+
.subscribe((origin) => (this._focusOrigin = origin));
|
|
674
|
+
};
|
|
675
|
+
}
|
|
676
|
+
/** Whether the form field is invalid. */
|
|
677
|
+
get invalid() {
|
|
678
|
+
return !!this.control?.errorState;
|
|
679
|
+
}
|
|
680
|
+
/**
|
|
681
|
+
* Whether the form field control has an reactive password hint.
|
|
682
|
+
*
|
|
683
|
+
* @docs-private
|
|
684
|
+
*/
|
|
685
|
+
get hasReactivePasswordHint() {
|
|
686
|
+
return this.reactivePasswordHint.length > 0;
|
|
687
|
+
}
|
|
688
|
+
/**
|
|
689
|
+
* Whether the form-field contains kbq-error.
|
|
690
|
+
*
|
|
691
|
+
* @docs-private
|
|
692
|
+
*/
|
|
693
|
+
get hasError() {
|
|
694
|
+
return this.error.length > 0;
|
|
695
|
+
}
|
|
696
|
+
/**
|
|
697
|
+
* Whether the form-field contains kbq-label.
|
|
698
|
+
*
|
|
699
|
+
* @docs-private
|
|
700
|
+
*/
|
|
701
|
+
get hasLabel() {
|
|
702
|
+
return !!this.label;
|
|
703
|
+
}
|
|
704
|
+
/**
|
|
705
|
+
* Whether the form-field contains kbq-password-hint.
|
|
706
|
+
*
|
|
707
|
+
* @docs-private
|
|
708
|
+
*/
|
|
709
|
+
get hasPasswordHint() {
|
|
710
|
+
return this.passwordHints?.length > 0;
|
|
711
|
+
}
|
|
712
|
+
/**
|
|
713
|
+
* Current focus origin state.
|
|
714
|
+
*
|
|
715
|
+
* @docs-private
|
|
716
|
+
*/
|
|
408
717
|
get focusOrigin() {
|
|
409
718
|
return this._focusOrigin;
|
|
410
719
|
}
|
|
720
|
+
/**
|
|
721
|
+
* @docs-private
|
|
722
|
+
*/
|
|
411
723
|
get hasFocus() {
|
|
412
724
|
return this.control?.focused;
|
|
413
725
|
}
|
|
726
|
+
/**
|
|
727
|
+
* Whether the form-field contains kbq-hint.
|
|
728
|
+
*
|
|
729
|
+
* @docs-private
|
|
730
|
+
*/
|
|
414
731
|
get hasHint() {
|
|
415
732
|
return this.hint?.length > 0;
|
|
416
733
|
}
|
|
734
|
+
/**
|
|
735
|
+
* Whether the form-field contains kbqSuffix.
|
|
736
|
+
*
|
|
737
|
+
* @docs-private
|
|
738
|
+
*/
|
|
417
739
|
get hasSuffix() {
|
|
418
740
|
return this.suffix?.length > 0;
|
|
419
741
|
}
|
|
742
|
+
/**
|
|
743
|
+
* Whether the form-field contains kbqPrefix.
|
|
744
|
+
*
|
|
745
|
+
* @docs-private
|
|
746
|
+
*/
|
|
420
747
|
get hasPrefix() {
|
|
421
748
|
return this.prefix?.length > 0;
|
|
422
749
|
}
|
|
750
|
+
/**
|
|
751
|
+
* Whether the form-field contains kbq-cleaner.
|
|
752
|
+
*
|
|
753
|
+
* @docs-private
|
|
754
|
+
*/
|
|
423
755
|
get hasCleaner() {
|
|
424
756
|
return !!this.cleaner;
|
|
425
757
|
}
|
|
758
|
+
/**
|
|
759
|
+
* Whether the form-field contains kbq-stepper.
|
|
760
|
+
*
|
|
761
|
+
* @docs-private
|
|
762
|
+
*/
|
|
426
763
|
get hasStepper() {
|
|
427
764
|
return !!this.stepper;
|
|
428
765
|
}
|
|
766
|
+
/**
|
|
767
|
+
* Whether the form-field contains kbq-password-toggle.
|
|
768
|
+
*
|
|
769
|
+
* @docs-private
|
|
770
|
+
*/
|
|
429
771
|
get hasPasswordToggle() {
|
|
430
772
|
return !!this.passwordToggle;
|
|
431
773
|
}
|
|
774
|
+
/**
|
|
775
|
+
* @docs-private
|
|
776
|
+
*/
|
|
432
777
|
get canShowCleaner() {
|
|
433
|
-
return this.hasCleaner && this.control?.ngControl
|
|
434
|
-
? this.control.ngControl.value && !this.control.disabled
|
|
435
|
-
: false;
|
|
778
|
+
return this.hasCleaner && this.control?.ngControl ? this.control.ngControl.value && !this.disabled : false;
|
|
436
779
|
}
|
|
780
|
+
/** Whether the form field is disabled. */
|
|
437
781
|
get disabled() {
|
|
438
782
|
return this.control?.disabled;
|
|
439
783
|
}
|
|
440
|
-
constructor(changeDetectorRef, focusMonitor) {
|
|
441
|
-
super();
|
|
442
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
443
|
-
this.focusMonitor = focusMonitor;
|
|
444
|
-
// Unique id for the internal form field label.
|
|
445
|
-
this.labelId = `kbq-form-field-label-${nextUniqueId++}`;
|
|
446
|
-
this.hovered = false;
|
|
447
|
-
this.canCleanerClearByEsc = true;
|
|
448
|
-
this.destroyRef = inject(DestroyRef);
|
|
449
|
-
/** @deprecated stepper should be always visible when provided, so this parameter is redundant,
|
|
450
|
-
* use `hasStepper` instead */
|
|
451
|
-
this.canShowStepper = true;
|
|
452
|
-
this.runFocusMonitor = () => {
|
|
453
|
-
this.focusMonitor
|
|
454
|
-
.monitor(this.elementRef.nativeElement, true)
|
|
455
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
456
|
-
.subscribe((origin) => (this._focusOrigin = origin));
|
|
457
|
-
};
|
|
458
|
-
}
|
|
459
784
|
ngAfterContentInit() {
|
|
785
|
+
this.validateControlChild();
|
|
460
786
|
if (this.control.numberInput && this.hasCleaner) {
|
|
461
787
|
this.cleaner = null;
|
|
462
788
|
throw getKbqFormFieldYouCanNotUseCleanerInNumberInputError();
|
|
463
789
|
}
|
|
464
|
-
this.validateControlChild();
|
|
465
|
-
if (this.control.controlType) {
|
|
466
|
-
this.elementRef.nativeElement.classList.add(`kbq-form-field-type-${this.control.controlType}`);
|
|
467
|
-
}
|
|
468
790
|
// Subscribe to changes in the child control state in order to update the form field UI.
|
|
469
791
|
this.control.stateChanges.pipe(startWith()).subscribe((state) => {
|
|
470
792
|
if (this.passwordHints.length && !state?.focused && hasPasswordStrengthError(this.passwordHints)) {
|
|
471
793
|
this.control.ngControl?.control?.setErrors({ passwordStrength: true });
|
|
472
794
|
}
|
|
473
|
-
this.changeDetectorRef.markForCheck();
|
|
474
795
|
});
|
|
475
796
|
if (this.hasStepper) {
|
|
476
797
|
this.stepper.connectTo(this.control.numberInput);
|
|
477
798
|
}
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
482
|
-
.subscribe(() => this.changeDetectorRef.markForCheck());
|
|
799
|
+
this.initializeControl();
|
|
800
|
+
this.initializePrefixAndSuffix();
|
|
801
|
+
this.initializeHint();
|
|
483
802
|
}
|
|
484
803
|
ngAfterContentChecked() {
|
|
485
804
|
this.validateControlChild();
|
|
486
805
|
}
|
|
487
806
|
ngAfterViewInit() {
|
|
488
807
|
this.runFocusMonitor();
|
|
489
|
-
//
|
|
808
|
+
// Because the above changes a value used in the template after it was checked, we need
|
|
809
|
+
// to trigger CD or the change might not be reflected if there is no other CD scheduled.
|
|
490
810
|
this.changeDetectorRef.detectChanges();
|
|
491
811
|
}
|
|
812
|
+
ngOnDestroy() {
|
|
813
|
+
this.stopFocusMonitor();
|
|
814
|
+
}
|
|
492
815
|
/** Focuses the control. */
|
|
493
816
|
focus(options) {
|
|
494
817
|
this.control.focus(options);
|
|
495
818
|
}
|
|
496
819
|
/**
|
|
497
820
|
* @deprecated Use `focus` instead.
|
|
821
|
+
*
|
|
822
|
+
* @docs-private
|
|
498
823
|
*/
|
|
499
824
|
focusViaKeyboard(options) {
|
|
500
825
|
this.control.focus(options);
|
|
501
826
|
}
|
|
502
|
-
|
|
503
|
-
|
|
827
|
+
/**
|
|
828
|
+
* @docs-private
|
|
829
|
+
*/
|
|
830
|
+
clearValue(event) {
|
|
831
|
+
event.stopPropagation();
|
|
504
832
|
this.control?.ngControl?.reset();
|
|
505
833
|
this.control?.focus();
|
|
506
834
|
}
|
|
507
|
-
|
|
835
|
+
/**
|
|
836
|
+
* Handles a click on the control's container.
|
|
837
|
+
*
|
|
838
|
+
* @docs-private
|
|
839
|
+
*/
|
|
840
|
+
onContainerClick(event) {
|
|
508
841
|
if (this.control?.onContainerClick) {
|
|
509
|
-
this.control.onContainerClick(
|
|
842
|
+
this.control.onContainerClick(event);
|
|
510
843
|
}
|
|
511
844
|
}
|
|
845
|
+
/**
|
|
846
|
+
* Handles keydown events.
|
|
847
|
+
*
|
|
848
|
+
* @docs-private
|
|
849
|
+
*/
|
|
512
850
|
onKeyDown(event) {
|
|
513
851
|
if (this.control.controlType === 'input-password' && event.altKey && event.keyCode === F8) {
|
|
514
852
|
this.control.toggleType();
|
|
@@ -518,6 +856,9 @@ class KbqFormField extends KbqColorDirective {
|
|
|
518
856
|
event.preventDefault();
|
|
519
857
|
}
|
|
520
858
|
}
|
|
859
|
+
/**
|
|
860
|
+
* @docs-private
|
|
861
|
+
*/
|
|
521
862
|
onHoverChanged(isHovered) {
|
|
522
863
|
if (isHovered !== this.hovered) {
|
|
523
864
|
this.hovered = isHovered;
|
|
@@ -525,45 +866,71 @@ class KbqFormField extends KbqColorDirective {
|
|
|
525
866
|
}
|
|
526
867
|
}
|
|
527
868
|
/**
|
|
528
|
-
* Gets an ElementRef for the element that a overlay attached to the form-field should be
|
|
529
|
-
* positioned relative to.
|
|
869
|
+
* Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to.
|
|
530
870
|
*/
|
|
531
871
|
getConnectedOverlayOrigin() {
|
|
532
872
|
return this.connectionContainerRef || this.elementRef;
|
|
533
873
|
}
|
|
534
|
-
/**
|
|
874
|
+
/**
|
|
875
|
+
* Determines whether a class from the NgControl should be forwarded to the host element.
|
|
876
|
+
*
|
|
877
|
+
* @docs-private
|
|
878
|
+
*/
|
|
535
879
|
shouldForward(prop) {
|
|
536
880
|
const ngControl = this.control?.ngControl;
|
|
537
881
|
return ngControl && ngControl[prop];
|
|
538
882
|
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
883
|
+
/**
|
|
884
|
+
* Stops the focus monitor for the form field.
|
|
885
|
+
*
|
|
886
|
+
* @docs-private
|
|
887
|
+
*/
|
|
542
888
|
stopFocusMonitor() {
|
|
543
889
|
this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
|
|
544
890
|
}
|
|
545
|
-
/**
|
|
891
|
+
/**
|
|
892
|
+
* Throws an error if the form-field control is missing.
|
|
893
|
+
*
|
|
894
|
+
* @docs-private
|
|
895
|
+
*/
|
|
546
896
|
validateControlChild() {
|
|
547
897
|
if (!this.control) {
|
|
548
898
|
throw getKbqFormFieldMissingControlError();
|
|
549
899
|
}
|
|
550
900
|
}
|
|
551
|
-
/**
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
], queries: [{ propertyName: "control", first: true, predicate: KbqFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: KbqStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, descendants: true }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHints", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["kbqFormField"], usesInheritance: true, ngImport: i0, template: "<div #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__infix\">\n <ng-content />\n </div>\n\n @if (hasSuffix) {\n <div class=\"kbq-form-field__suffix\">\n <ng-content select=\"[kbqSuffix]\" />\n </div>\n }\n\n @if (canShowCleaner && !hasSuffix) {\n <div class=\"kbq-form-field__cleaner\" (click)=\"clearValue($event)\" (keydown.enter)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <ng-content select=\"kbq-password-toggle\" />\n\n <ng-content select=\"kbq-stepper\" />\n</div>\n\n@if (hasHint || passwordHints.length) {\n <div class=\"kbq-form-field__hint\">\n <ng-content select=\"kbq-hint, kbq-password-hint\" />\n </div>\n}\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box;position:relative;border-width:var(--kbq-form-field-size-border-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size) + var(--kbq-size-m) + var(--kbq-size-s))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size) + var(--kbq-form-field-size-icon-button-margin-left) + var(--kbq-form-field-size-icon-button-margin-right))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{position:absolute;top:0;bottom:0;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field .kbq-form-field__prefix{left:0;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-s)}.kbq-form-field .kbq-form-field__suffix{right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-s)}.kbq-form-field .kbq-form-field__cleaner,.kbq-form-field .kbq-password-toggle,.kbq-form-field .kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-form-field .kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size)}.kbq-form-field .kbq-stepper .kbq-stepper-step-up,.kbq-form-field .kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size);text-align:center}.kbq-form-field .kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint) .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-size-3xl) - var(--kbq-size-border-width) * 2);padding:calc(var(--kbq-input-size-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-input-size-padding-horizontal)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size);font-weight:var(--kbq-typography-mono-normal-font-weight);line-height:var(--kbq-typography-mono-normal-line-height);font-family:var(--kbq-typography-mono-normal-font-family);text-transform:var(--kbq-typography-mono-normal-text-transform);font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing);font-variant-ligatures:none;font-feature-settings:\"liga\" 0,\"clig\" 0,\"calt\" 0}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right)}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}.kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height)}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-form-field{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: var(--kbq-size-border-radius);--kbq-form-field-size-icon-size: var(--kbq-size-l);--kbq-form-field-size-icon-margin-left: var(--kbq-size-s);--kbq-form-field-size-icon-margin-right: var(--kbq-size-s);--kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);--kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);--kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);--kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--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{--kbq-input-size-padding-horizontal: var(--kbq-size-m);--kbq-input-size-padding-vertical: var(--kbq-size-xs)}\n", ".kbq-form-field-type-tag-list{--kbq-tag-input-size-padding-left: var(--kbq-size-xxs);--kbq-tag-input-size-padding-right: var(--kbq-size-m);--kbq-tag-input-size-padding-vertical: var(--kbq-size-xxs);--kbq-tag-input-size-content-gap: var(--kbq-size-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
901
|
+
/** Initializes the form field control. */
|
|
902
|
+
initializeControl() {
|
|
903
|
+
if (this.control.controlType) {
|
|
904
|
+
this.elementRef.nativeElement.classList.add(`kbq-form-field-type-${this.control.controlType}`);
|
|
905
|
+
}
|
|
906
|
+
merge(this.control.stateChanges, this.control.ngControl?.valueChanges || EMPTY)
|
|
907
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
908
|
+
.subscribe(() => this.changeDetectorRef.markForCheck());
|
|
909
|
+
}
|
|
910
|
+
/** Initializes the kbqPrefix and kbqSuffix containers. */
|
|
911
|
+
initializePrefixAndSuffix() {
|
|
912
|
+
// Mark the form field as dirty whenever the prefix or suffix children change. This is necessary because we
|
|
913
|
+
// conditionally display the prefix/suffix containers based on whether there is projected content.
|
|
914
|
+
merge(this.prefix.changes, this.suffix.changes)
|
|
915
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
916
|
+
.subscribe(() => this.changeDetectorRef.markForCheck());
|
|
917
|
+
}
|
|
918
|
+
/** Initializes the KbqHint, KbqPasswordHint, KbqReactivePasswordHint and KbqError containers. */
|
|
919
|
+
initializeHint() {
|
|
920
|
+
merge(this.hint.changes, this.passwordHints.changes, this.reactivePasswordHint.changes, this.error.changes)
|
|
921
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
922
|
+
.subscribe(() => this.changeDetectorRef.markForCheck());
|
|
923
|
+
}
|
|
924
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
925
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqFormField, isStandalone: true, selector: "kbq-form-field", inputs: { noBorders: { classPropertyName: "noBorders", publicName: "noBorders", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onHoverChanged(true)", "mouseleave": "onHoverChanged(false)" }, properties: { "class.kbq-form-field_invalid": "invalid", "class.kbq-disabled": "disabled", "class.kbq-form-field_no-borders": "noBorders()", "class.ng-untouched": "shouldForward(\"untouched\")", "class.ng-touched": "shouldForward(\"touched\")", "class.ng-pristine": "shouldForward(\"pristine\")", "class.ng-dirty": "shouldForward(\"dirty\")", "class.ng-valid": "shouldForward(\"valid\")", "class.ng-invalid": "shouldForward(\"invalid\")", "class.ng-pending": "shouldForward(\"pending\")" }, classAttribute: "kbq-form-field" }, providers: [{ provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }], queries: [{ propertyName: "control", first: true, predicate: KbqFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: KbqStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "label", first: true, predicate: KbqLabel, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHints", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }, { propertyName: "reactivePasswordHint", predicate: KbqReactivePasswordHint }, { propertyName: "error", predicate: KbqError }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["kbqFormField"], usesInheritance: true, 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__infix\">\n <ng-content />\n </div>\n\n @if (hasSuffix || hasCleaner || hasPasswordToggle || hasStepper) {\n <div class=\"kbq-form-field__suffix\">\n @if (canShowCleaner) {\n <div class=\"kbq-form-field__cleaner\" (click)=\"clearValue($event)\" (keydown.enter)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <ng-content select=\"kbq-password-toggle, kbq-stepper, [kbqSuffix]\" />\n </div>\n }\n</div>\n\n@if (hasHint || hasPasswordHint || hasError || hasReactivePasswordHint) {\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, kbq-reactive-password-hint\" />\n </div>\n}\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__label{display:flex;margin-bottom:var(--kbq-size-xs)}.kbq-form-field.kbq-form-field-type-select .kbq-form-field__suffix{margin-right:0}.kbq-form-field .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 .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field .kbq-form-field__infix{width:100%;max-width:calc(100% - var(--kbq-size-xs));flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field .kbq-form-field__infix:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field .kbq-form-field__infix:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field .kbq-form-field__infix .kbq-input,.kbq-form-field .kbq-form-field__infix .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:3}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container,.kbq-form-field.kbq-form-field_no-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{display:flex;justify-content:center;align-items:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field .kbq-form-field__prefix+.kbq-form-field__infix{padding-left:0}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-error-text);-webkit-text-fill-color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-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 .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: var(--kbq-size-border-width);--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-xs);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--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-size-addon-width: 28px;--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;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)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-typography-text-normal-font-size);font-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{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-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", ".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: var(--kbq-size-m)}.kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height)}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
555
926
|
}
|
|
556
927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormField, decorators: [{
|
|
557
928
|
type: Component,
|
|
558
|
-
args: [{ selector: 'kbq-form-field', exportAs: 'kbqFormField', host: {
|
|
929
|
+
args: [{ standalone: true, selector: 'kbq-form-field', exportAs: 'kbqFormField', host: {
|
|
559
930
|
class: 'kbq-form-field',
|
|
560
|
-
'[class.kbq-form-field_invalid]': '
|
|
561
|
-
'[class.kbq-
|
|
562
|
-
'[class.kbq-form-
|
|
563
|
-
'[class.kbq-form-field_has-password-toggle]': 'hasPasswordToggle',
|
|
564
|
-
'[class.kbq-form-field_has-cleaner]': 'canShowCleaner',
|
|
565
|
-
'[class.kbq-form-field_has-stepper]': 'hasStepper',
|
|
566
|
-
'[class.kbq-disabled]': 'control.disabled',
|
|
931
|
+
'[class.kbq-form-field_invalid]': 'invalid',
|
|
932
|
+
'[class.kbq-disabled]': 'disabled',
|
|
933
|
+
'[class.kbq-form-field_no-borders]': 'noBorders()',
|
|
567
934
|
'[class.ng-untouched]': 'shouldForward("untouched")',
|
|
568
935
|
'[class.ng-touched]': 'shouldForward("touched")',
|
|
569
936
|
'[class.ng-pristine]': 'shouldForward("pristine")',
|
|
@@ -574,21 +941,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
574
941
|
'(keydown)': 'onKeyDown($event)',
|
|
575
942
|
'(mouseenter)': 'onHoverChanged(true)',
|
|
576
943
|
'(mouseleave)': 'onHoverChanged(false)'
|
|
577
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
578
|
-
|
|
579
|
-
], template: "<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__infix\">\n <ng-content />\n </div>\n\n @if (hasSuffix) {\n <div class=\"kbq-form-field__suffix\">\n <ng-content select=\"[kbqSuffix]\" />\n </div>\n }\n\n @if (canShowCleaner && !hasSuffix) {\n <div class=\"kbq-form-field__cleaner\" (click)=\"clearValue($event)\" (keydown.enter)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <ng-content select=\"kbq-password-toggle\" />\n\n <ng-content select=\"kbq-stepper\" />\n</div>\n\n@if (hasHint || passwordHints.length) {\n <div class=\"kbq-form-field__hint\">\n <ng-content select=\"kbq-hint, kbq-password-hint\" />\n </div>\n}\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box;position:relative;border-width:var(--kbq-form-field-size-border-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size) + var(--kbq-size-m) + var(--kbq-size-s))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size) + var(--kbq-form-field-size-icon-button-margin-left) + var(--kbq-form-field-size-icon-button-margin-right))}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{position:absolute;top:0;bottom:0;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field .kbq-form-field__prefix{left:0;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-s)}.kbq-form-field .kbq-form-field__suffix{right:0;padding-right:var(--kbq-size-m);padding-left:var(--kbq-size-s)}.kbq-form-field .kbq-form-field__cleaner,.kbq-form-field .kbq-password-toggle,.kbq-form-field .kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-form-field .kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size)}.kbq-form-field .kbq-stepper .kbq-stepper-step-up,.kbq-form-field .kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-icon-button-size);text-align:center}.kbq-form-field .kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint) .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;text-overflow:ellipsis;width:100%;min-height:calc(var(--kbq-size-3xl) - var(--kbq-size-border-width) * 2);padding:calc(var(--kbq-input-size-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-input-size-padding-horizontal)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-input.kbq-input-password{font-size:var(--kbq-typography-mono-normal-font-size);font-weight:var(--kbq-typography-mono-normal-font-weight);line-height:var(--kbq-typography-mono-normal-line-height);font-family:var(--kbq-typography-mono-normal-font-family);text-transform:var(--kbq-typography-mono-normal-text-transform);font-feature-settings:var(--kbq-typography-mono-normal-font-feature-settings);letter-spacing:var(--kbq-typography-mono-normal-letter-spacing);font-variant-ligatures:none;font-feature-settings:\"liga\" 0,\"clig\" 0,\"calt\" 0}\n", ".kbq-timepicker{padding-right:var(--kbq-timepicker-size-padding-right)}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:130px}\n", ".kbq-textarea{--kbq-textarea-size-min-height: 64px;--kbq-textarea-size-max-height: 96px;--kbq-textarea-size-padding-vertical: 5px;--kbq-textarea-size-padding-horizontal: var(--kbq-size-m)}.kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height)}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\n", ".kbq-form-field{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: 1px;--kbq-form-field-size-border-radius: var(--kbq-size-border-radius);--kbq-form-field-size-icon-size: var(--kbq-size-l);--kbq-form-field-size-icon-margin-left: var(--kbq-size-s);--kbq-form-field-size-icon-margin-right: var(--kbq-size-s);--kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);--kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);--kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);--kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--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{--kbq-input-size-padding-horizontal: var(--kbq-size-m);--kbq-input-size-padding-vertical: var(--kbq-size-xs)}\n", ".kbq-form-field-type-tag-list{--kbq-tag-input-size-padding-left: var(--kbq-size-xxs);--kbq-tag-input-size-padding-right: var(--kbq-size-m);--kbq-tag-input-size-padding-vertical: var(--kbq-size-xxs);--kbq-tag-input-size-content-gap: var(--kbq-size-s)}\n"] }]
|
|
580
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FocusMonitor }], propDecorators: { control: [{
|
|
944
|
+
}, 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__infix\">\n <ng-content />\n </div>\n\n @if (hasSuffix || hasCleaner || hasPasswordToggle || hasStepper) {\n <div class=\"kbq-form-field__suffix\">\n @if (canShowCleaner) {\n <div class=\"kbq-form-field__cleaner\" (click)=\"clearValue($event)\" (keydown.enter)=\"clearValue($event)\">\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <ng-content select=\"kbq-password-toggle, kbq-stepper, [kbqSuffix]\" />\n </div>\n }\n</div>\n\n@if (hasHint || hasPasswordHint || hasError || hasReactivePasswordHint) {\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, kbq-reactive-password-hint\" />\n </div>\n}\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__label{display:flex;margin-bottom:var(--kbq-size-xs)}.kbq-form-field.kbq-form-field-type-select .kbq-form-field__suffix{margin-right:0}.kbq-form-field .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 .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height)}.kbq-form-field .kbq-form-field__infix{width:100%;max-width:calc(100% - var(--kbq-size-xs));flex-grow:1;padding-left:var(--kbq-form-field-size-infix-left-padding)}.kbq-form-field .kbq-form-field__infix:has(.kbq-select_multiple,.kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),.kbq-form-field .kbq-form-field__infix:has(.kbq-tag-list){padding-left:0;max-width:100%}.kbq-form-field .kbq-form-field__infix .kbq-input,.kbq-form-field .kbq-form-field__infix .kbq-tag-input{padding-right:var(--kbq-form-field-size-infix-right-padding)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius)}.kbq-form-field:hover{z-index:1}.kbq-form-field.cdk-focused,.kbq-form-field.kbq-focused{z-index:3}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container,.kbq-form-field.kbq-form-field_no-borders .kbq-form-field__container{border-color:transparent!important;box-shadow:none!important}.kbq-form-field+.kbq-password-hint{margin-top:var(--kbq-size-m)}.kbq-form-field .kbq-form-field__prefix,.kbq-form-field .kbq-form-field__suffix{display:flex;justify-content:center;align-items:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field .kbq-form-field__prefix+.kbq-form-field__infix{padding-left:0}.kbq-form-field .kbq-form-field__hint{display:flex;flex-direction:column;gap:var(--kbq-size-xxs);margin-top:var(--kbq-form-field-hint-size-margin-top)}.kbq-form-field .kbq-form-field__hint .kbq-password-hint:first-child{margin-top:var(--kbq-size-s)}.kbq-form-field .kbq-password-hint{margin-top:var(--kbq-form-field-hint-size-gap)}.kbq-form-field .kbq-form-field__container{border-color:var(--kbq-form-field-default-border-color);background-color:var(--kbq-form-field-default-background)}.kbq-form-field .kbq-input,.kbq-form-field .kbq-tag-input,.kbq-form-field .kbq-textarea{color:var(--kbq-form-field-default-text)}.kbq-form-field .kbq-input::placeholder,.kbq-form-field .kbq-tag-input::placeholder,.kbq-form-field .kbq-textarea::placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-ms-input-placeholder,.kbq-form-field .kbq-tag-input::-ms-input-placeholder,.kbq-form-field .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input::-webkit-input-placeholder,.kbq-form-field .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-default-placeholder)}.kbq-form-field .kbq-input:-webkit-autofill,.kbq-form-field .kbq-input:-webkit-autofill:hover,.kbq-form-field .kbq-input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);-webkit-text-fill-color:var(--kbq-form-field-states-autofill-text);caret-color:var(--kbq-form-field-states-autofill-text)}.kbq-form-field.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{border-color:var(--kbq-form-field-states-focused-border-color);background-color:var(--kbq-form-field-states-focused-background)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea{color:var(--kbq-form-field-states-focused-text)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-focused-placeholder)}.kbq-form-field.kbq-form-field-type-input.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-form-field__container{border-color:var(--kbq-form-field-states-error-border-color);background-color:var(--kbq-form-field-states-error-background)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea{color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-textarea::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid.cdk-focused .kbq-form-field__container,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid.cdk-focused .kbq-form-field__container{box-shadow:0 0 .1px 1px var(--kbq-form-field-states-error-focused-focus-outline)}.kbq-form-field.kbq-form-field-type-input.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-textarea.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-timepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-datepicker.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-input-password.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-tag-list.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_invalid .kbq-icon.kbq-empty,.kbq-form-field.kbq-form-field-type-select.cdk-keyboard-focused.kbq-form-field_has-validate-directive.ng-invalid .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-error-text);-webkit-text-fill-color:var(--kbq-form-field-states-error-text)}.kbq-form-field.kbq-disabled .kbq-form-field__container{border-color:var(--kbq-form-field-states-disabled-border-color);background-color:var(--kbq-form-field-states-disabled-background)}.kbq-form-field.kbq-disabled .kbq-input,.kbq-form-field.kbq-disabled .kbq-tag-input,.kbq-form-field.kbq-disabled .kbq-textarea{color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field.kbq-disabled .kbq-input::placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-ms-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-ms-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-tag-input::-webkit-input-placeholder,.kbq-form-field.kbq-disabled .kbq-textarea::-webkit-input-placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-form-field.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-form-field-states-disabled-text);-webkit-text-fill-color:var(--kbq-form-field-states-disabled-text)}.kbq-form-field .kbq-form-field__prefix .kbq-icon.kbq-empty,.kbq-form-field .kbq-form-field__suffix .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast-fade)}.kbq-form-field .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning,.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-form-field{font-size:var(--kbq-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 .kbq-form-field__hint>.kbq-hint:not(.kbq-password-hint,.kbq-reactive-password-hint,.kbq-contrast-fade,.kbq-success,.kbq-warning) .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{--kbq-form-field-size-height: var(--kbq-size-3xl);--kbq-form-field-size-border-width: var(--kbq-size-border-width);--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-xs);--kbq-form-field-hint-size-gap: var(--kbq-size-s);--kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--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-size-addon-width: 28px;--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;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)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}.kbq-input,.kbq-input.kbq-input-password::placeholder{font-size:var(--kbq-typography-text-normal-font-size);font-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{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-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", ".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: var(--kbq-size-m)}.kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height)}.kbq-textarea.kbq-textarea_max-row-limit-reached{resize:unset}.kbq-textarea:invalid{box-shadow:unset}\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"] }]
|
|
945
|
+
}], propDecorators: { control: [{
|
|
581
946
|
type: ContentChild,
|
|
582
|
-
args: [KbqFormFieldControl
|
|
947
|
+
args: [KbqFormFieldControl]
|
|
583
948
|
}], stepper: [{
|
|
584
949
|
type: ContentChild,
|
|
585
|
-
args: [KbqStepper
|
|
950
|
+
args: [KbqStepper]
|
|
586
951
|
}], cleaner: [{
|
|
587
952
|
type: ContentChild,
|
|
588
|
-
args: [KbqCleaner, {
|
|
953
|
+
args: [KbqCleaner, { descendants: false }]
|
|
589
954
|
}], passwordToggle: [{
|
|
590
955
|
type: ContentChild,
|
|
591
|
-
args: [KbqPasswordToggle
|
|
956
|
+
args: [KbqPasswordToggle]
|
|
592
957
|
}], hint: [{
|
|
593
958
|
type: ContentChildren,
|
|
594
959
|
args: [KbqHint]
|
|
@@ -604,19 +969,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
604
969
|
}], connectionContainerRef: [{
|
|
605
970
|
type: ViewChild,
|
|
606
971
|
args: ['connectionContainer', { static: true }]
|
|
972
|
+
}], reactivePasswordHint: [{
|
|
973
|
+
type: ContentChildren,
|
|
974
|
+
args: [KbqReactivePasswordHint]
|
|
975
|
+
}], error: [{
|
|
976
|
+
type: ContentChildren,
|
|
977
|
+
args: [KbqError]
|
|
978
|
+
}], label: [{
|
|
979
|
+
type: ContentChild,
|
|
980
|
+
args: [KbqLabel]
|
|
607
981
|
}] } });
|
|
982
|
+
/**
|
|
983
|
+
* @docs-private
|
|
984
|
+
*
|
|
985
|
+
* @deprecated Will be removed in next major release, use `noBorders` input instead.
|
|
986
|
+
*/
|
|
608
987
|
class KbqFormFieldWithoutBorders {
|
|
609
988
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldWithoutBorders, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
610
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", host: { classAttribute: "kbq-form-field_without-borders" }, exportAs: ["kbqFormFieldWithoutBorders"], ngImport: i0 }); }
|
|
989
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqFormFieldWithoutBorders, isStandalone: true, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", host: { classAttribute: "kbq-form-field_without-borders" }, exportAs: ["kbqFormFieldWithoutBorders"], ngImport: i0 }); }
|
|
611
990
|
}
|
|
612
991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldWithoutBorders, decorators: [{
|
|
613
992
|
type: Directive,
|
|
614
993
|
args: [{
|
|
994
|
+
standalone: true,
|
|
615
995
|
selector: 'kbq-form-field[kbqFormFieldWithoutBorders]',
|
|
616
996
|
exportAs: 'kbqFormFieldWithoutBorders',
|
|
617
997
|
host: { class: 'kbq-form-field_without-borders' }
|
|
618
998
|
}]
|
|
619
999
|
}] });
|
|
1000
|
+
/**
|
|
1001
|
+
* @docs-private
|
|
1002
|
+
*/
|
|
620
1003
|
class KbqTrim {
|
|
621
1004
|
constructor(noTrim, ngControl) {
|
|
622
1005
|
this.noTrim = noTrim;
|
|
@@ -637,12 +1020,13 @@ class KbqTrim {
|
|
|
637
1020
|
}
|
|
638
1021
|
return typeof value === 'string' ? value.trim() : value;
|
|
639
1022
|
}
|
|
640
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTrim, deps: [{ token: 'no-trim', attribute: true }, { token: i1$
|
|
641
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTrim, selector: "[kbqInput], [kbqTextarea]", host: { classAttribute: "kbq-trim" }, exportAs: ["KbqTrim"], ngImport: i0 }); }
|
|
1023
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTrim, deps: [{ token: 'no-trim', attribute: true }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1024
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTrim, isStandalone: true, selector: "[kbqInput], [kbqTextarea]", host: { classAttribute: "kbq-trim" }, exportAs: ["KbqTrim"], ngImport: i0 }); }
|
|
642
1025
|
}
|
|
643
1026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTrim, decorators: [{
|
|
644
1027
|
type: Directive,
|
|
645
1028
|
args: [{
|
|
1029
|
+
standalone: true,
|
|
646
1030
|
selector: '[kbqInput], [kbqTextarea]',
|
|
647
1031
|
exportAs: 'KbqTrim',
|
|
648
1032
|
host: { class: 'kbq-trim' }
|
|
@@ -650,7 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
650
1034
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
651
1035
|
type: Attribute,
|
|
652
1036
|
args: ['no-trim']
|
|
653
|
-
}] }, { type: i1$
|
|
1037
|
+
}] }, { type: i1$1.NgControl, decorators: [{
|
|
654
1038
|
type: Optional
|
|
655
1039
|
}, {
|
|
656
1040
|
type: Self
|
|
@@ -659,22 +1043,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
659
1043
|
/**
|
|
660
1044
|
* @deprecated Will be removed in next major release (#DS-2838)
|
|
661
1045
|
*
|
|
662
|
-
* Legacy
|
|
1046
|
+
* Legacy validation directive.
|
|
663
1047
|
*
|
|
664
1048
|
* ### How to disable?
|
|
665
1049
|
*
|
|
666
1050
|
* ```typescript
|
|
667
|
-
* import {
|
|
1051
|
+
* import { kbqDisableLegacyValidationDirectiveProvider } from '@koobiq/components/core';
|
|
668
1052
|
*
|
|
669
1053
|
* @NgModule({
|
|
670
|
-
* providers: [
|
|
671
|
-
* {
|
|
672
|
-
* provide: KBQ_VALIDATION,
|
|
673
|
-
* useValue: { useValidation: false } satisfies KbqValidationOptions
|
|
674
|
-
* }
|
|
675
|
-
* ]
|
|
1054
|
+
* providers: [kbqDisableLegacyValidationDirectiveProvider()]
|
|
676
1055
|
* })
|
|
677
1056
|
* ```
|
|
1057
|
+
*
|
|
1058
|
+
* @docs-private
|
|
678
1059
|
*/
|
|
679
1060
|
class KbqValidateDirective {
|
|
680
1061
|
get isNgModel() {
|
|
@@ -695,7 +1076,7 @@ class KbqValidateDirective {
|
|
|
695
1076
|
get hasNotSubmittedParent() {
|
|
696
1077
|
return this.parent && !this.parent.submitted;
|
|
697
1078
|
}
|
|
698
|
-
constructor(formFieldControl, rawValidators, ngControl, parentForm, parentFormGroup, mcValidation, cdr, parentFormField) {
|
|
1079
|
+
constructor(formFieldControl, rawValidators, ngControl, parentForm, parentFormGroup, mcValidation, cdr, parentFormField, elementRef) {
|
|
699
1080
|
this.formFieldControl = formFieldControl;
|
|
700
1081
|
this.rawValidators = rawValidators;
|
|
701
1082
|
this.ngControl = ngControl;
|
|
@@ -704,10 +1085,12 @@ class KbqValidateDirective {
|
|
|
704
1085
|
this.mcValidation = mcValidation;
|
|
705
1086
|
this.cdr = cdr;
|
|
706
1087
|
this.parentFormField = parentFormField;
|
|
707
|
-
this.
|
|
1088
|
+
this.elementRef = elementRef;
|
|
708
1089
|
}
|
|
709
1090
|
ngAfterContentInit() {
|
|
710
1091
|
if (this.mcValidation.useValidation) {
|
|
1092
|
+
this.parentFormField?.elementRef.nativeElement.classList.add('kbq-form-field_has-validate-directive');
|
|
1093
|
+
this.elementRef.nativeElement.classList.add('kbq-control_has-validate-directive');
|
|
711
1094
|
this.setMosaicValidation();
|
|
712
1095
|
}
|
|
713
1096
|
}
|
|
@@ -790,12 +1173,13 @@ class KbqValidateDirective {
|
|
|
790
1173
|
}
|
|
791
1174
|
});
|
|
792
1175
|
}
|
|
793
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqValidateDirective, deps: [{ token: forwardRef(() => KbqFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$
|
|
794
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqValidateDirective, selector: "\n input[kbqInput],\n input[kbqNumberInput],\n input[kbqInputPassword],\n input[kbqTimepicker],\n input[kbqDatepicker],\n textarea[kbqTextarea],\n kbq-select,\n kbq-tree-select,\n kbq-tag-list\n ",
|
|
1176
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqValidateDirective, deps: [{ token: forwardRef(() => KbqFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: KBQ_VALIDATION, optional: true }, { token: i0.ChangeDetectorRef }, { token: KbqFormField, host: true, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1177
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqValidateDirective, isStandalone: true, selector: "\n input[kbqInput],\n input[kbqNumberInput],\n input[kbqInputPassword],\n input[kbqTimepicker],\n input[kbqDatepicker],\n textarea[kbqTextarea],\n kbq-select,\n kbq-tree-select,\n kbq-tag-list\n ", exportAs: ["KbqValidate"], ngImport: i0 }); }
|
|
795
1178
|
}
|
|
796
1179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqValidateDirective, decorators: [{
|
|
797
1180
|
type: Directive,
|
|
798
1181
|
args: [{
|
|
1182
|
+
standalone: true,
|
|
799
1183
|
selector: `
|
|
800
1184
|
input[kbqInput],
|
|
801
1185
|
input[kbqNumberInput],
|
|
@@ -807,10 +1191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
807
1191
|
kbq-tree-select,
|
|
808
1192
|
kbq-tag-list
|
|
809
1193
|
`,
|
|
810
|
-
exportAs: 'KbqValidate'
|
|
811
|
-
host: {
|
|
812
|
-
class: 'kbq-control_has-validate-directive'
|
|
813
|
-
}
|
|
1194
|
+
exportAs: 'KbqValidate'
|
|
814
1195
|
}]
|
|
815
1196
|
}], ctorParameters: () => [{ type: KbqFormFieldControl, decorators: [{
|
|
816
1197
|
type: Inject,
|
|
@@ -822,13 +1203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
822
1203
|
}, {
|
|
823
1204
|
type: Inject,
|
|
824
1205
|
args: [NG_VALIDATORS]
|
|
825
|
-
}] }, { type: i1$
|
|
1206
|
+
}] }, { type: i1$1.NgControl, decorators: [{
|
|
826
1207
|
type: Optional
|
|
827
1208
|
}, {
|
|
828
1209
|
type: Self
|
|
829
|
-
}] }, { type: i1$
|
|
1210
|
+
}] }, { type: i1$1.NgForm, decorators: [{
|
|
830
1211
|
type: Optional
|
|
831
|
-
}] }, { type: i1$
|
|
1212
|
+
}] }, { type: i1$1.FormGroupDirective, decorators: [{
|
|
832
1213
|
type: Optional
|
|
833
1214
|
}] }, { type: undefined, decorators: [{
|
|
834
1215
|
type: Optional
|
|
@@ -839,67 +1220,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
839
1220
|
type: Optional
|
|
840
1221
|
}, {
|
|
841
1222
|
type: Host
|
|
842
|
-
}] }] });
|
|
1223
|
+
}] }, { type: i0.ElementRef }] });
|
|
843
1224
|
|
|
1225
|
+
const COMPONENTS = [
|
|
1226
|
+
KbqCleaner,
|
|
1227
|
+
KbqFormField,
|
|
1228
|
+
KbqPrefix,
|
|
1229
|
+
KbqSuffix,
|
|
1230
|
+
KbqPasswordToggle,
|
|
1231
|
+
KbqStepper,
|
|
1232
|
+
KbqLabel,
|
|
1233
|
+
KbqHint,
|
|
1234
|
+
KbqError,
|
|
1235
|
+
KbqReactivePasswordHint,
|
|
1236
|
+
KbqLegend,
|
|
1237
|
+
KbqFieldset,
|
|
1238
|
+
KbqFieldsetItem,
|
|
1239
|
+
// Legacy components
|
|
1240
|
+
KbqPasswordHint,
|
|
1241
|
+
KbqFormFieldWithoutBorders,
|
|
1242
|
+
KbqValidateDirective,
|
|
1243
|
+
KbqTrim
|
|
1244
|
+
];
|
|
844
1245
|
class KbqFormFieldModule {
|
|
845
1246
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
846
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldModule,
|
|
847
|
-
|
|
848
|
-
KbqHint,
|
|
849
|
-
KbqPasswordHint,
|
|
1247
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldModule, imports: [KbqCleaner,
|
|
1248
|
+
KbqFormField,
|
|
850
1249
|
KbqPrefix,
|
|
851
1250
|
KbqSuffix,
|
|
852
|
-
|
|
1251
|
+
KbqPasswordToggle,
|
|
853
1252
|
KbqStepper,
|
|
854
|
-
|
|
855
|
-
KbqTrim,
|
|
856
|
-
KbqPasswordToggle], imports: [KbqIconModule,
|
|
857
|
-
NgClass], exports: [KbqFormField,
|
|
858
|
-
KbqFormFieldWithoutBorders,
|
|
1253
|
+
KbqLabel,
|
|
859
1254
|
KbqHint,
|
|
1255
|
+
KbqError,
|
|
1256
|
+
KbqReactivePasswordHint,
|
|
1257
|
+
KbqLegend,
|
|
1258
|
+
KbqFieldset,
|
|
1259
|
+
KbqFieldsetItem,
|
|
1260
|
+
// Legacy components
|
|
860
1261
|
KbqPasswordHint,
|
|
1262
|
+
KbqFormFieldWithoutBorders,
|
|
1263
|
+
KbqValidateDirective,
|
|
1264
|
+
KbqTrim], exports: [KbqCleaner,
|
|
1265
|
+
KbqFormField,
|
|
861
1266
|
KbqPrefix,
|
|
862
1267
|
KbqSuffix,
|
|
863
|
-
|
|
1268
|
+
KbqPasswordToggle,
|
|
864
1269
|
KbqStepper,
|
|
1270
|
+
KbqLabel,
|
|
1271
|
+
KbqHint,
|
|
1272
|
+
KbqError,
|
|
1273
|
+
KbqReactivePasswordHint,
|
|
1274
|
+
KbqLegend,
|
|
1275
|
+
KbqFieldset,
|
|
1276
|
+
KbqFieldsetItem,
|
|
1277
|
+
// Legacy components
|
|
1278
|
+
KbqPasswordHint,
|
|
1279
|
+
KbqFormFieldWithoutBorders,
|
|
865
1280
|
KbqValidateDirective,
|
|
866
|
-
KbqTrim
|
|
867
|
-
|
|
868
|
-
|
|
1281
|
+
KbqTrim] }); }
|
|
1282
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldModule, imports: [KbqCleaner,
|
|
1283
|
+
KbqPasswordToggle,
|
|
1284
|
+
KbqStepper,
|
|
1285
|
+
KbqReactivePasswordHint,
|
|
1286
|
+
// Legacy components
|
|
1287
|
+
KbqPasswordHint] }); }
|
|
869
1288
|
}
|
|
870
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqFormFieldModule, decorators: [{
|
|
871
1290
|
type: NgModule,
|
|
872
1291
|
args: [{
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
KbqFormFieldWithoutBorders,
|
|
876
|
-
KbqHint,
|
|
877
|
-
KbqPasswordHint,
|
|
878
|
-
KbqPrefix,
|
|
879
|
-
KbqSuffix,
|
|
880
|
-
KbqCleaner,
|
|
881
|
-
KbqStepper,
|
|
882
|
-
KbqValidateDirective,
|
|
883
|
-
KbqTrim,
|
|
884
|
-
KbqPasswordToggle
|
|
885
|
-
],
|
|
886
|
-
imports: [
|
|
887
|
-
KbqIconModule,
|
|
888
|
-
NgClass
|
|
889
|
-
],
|
|
890
|
-
exports: [
|
|
891
|
-
KbqFormField,
|
|
892
|
-
KbqFormFieldWithoutBorders,
|
|
893
|
-
KbqHint,
|
|
894
|
-
KbqPasswordHint,
|
|
895
|
-
KbqPrefix,
|
|
896
|
-
KbqSuffix,
|
|
897
|
-
KbqCleaner,
|
|
898
|
-
KbqStepper,
|
|
899
|
-
KbqValidateDirective,
|
|
900
|
-
KbqTrim,
|
|
901
|
-
KbqPasswordToggle
|
|
902
|
-
]
|
|
1292
|
+
imports: COMPONENTS,
|
|
1293
|
+
exports: COMPONENTS
|
|
903
1294
|
}]
|
|
904
1295
|
}] });
|
|
905
1296
|
|
|
@@ -907,5 +1298,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
907
1298
|
* Generated bundle index. Do not edit.
|
|
908
1299
|
*/
|
|
909
1300
|
|
|
910
|
-
export { KbqCleaner, KbqFormField, KbqFormFieldControl, KbqFormFieldModule, KbqFormFieldWithoutBorders, KbqHint, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqStepper, KbqSuffix, KbqTrim, KbqValidateDirective, PasswordRules, getKbqFormFieldMissingControlError, getKbqFormFieldYouCanNotUseCleanerInNumberInputError, hasPasswordStrengthError, regExpPasswordValidator };
|
|
1301
|
+
export { KBQ_FORM_FIELD_DEFAULT_OPTIONS, KbqCleaner, KbqError, KbqFieldset, KbqFieldsetItem, KbqFormField, KbqFormFieldControl, KbqFormFieldModule, KbqFormFieldWithoutBorders, KbqHint, KbqLabel, KbqLegend, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqReactivePasswordHint, KbqStepper, KbqSuffix, KbqTrim, KbqValidateDirective, PasswordRules, getKbqFormFieldMissingControlError, getKbqFormFieldYouCanNotUseCleanerInNumberInputError, hasPasswordStrengthError, kbqFormFieldDefaultOptionsProvider, regExpPasswordValidator };
|
|
911
1302
|
//# sourceMappingURL=koobiq-components-form-field.mjs.map
|