@ng-nest/ui 12.0.5 → 12.0.10

package/bundles/ng-nest-ui-input.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/base-form'), require('rxjs'), require('@ng-nest/ui/icon'), require('@angular/common'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@ng-nest/ui/input', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/base-form', 'rxjs', '@ng-nest/ui/icon', '@angular/common', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-nest'] = global['ng-nest'] || {}, global['ng-nest'].ui = global['ng-nest'].ui || {}, global['ng-nest'].ui.input = {}), global.ng.core, global['ng-nest'].ui.core, global['ng-nest'].ui['base-form'], global.rxjs, global['ng-nest'].ui.icon, global.ng.common, global.ng.forms));
-}(this, (function (exports, i0, i1, baseForm, rxjs, i2, i3, i4) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/base-form'), require('rxjs'), require('@ng-nest/ui/icon'), require('@angular/common'), require('@ng-nest/ui/outlet'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('@ng-nest/ui/input', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/base-form', 'rxjs', '@ng-nest/ui/icon', '@angular/common', '@ng-nest/ui/outlet', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui.input = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui["base-form"], global.rxjs, global["ng-nest"].ui.icon, global.ng.common, global["ng-nest"].ui.outlet, global.ng.forms));
+})(this, (function (exports, i0, i1, baseForm, rxjs, i3, i4, i5, i6) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,22 +13,21 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -256,10 +255,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -361,11 +366,6 @@
              * @en_US Input type
              */
             _this.type = 'text';
-            /**
-             * @zh_CN 只读
-             * @en_US Read only
-             */
-            _this.readonly = false;
             /**
              * @zh_CN 图标布局方式
              * @en_US Icon layout
@@ -376,11 +376,6 @@
              * @en_US Icon animation
              */
             _this.iconSpin = false;
-            /**
-             * @zh_CN 输入最大长度
-             * @en_US Enter the maximum length
-             */
-            _this.maxlength = 0;
             /**
              * @zh_CN 清除按钮的事件
              * @en_US Clear button event
@@ -406,19 +401,31 @@
              * @en_US Keydown event
              */
             _this.xKeydown = new i0.EventEmitter();
+            /**
+             * @zh_CN Click
+             * @en_US Click event
+             */
+            _this.xClick = new i0.EventEmitter();
+            /**
+             * @zh_CN Mouseenter
+             * @en_US Mouseenter event
+             */
+            _this.xMouseenter = new i0.EventEmitter();
+            /**
+             * @zh_CN Mouseleave
+             * @en_US Mouseleave event
+             */
+            _this.xMouseleave = new i0.EventEmitter();
             return _this;
         }
         return XInputProperty;
     }(baseForm.XControlValueAccessor));
