@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.7

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

@@ -1,9 +1,9 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, forwardRef, ChangeDetectionStrategy, Optional, Inject, Directive, EventEmitter, Output, ContentChild, ContentChildren, ViewChild, Attribute, Self, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, Input, forwardRef, ChangeDetectionStrategy, Optional, Inject, ViewChild, Directive, EventEmitter, Output, ContentChild, ContentChildren, Attribute, Self, NgModule } from '@angular/core';
 import * as i1 from '@koobiq/components/icon';
-import { KbqIconModule } from '@koobiq/components/icon';
+import { KbqIconButton, 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';
@@ -18,11 +18,11 @@ import { KbqTooltipTrigger, KBQ_TOOLTIP_SCROLL_STRATEGY } from '@koobiq/componen
 
 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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCleaner, selector: "kbq-cleaner", host: { classAttribute: "kbq-cleaner" }, exportAs: ["kbqCleaner"], 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: {
+            args: [{ selector: 'kbq-cleaner', exportAs: 'kbqCleaner', 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"] }]
         }] });
@@ -55,15 +55,15 @@ class KbqHint extends KbqHintMixinBase {
         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 }); }
+    /** @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: ["kbqHint"], 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, )}\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: {
+            args: [{ selector: 'kbq-hint', exportAs: 'kbqHint', 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"] }]
+                    }, 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, )}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
                 type: Input
             }], fillTextOff: [{
@@ -116,14 +116,14 @@ class KbqPasswordHint {
             this.lastControlValue = this.control.value;
             this.changeDetectorRef.markForCheck();
         };
+        this.checkRegexRule = (value) => {
+            return !!this.regex?.test(value);
+        };
     }
     ngAfterContentInit() {
         this.formField = this.formField || this.viewFormField;
-        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.Custom && this.regex === undefined && this.customCheckRule === undefined) {
+            throw Error('You should set [regex] or [checkRule] for PasswordRules.Custom');
         }
         if (this.rule === PasswordRules.Length && (this.min || this.max) === null) {
             throw Error('For [rule] "Length" need set [min] and [max]');
@@ -140,7 +140,7 @@ class KbqPasswordHint {
             this.checkRule = this.checkSpecialSymbolsRegexRule;
         }
         else if (this.rule === PasswordRules.Custom) {
-            this.checkRule = this.checkRegexRule;
+            this.checkRule = this.regex === undefined ? this.customCheckRule : this.checkRegexRule;
         }
         else {
             throw Error(`Unknown [rule]=${this.rule}`);
@@ -156,9 +156,6 @@ class KbqPasswordHint {
     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);
     }
@@ -166,7 +163,7 @@ class KbqPasswordHint {
         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), optional: true }], 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", viewFormField: "viewFormField" }, host: { properties: { "class.kbq-password-hint_valid": "checked", "class.kbq-password-hint_invalid": "hasError", "attr.id": "id" }, classAttribute: "kbq-password-hint" }, ngImport: i0, template: `
+    /** @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", customCheckRule: ["checkRule", "customCheckRule"], viewFormField: "viewFormField" }, 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"
@@ -213,6 +210,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }], regex: [{
                 type: Input
+            }], customCheckRule: [{
+                type: Input,
+                args: ['checkRule']
             }], viewFormField: [{
                 type: Input
             }] } });
@@ -230,17 +230,26 @@ class KbqPasswordToggle extends KbqTooltipTrigger {
     get hidden() {
         return this.formField.control.elementType === 'password';
     }
-    get icon() {
+    get iconClass() {
         return this.hidden ? 'mc-eye_16' : 'mc-eye-crossed_16';
     }
     get visibility() {
         return this.disabled && this.formField.control.empty ? 'hidden' : 'visible';
     }
-    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, formField) {
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, formField, changeDetector) {
         super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
         this.formField = formField;
+        this.changeDetector = changeDetector;
+        this.updateState = () => {
+            this.icon.hasError = this.formField.control.errorState;
+            this.changeDetector.markForCheck();
+        };
         this.trigger = `${PopUpTriggers.Hover}`;
     }
+    ngAfterViewInit() {
+        this.formField.control?.stateChanges
+            .subscribe(this.updateState);
+    }
     toggle(event) {
         this.hide();
         const input = this.formField.control;
@@ -248,12 +257,12 @@ class KbqPasswordToggle extends KbqTooltipTrigger {
         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: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility" }, 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 }); }
+    /** @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) }, { token: i0.ChangeDetectorRef }], 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: ["kbqTooltipNotHidden", "content"], kbqTooltipHidden: "kbqTooltipHidden" }, host: { listeners: { "click": "toggle($event)", "keydown.ENTER": "toggle($event)", "keydown.SPACE": "toggle($event)" }, properties: { "style.visibility": "visibility" }, classAttribute: "kbq-password-toggle" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIconButton, descendants: true }], exportAs: ["kbqPasswordToggle"], usesInheritance: true, ngImport: i0, template: '<i kbq-icon-button="" [ngClass]="iconClass"></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: {
+            args: [{ selector: `kbq-password-toggle`, exportAs: 'kbqPasswordToggle', template: '<i kbq-icon-button="" [ngClass]="iconClass"></i>', host: {
                         class: 'kbq-password-toggle',
                         '[style.visibility]': 'visibility',
                         '(click)': 'toggle($event)',
@@ -268,7 +277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => KBQ_FORM_FIELD_REF)]
-                }] }]; }, propDecorators: { content: [{
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+                type: ViewChild,
+                args: [KbqIconButton]
+            }], content: [{
                 type: Input,
                 args: ['kbqTooltipNotHidden']
             }], kbqTooltipHidden: [{
@@ -356,12 +368,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
 
 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 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqSuffix, selector: "[kbqSuffix]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqSuffix, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcSuffix]'
+                    selector: '[kbqSuffix]'
                 }]
         }] });
 
@@ -512,11 +524,11 @@ class KbqFormField extends KbqFormFieldMixinBase {
     /** @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=\"[kbqPrefix]\"></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=\"hasHint || 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, 4px);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;text-overflow:ellipsis;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, 4px) - 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 }); }
+        ], 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 class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\" #connectionContainer>\n\n    <div class=\"kbq-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[kbqPrefix]\"></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=\"[kbqSuffix]\"></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=\"hasHint || 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!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, 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, 4px);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;text-overflow:ellipsis;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, 4px) - 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: {
+            args: [{ selector: 'kbq-form-field', exportAs: 'kbqFormField', host: {
                         class: 'kbq-form-field',
                         '[class.kbq-form-field_invalid]': 'control.errorState',
                         '[class.kbq-form-field_has-prefix]': 'hasPrefix',
@@ -537,7 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '(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=\"[kbqPrefix]\"></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=\"hasHint || 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, 4px);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;text-overflow:ellipsis;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, 4px) - 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"] }]
+                    ], template: "<div class=\"kbq-form-field__container\" (click)=\"onContainerClick($event)\" #connectionContainer>\n\n    <div class=\"kbq-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[kbqPrefix]\"></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=\"[kbqSuffix]\"></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=\"hasHint || 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!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, 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, 4px);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;text-overflow:ellipsis;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, 4px) - 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 }]
@@ -568,13 +580,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             }] } });
 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 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", host: { classAttribute: "kbq-form-field_without-borders" }, exportAs: ["kbqFormFieldWithoutBorders"], 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',
+                    selector: 'kbq-form-field[kbqFormFieldWithoutBorders]',
+                    exportAs: 'kbqFormFieldWithoutBorders',
                     host: { class: 'kbq-form-field_without-borders' }
                 }]
         }] });
@@ -726,7 +738,7 @@ class KbqValidateDirective {
         });
     }
     /** @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[kbqInput],\n        input[kbqInputPassword],\n        input[mcTimepicker],\n        input[mcDatepicker],\n        textarea[kbqTextarea],\n        kbq-select,\n        kbq-tree-select,\n        kbq-tag-list\n    ", exportAs: ["KbqValidate"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqValidateDirective, selector: "\n        input[kbqInput],\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqValidateDirective, decorators: [{
             type: Directive,
@@ -734,8 +746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     selector: `
         input[kbqInput],
         input[kbqInputPassword],
-        input[mcTimepicker],
-        input[mcDatepicker],
+        input[kbqTimepicker],
+        input[kbqDatepicker],
         textarea[kbqTextarea],
         kbq-select,
         kbq-tree-select,