@koobiq/components 16.0.0-beta.1

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

@@ -0,0 +1,825 @@
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input, forwardRef, ChangeDetectionStrategy, Inject, Optional, Directive, EventEmitter, Output, ContentChild, ContentChildren, ViewChild, Attribute, Self, NgModule } from '@angular/core';
+import * as i1 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i1$3 from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1$4 from '@angular/forms';
+import { NgModel, FormControlName, FormControlDirective, RequiredValidator, NG_VALIDATORS } from '@angular/forms';
+import { F8, ESCAPE } from '@koobiq/cdk/keycodes';
+import { mixinColor, KbqComponentColors, KBQ_FORM_FIELD_REF, PopUpTriggers, KBQ_VALIDATION } from '@koobiq/components/core';
+import { Subject, EMPTY, merge } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/cdk/bidi';
+import * as i1$2 from '@angular/cdk/overlay';
+import { KbqTooltipTrigger, KBQ_TOOLTIP_SCROLL_STRATEGY } from '@koobiq/components/tooltip';
+
+class KbqCleaner {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCleaner, selector: "kbq-cleaner", host: { classAttribute: "kbq-cleaner" }, exportAs: ["mcCleaner"], ngImport: i0, template: `<i kbq-icon-button="mc-close-circle_16" [autoColor]="true"></i>`, isInline: true, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCleaner, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-cleaner', exportAs: 'mcCleaner', template: `<i kbq-icon-button="mc-close-circle_16" [autoColor]="true"></i>`, host: {
+                        class: 'kbq-cleaner'
+                    }, encapsulation: ViewEncapsulation.None, styles: [".kbq-cleaner{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%;cursor:pointer}\n"] }]
+        }] });
+
+/** An interface which allows a control to work inside of a `MсFormField`. */
+// tslint:disable-next-line:naming-convention
+class KbqFormFieldControl {
+}
+
+function getKbqFormFieldMissingControlError() {
+    return Error('kbq-form-field must contain a KbqFormFieldControl.');
+}
+function getKbqFormFieldYouCanNotUseCleanerInNumberInputError() {
+    return Error(`You can't use kbq-cleaner with input that have type="number"`);
+}
+
+let nextHintUniqueId = 0;
+/** @docs-private */
+class KbqHintBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqHintMixinBase = mixinColor(KbqHintBase, KbqComponentColors.Empty);
+class KbqHint extends KbqHintMixinBase {
+    constructor(elementRef) {
+        super(elementRef);
+        this.id = `kbq-hint-${nextHintUniqueId++}`;
+        this.fillTextOff = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqHint, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqHint, selector: "kbq-hint", inputs: { color: "color", id: "id", fillTextOff: "fillTextOff" }, host: { properties: { "attr.id": "id", "class.kbq-hint_fill-text-off": "fillTextOff" }, classAttribute: "kbq-hint" }, exportAs: ["mcHint"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<span class=\"kbq-hint__text\">\n    <ng-content></ng-content>\n</span>\n", styles: [".kbq-hint{display:block}.kbq-hint .kbq-icon{margin-right:var(--kbq-hint-size-content-padding, 4px)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-hint', exportAs: 'mcHint', inputs: ['color'], host: {
+                        class: 'kbq-hint',
+                        '[attr.id]': 'id',
+                        '[class.kbq-hint_fill-text-off]': 'fillTextOff'
+                    }, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<span class=\"kbq-hint__text\">\n    <ng-content></ng-content>\n</span>\n", styles: [".kbq-hint{display:block}.kbq-hint .kbq-icon{margin-right:var(--kbq-hint-size-content-padding, 4px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], fillTextOff: [{
+                type: Input
+            }] } });
+
+let nextPasswordHintUniqueId = 0;
+var PasswordRules;
+(function (PasswordRules) {
+    PasswordRules[PasswordRules["Length"] = 0] = "Length";
+    PasswordRules[PasswordRules["UpperLatin"] = 1] = "UpperLatin";
+    PasswordRules[PasswordRules["LowerLatin"] = 2] = "LowerLatin";
+    PasswordRules[PasswordRules["Digit"] = 3] = "Digit";
+    PasswordRules[PasswordRules["LatinAndSpecialSymbols"] = 4] = "LatinAndSpecialSymbols";
+    PasswordRules[PasswordRules["Custom"] = 5] = "Custom";
+})(PasswordRules || (PasswordRules = {}));
+const regExpPasswordValidator = {
+    [PasswordRules.LowerLatin]: RegExp(/^(?=.*?[a-z])/),
+    [PasswordRules.UpperLatin]: RegExp(/^(?=.*?[A-Z])/),
+    [PasswordRules.Digit]: RegExp(/^(?=.*?[0-9])/),
+    [PasswordRules.LatinAndSpecialSymbols]: RegExp(/[^ !`"'#№$%&()*+,-./\\:;<=>?@[\]^_{|}~A-Za-z0-9]/)
+};
+class KbqPasswordHint {
+    get icon() {
+        return this.checked ? 'kbq-check_16' : 'kbq-close-M_16';
+    }
+    get control() {
+        return this.formField.control;
+    }
+    constructor(changeDetectorRef, formField) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.formField = formField;
+        this.id = `kbq-hint-${nextPasswordHintUniqueId++}`;
+        this.hasError = false;
+        this.checked = false;
+        this.checkValue = () => {
+            if (this.control.focused && this.isValueChanged()) {
+                this.hasError = false;
+                this.checked = this.checkRule(this.control.value);
+            }
+            else if (!this.control.focused && !this.isValueChanged()) {
+                this.hasError = !this.checkRule(this.control.value);
+            }
+            if (!this.control.required && !this.control.value) {
+                this.checked = this.hasError = false;
+            }
+            this.lastControlValue = this.control.value;
+            this.changeDetectorRef.markForCheck();
+        };
+    }
+    ngAfterContentInit() {
+        if (this.rule === null) {
+            throw Error('You should set [rule] name');
+        }
+        if (this.rule === PasswordRules.Custom && this.regex === undefined) {
+            throw Error('You should set [regex] for PasswordRules.Custom');
+        }
+        if (this.rule === PasswordRules.Length && (this.min || this.max) === null) {
+            throw Error('For [rule] "Length" need set [min] and [max]');
+        }
+        if (this.rule === PasswordRules.Length) {
+            this.checkRule = this.checkLengthRule;
+        }
+        else if ([PasswordRules.UpperLatin, PasswordRules.LowerLatin, PasswordRules.Digit].includes(this.rule)) {
+            this.regex = regExpPasswordValidator[this.rule];
+            this.checkRule = this.checkRegexRule;
+        }
+        else if (this.rule === PasswordRules.LatinAndSpecialSymbols) {
+            this.regex = regExpPasswordValidator[this.rule];
+            this.checkRule = this.checkSpecialSymbolsRegexRule;
+        }
+        else if (this.rule === PasswordRules.Custom) {
+            this.checkRule = this.checkRegexRule;
+        }
+        else {
+            throw Error(`Unknown [rule]=${this.rule}`);
+        }
+        this.formField.control.stateChanges
+            .subscribe(this.checkValue);
+        this.formField.control.checkRule
+            .subscribe(() => {
+            this.checked = this.checkRule(this.control.value);
+            this.hasError = !this.checkRule(this.control.value);
+        });
+    }
+    checkLengthRule(value) {
+        return value.length >= this.min && value.length <= this.max;
+    }
+    checkRegexRule(value) {
+        return !!this.regex?.test(value);
+    }
+    checkSpecialSymbolsRegexRule(value) {
+        return !!value && !this.regex?.test(value);
+    }
+    isValueChanged() {
+        return this.lastControlValue !== this.formField.control.value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPasswordHint, deps: [{ token: i0.ChangeDetectorRef }, { token: forwardRef(() => KBQ_FORM_FIELD_REF) }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqPasswordHint, selector: "kbq-password-hint", inputs: { id: "id", rule: "rule", min: "min", max: "max", regex: "regex" }, host: { properties: { "class.kbq-password-hint_valid": "checked", "class.kbq-password-hint_invalid": "hasError", "attr.id": "id" }, classAttribute: "kbq-password-hint" }, ngImport: i0, template: `
+        <i class="kbq-password-hint__icon"
+           kbq-icon=""
+           [class.kbq-success]="checked"
+           [class.kbq-error]="hasError"
+           [ngClass]="icon">
+        </i>
+
+        <span class="kbq-password-hint__text">
+            <ng-content></ng-content>
+        </span>
+    `, isInline: true, styles: [".kbq-password-hint{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPasswordHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-password-hint', template: `
+        <i class="kbq-password-hint__icon"
+           kbq-icon=""
+           [class.kbq-success]="checked"
+           [class.kbq-error]="hasError"
+           [ngClass]="icon">
+        </i>
+
+        <span class="kbq-password-hint__text">
+            <ng-content></ng-content>
+        </span>
+    `, host: {
+                        class: 'kbq-password-hint',
+                        '[class.kbq-password-hint_valid]': 'checked',
+                        '[class.kbq-password-hint_invalid]': 'hasError',
+                        '[attr.id]': 'id'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-hint{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => KBQ_FORM_FIELD_REF)]
+                }] }]; }, propDecorators: { id: [{
+                type: Input
+            }], rule: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], regex: [{
+                type: Input
+            }] } });
+
+class KbqPasswordToggle extends KbqTooltipTrigger {
+    get content() {
+        return this.formField.control.elementType === 'password' ?
+            this.mcTooltipHidden :
+            this._content;
+    }
+    set content(content) {
+        this._content = content;
+        this.updateData();
+    }
+    get hidden() {
+        return this.formField.control.elementType === 'password';
+    }
+    get icon() {
+        return this.hidden ? 'kbq-eye_16' : 'kbq-eye-crossed_16';
+    }
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, formField) {
+        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
+        this.formField = formField;
+        this.trigger = `${PopUpTriggers.Hover}`;
+    }
+    toggle(event) {
+        this.hide();
+        const input = this.formField.control;
+        input.toggleType();
+        this.updateData();
+        event.preventDefault();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPasswordToggle, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$2.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: forwardRef(() => KBQ_FORM_FIELD_REF) }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqPasswordToggle, selector: "kbq-password-toggle", inputs: { content: ["mcTooltipNotHidden", "content"], mcTooltipHidden: "mcTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, classAttribute: "kbq-password-toggle" }, exportAs: ["mcPasswordToggle"], usesInheritance: true, ngImport: i0, template: '<i kbq-icon-button="" [ngClass]="icon" [autoColor]="true"></i>', isInline: true, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPasswordToggle, decorators: [{
+            type: Component,
+            args: [{ selector: `kbq-password-toggle`, exportAs: 'mcPasswordToggle', template: '<i kbq-icon-button="" [ngClass]="icon" [autoColor]="true"></i>', host: {
+                        class: 'kbq-password-toggle',
+                        '(click)': 'toggle($event)',
+                        '(keydown.ENTER)': 'toggle($event)',
+                        '(keydown.SPACE)': 'toggle($event)'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-password-toggle{display:flex;align-items:center;justify-content:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-password-toggle::-moz-focus-inner{border:0}.kbq-password-toggle:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
+                }] }, { type: i2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => KBQ_FORM_FIELD_REF)]
+                }] }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['mcTooltipNotHidden']
+            }], mcTooltipHidden: [{
+                type: Input
+            }] } });
+
+class KbqPrefix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqPrefix, selector: "[mcPrefix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcPrefix]'
+                }]
+        }] });
+
+class KbqStepper {
+    constructor() {
+        this.stepUp = new EventEmitter();
+        this.stepDown = new EventEmitter();
+    }
+    connectTo(numberInput) {
+        if (!numberInput) {
+            return;
+        }
+        this.stepUp.subscribe(() => {
+            numberInput.stepUp(numberInput.step);
+        });
+        this.stepDown.subscribe(() => {
+            numberInput.stepDown(numberInput.step);
+        });
+    }
+    onStepUp($event) {
+        this.stepUp.emit();
+        $event.preventDefault();
+    }
+    onStepDown($event) {
+        this.stepDown.emit();
+        $event.preventDefault();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqStepper, selector: "kbq-stepper", outputs: { stepUp: "stepUp", stepDown: "stepDown" }, host: { classAttribute: "kbq-stepper" }, ngImport: i0, template: `
+        <i kbq-icon-button="mc-angle-down-L_16"
+           class="kbq-stepper-step-up"
+           [small]="true"
+           [tabindex]="-1"
+           [autoColor]="true"
+           (mousedown)="onStepUp($event)">
+        </i>
+        <i kbq-icon-button="mc-angle-down-L_16"
+           class="kbq-stepper-step-down"
+           [small]="true"
+           [tabindex]="-1"
+           [autoColor]="true"
+           (mousedown)="onStepDown($event)">
+        </i>
+    `, isInline: true, styles: [".kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-button-width, );text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}\n"], dependencies: [{ kind: "component", type: i1.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-stepper', template: `
+        <i kbq-icon-button="mc-angle-down-L_16"
+           class="kbq-stepper-step-up"
+           [small]="true"
+           [tabindex]="-1"
+           [autoColor]="true"
+           (mousedown)="onStepUp($event)">
+        </i>
+        <i kbq-icon-button="mc-angle-down-L_16"
+           class="kbq-stepper-step-down"
+           [small]="true"
+           [tabindex]="-1"
+           [autoColor]="true"
+           (mousedown)="onStepDown($event)">
+        </i>
+    `, host: {
+                        class: 'kbq-stepper'
+                    }, 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-icon-button-size, 24px);margin-right:var(--kbq-form-field-size-icon-button-margin-right, 4px);height:100%}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-button-width, );text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}\n"] }]
+        }], propDecorators: { stepUp: [{
+                type: Output
+            }], stepDown: [{
+                type: Output
+            }] } });
+
+class KbqSuffix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqSuffix, selector: "[mcSuffix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcSuffix]'
+                }]
+        }] });
+
+let nextUniqueId = 0;
+/** @docs-private */
+class KbqFormFieldBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqFormFieldMixinBase = mixinColor(KbqFormFieldBase);
+class KbqFormField extends KbqFormFieldMixinBase {
+    get hasHint() {
+        return this.hint?.length > 0;
+    }
+    get hasPasswordStrengthError() {
+        return this.passwordHints?.some((hint) => hint.hasError);
+    }
+    get hasSuffix() {
+        return this.suffix?.length > 0;
+    }
+    get hasPrefix() {
+        return this.prefix?.length > 0;
+    }
+    get hasCleaner() {
+        return !!this.cleaner;
+    }
+    get hasStepper() {
+        return !!this.stepper;
+    }
+    get hasPasswordToggle() {
+        return !!this.passwordToggle;
+    }
+    get canShowCleaner() {
+        return this.hasCleaner &&
+            this.control?.ngControl
+            ? this.control.ngControl.value && !this.control.disabled
+            : false;
+    }
+    get disabled() {
+        return this.control?.disabled;
+    }
+    get canShowStepper() {
+        return this.hasStepper &&
+            !this.disabled &&
+            (this.control?.focused || this.hovered);
+    }
+    constructor(elementRef, changeDetectorRef, focusMonitor) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.focusMonitor = focusMonitor;
+        // Unique id for the internal form field label.
+        this.labelId = `kbq-form-field-label-${nextUniqueId++}`;
+        this.hovered = false;
+        this.canCleanerClearByEsc = true;
+        this.$unsubscribe = new Subject();
+        this.runFocusMonitor();
+    }
+    ngAfterContentInit() {
+        if (this.control.numberInput && this.hasCleaner) {
+            this.cleaner = null;
+            throw getKbqFormFieldYouCanNotUseCleanerInNumberInputError();
+        }
+        this.validateControlChild();
+        if (this.control.controlType) {
+            this.elementRef.nativeElement.classList.add(`kbq-form-field-type-${this.control.controlType}`);
+        }
+        // Subscribe to changes in the child control state in order to update the form field UI.
+        this.control.stateChanges
+            .pipe(startWith())
+            .subscribe((state) => {
+            if (!state?.focused && this.hasPasswordStrengthError) {
+                this.control.ngControl?.control?.setErrors({ passwordStrength: true });
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+        if (this.hasStepper) {
+            this.stepper.connectTo(this.control.numberInput);
+        }
+        // Run change detection if the value changes.
+        const valueChanges = this.control.ngControl?.valueChanges || EMPTY;
+        merge(valueChanges)
+            .pipe(takeUntil(this.$unsubscribe))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+    ngAfterContentChecked() {
+        this.validateControlChild();
+    }
+    ngAfterViewInit() {
+        // Avoid animations on load.
+        this.changeDetectorRef.detectChanges();
+    }
+    clearValue($event) {
+        $event.stopPropagation();
+        this.control?.ngControl?.reset();
+        this.control?.focus();
+    }
+    onContainerClick($event) {
+        if (this.control.onContainerClick) {
+            this.control.onContainerClick($event);
+        }
+    }
+    onKeyDown(event) {
+        // tslint:disable-next-line:deprecation
+        if (this.control.controlType === 'input-password' && event.altKey && event.keyCode === F8) {
+            this.control.toggleType();
+        }
+        // tslint:disable-next-line:deprecation
+        if (this.canCleanerClearByEsc && event.keyCode === ESCAPE && this.control.focused && this.hasCleaner) {
+            this.control?.ngControl?.reset();
+            event.preventDefault();
+        }
+    }
+    onHoverChanged(isHovered) {
+        if (isHovered !== this.hovered) {
+            this.hovered = isHovered;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Gets an ElementRef for the element that a overlay attached to the form-field should be
+     * positioned relative to.
+     */
+    getConnectedOverlayOrigin() {
+        return this.connectionContainerRef || this.elementRef;
+    }
+    /** Determines whether a class from the NgControl should be forwarded to the host element. */
+    shouldForward(prop) {
+        const ngControl = this.control?.ngControl;
+        return ngControl && ngControl[prop];
+    }
+    ngOnDestroy() {
+        this.$unsubscribe.next();
+        this.$unsubscribe.complete();
+        this.stopFocusMonitor();
+    }
+    runFocusMonitor() {
+        this.focusMonitor.monitor(this.elementRef.nativeElement, true);
+    }
+    stopFocusMonitor() {
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    /** Throws an error if the form field's control is missing. */
+    validateControlChild() {
+        if (!this.control) {
+            throw getKbqFormFieldMissingControlError();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormField, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqFormField, selector: "kbq-form-field", inputs: { color: "color" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onHoverChanged(true)", "mouseleave": "onHoverChanged(false)" }, properties: { "class.kbq-form-field_invalid": "control.errorState", "class.kbq-form-field_has-prefix": "hasPrefix", "class.kbq-form-field_has-suffix": "hasSuffix", "class.kbq-form-field_has-password-toggle": "hasPasswordToggle", "class.kbq-form-field_has-cleaner": "canShowCleaner", "class.kbq-form-field_has-stepper": "canShowStepper", "class.kbq-disabled": "control.disabled", "class.ng-untouched": "shouldForward(\"untouched\")", "class.ng-touched": "shouldForward(\"touched\")", "class.ng-pristine": "shouldForward(\"pristine\")", "class.ng-dirty": "shouldForward(\"dirty\")", "class.ng-valid": "shouldForward(\"valid\")", "class.ng-invalid": "shouldForward(\"invalid\")", "class.ng-pending": "shouldForward(\"pending\")" }, classAttribute: "kbq-form-field" }, providers: [
+            { provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }
+        ], queries: [{ propertyName: "control", first: true, predicate: KbqFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: KbqStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: KbqCleaner, descendants: true }, { propertyName: "passwordToggle", first: true, predicate: KbqPasswordToggle, descendants: true }, { propertyName: "hint", predicate: KbqHint }, { propertyName: "passwordHints", predicate: KbqPasswordHint }, { propertyName: "suffix", predicate: KbqSuffix }, { propertyName: "prefix", predicate: KbqPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["mcFormField"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"kbq-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"kbq-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"kbq-stepper\"></ng-content>\n</div>\n\n<div class=\"kbq-form-field__hint\" *ngIf=\"hint.length || passwordHints.length\">\n    <ng-content select=\"kbq-hint, kbq-password-hint\"></ng-content>\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent;box-shadow:none}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-button-width, )}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-button-width, );text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 12px);gap:var(--kbq-form-field-hint-size-gap, 8px)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}\n", ".kbq-timepicker{padding-right:calc(var(--kbq-timepicker-size-padding-right, 16px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:var(--kbq-datepicker-input-size-width, 130px)}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 8px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-form-field', exportAs: 'mcFormField', host: {
+                        class: 'kbq-form-field',
+                        '[class.kbq-form-field_invalid]': 'control.errorState',
+                        '[class.kbq-form-field_has-prefix]': 'hasPrefix',
+                        '[class.kbq-form-field_has-suffix]': 'hasSuffix',
+                        '[class.kbq-form-field_has-password-toggle]': 'hasPasswordToggle',
+                        '[class.kbq-form-field_has-cleaner]': 'canShowCleaner',
+                        '[class.kbq-form-field_has-stepper]': 'canShowStepper',
+                        '[class.kbq-disabled]': 'control.disabled',
+                        '[class.ng-untouched]': 'shouldForward("untouched")',
+                        '[class.ng-touched]': 'shouldForward("touched")',
+                        '[class.ng-pristine]': 'shouldForward("pristine")',
+                        '[class.ng-dirty]': 'shouldForward("dirty")',
+                        '[class.ng-valid]': 'shouldForward("valid")',
+                        '[class.ng-invalid]': 'shouldForward("invalid")',
+                        '[class.ng-pending]': 'shouldForward("pending")',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(mouseenter)': 'onHoverChanged(true)',
+                        '(mouseleave)': 'onHoverChanged(false)'
+                    }, inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: KBQ_FORM_FIELD_REF, useExisting: KbqFormField }
+                    ], template: "<div class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"kbq-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"kbq-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"kbq-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"kbq-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"kbq-stepper\"></ng-content>\n</div>\n\n<div class=\"kbq-form-field__hint\" *ngIf=\"hint.length || passwordHints.length\">\n    <ng-content select=\"kbq-hint, kbq-password-hint\"></ng-content>\n</div>\n", styles: [".kbq-form-field{position:relative;display:inline-block;width:100%}.kbq-form-field .kbq-form-field__container{box-sizing:border-box}.kbq-form-field .kbq-form-field:not(.kbq-form-field-type-textarea){height:var(--kbq-form-field-size-height, 32px)}.kbq-form-field,.kbq-form-field .kbq-input,.kbq-form-field .kbq-textarea{border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field:hover{z-index:1}.kbq-form-field.kbq-focused{z-index:2}.kbq-form-field.kbq-form-field_without-borders .kbq-form-field__container{border-color:transparent;box-shadow:none}.kbq-form-field.kbq-form-field_has-prefix .kbq-input{padding-left:calc(var(--kbq-form-field-size-icon-size, 16px) + var(--kbq-form-field-size-icon-margin-left, 8px) + var(--kbq-form-field-size-icon-margin-right, 8px))}.kbq-form-field.kbq-form-field_has-password-toggle .kbq-input,.kbq-form-field.kbq-form-field_has-cleaner .kbq-input,.kbq-form-field.kbq-form-field_has-stepper .kbq-input,.kbq-form-field.kbq-form-field_has-suffix .kbq-input{padding-right:calc(var(--kbq-form-field-size-icon-button-size, 24px) + var(--kbq-form-field-size-icon-button-margin-left, 4px) + var(--kbq-form-field-size-icon-button-margin-right, 4px))}.kbq-form-field__container{position:relative;border-width:var(--kbq-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:var(--kbq-form-field-size-border-radius, 8px)}.kbq-form-field__prefix,.kbq-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.kbq-form-field__prefix{left:0}.kbq-form-field__suffix{right:0}.kbq-form-field__cleaner,.kbq-password-toggle,.kbq-stepper{position:absolute;top:0;bottom:0;right:0}.kbq-stepper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--kbq-form-field-size-button-width, )}.kbq-stepper .kbq-stepper-step-up,.kbq-stepper .kbq-stepper-step-down{cursor:pointer;width:var(--kbq-form-field-size-button-width, );text-align:center}.kbq-stepper .kbq-stepper-step-up{transform:scaleY(-1)}.kbq-form-field__hint{display:flex;flex-direction:column;margin-top:var(--kbq-form-field-hint-size-margin-top, 12px);gap:var(--kbq-form-field-hint-size-gap, 8px)}\n", ".kbq-input{background:transparent;padding:0;margin:0;border:none;outline:none;display:inline-block;box-sizing:border-box;width:100%;min-height:calc(var(--kbq-form-field-size-height, 32px) - var(--kbq-form-field-size-border-width, 1px) * 2);padding:calc(var(--kbq-input-size-padding-vertical, 8px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-input-size-padding-horizontal, 12px)}.kbq-input::-ms-clear{display:none;width:0;height:0}.kbq-input::-ms-reveal{display:none;width:0;height:0}.kbq-input::-webkit-search-decoration,.kbq-input::-webkit-search-cancel-button,.kbq-input::-webkit-search-results-button,.kbq-input::-webkit-search-results-decoration{display:none}input.kbq-input[type=number]{-moz-appearance:textfield}input.kbq-input[type=number]::-webkit-inner-spin-button,input.kbq-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.kbq-input:invalid{box-shadow:unset}input.kbq-input::placeholder{opacity:1}\n", ".kbq-timepicker{padding-right:calc(var(--kbq-timepicker-size-padding-right, 16px) - var(--kbq-form-field-size-border-width, 1px))}.kbq-form-field-type-timepicker{width:auto}\n", ".kbq-form-field-type-datepicker{width:auto}.kbq-datepicker{width:var(--kbq-datepicker-input-size-width, 130px)}\n", ".kbq-textarea{display:inline-block;background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:var(--kbq-textarea-size-padding-vertical, 8px) var(--kbq-textarea-size-padding-horizontal, 12px);-webkit-appearance:none;vertical-align:bottom}.kbq-textarea:not(.kbq-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.kbq-textarea.kbq-textarea-resizable{resize:vertical;min-height:var(--kbq-textarea-size-min-height, 64px)}.kbq-textarea:invalid{box-shadow:unset}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }]; }, propDecorators: { control: [{
+                type: ContentChild,
+                args: [KbqFormFieldControl, { static: false }]
+            }], stepper: [{
+                type: ContentChild,
+                args: [KbqStepper, { static: false }]
+            }], cleaner: [{
+                type: ContentChild,
+                args: [KbqCleaner, { static: false }]
+            }], passwordToggle: [{
+                type: ContentChild,
+                args: [KbqPasswordToggle, { static: false }]
+            }], hint: [{
+                type: ContentChildren,
+                args: [KbqHint]
+            }], passwordHints: [{
+                type: ContentChildren,
+                args: [KbqPasswordHint]
+            }], suffix: [{
+                type: ContentChildren,
+                args: [KbqSuffix]
+            }], prefix: [{
+                type: ContentChildren,
+                args: [KbqPrefix]
+            }], connectionContainerRef: [{
+                type: ViewChild,
+                args: ['connectionContainer', { static: true }]
+            }] } });
+class KbqFormFieldWithoutBorders {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldWithoutBorders, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFormFieldWithoutBorders, selector: "kbq-form-field[mcFormFieldWithoutBorders]", host: { classAttribute: "kbq-form-field_without-borders" }, exportAs: ["mcFormFieldWithoutBorders"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldWithoutBorders, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-form-field[mcFormFieldWithoutBorders]',
+                    exportAs: 'mcFormFieldWithoutBorders',
+                    host: { class: 'kbq-form-field_without-borders' }
+                }]
+        }] });
+class KbqTrim {
+    constructor(noTrim, ngControl) {
+        this.noTrim = noTrim;
+        this.ngControl = ngControl;
+        this.registerOnChange = (fn) => {
+            return this.original.call(this.ngControl.valueAccessor, (value) => fn(this.trim(value)));
+        };
+        this.noTrim = coerceBooleanProperty(noTrim);
+        if (this.noTrim || !this.ngControl?.valueAccessor) {
+            return;
+        }
+        this.original = this.ngControl.valueAccessor.registerOnChange;
+        this.ngControl.valueAccessor.registerOnChange = this.registerOnChange;
+    }
+    trim(value) {
+        if (this.noTrim) {
+            return value;
+        }
+        return typeof value === 'string' ? value.trim() : value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTrim, deps: [{ token: 'no-trim', attribute: true }, { token: i1$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTrim, selector: "[mcInput], [mcTextarea]", host: { classAttribute: "kbq-trim" }, exportAs: ["KbqTrim"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTrim, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcInput], [mcTextarea]',
+                    exportAs: 'KbqTrim',
+                    host: { class: 'kbq-trim' }
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['no-trim']
+                }] }, { type: i1$4.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; } });
+
+class KbqValidateDirective {
+    get isNgModel() {
+        return this.ngControl instanceof NgModel;
+    }
+    get isFormControlName() {
+        return this.ngControl instanceof FormControlName;
+    }
+    get isFormControl() {
+        return this.ngControl instanceof FormControlDirective;
+    }
+    get validationControl() {
+        return this.ngControl?.control || this.ngControl;
+    }
+    get parent() {
+        return this.parentForm || this.parentFormGroup;
+    }
+    get hasNotSubmittedParent() {
+        return this.parent && !this.parent.submitted;
+    }
+    constructor(formFieldControl, rawValidators, ngControl, parentForm, parentFormGroup, mcValidation, cdr) {
+        this.formFieldControl = formFieldControl;
+        this.rawValidators = rawValidators;
+        this.ngControl = ngControl;
+        this.parentForm = parentForm;
+        this.parentFormGroup = parentFormGroup;
+        this.mcValidation = mcValidation;
+        this.cdr = cdr;
+    }
+    ngAfterContentInit() {
+        if (this.mcValidation.useValidation) {
+            this.setMosaicValidation();
+        }
+    }
+    setValidState(control, validator) {
+        if (!control) {
+            return;
+        }
+        control.clearValidators();
+        control.updateValueAndValidity({ emitEvent: false });
+        control.setValidators(validator);
+    }
+    /** This function do next:
+     * - run validation on submitting parent form
+     * - prevent validation in required validator if form doesn't submitted
+     * - if control has focus validation will be prevented
+     */
+    setMosaicValidation() {
+        if (!this.validationControl) {
+            return;
+        }
+        this.parent?.ngSubmit
+            .subscribe(() => this.validationControl.updateValueAndValidity({ emitEvent: false }));
+        if (this.isNgModel) {
+            this.setMosaicValidationForModelControl();
+        }
+        else if (this.isFormControl || this.isFormControlName) {
+            this.setMosaicValidationForFormControl();
+        }
+    }
+    setMosaicValidationForModelControl() {
+        if (!this.rawValidators) {
+            return;
+        }
+        this.rawValidators.forEach((validator) => {
+            // tslint:disable-next-line: no-unbound-method
+            const originalValidate = validator.validate;
+            if (validator instanceof RequiredValidator) {
+                // changed required validation logic
+                validator.validate = (control) => {
+                    if (this.hasNotSubmittedParent) {
+                        return null;
+                    }
+                    return originalValidate.call(validator, control);
+                };
+            }
+            else {
+                // changed all other validation logic
+                validator.validate = (control) => {
+                    if (this.formFieldControl.focused) {
+                        return null;
+                    }
+                    return originalValidate.call(validator, control);
+                };
+            }
+        });
+    }
+    setMosaicValidationForFormControl() {
+        const originalValidator = this.validationControl.validator;
+        // changed required validation logic after initialization
+        if (this.validationControl.invalid && this.validationControl.errors.required) {
+            Promise.resolve().then(() => {
+                this.setValidState(this.validationControl, originalValidator);
+                this.cdr.markForCheck();
+            });
+        }
+        // check dynamic updates
+        this.validationControl.statusChanges
+            .subscribe(() => {
+            // changed required validation logic
+            if (this.validationControl.invalid && (this.hasNotSubmittedParent) && this.validationControl.errors.required) {
+                this.setValidState(this.validationControl, originalValidator);
+            }
+            // changed all other validation logic
+            if (this.validationControl.invalid && this.formFieldControl.focused) {
+                this.setValidState(this.validationControl, originalValidator);
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqValidateDirective, deps: [{ token: forwardRef(() => KbqFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$4.NgControl, optional: true, self: true }, { token: i1$4.NgForm, optional: true }, { token: i1$4.FormGroupDirective, optional: true }, { token: KBQ_VALIDATION, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqValidateDirective, selector: "\n        input[mcInput],\n        input[mcInputPassword],\n        input[mcTimepicker],\n        input[mcDatepicker],\n        textarea[mcTextarea],\n        kbq-select,\n        kbq-tree-select,\n        kbq-tag-list\n    ", exportAs: ["KbqValidate"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqValidateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        input[mcInput],
+        input[mcInputPassword],
+        input[mcTimepicker],
+        input[mcDatepicker],
+        textarea[mcTextarea],
+        kbq-select,
+        kbq-tree-select,
+        kbq-tag-list
+    `,
+                    exportAs: 'KbqValidate'
+                }]
+        }], ctorParameters: function () { return [{ type: KbqFormFieldControl, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => KbqFormFieldControl)]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: i1$4.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$4.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$4.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_VALIDATION]
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+
+class KbqFormFieldModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldModule, declarations: [KbqFormField,
+            KbqFormFieldWithoutBorders,
+            KbqHint,
+            KbqPasswordHint,
+            KbqPrefix,
+            KbqSuffix,
+            KbqCleaner,
+            KbqStepper,
+            KbqValidateDirective,
+            KbqTrim,
+            KbqPasswordToggle], imports: [CommonModule, KbqIconModule], exports: [KbqFormField,
+            KbqFormFieldWithoutBorders,
+            KbqHint,
+            KbqPasswordHint,
+            KbqPrefix,
+            KbqSuffix,
+            KbqCleaner,
+            KbqStepper,
+            KbqValidateDirective,
+            KbqTrim,
+            KbqPasswordToggle] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldModule, imports: [CommonModule, KbqIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KbqFormField,
+                        KbqFormFieldWithoutBorders,
+                        KbqHint,
+                        KbqPasswordHint,
+                        KbqPrefix,
+                        KbqSuffix,
+                        KbqCleaner,
+                        KbqStepper,
+                        KbqValidateDirective,
+                        KbqTrim,
+                        KbqPasswordToggle
+                    ],
+                    imports: [CommonModule, KbqIconModule],
+                    exports: [
+                        KbqFormField,
+                        KbqFormFieldWithoutBorders,
+                        KbqHint,
+                        KbqPasswordHint,
+                        KbqPrefix,
+                        KbqSuffix,
+                        KbqCleaner,
+                        KbqStepper,
+                        KbqValidateDirective,
+                        KbqTrim,
+                        KbqPasswordToggle
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqCleaner, KbqFormField, KbqFormFieldBase, KbqFormFieldControl, KbqFormFieldMixinBase, KbqFormFieldModule, KbqFormFieldWithoutBorders, KbqHint, KbqHintBase, KbqHintMixinBase, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqStepper, KbqSuffix, KbqTrim, KbqValidateDirective, PasswordRules, getKbqFormFieldMissingControlError, getKbqFormFieldYouCanNotUseCleanerInNumberInputError, regExpPasswordValidator };
+//# sourceMappingURL=koobiq-components-form-field.mjs.map