-    /** @nocollapse */ XInputProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XInputProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XInputProperty, selector: "ng-component", inputs: { type: "type", clearable: "clearable", readonly: "readonly", icon: "icon", iconLayout: "iconLayout", iconSpin: "iconSpin", maxlength: "maxlength", valueTpl: "valueTpl", valueTplContext: "valueTplContext" }, outputs: { clearEmit: "clearEmit", xFocus: "xFocus", xBlur: "xBlur", xInput: "xInput", xKeydown: "xKeydown" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    /** @nocollapse */ XInputProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XInputProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XInputProperty, selector: "ng-component", inputs: { type: "type", clearable: "clearable", icon: "icon", iconLayout: "iconLayout", iconSpin: "iconSpin", maxlength: "maxlength", size: "size", bordered: "bordered", inputStyle: "inputStyle", pointer: "pointer" }, outputs: { clearEmit: "clearEmit", xFocus: "xFocus", xBlur: "xBlur", xInput: "xInput", xKeydown: "xKeydown", xClick: "xClick", xMouseenter: "xMouseenter", xMouseleave: "xMouseleave" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     __decorate([
         i1.XWithConfig(X_CONFIG_NAME, false),
         i1.XInputBoolean()
     ], XInputProperty.prototype, "clearable", void 0);
-    __decorate([
-        i1.XInputBoolean()
-    ], XInputProperty.prototype, "readonly", void 0);
     __decorate([
         i1.XWithConfig(X_CONFIG_NAME, 'right')
     ], XInputProperty.prototype, "iconLayout", void 0);
@@ -428,15 +435,23 @@
     __decorate([
         i1.XInputNumber()
     ], XInputProperty.prototype, "maxlength", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputProperty, decorators: [{
+    __decorate([
+        i1.XWithConfig(X_CONFIG_NAME, 'medium')
+    ], XInputProperty.prototype, "size", void 0);
+    __decorate([
+        i1.XInputBoolean(),
+        i1.XWithConfig(X_CONFIG_NAME, true)
+    ], XInputProperty.prototype, "bordered", void 0);
+    __decorate([
+        i1.XInputBoolean()
+    ], XInputProperty.prototype, "pointer", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { type: [{
                     type: i0.Input
                 }], clearable: [{
                     type: i0.Input
-                }], readonly: [{
-                    type: i0.Input
                 }], icon: [{
                     type: i0.Input
                 }], iconLayout: [{
@@ -445,9 +460,13 @@
                     type: i0.Input
                 }], maxlength: [{
                     type: i0.Input
-                }], valueTpl: [{
+                }], size: [{
                     type: i0.Input
-                }], valueTplContext: [{
+                }], bordered: [{
+                    type: i0.Input
+                }], inputStyle: [{
+                    type: i0.Input
+                }], pointer: [{
                     type: i0.Input
                 }], clearEmit: [{
                     type: i0.Output
@@ -459,21 +478,94 @@
                     type: i0.Output
                 }], xKeydown: [{
                     type: i0.Output
+                }], xClick: [{
+                    type: i0.Output
+                }], xMouseenter: [{
+                    type: i0.Output
+                }], xMouseleave: [{
+                    type: i0.Output
+                }] } });
+    /**
+     * Input Group
+     * @selector x-input-group
+     * @decorator component
+     */
+    var XInputGroupPrefix = 'x-input-group';
+    var X_CONFIG_GROUP_NAME = 'inputGroup';
+    /**
+     * Input Group Property
+     */
+    var XInputGroupProperty = /** @class */ (function (_super) {
+        __extends(XInputGroupProperty, _super);
+        function XInputGroupProperty() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return XInputGroupProperty;
+    }(i1.XProperty));
+    /** @nocollapse */ XInputGroupProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputGroupProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XInputGroupProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XInputGroupProperty, selector: "ng-component", inputs: { size: "size", bordered: "bordered", compact: "compact" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    __decorate([
+        i1.XWithConfig(X_CONFIG_GROUP_NAME)
+    ], XInputGroupProperty.prototype, "size", void 0);
+    __decorate([
+        i1.XInputBoolean(),
+        i1.XWithConfig(X_CONFIG_GROUP_NAME)
+    ], XInputGroupProperty.prototype, "bordered", void 0);
+    __decorate([
+        i1.XInputBoolean(),
+        i1.XWithConfig(X_CONFIG_GROUP_NAME)
+    ], XInputGroupProperty.prototype, "compact", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputGroupProperty, decorators: [{
+                type: i0.Component,
+                args: [{ template: '' }]
+            }], propDecorators: { size: [{
+                    type: i0.Input
+                }], bordered: [{
+                    type: i0.Input
+                }], compact: [{
+                    type: i0.Input
                 }] } });
 
+    var XInputGroupComponent = /** @class */ (function (_super) {
+        __extends(XInputGroupComponent, _super);
+        function XInputGroupComponent(renderer, elementRef, cdr, configService) {
+            var _this = _super.call(this) || this;
+            _this.renderer = renderer;
+            _this.elementRef = elementRef;
+            _this.cdr = cdr;
+            _this.configService = configService;
+            return _this;
+        }
+        return XInputGroupComponent;
+    }(XInputGroupProperty));
+    /** @nocollapse */ XInputGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputGroupComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XInputGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XInputGroupComponent, selector: "x-input-group", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"x-input-group\" [class.x-input-group-compact]=\"compact\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-input-group{display:inline-block}.x-input-group{display:flex}.x-input-group-compact>*{display:inline-block}.x-input-group-compact>* input,.x-input-group-compact>* .x-button{border-radius:0!important}.x-input-group-compact>* input:hover,.x-input-group-compact>* input:focus,.x-input-group-compact>* .x-button:hover,.x-input-group-compact>* .x-button:focus{z-index:1}.x-input-group-compact>*:first-child input,.x-input-group-compact>*:first-child .x-button{border-top-left-radius:var(--x-border-radius)!important;border-bottom-left-radius:var(--x-border-radius)!important}.x-input-group-compact>*:last-child input,.x-input-group-compact>*:last-child .x-button{border-top-right-radius:var(--x-border-radius)!important;border-bottom-right-radius:var(--x-border-radius)!important}.x-input-group-compact>*:not(:last-child){margin-right:calc(var(--x-border-width) * -1)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "" + XInputGroupPrefix,
+                        templateUrl: './input-group.component.html',
+                        styleUrls: ['./input-group.component.scss'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.XConfigService }]; } });
+
     var XInputComponent = /** @class */ (function (_super) {
         __extends(XInputComponent, _super);
-        function XInputComponent(renderer, elementRef, cdr, configService) {
+        function XInputComponent(renderer, elementRef, cdr, configService, inputGroup) {
             var _this = _super.call(this) || this;
             _this.renderer = renderer;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.configService = configService;
+            _this.inputGroup = inputGroup;
             _this.valueLength = 0;
             _this.lengthTotal = '';
             _this.paddingLeft = 0.4;
             _this.paddingRight = 0.4;
             _this.clearShow = false;
+            _this.flexClass = [];
             _this._required = false;
             _this._unSubject = new rxjs.Subject();
             return _this;
@@ -504,13 +596,31 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(XInputComponent.prototype, "beforeIsTemplate", {
+            get: function () {
+                return this.before instanceof i0.TemplateRef;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XInputComponent.prototype, "afterIsTemplate", {
+            get: function () {
+                return this.after instanceof i0.TemplateRef;
+            },
+            enumerable: false,
+            configurable: true
+        });
         XInputComponent.prototype.ngOnInit = function () {
             this.setPadding();
-            this.setFlex(this.inputElement.nativeElement, this.renderer, this.justify, this.align, this.direction);
+            this.setFlexClass();
+            this.setInheritedValue();
             this.setClassMap();
         };
         XInputComponent.prototype.ngOnChanges = function (changes) {
-            i1.XIsChange(changes.clearable) && this.setClearable();
+            var clearable = changes.clearable, size = changes.size, labelAlign = changes.labelAlign, justify = changes.justify, align = changes.align, direction = changes.direction;
+            i1.XIsChange(clearable) && this.setClearable();
+            i1.XIsChange(size, labelAlign) && this.setClassMap();
+            i1.XIsChange(justify, align, direction) && this.setFlexClass();
         };
         XInputComponent.prototype.ngOnDestroy = function () {
             this._unSubject.next();
@@ -537,6 +647,25 @@
             this.clearEmit.emit(clearValue);
             this.inputRef.nativeElement.focus();
         };
+        XInputComponent.prototype.setFlexClass = function () {
+            var e_1, _a;
+            if (this.flexClass.length > 0) {
+                try {
+                    for (var _b = __values(this.flexClass), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var cls = _c.value;
+                        this.renderer.removeClass(this.inputElement.nativeElement, cls);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            this.flexClass = this.setFlex(this.inputElement.nativeElement, this.renderer, this.justify, this.align, this.direction);
+        };
         XInputComponent.prototype.setClearable = function () {
             if (this.clearable && !this.disabled) {
                 this.clearShow = !i1.XIsEmpty(this.value);
@@ -545,6 +674,16 @@
                 this.clearShow = false;
             }
         };
+        XInputComponent.prototype.setInheritedValue = function () {
+            if (!this.inputGroup)
+                return;
+            if (!i1.XIsUndefined(this.inputGroup.size)) {
+                this.size = this.inputGroup.size;
+            }
+            if (!i1.XIsUndefined(this.inputGroup.bordered)) {
+                this.bordered = this.inputGroup.bordered;
+            }
+        };
         XInputComponent.prototype.setPadding = function () {
             this.paddingLeft =
                 this.maxlength && this.icon && this.iconLayout === 'right'
@@ -561,8 +700,20 @@
                             ? (this.lengthTotal.length + 2) * 0.385
                             : 0.4;
         };
-        XInputComponent.prototype.inputFocus = function () {
+        XInputComponent.prototype.inputFocus = function (type) {
+            if (type === void 0) { type = 'after'; }
             this.inputRef.nativeElement.focus();
+            if (!this.value)
+                return;
+            if (type === 'after') {
+                this.inputRef.nativeElement.setSelectionRange(this.value.length, this.value.length);
+            }
+            else if (type === 'before') {
+                this.inputRef.nativeElement.setSelectionRange(0, 0);
+            }
+            else if (type === 'select') {
+                this.inputRef.nativeElement.setSelectionRange(0, this.value.length);
+            }
         };
         XInputComponent.prototype.setClassMap = function () {
             i1.XClearClass(this.classMap, this.labelMap);
@@ -576,19 +727,23 @@
         };
         return XInputComponent;
     }(XInputProperty));
-    /** @nocollapse */ XInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XInputComponent, selector: "x-input", providers: [baseForm.XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  #inputElement\r\n  class=\"x-input\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-clearable]=\"clearable\"\r\n  [class.x-clear-show]=\"clearShow\"\r\n  [class.x-input-icon]=\"getIcon\"\r\n  [class.x-input-icon-left]=\"getIconLayoutLeft\"\r\n  [class.x-input-icon-right]=\"getIconLayoutRight\"\r\n  [class.x-input-value-template]=\"valueTpl\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  <label *ngIf=\"label\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-input-row\">\r\n    <div\r\n      class=\"x-input-value-template-value\"\r\n      [style.padding-left.rem]=\"paddingLeft\"\r\n      [style.padding-right.rem]=\"paddingRight\"\r\n      *ngIf=\"valueTpl\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"valueTpl; context: valueTplContext ? valueTplContext : { $value: value }\"\r\n      ></ng-container>\r\n    </div>\r\n    <input\r\n      #inputRef\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      [maxlength]=\"maxlength\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"change($event)\"\r\n      [style.padding-left.rem]=\"paddingLeft\"\r\n      [style.padding-right.rem]=\"paddingRight\"\r\n      (focus)=\"xFocus.emit($event)\"\r\n      (blur)=\"xBlur.emit($event)\"\r\n      (input)=\"xInput.emit($event)\"\r\n      (keydown)=\"xKeydown.emit($event)\"\r\n    />\r\n    <x-icon *ngIf=\"clearShow\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n    <x-icon\r\n      *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft)\"\r\n      [type]=\"icon\"\r\n      [spin]=\"iconSpin\"\r\n    ></x-icon>\r\n    <span class=\"x-input-max-length\" *ngIf=\"maxlength\">{{ lengthTotal }}</span>\r\n    <span class=\"x-input-error-message\" *ngIf=\"invalid\">{{ invalidMessage }}</span>\r\n    <ng-container *ngIf=\"requiredIsEmpty || invalid\">\r\n      <div class=\"x-border-error x-top-left\"></div>\r\n      <div class=\"x-border-error x-top-right\"></div>\r\n      <div class=\"x-border-error x-bottom-left\"></div>\r\n      <div class=\"x-border-error x-bottom-right\"></div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [".x-input,x-input{width:100%}.x-input{margin:0;padding:0}.x-input.x-flex{display:flex}.x-input.x-justify-start{justify-content:flex-start}.x-input.x-justify-center{justify-content:center}.x-input.x-justify-end{justify-content:flex-end}.x-input.x-justify-space-between{justify-content:space-between}.x-input.x-justify-space-around{justify-content:space-around}.x-input.x-align-start{align-items:flex-start}.x-input.x-align-center{align-items:center}.x-input.x-align-end{align-items:flex-end}.x-input.x-direction-column{flex-direction:column}.x-input.x-direction-column-reverse{flex-direction:column-reverse}.x-input.x-direction-row{flex-direction:row}.x-input.x-direction-row-reverse{flex-direction:row-reverse}.x-input>label{display:inline-block;white-space:nowrap;height:calc(var(--x-font-size) + .875rem);line-height:calc(var(--x-font-size) + .875rem);position:relative;color:var(--x-text-300);font-weight:600}.x-input>label.x-text-align-start{text-align:start}.x-input>label.x-text-align-center{text-align:center}.x-input>label.x-text-align-end{text-align:end}.x-input>.x-input-row{flex:1;display:flex;align-items:center;position:relative}.x-input>.x-input-row>input{flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow) #0000;transition:all var(--x-animation-duration-slow)}.x-input>.x-input-row>input::-moz-placeholder{color:var(--x-text-700);opacity:1}.x-input>.x-input-row>input:-ms-input-placeholder{color:var(--x-text-700)}.x-input>.x-input-row>input::-webkit-input-placeholder{color:var(--x-text-700)}.x-input>.x-input-row>input:hover{border-color:var(--x-primary-300)}.x-input>.x-input-row>input:focus{border-color:var(--x-primary);outline:0}.x-input>.x-input-row>input[disabled]{color:var(--x-text-500)}.x-input>.x-input-row>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base)}.x-input-value-template>.x-input-row>input{color:#0000}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;left:0}.x-input-value-template-value:hover+input{border-color:var(--x-primary-300)}.x-input-error-message{position:absolute;bottom:0;left:0;font-size:var(--x-font-size)-.125rem;color:var(--x-danger);margin-bottom:calc(calc(var(--x-font-size) + .45rem) * -1);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-input.x-invalid>.x-input-row>x-icon,.x-input.x-invalid>label,.x-input.x-required>.x-input-row>x-icon,.x-input.x-required>label{color:var(--x-danger)}.x-input.x-invalid>.x-input-row .x-border-error,.x-input.x-required>.x-input-row .x-border-error{position:absolute;height:.5rem;width:.5rem;z-index:10}.x-input.x-invalid>.x-input-row .x-border-error.x-top-left,.x-input.x-required>.x-input-row .x-border-error.x-top-left{border-top-left-radius:var(--x-border-radius);top:0;left:0;border-top:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid>.x-input-row .x-border-error.x-top-right,.x-input.x-required>.x-input-row .x-border-error.x-top-right{border-top-right-radius:var(--x-border-radius);top:0;right:0;border-top:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid>.x-input-row .x-border-error.x-bottom-left,.x-input.x-required>.x-input-row .x-border-error.x-bottom-left{border-bottom-left-radius:var(--x-border-radius);bottom:0;left:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid>.x-input-row .x-border-error.x-bottom-right,.x-input.x-required>.x-input-row .x-border-error.x-bottom-right{border-bottom-right-radius:var(--x-border-radius);bottom:0;right:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-disabled>.x-input-row>x-icon{color:var(--x-text-400)}.x-input.x-disabled>.x-input-row>.x-input-value-template-value,.x-input.x-disabled>.x-input-row>input{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-clearable>.x-input-row>.x-input-clear{position:absolute;color:var(--x-text-400);font-size:var(--x-font-size-medium);padding:.4rem;right:0;left:inherit;opacity:0;cursor:pointer}.x-input.x-clearable>.x-input-row>.x-input-clear:hover{color:var(--x-text-300)}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-clear,.x-input.x-clearable>.x-input-row>.x-input-value-template-value:focus+.x-input-clear,.x-input.x-clearable>.x-input-row>.x-input-value-template-value:hover+.x-input-clear,.x-input.x-clearable>.x-input-row>input:focus+.x-input-clear,.x-input.x-clearable>.x-input-row>input:hover+.x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>input{padding-right:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)!important}.x-input-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-400);padding:0 .4rem;right:0}.x-input.x-direction-row>label{padding:0 .5rem 0 0}.x-input.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-input.x-direction-column,.x-input.x-direction-column-reverse{align-items:inherit}.x-input-icon>.x-input-row>x-icon{position:absolute;font-size:var(--x-font-size-medium);padding:.4rem}.x-input-icon>.x-input-row>x-icon.x-icon-spin{padding:0;margin:.4rem}.x-input-icon-left>.x-input-row>.x-input-value-template-value,.x-input-icon-left>.x-input-row>input{padding-left:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-left>.x-input-row>x-icon{left:0}.x-input-icon-right>.x-input-row>.x-input-value-template-value,.x-input-icon-right>.x-input-row>input{padding-right:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-right>.x-input-row>x-icon{right:0}.x-input-icon-right>.x-input-row>.x-input-max-length{right:inherit;left:0}.x-input-big>.x-input-row>.x-input-value-template-value,.x-input-big>.x-input-row>input{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-large>.x-input-row>.x-input-value-template-value,.x-input-large>.x-input-row>input{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-medium>.x-input-row>.x-input-value-template-value,.x-input-medium>.x-input-row>input{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-small>.x-input-row>.x-input-value-template-value,.x-input-small>.x-input-row>input{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-mini>.x-input-row>.x-input-value-template-value,.x-input-mini>.x-input-row>input{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}"], components: [{ type: i2__namespace.XIconComponent, selector: "x-icon" }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputComponent, decorators: [{
+    /** @nocollapse */ XInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }, { token: XInputGroupComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XInputComponent, selector: "x-input", providers: [baseForm.XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  #inputElement\r\n  class=\"x-input\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-clearable]=\"clearable\"\r\n  [class.x-clear-show]=\"clearShow\"\r\n  [class.x-input-icon]=\"getIcon\"\r\n  [class.x-input-active]=\"active\"\r\n  [class.x-input-pointer]=\"pointer\"\r\n  [class.x-input-bordered]=\"bordered\"\r\n  [class.x-input-icon-left]=\"getIconLayoutLeft\"\r\n  [class.x-input-icon-right]=\"getIconLayoutRight\"\r\n  [class.x-input-after]=\"after\"\r\n  [class.x-input-before]=\"before\"\r\n  [class.x-input-after-template]=\"afterIsTemplate\"\r\n  [class.x-input-before-template]=\"beforeIsTemplate\"\r\n  [class.x-input-value-template]=\"valueTpl\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  <label *ngIf=\"label\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-input-row\">\r\n    <div class=\"x-input-row-before\" *ngIf=\"before\" [class.x-input-row-before-template]=\"beforeIsTemplate\">\r\n      <ng-container *xOutlet=\"before\">{{ before }}</ng-container>\r\n    </div>\r\n    <div class=\"x-input-input\" (mouseenter)=\"xMouseenter.emit($event)\" (mouseleave)=\"xMouseleave.emit($event)\">\r\n      <div\r\n        class=\"x-input-value-template-value\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (click)=\"xClick.emit($event)\"\r\n        *ngIf=\"valueTpl\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"valueTpl; context: valueTplContext ? valueTplContext : { $value: value }\"></ng-container>\r\n      </div>\r\n      <input\r\n        #inputRef\r\n        [ngStyle]=\"inputStyle\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [maxlength]=\"maxlength\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"change($event)\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (focus)=\"xFocus.emit($event)\"\r\n        (blur)=\"xBlur.emit($event)\"\r\n        (input)=\"xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft)\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      <span class=\"x-input-max-length\" *ngIf=\"maxlength\">{{ lengthTotal }}</span>\r\n      <span class=\"x-input-error-message\" *ngIf=\"invalid\">{{ invalidMessage }}</span>\r\n      <ng-container *ngIf=\"requiredIsEmpty || invalid\">\r\n        <div class=\"x-border-error x-top-left\"></div>\r\n        <div class=\"x-border-error x-top-right\"></div>\r\n        <div class=\"x-border-error x-bottom-left\"></div>\r\n        <div class=\"x-border-error x-bottom-right\"></div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"x-input-row-after\" *ngIf=\"after\" [class.x-input-row-after-template]=\"afterIsTemplate\">\r\n      <ng-container *xOutlet=\"after\">{{ after }}</ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-input{display:inline-block}.x-input{width:100%;margin:0;padding:0}.x-input.x-flex{display:flex}.x-input.x-justify-start{justify-content:flex-start}.x-input.x-justify-center{justify-content:center}.x-input.x-justify-end{justify-content:flex-end}.x-input.x-justify-space-between{justify-content:space-between}.x-input.x-justify-space-around{justify-content:space-around}.x-input.x-align-start{align-items:flex-start}.x-input.x-align-center{align-items:center}.x-input.x-align-end{align-items:flex-end}.x-input.x-direction-column{flex-direction:column}.x-input.x-direction-column-reverse{flex-direction:column-reverse}.x-input.x-direction-row{flex-direction:row}.x-input.x-direction-row-reverse{flex-direction:row-reverse}.x-input>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-input>label.x-text-align-start{text-align:start}.x-input>label.x-text-align-center{text-align:center}.x-input>label.x-text-align-end{text-align:end}.x-input-row{flex:1;display:flex;align-items:center}.x-input-row .x-input-row-before:not(.x-input-row-before-template),.x-input-row .x-input-row-after:not(.x-input-row-after-template){border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);border-width:0}.x-input-row .x-input-row-before-template{display:contents}.x-input-row .x-input-row-before-template input,.x-input-row .x-input-row-before-template .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-row .x-input-row-after-template{display:contents}.x-input-row .x-input-row-after-template input,.x-input-row .x-input-row-after-template .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-row .x-input-row-before-template:hover,.x-input-row .x-input-row-before-template:focus{z-index:1}.x-input-row .x-input-row-before-template input:hover,.x-input-row .x-input-row-before-template input:focus,.x-input-row .x-input-row-before-template .x-button:hover,.x-input-row .x-input-row-before-template .x-button:focus,.x-input-row .x-input-row-after-template input:hover,.x-input-row .x-input-row-after-template input:focus,.x-input-row .x-input-row-after-template .x-button:hover,.x-input-row .x-input-row-after-template .x-button:focus{z-index:1}.x-input-row>.x-input-input{position:relative;width:100%;display:inline-flex;align-items:center}.x-input-row>.x-input-input>input{flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);border-width:0;box-shadow:var(--x-box-shadow) transparent;transition:all var(--x-animation-duration-slow)}.x-input-row>.x-input-input>input::-moz-placeholder{color:var(--x-text-700);opacity:1}.x-input-row>.x-input-input>input:-ms-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input::-webkit-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input[disabled]{color:var(--x-text-500)}.x-input-row>.x-input-input>input:focus{border-color:var(--x-primary);outline:0}.x-input-row>.x-input-input>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base);z-index:2}.x-input-row>.x-input-input:hover>input{border-color:var(--x-primary-300)}.x-input-row>.x-input-input:focus>input{border-color:var(--x-primary);outline:0}.x-input-value-template .x-input-input>input{color:transparent}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;left:0}.x-input-value-template-value:hover+input{border-color:var(--x-primary-300)}.x-input-error-message{position:absolute;bottom:0;left:0;font-size:var(--x-font-size)-.125rem;color:var(--x-danger);margin-bottom:calc(calc(var(--x-font-size) + .45rem) * -1);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-input.x-invalid>label,.x-input.x-required>label{color:var(--x-danger)}.x-input.x-invalid .x-input-input>x-icon,.x-input.x-required .x-input-input>x-icon{color:var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error,.x-input.x-required .x-input-input .x-border-error{position:absolute;height:.5rem;width:.5rem;z-index:10}.x-input.x-invalid .x-input-input .x-border-error.x-top-left,.x-input.x-required .x-input-input .x-border-error.x-top-left{border-top-left-radius:var(--x-border-radius);top:0;left:0;border-top:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-top-right,.x-input.x-required .x-input-input .x-border-error.x-top-right{border-top-right-radius:var(--x-border-radius);top:0;right:0;border-top:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-left,.x-input.x-required .x-input-input .x-border-error.x-bottom-left{border-bottom-left-radius:var(--x-border-radius);bottom:0;left:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-right,.x-input.x-required .x-input-input .x-border-error.x-bottom-right{border-bottom-right-radius:var(--x-border-radius);bottom:0;right:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-disabled>.x-input-row>.x-input-input>x-icon{color:var(--x-text-400)}.x-input.x-disabled>.x-input-row>.x-input-input>input,.x-input.x-disabled>.x-input-row>.x-input-input>.x-input-value-template-value{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear{position:absolute;color:var(--x-text-400);font-size:var(--x-font-size-medium);padding:.4rem;right:0;left:inherit;opacity:0;cursor:pointer;z-index:2}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear:hover{color:var(--x-text-300)}.x-input.x-clearable>.x-input-row>.x-input-input:hover>input .x-input-clear,.x-input.x-clearable>.x-input-row>.x-input-input:hover>.x-input-value-template-value .x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>.x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>input{padding-right:calc(var(--x-font-size-medium) + .4rem * 2)!important}.x-input-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-400);padding:0 .4rem;right:0}.x-input.x-direction-row>label{padding:0 .5rem 0 0}.x-input.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-input.x-direction-column{align-items:inherit}.x-input.x-direction-column-reverse{align-items:inherit}.x-input-icon>.x-input-row>.x-input-input>x-icon{position:absolute;font-size:var(--x-font-size-medium);padding:.4rem}.x-input-icon>.x-input-row>.x-input-input>x-icon.x-icon-spin{padding:0;margin:.4rem}.x-input-icon-left>.x-input-row>.x-input-input>input,.x-input-icon-left>.x-input-row>.x-input-input>.x-input-value-template-value{padding-left:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-left>.x-input-row>.x-input-input>x-icon{left:0}.x-input-icon-right>.x-input-row>.x-input-input>input,.x-input-icon-right>.x-input-row>.x-input-input>.x-input-value-template-value{padding-right:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-right>.x-input-row>.x-input-input>x-icon{right:0}.x-input-icon-right>.x-input-row>.x-input-input>.x-input-max-length{right:inherit;left:0}.x-input-bordered>.x-input-row>.x-input-input>input{border-width:var(--x-border-width)}.x-input-bordered .x-input-row .x-input-row-before:not(.x-input-row-before-template){border-width:var(--x-border-width);border-right-width:0}.x-input-bordered .x-input-row .x-input-row-after:not(.x-input-row-after-template){border-width:var(--x-border-width);border-left-width:0}.x-input-before>.x-input-row>.x-input-input>input{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-before-template .x-input-input>input{margin-left:calc(var(--x-border-width) * -1)}.x-input-before-template .x-input-input>input:hover,.x-input-before-template .x-input-input>input:focus{z-index:1}.x-input-after>.x-input-row>.x-input-input>input{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-after-template>.x-input-row>.x-input-input>input{margin-right:calc(var(--x-border-width) * -1)}.x-input-after-template>.x-input-row>.x-input-input>input:hover,.x-input-after-template>.x-input-row>.x-input-input>input:focus{z-index:1}.x-input-active .x-input-row>.x-input-input>input{border-color:var(--x-primary)}.x-input-pointer .x-input-row>.x-input-input>input,.x-input-pointer .x-input-row>.x-input-input>.x-input-value-template-value{cursor:pointer}.x-input-big>.x-input-row>.x-input-input>input,.x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-large>.x-input-row>.x-input-input>input,.x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-medium>.x-input-row>.x-input-input>input,.x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-small>.x-input-row>.x-input-input>input,.x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-mini>.x-input-row>.x-input-input>input,.x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], components: [{ type: i3__namespace.XIconComponent, selector: "x-icon" }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XInputPrefix,
                         templateUrl: './input.component.html',
-                        styleUrls: ['./style/index.scss'],
+                        styleUrls: ['./input.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [baseForm.XValueAccessor(XInputComponent)]
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.XConfigService }]; }, propDecorators: { inputElement: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.XConfigService }, { type: XInputGroupComponent, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { inputElement: [{
                     type: i0.ViewChild,
                     args: ['inputElement', { static: true }]
                 }], inputRef: [{
@@ -601,15 +756,15 @@
         }
         return XInputModule;
     }());
-    /** @nocollapse */ XInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputModule, declarations: [XInputComponent, XInputProperty], imports: [i3.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, i2.XIconModule, baseForm.XBaseFormModule], exports: [XInputComponent] });
-    /** @nocollapse */ XInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputModule, imports: [[i3.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, i2.XIconModule, baseForm.XBaseFormModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XInputModule, decorators: [{
+    /** @nocollapse */ XInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ XInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputModule, declarations: [XInputComponent, XInputProperty, XInputGroupComponent, XInputGroupProperty], imports: [i4.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, i3.XIconModule, baseForm.XBaseFormModule, i5.XOutletModule], exports: [XInputComponent, XInputGroupComponent] });
+    /** @nocollapse */ XInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputModule, imports: [[i4.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, i3.XIconModule, baseForm.XBaseFormModule, i5.XOutletModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XInputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [XInputComponent, XInputProperty],
-                        exports: [XInputComponent],
-                        imports: [i3.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, i2.XIconModule, baseForm.XBaseFormModule]
+                        declarations: [XInputComponent, XInputProperty, XInputGroupComponent, XInputGroupProperty],
+                        exports: [XInputComponent, XInputGroupComponent],
+                        imports: [i4.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, i3.XIconModule, baseForm.XBaseFormModule, i5.XOutletModule]
                     }]
             }] });
 
@@ -618,11 +773,14 @@
      */
 
     exports.XInputComponent = XInputComponent;
+    exports.XInputGroupComponent = XInputGroupComponent;
+    exports.XInputGroupPrefix = XInputGroupPrefix;
+    exports.XInputGroupProperty = XInputGroupProperty;
     exports.XInputModule = XInputModule;
     exports.XInputPrefix = XInputPrefix;
     exports.XInputProperty = XInputProperty;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ng-nest-ui-input.umd.js.map