@ng-nest/ui 14.0.4 → 14.0.7

package/fesm2015/ng-nest-ui-image.mjs

@@ -0,0 +1,312 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewChild, Optional, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i1 from '@ng-nest/ui/core';
+import { XProperty, XWithConfig, XIsChange } from '@ng-nest/ui/core';
+import * as i2$1 from '@ng-nest/ui/dialog';
+import { X_DIALOG_DATA, XDialogModule } from '@ng-nest/ui/dialog';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i5 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { Subject, map } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i3$1 from '@ng-nest/ui/i18n';
+import { XI18nModule } from '@ng-nest/ui/i18n';
+import { XButtonModule } from '@ng-nest/ui/button';
+
+/**
+ * Image
+ * @selector x-image
+ * @decorator component
+ */
+const XImagePrefix = 'x-image';
+const X_CONFIG_NAME = 'image';
+/**
+ * Image Property
+ */
+class XImageProperty extends XProperty {
+}
+/** @nocollapse */ XImageProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XImageProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XImageProperty, selector: "ng-component", inputs: { src: "src", width: "width", height: "height", alt: "alt", fallback: "fallback", previewText: "previewText", placeholder: "placeholder" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    XWithConfig(X_CONFIG_NAME)
+], XImageProperty.prototype, "previewText", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], fallback: [{
+                type: Input
+            }], previewText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+/**
+ * Image Preview
+ * @selector x-image-preview
+ * @decorator component
+ */
+const XImagePreviewPrefix = 'x-image-preview';
+/**
+ * Image Preview Property
+ */
+class XImagePreviewProperty extends XProperty {
+}
+/** @nocollapse */ XImagePreviewProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImagePreviewProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XImagePreviewProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XImagePreviewProperty, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImagePreviewProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+/**
+ * Image Group
+ * @selector x-image-group
+ * @decorator component
+ */
+const XImageGroupPrefix = 'x-image-group';
+
+class XImagePreviewComponent extends XImagePreviewProperty {
+    constructor(renderer, elementRef, cdr, configService, data) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.data = data;
+        this.imgScale3d = {
+            x: 1,
+            y: 1,
+            z: 1
+        };
+        this.rotate = 0;
+        this.position = {
+            x: 0,
+            y: 0
+        };
+        this.total = 1;
+        this.current = 1;
+    }
+    get getWrapperTransform() {
+        return `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;
+    }
+    get getImgTransform() {
+        return `scale3d(${this.imgScale3d.x}, ${this.imgScale3d.y}, ${this.imgScale3d.z}) rotate(${this.rotate}deg)`;
+    }
+    ngOnInit() {
+        this.setActivated();
+    }
+    ngOnChanges() { }
+    initialization() {
+        this.imgScale3d = {
+            x: 1,
+            y: 1,
+            z: 1
+        };
+        this.rotate = 0;
+        this.position = {
+            x: 0,
+            y: 0
+        };
+    }
+    setActivated() {
+        if (!this.data)
+            return;
+        if (this.data.length === 1) {
+            this.activated = this.data[0];
+            this.total = this.current = 1;
+        }
+        else {
+            this.total = this.data.length;
+            this.activated = this.data.find((x, index) => {
+                if (x.activated) {
+                    this.current = index + 1;
+                    return true;
+                }
+                return false;
+            });
+        }
+    }
+    onCurrentChange(num) {
+        this.current += num;
+        this.activated = this.data[this.current - 1];
+        this.initialization();
+    }
+    onRotate(deg) {
+        this.rotate += deg;
+    }
+    onScale(zoom) {
+        this.imgScale3d.x += zoom;
+        this.imgScale3d.y += zoom;
+    }
+    onDragReleased() {
+        let width = this.imageRef.nativeElement.offsetWidth * this.imgScale3d.x;
+        let height = this.imageRef.nativeElement.offsetHeight * this.imgScale3d.x;
+        const clientWidth = document.documentElement.clientWidth;
+        const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+        const isRotate = this.rotate % 180 !== 0;
+        const box = this.imageRef.nativeElement.getBoundingClientRect();
+        const docElem = document.documentElement;
+        const left = box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0);
+        const top = box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0);
+        width = isRotate ? height : width;
+        height = isRotate ? width : height;
+        let position = { x: 0, y: 0 };
+        if (width > clientWidth || height > clientHeight) {
+            const x = this.fitPoint(left, width, clientWidth);
+            const y = this.fitPoint(top, height, clientHeight);
+            position.x = x ? x : 0;
+            position.y = y ? y : 0;
+        }
+        this.position = Object.assign(Object.assign({}, this.position), position);
+    }
+    fitPoint(start, size, clientSize) {
+        const startAddSize = start + size;
+        const offsetStart = (size - clientSize) / 2;
+        let distance = null;
+        if (size > clientSize) {
+            if (start > 0) {
+                distance = offsetStart;
+            }
+            if (start < 0 && startAddSize < clientSize) {
+                distance = -offsetStart;
+            }
+        }
+        else {
+            if (start < 0 || startAddSize > clientSize) {
+                distance = start < 0 ? offsetStart : -offsetStart;
+            }
+        }
+        return distance;
+    }
+}
+/** @nocollapse */ XImagePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImagePreviewComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: X_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XImagePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XImagePreviewComponent, selector: "x-image-preview", viewQueries: [{ propertyName: "imageRef", first: true, predicate: ["imageRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-image-preview\" [ngClass]=\"classMap\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      <span class=\"x-image-preview-current\" *ngIf=\"total != 1\">{{ current }} / {{ total }}</span>\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-out\" [class.x-image-preview-disabled]=\"imgScale3d.x === 1\" (click)=\"imgScale3d.x > 1 && onScale(-1)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"getWrapperTransform\"\r\n    [cdkDragFreeDragPosition]=\"position\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img #imageRef [src]=\"activated?.src\" [attr.alt]=\"activated?.alt\" cdkDragHandle [style.transform]=\"getImgTransform\" />\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === 1\"\r\n    class=\"x-image-preview-left\"\r\n    (click)=\"current > 1 && onCurrentChange(-1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-left\"></x-icon>\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === total\"\r\n    class=\"x-image-preview-right\"\r\n    (click)=\"current != total && onCurrentChange(1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-right\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i2$1.XDialogCloseDirective, selector: "[x-dialog-close]" }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImagePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XImagePreviewPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image-preview\" [ngClass]=\"classMap\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      <span class=\"x-image-preview-current\" *ngIf=\"total != 1\">{{ current }} / {{ total }}</span>\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-out\" [class.x-image-preview-disabled]=\"imgScale3d.x === 1\" (click)=\"imgScale3d.x > 1 && onScale(-1)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"getWrapperTransform\"\r\n    [cdkDragFreeDragPosition]=\"position\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img #imageRef [src]=\"activated?.src\" [attr.alt]=\"activated?.alt\" cdkDragHandle [style.transform]=\"getImgTransform\" />\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === 1\"\r\n    class=\"x-image-preview-left\"\r\n    (click)=\"current > 1 && onCurrentChange(-1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-left\"></x-icon>\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === total\"\r\n    class=\"x-image-preview-right\"\r\n    (click)=\"current != total && onCurrentChange(1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-right\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-image-preview{display:block;width:100%;height:100%}.x-image-preview{margin:0;padding:0;width:100%;height:100%}.x-image-preview-header{display:flex;align-items:center;justify-content:center;background-color:#0003;color:#fff;position:absolute;width:100%;z-index:1;height:2.75rem}.x-image-preview-header x-icon{font-size:1.25rem;padding:.75rem;cursor:pointer;transition:background-color var(--x-animation-duration-base)}.x-image-preview-header x-icon:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-header x-icon.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-header-center{position:absolute}.x-image-preview-header-right{position:absolute;right:0}.x-image-preview-header-left{position:absolute;left:0}.x-image-preview-current{padding:.75rem}.x-image-preview-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-wrapper>img{max-width:100%;max-height:100%;vertical-align:middle;cursor:grab;transition:transform var(--x-animation-duration-base) ease-out 0s}.x-image-preview-left,.x-image-preview-right{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;color:#fff;background-color:#0003;border-radius:50%;transition:background-color var(--x-animation-duration-base);cursor:pointer;font-size:1.25rem}.x-image-preview-left:hover:not(.x-image-preview-disabled),.x-image-preview-right:hover:not(.x-image-preview-disabled){background-color:#0000001a}.x-image-preview-left.x-image-preview-disabled,.x-image-preview-right.x-image-preview-disabled{color:#ffffff80;cursor:default}.x-image-preview-left{left:1rem}.x-image-preview-right{right:1rem}.x-image-preview-portal .x-dialog-portal{background:transparent;box-shadow:none;padding:0}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [X_DIALOG_DATA]
+                    }] }];
+    }, propDecorators: { imageRef: [{
+                type: ViewChild,
+                args: ['imageRef']
+            }] } });
+
+class XImageGroupComponent {
+    constructor() {
+        this.images = [];
+    }
+    addImage(image) {
+        this.images.push(image);
+    }
+}
+/** @nocollapse */ XImageGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XImageGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XImageGroupComponent, selector: "x-image-group", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: ["x-image-group{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XImageGroupPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: ["x-image-group{display:inline-block}\n"] }]
+        }] });
+
+class XImageComponent extends XImageProperty {
+    constructor(renderer, elementRef, cdr, configService, dialog, i18n, group) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.dialog = dialog;
+        this.i18n = i18n;
+        this.group = group;
+        this.locale = {};
+        this.isError = false;
+        this.isLoaded = false;
+        this._unSubject = new Subject();
+    }
+    get getPreviewText() {
+        return this.previewText || this.locale.previewText;
+    }
+    ngOnInit() {
+        if (this.group) {
+            this.group.addImage(this);
+        }
+        this.i18n.localeChange
+            .pipe(map((x) => x.image), takeUntil(this._unSubject))
+            .subscribe((x) => {
+            this.locale = x;
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnChanges(changes) {
+        let { src } = changes;
+        if (XIsChange(src)) {
+            this.isLoaded = false;
+        }
+    }
+    onPreview() {
+        let data = [];
+        if (this.group) {
+            const activatedIndex = this.group.images.indexOf(this);
+            data = this.group.images.map((x, index) => ({ src: x.src, alt: x.alt, fallback: x.fallback, activated: index === activatedIndex }));
+        }
+        else {
+            data = [{ src: this.src, alt: this.alt, fallback: this.fallback }];
+        }
+        this.dialog.create(XImagePreviewComponent, {
+            width: '100%',
+            height: '100%',
+            className: 'x-image-preview-portal',
+            data: data
+        });
+    }
+    onError() {
+        this.src = this.fallback;
+        this.isError = true;
+    }
+    onLoad() {
+        this.isLoaded = true;
+    }
+}
+/** @nocollapse */ XImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i2$1.XDialogService }, { token: i3$1.XI18nService }, { token: XImageGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XImageComponent, selector: "x-image", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-image\" [ngClass]=\"classMap\">\r\n  <img\r\n    [hidden]=\"placeholder && !isLoaded\"\r\n    class=\"x-image-img\"\r\n    [src]=\"src\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (error)=\"onError()\"\r\n    (load)=\"onLoad()\"\r\n  />\r\n  <img *ngIf=\"placeholder && !isLoaded\" class=\"x-image-img\" [src]=\"placeholder\" [style.width]=\"width\" [style.height]=\"height\" />\r\n  <div class=\"x-image-overlay\" *ngIf=\"!isError\" (click)=\"onPreview()\">\r\n    <div class=\"x-image-text\">\r\n      <x-icon type=\"fto-eye\"></x-icon>\r\n      <span>{{ getPreviewText }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{width:100%;height:auto;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.5);cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XImagePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-image\" [ngClass]=\"classMap\">\r\n  <img\r\n    [hidden]=\"placeholder && !isLoaded\"\r\n    class=\"x-image-img\"\r\n    [src]=\"src\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (error)=\"onError()\"\r\n    (load)=\"onLoad()\"\r\n  />\r\n  <img *ngIf=\"placeholder && !isLoaded\" class=\"x-image-img\" [src]=\"placeholder\" [style.width]=\"width\" [style.height]=\"height\" />\r\n  <div class=\"x-image-overlay\" *ngIf=\"!isError\" (click)=\"onPreview()\">\r\n    <div class=\"x-image-text\">\r\n      <x-icon type=\"fto-eye\"></x-icon>\r\n      <span>{{ getPreviewText }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["x-image{display:inline-block}.x-image{margin:0;padding:0;position:relative;display:inline-block}.x-image-img{width:100%;height:auto;vertical-align:middle}.x-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.5);cursor:pointer;opacity:0;transition:opacity var(--x-animation-duration-base)}.x-image-overlay:hover{opacity:1}.x-image-text>span{margin-left:.25rem}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i2$1.XDialogService }, { type: i3$1.XI18nService }, { type: XImageGroupComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+class XImageModule {
+}
+/** @nocollapse */ XImageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ XImageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XImageModule, declarations: [XImageComponent, XImageProperty, XImagePreviewComponent, XImagePreviewProperty, XImageGroupComponent], imports: [CommonModule, XIconModule, XDialogModule, XButtonModule, XI18nModule, DragDropModule], exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent] });
+/** @nocollapse */ XImageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageModule, imports: [CommonModule, XIconModule, XDialogModule, XButtonModule, XI18nModule, DragDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XImageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XImageComponent, XImageProperty, XImagePreviewComponent, XImagePreviewProperty, XImageGroupComponent],
+                    exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent],
+                    imports: [CommonModule, XIconModule, XDialogModule, XButtonModule, XI18nModule, DragDropModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XImageComponent, XImageGroupComponent, XImageGroupPrefix, XImageModule, XImagePrefix, XImagePreviewComponent, XImagePreviewPrefix, XImagePreviewProperty, XImageProperty };
+//# sourceMappingURL=ng-nest-ui-image.mjs.map

package/fesm2015/ng-nest-ui-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-nest-ui-image.mjs","sources":["../../../../lib/ng-nest/ui/image/image.property.ts","../../../../lib/ng-nest/ui/image/image-preview.component.ts","../../../../lib/ng-nest/ui/image/image-preview.component.html","../../../../lib/ng-nest/ui/image/image-group.component.ts","../../../../lib/ng-nest/ui/image/image-group.component.html","../../../../lib/ng-nest/ui/image/image.component.ts","../../../../lib/ng-nest/ui/image/image.component.html","../../../../lib/ng-nest/ui/image/image.module.ts","../../../../lib/ng-nest/ui/image/ng-nest-ui-image.ts"],"sourcesContent":["import { Input, Component } from '@angular/core';\r\nimport { XProperty, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Image\r\n * @selector x-image\r\n * @decorator component\r\n */\r\nexport const XImagePrefix = 'x-image';\r\nconst X_CONFIG_NAME = 'image';\r\n\r\n/**\r\n * Image Property\r\n */\r\n@Component({ template: '' })\r\nexport class XImageProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 图片显示地址\r\n   * @en_US Picture display address\r\n   */\r\n  @Input() src!: string;\r\n  /**\r\n   * @zh_CN 图片宽度\r\n   * @en_US Picture width\r\n   */\r\n  @Input() width!: string;\r\n  /**\r\n   * @zh_CN 图片高度\r\n   * @en_US Picture height\r\n   */\r\n  @Input() height!: string;\r\n  /**\r\n   * @zh_CN 图像描述\r\n   * @en_US Image description\r\n   */\r\n  @Input() alt!: string;\r\n  /**\r\n   * @zh_CN 加载失败显示的地址\r\n   * @en_US Load fault tolerance address\r\n   */\r\n  @Input() fallback!: string;\r\n  /**\r\n   * @zh_CN 预览文字\r\n   * @en_US Preview text\r\n   * @default '预览'\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME) previewText?: string;\r\n  /**\r\n   * @zh_CN 渐进加载显示的图片\r\n   * @en_US Gradually loaded the display of the display\r\n   */\r\n  @Input() placeholder?: string;\r\n}\r\n\r\n/**\r\n * @zh_CN 图片节点数据\r\n * @en_US Image node data\r\n */\r\nexport interface XImageNode {\r\n  /**\r\n   * @zh_CN 图片显示地址\r\n   * @en_US Picture display address\r\n   */\r\n  src?: string;\r\n  /**\r\n   * @zh_CN 图像描述\r\n   * @en_US Image description\r\n   */\r\n  alt?: string;\r\n  /**\r\n   * @zh_CN 加载失败显示的地址\r\n   * @en_US Load fault tolerance address\r\n   */\r\n  fallback?: string;\r\n  /**\r\n   * @zh_CN 当前激活的图片\r\n   * @en_US Current activated pictures\r\n   */\r\n  activated?: boolean;\r\n}\r\n\r\n/**\r\n * Image Preview\r\n * @selector x-image-preview\r\n * @decorator component\r\n */\r\nexport const XImagePreviewPrefix = 'x-image-preview';\r\n\r\n/**\r\n * Image Preview Property\r\n */\r\n@Component({ template: '' })\r\nexport class XImagePreviewProperty extends XProperty {}\r\n\r\n/**\r\n * Image Group\r\n * @selector x-image-group\r\n * @decorator component\r\n */\r\nexport const XImageGroupPrefix = 'x-image-group';\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  OnChanges,\r\n  Inject,\r\n  ViewChild\r\n} from '@angular/core';\r\nimport { XImageNode, XImagePreviewPrefix, XImagePreviewProperty } from './image.property';\r\nimport { XConfigService } from '@ng-nest/ui/core';\r\nimport { X_DIALOG_DATA } from '@ng-nest/ui/dialog';\r\n\r\n@Component({\r\n  selector: `${XImagePreviewPrefix}`,\r\n  templateUrl: './image-preview.component.html',\r\n  styleUrls: ['./image-preview.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XImagePreviewComponent extends XImagePreviewProperty implements OnChanges {\r\n  imgScale3d = {\r\n    x: 1,\r\n    y: 1,\r\n    z: 1\r\n  };\r\n  rotate = 0;\r\n\r\n  position = {\r\n    x: 0,\r\n    y: 0\r\n  };\r\n\r\n  activated?: XImageNode;\r\n  total = 1;\r\n  current = 1;\r\n\r\n  get getWrapperTransform() {\r\n    return `translate3d(${this.position.x}px, ${this.position.y}px, 0)`;\r\n  }\r\n  get getImgTransform() {\r\n    return `scale3d(${this.imgScale3d.x}, ${this.imgScale3d.y}, ${this.imgScale3d.z}) rotate(${this.rotate}deg)`;\r\n  }\r\n\r\n  @ViewChild('imageRef') imageRef!: ElementRef<HTMLImageElement>;\r\n\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public configService: XConfigService,\r\n    @Inject(X_DIALOG_DATA) public data: XImageNode[]\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setActivated();\r\n  }\r\n\r\n  ngOnChanges() {}\r\n\r\n  initialization() {\r\n    this.imgScale3d = {\r\n      x: 1,\r\n      y: 1,\r\n      z: 1\r\n    };\r\n    this.rotate = 0;\r\n    this.position = {\r\n      x: 0,\r\n      y: 0\r\n    };\r\n  }\r\n\r\n  setActivated() {\r\n    if (!this.data) return;\r\n    if (this.data.length === 1) {\r\n      this.activated = this.data[0];\r\n      this.total = this.current = 1;\r\n    } else {\r\n      this.total = this.data.length;\r\n      this.activated = this.data.find((x, index) => {\r\n        if (x.activated) {\r\n          this.current = index + 1;\r\n          return true;\r\n        }\r\n        return false;\r\n      });\r\n    }\r\n  }\r\n\r\n  onCurrentChange(num: number) {\r\n    this.current += num;\r\n    this.activated = this.data[this.current - 1];\r\n    this.initialization();\r\n  }\r\n\r\n  onRotate(deg: number) {\r\n    this.rotate += deg;\r\n  }\r\n\r\n  onScale(zoom: number) {\r\n    this.imgScale3d.x += zoom;\r\n    this.imgScale3d.y += zoom;\r\n  }\r\n\r\n  onDragReleased() {\r\n    let width = this.imageRef.nativeElement.offsetWidth * this.imgScale3d.x;\r\n    let height = this.imageRef.nativeElement.offsetHeight * this.imgScale3d.x;\r\n    const clientWidth = document.documentElement.clientWidth;\r\n    const clientHeight = window.innerHeight || document.documentElement.clientHeight;\r\n    const isRotate = this.rotate % 180 !== 0;\r\n    const box = this.imageRef.nativeElement.getBoundingClientRect();\r\n    const docElem = document.documentElement;\r\n    const left = box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0);\r\n    const top = box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0);\r\n    width = isRotate ? height : width;\r\n    height = isRotate ? width : height;\r\n\r\n    let position = { x: 0, y: 0 };\r\n    if (width > clientWidth || height > clientHeight) {\r\n      const x = this.fitPoint(left, width, clientWidth);\r\n      const y = this.fitPoint(top, height, clientHeight);\r\n      position.x = x ? x : 0;\r\n      position.y = y ? y : 0;\r\n    }\r\n\r\n    this.position = { ...this.position, ...position };\r\n  }\r\n\r\n  fitPoint(start: number, size: number, clientSize: number): number | null {\r\n    const startAddSize = start + size;\r\n    const offsetStart = (size - clientSize) / 2;\r\n    let distance: number | null = null;\r\n\r\n    if (size > clientSize) {\r\n      if (start > 0) {\r\n        distance = offsetStart;\r\n      }\r\n      if (start < 0 && startAddSize < clientSize) {\r\n        distance = -offsetStart;\r\n      }\r\n    } else {\r\n      if (start < 0 || startAddSize > clientSize) {\r\n        distance = start < 0 ? offsetStart : -offsetStart;\r\n      }\r\n    }\r\n\r\n    return distance;\r\n  }\r\n}\r\n","<div class=\"x-image-preview\" [ngClass]=\"classMap\">\r\n  <div class=\"x-image-preview-header\">\r\n    <div class=\"x-image-preview-header-left\">\r\n      <span class=\"x-image-preview-current\" *ngIf=\"total != 1\">{{ current }} / {{ total }}</span>\r\n    </div>\r\n    <div class=\"x-image-preview-header-center\">\r\n      <x-icon type=\"fto-corner-up-left\" (click)=\"onRotate(-90)\"></x-icon>\r\n      <x-icon type=\"fto-corner-up-right\" (click)=\"onRotate(90)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-out\" [class.x-image-preview-disabled]=\"imgScale3d.x === 1\" (click)=\"imgScale3d.x > 1 && onScale(-1)\"></x-icon>\r\n      <x-icon type=\"fto-zoom-in\" (click)=\"onScale(1)\"></x-icon>\r\n    </div>\r\n    <div class=\"x-image-preview-header-right\">\r\n      <x-icon type=\"fto-x\" x-dialog-close></x-icon>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"x-image-preview-wrapper\"\r\n    cdkDrag\r\n    [style.transform]=\"getWrapperTransform\"\r\n    [cdkDragFreeDragPosition]=\"position\"\r\n    (cdkDragReleased)=\"onDragReleased()\"\r\n  >\r\n    <img #imageRef [src]=\"activated?.src\" [attr.alt]=\"activated?.alt\" cdkDragHandle [style.transform]=\"getImgTransform\" />\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === 1\"\r\n    class=\"x-image-preview-left\"\r\n    (click)=\"current > 1 && onCurrentChange(-1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-left\"></x-icon>\r\n  </div>\r\n  <div\r\n    *ngIf=\"data && data.length > 1\"\r\n    [class.x-image-preview-disabled]=\"current === total\"\r\n    class=\"x-image-preview-right\"\r\n    (click)=\"current != total && onCurrentChange(1)\"\r\n  >\r\n    <x-icon type=\"fto-chevron-right\"></x-icon>\r\n  </div>\r\n</div>\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\r\nimport { XImageComponent } from './image.component';\r\nimport { XImageGroupPrefix } from './image.property';\r\n\r\n@Component({\r\n  selector: `${XImageGroupPrefix}`,\r\n  templateUrl: './image-group.component.html',\r\n  styleUrls: ['./image-group.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XImageGroupComponent {\r\n  images: XImageComponent[] = [];\r\n\r\n  addImage(image: XImageComponent): void {\r\n    this.images.push(image);\r\n  }\r\n}\r\n","<ng-content></ng-content>\r\n","import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  OnInit,\r\n  Optional,\r\n  OnChanges,\r\n  SimpleChanges\r\n} from '@angular/core';\r\nimport { XImageNode, XImagePrefix, XImageProperty } from './image.property';\r\nimport { XConfigService, XIsChange } from '@ng-nest/ui/core';\r\nimport { XDialogService } from '@ng-nest/ui/dialog';\r\nimport { XImagePreviewComponent } from './image-preview.component';\r\nimport { XI18nImage, XI18nService } from '@ng-nest/ui/i18n';\r\nimport { map, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { XImageGroupComponent } from './image-group.component';\r\n\r\n@Component({\r\n  selector: `${XImagePrefix}`,\r\n  templateUrl: './image.component.html',\r\n  styleUrls: ['./image.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XImageComponent extends XImageProperty implements OnInit, OnChanges {\r\n  locale: XI18nImage = {};\r\n  isError = false;\r\n  isLoaded = false;\r\n  private _unSubject = new Subject<void>();\r\n\r\n  get getPreviewText() {\r\n    return this.previewText || this.locale.previewText;\r\n  }\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public configService: XConfigService,\r\n    public dialog: XDialogService,\r\n    public i18n: XI18nService,\r\n    @Optional() public group: XImageGroupComponent\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    if (this.group) {\r\n      this.group.addImage(this);\r\n    }\r\n    this.i18n.localeChange\r\n      .pipe(\r\n        map((x) => x.image as XI18nImage),\r\n        takeUntil(this._unSubject)\r\n      )\r\n      .subscribe((x) => {\r\n        this.locale = x;\r\n        this.cdr.markForCheck();\r\n      });\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    let { src } = changes;\r\n    if (XIsChange(src)) {\r\n      this.isLoaded = false;\r\n    }\r\n  }\r\n\r\n  onPreview() {\r\n    let data: XImageNode[] = [];\r\n    if (this.group) {\r\n      const activatedIndex = this.group.images.indexOf(this);\r\n      data = this.group.images.map((x, index) => ({ src: x.src, alt: x.alt, fallback: x.fallback, activated: index === activatedIndex }));\r\n    } else {\r\n      data = [{ src: this.src, alt: this.alt, fallback: this.fallback }];\r\n    }\r\n    this.dialog.create(XImagePreviewComponent, {\r\n      width: '100%',\r\n      height: '100%',\r\n      className: 'x-image-preview-portal',\r\n      data: data\r\n    });\r\n  }\r\n\r\n  onError() {\r\n    this.src = this.fallback;\r\n    this.isError = true;\r\n  }\r\n\r\n  onLoad() {\r\n    this.isLoaded = true;\r\n  }\r\n}\r\n","<div class=\"x-image\" [ngClass]=\"classMap\">\r\n  <img\r\n    [hidden]=\"placeholder && !isLoaded\"\r\n    class=\"x-image-img\"\r\n    [src]=\"src\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (error)=\"onError()\"\r\n    (load)=\"onLoad()\"\r\n  />\r\n  <img *ngIf=\"placeholder && !isLoaded\" class=\"x-image-img\" [src]=\"placeholder\" [style.width]=\"width\" [style.height]=\"height\" />\r\n  <div class=\"x-image-overlay\" *ngIf=\"!isError\" (click)=\"onPreview()\">\r\n    <div class=\"x-image-text\">\r\n      <x-icon type=\"fto-eye\"></x-icon>\r\n      <span>{{ getPreviewText }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XImageComponent } from './image.component';\r\nimport { XIconModule } from '@ng-nest/ui/icon';\r\nimport { XImagePreviewProperty, XImageProperty } from './image.property';\r\nimport { XDialogModule } from '@ng-nest/ui/dialog';\r\nimport { XImagePreviewComponent } from './image-preview.component';\r\nimport { XButtonModule } from '@ng-nest/ui/button';\r\nimport { DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { XI18nModule } from '@ng-nest/ui/i18n';\r\nimport { XImageGroupComponent } from './image-group.component';\r\n\r\n@NgModule({\r\n  declarations: [XImageComponent, XImageProperty, XImagePreviewComponent, XImagePreviewProperty, XImageGroupComponent],\r\n  exports: [XImageComponent, XImagePreviewComponent, XImageGroupComponent],\r\n  imports: [CommonModule, XIconModule, XDialogModule, XButtonModule, XI18nModule, DragDropModule]\r\n})\r\nexport class XImageModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i4","i2","i3","i4.XImageGroupComponent","i5","i6"],"mappings":"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"}

package/fesm2015/ng-nest-ui-input.mjs

@@ -389,10 +389,10 @@ class XInputComponent extends XInputProperty {
     }
 }
 /** @nocollapse */ XInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XInputComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: XInputGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XInputComponent, selector: "x-input", host: { properties: { "style.width.px": "this.getWidth" } }, providers: [XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }, { propertyName: "inputValueRef", first: true, predicate: ["inputValueRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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\" [class.x-input-label-required]=\"required\" [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        #inputValueRef\r\n        class=\"x-input-value-template-value\"\r\n        [style.left.rem]=\"paddingLeft\"\r\n        [style.padding-left]=\"0\"\r\n        [style.padding-right]=\"0\"\r\n        [style.width]=\"getTemplateWidth\"\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        [class.x-input-has-value-template]=\"valueTpl\"\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)=\"formControlValidator(); xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n        (compositionstart)=\"xComposition.next(true)\"\r\n        (compositionend)=\"xComposition.next(false)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow && !iconSpin\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon\r\n        *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft || iconSpin)\"\r\n        [type]=\"icon\"\r\n        [spin]=\"iconSpin\"\r\n        (click)=\"xClick.emit($event)\"\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 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;width:12rem}.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-property:background-color,border-color;transition-duration: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-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-input-value-template .x-input-input>input.x-input-has-value-template{color:transparent}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.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((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,.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(var(--x-font-size-medium) + .8rem)}.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(var(--x-font-size-medium) + .8rem)}.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-icon,.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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XInputComponent, selector: "x-input", host: { properties: { "style.width.px": "this.getWidth" } }, providers: [XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }, { propertyName: "inputValueRef", first: true, predicate: ["inputValueRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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\" [class.x-input-label-required]=\"required\" [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        #inputValueRef\r\n        class=\"x-input-value-template-value\"\r\n        [style.left.rem]=\"paddingLeft\"\r\n        [style.padding-left]=\"0\"\r\n        [style.padding-right]=\"0\"\r\n        [style.width]=\"getTemplateWidth\"\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        [class.x-input-has-value-template]=\"valueTpl\"\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)=\"formControlValidator(); xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n        (compositionstart)=\"xComposition.next(true)\"\r\n        (compositionend)=\"xComposition.next(false)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow && !iconSpin\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon\r\n        *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft || iconSpin)\"\r\n        [type]=\"icon\"\r\n        [spin]=\"iconSpin\"\r\n        (click)=\"xClick.emit($event)\"\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 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;width:12rem}.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-property:background-color,border-color;transition-duration: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-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-input-value-template .x-input-input>input.x-input-has-value-template{color:transparent!important}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.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((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);cursor:not-allowed}.x-input.x-disabled>.x-input-row>.x-input-input>input{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-disabled>.x-input-row>.x-input-input>.x-input-value-template-value{color:var(--x-text-400);cursor:not-allowed}.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,.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(var(--x-font-size-medium) + .8rem)}.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(var(--x-font-size-medium) + .8rem)}.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-icon,.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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XInputPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XInputComponent)], 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\" [class.x-input-label-required]=\"required\" [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        #inputValueRef\r\n        class=\"x-input-value-template-value\"\r\n        [style.left.rem]=\"paddingLeft\"\r\n        [style.padding-left]=\"0\"\r\n        [style.padding-right]=\"0\"\r\n        [style.width]=\"getTemplateWidth\"\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        [class.x-input-has-value-template]=\"valueTpl\"\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)=\"formControlValidator(); xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n        (compositionstart)=\"xComposition.next(true)\"\r\n        (compositionend)=\"xComposition.next(false)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow && !iconSpin\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon\r\n        *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft || iconSpin)\"\r\n        [type]=\"icon\"\r\n        [spin]=\"iconSpin\"\r\n        (click)=\"xClick.emit($event)\"\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 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;width:12rem}.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-property:background-color,border-color;transition-duration: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-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-input-value-template .x-input-input>input.x-input-has-value-template{color:transparent}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.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((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,.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(var(--x-font-size-medium) + .8rem)}.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(var(--x-font-size-medium) + .8rem)}.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-icon,.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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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"] }]
+            args: [{ selector: `${XInputPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XInputComponent)], 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\" [class.x-input-label-required]=\"required\" [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        #inputValueRef\r\n        class=\"x-input-value-template-value\"\r\n        [style.left.rem]=\"paddingLeft\"\r\n        [style.padding-left]=\"0\"\r\n        [style.padding-right]=\"0\"\r\n        [style.width]=\"getTemplateWidth\"\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        [class.x-input-has-value-template]=\"valueTpl\"\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)=\"formControlValidator(); xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n        (compositionstart)=\"xComposition.next(true)\"\r\n        (compositionend)=\"xComposition.next(false)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow && !iconSpin\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon\r\n        *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft || iconSpin)\"\r\n        [type]=\"icon\"\r\n        [spin]=\"iconSpin\"\r\n        (click)=\"xClick.emit($event)\"\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 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;width:12rem}.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-property:background-color,border-color;transition-duration: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-label-required:before{display:inline-block;margin-right:.25rem;color:var(--x-danger);line-height:1;font-size:var(--x-font-size-small);content:\"*\"}.x-input-value-template .x-input-input>input.x-input-has-value-template{color:transparent!important}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.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((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);cursor:not-allowed}.x-input.x-disabled>.x-input-row>.x-input-input>input{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-disabled>.x-input-row>.x-input-input>.x-input-value-template-value{color:var(--x-text-400);cursor:not-allowed}.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,.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(var(--x-font-size-medium) + .8rem)}.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(var(--x-font-size-medium) + .8rem)}.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-icon,.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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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){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-value-template-value{min-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"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: XInputGroupComponent, decorators: [{
                         type: Optional