@ng-nest/ui 12.0.11 → 12.1.0

package/fesm2015/ng-nest-ui-drawer.js

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, Directive, Optional, TemplateRef, Injectable, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i3 from '@ng-nest/ui/core';
-import { XProperty, XInputBoolean, XWithConfig, XIsChange, XIsEmpty, XSlideAnimation } from '@ng-nest/ui/core';
+import { XProperty, XInputBoolean, XWithConfig, XIsChange, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
 import * as i1 from '@angular/cdk/overlay';
 import * as i2 from '@ng-nest/ui/portal';
 import { XPortalModule } from '@ng-nest/ui/portal';
@@ -12,6 +12,9 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
+import * as i1$1 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { filter, take } from 'rxjs/operators';
 
 /**
  * Drawer
@@ -19,7 +22,8 @@ import { XOutletModule } from '@ng-nest/ui/outlet';
  * @decorator component
  */
 const XDrawerPrefix = 'x-drawer';
-const X_CONFIG_NAME = 'drawer';
+const X_DRAWER_CONFIG_NAME = 'drawer';
+const X_DRAWER_DATA = new InjectionToken('XDrawerData');
 /**
  * Drawer Property
  */
@@ -39,16 +43,25 @@ class XDrawerProperty extends XProperty {
     }
 }
 /** @nocollapse */ XDrawerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XDrawerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XDrawerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputBoolean()
 ], XDrawerProperty.prototype, "visible", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, 'right')
+    XWithConfig(X_DRAWER_CONFIG_NAME, 'right')
 ], XDrawerProperty.prototype, "placement", void 0);
 __decorate([
-    XWithConfig(X_CONFIG_NAME, '30%')
+    XWithConfig(X_DRAWER_CONFIG_NAME, '30%')
 ], XDrawerProperty.prototype, "size", void 0);
+__decorate([
+    XWithConfig(X_DRAWER_CONFIG_NAME, true)
+], XDrawerProperty.prototype, "backdropClose", void 0);
+__decorate([
+    XWithConfig(X_DRAWER_CONFIG_NAME, true)
+], XDrawerProperty.prototype, "hasBackdrop", void 0);
+__decorate([
+    XWithConfig(X_DRAWER_CONFIG_NAME, '')
+], XDrawerProperty.prototype, "className", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -60,6 +73,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], backdropClose: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], className: [{
+                type: Input
             }], close: [{
                 type: Output
             }], visibleChange: [{
@@ -138,7 +157,7 @@ class XDrawerComponent extends XDrawerProperty {
     }
 }
 /** @nocollapse */ XDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerComponent, selector: "x-drawer", viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:.5rem 1rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.25rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem .5rem;height:calc(100% - 2.5rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], components: [{ type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerComponent, selector: "x-drawer", viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], components: [{ type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -154,17 +173,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
                 args: ['drawerTpl', { static: true }]
             }] } });
 
+class XDrawerContainerComponent extends BasePortalOutlet {
+    constructor() {
+        super();
+        this._has = true;
+        this.animationChanged = new EventEmitter();
+    }
+    done({ toState, totalTime }) {
+        this.animationChanged.next({ action: 'done', state: toState, totalTime });
+    }
+    start({ toState, totalTime }) {
+        this.animationChanged.next({ action: 'start', state: toState, totalTime });
+    }
+    attachComponentPortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throw Error('drawer portal has attached');
+        }
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    attachTemplatePortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throw Error('drawer portal has attached');
+        }
+        return this.portalOutlet.attachTemplatePortal(portal);
+    }
+}
+/** @nocollapse */ XDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ XDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerContainerComponent, selector: "x-drawer-container", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-container": "this._has", "@x-slide-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-container{margin:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-container-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-container-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'x-drawer-container',
+                    templateUrl: './drawer-container.component.html',
+                    styleUrls: ['./drawer-container.component.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [XSlideAnimation]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-drawer-container']
+            }], placement: [{
+                type: HostBinding,
+                args: ['@x-slide-animation']
+            }], done: [{
+                type: HostListener,
+                args: ['@x-slide-animation.done', ['$event']]
+            }], start: [{
+                type: HostListener,
+                args: ['@x-slide-animation.start', ['$event']]
+            }], portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] } });
+
+// TODO: add more function
+class XDrawerRef {
+    constructor(overlayRef, containerInstance) {
+        this.overlayRef = overlayRef;
+        this.containerInstance = containerInstance;
+    }
+    close() {
+        this.containerInstance.animationChanged
+            .pipe(filter((event) => event.state === 'void' && event.action === 'done'), take(1))
+            .subscribe(() => {
+            this.overlayRef.detach();
+        });
+        this.containerInstance.placement = 'void';
+    }
+}
+
+class XDrawerCloseDirective {
+    constructor(drawerRef) {
+        this.drawerRef = drawerRef;
+    }
+    onCloseClick() {
+        this.drawerRef && this.drawerRef.close();
+    }
+}
+/** @nocollapse */ XDrawerCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerCloseDirective, deps: [{ token: XDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDrawerCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerCloseDirective, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-drawer-close]`
+                }]
+        }], ctorParameters: function () { return [{ type: XDrawerRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { onCloseClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+class XDrawerTitleDirective {
+    constructor() {
+        this._has = true;
+    }
+}
+/** @nocollapse */ XDrawerTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDrawerTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerTitleDirective, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-container-title": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-drawer-title]`
+                }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-drawer-container-title']
+            }] } });
+class XDrawerContentDirective {
+    constructor() {
+        this._has = true;
+    }
+}
+/** @nocollapse */ XDrawerContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ XDrawerContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: XDrawerContentDirective, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-container-content": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[x-drawer-content], x-drawer-content`
+                }]
+        }], propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-drawer-container-content']
+            }] } });
+
+class XDrawerService {
+    constructor(portalService, configService, overlay) {
+        this.portalService = portalService;
+        this.configService = configService;
+        this.overlay = overlay;
+        this.default = {
+            placement: 'right',
+            size: '30%',
+            hasBackdrop: true,
+            backdropClose: true
+        };
+        this.configDefault = this.configService.getConfigForComponent(X_DRAWER_CONFIG_NAME);
+        Object.assign(this.default, this.configDefault);
+    }
+    create(content, option = {}) {
+        fillDefault(option, this.default);
+        const width = ['left', 'right'].includes(option.placement) ? option.size : '100%';
+        const height = ['top', 'bottom'].includes(option.placement) ? option.size : '100%';
+        const portal = this.portalService.attach({
+            content: XDrawerContainerComponent,
+            viewContainerRef: option.viewContainerRef,
+            overlayConfig: {
+                hasBackdrop: option.hasBackdrop,
+                panelClass: option.className,
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                positionStrategy: this.portalService.setPosition(option.placement, width, height)
+            }
+        });
+        const { overlayRef, componentRef } = portal || {};
+        const { instance } = componentRef || {};
+        instance.placement = option.placement;
+        const drawerRef = new XDrawerRef(overlayRef, instance);
+        if (content instanceof TemplateRef) {
+            instance.attachTemplatePortal(new TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, drawerRef: drawerRef }));
+        }
+        else {
+            const injector = this.portalService.createInjector([
+                { provide: X_DRAWER_DATA, useValue: option.data },
+                { provide: XDrawerRef, useValue: drawerRef }
+            ]);
+            instance.attachComponentPortal(new ComponentPortal(content, option.viewContainerRef, injector));
+        }
+        if (option.hasBackdrop && option.backdropClose && overlayRef)
+            overlayRef.backdropClick().subscribe(() => {
+                drawerRef.close();
+            });
+        return drawerRef;
+    }
+}
+/** @nocollapse */ XDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerService, deps: [{ token: i2.XPortalService }, { token: i3.XConfigService }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ XDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.XPortalService }, { type: i3.XConfigService }, { type: i1.Overlay }]; } });
+
 class XDrawerModule {
 }
 /** @nocollapse */ XDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, declarations: [XDrawerComponent, XDrawerProperty], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule], exports: [XDrawerComponent] });
-/** @nocollapse */ XDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, imports: [[CommonModule, XOutletModule, XButtonModule, XPortalModule]] });
+/** @nocollapse */ XDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, declarations: [XDrawerComponent,
+        XDrawerCloseDirective,
+        XDrawerTitleDirective,
+        XDrawerContentDirective,
+        XDrawerContainerComponent,
+        XDrawerProperty], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule], exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent] });
+/** @nocollapse */ XDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, providers: [XDrawerService], imports: [[CommonModule, XOutletModule, XButtonModule, XPortalModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [XDrawerComponent, XDrawerProperty],
-                    exports: [XDrawerComponent],
-                    imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule]
+                    declarations: [
+                        XDrawerComponent,
+                        XDrawerCloseDirective,
+                        XDrawerTitleDirective,
+                        XDrawerContentDirective,
+                        XDrawerContainerComponent,
+                        XDrawerProperty
+                    ],
+                    exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent],
+                    imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule],
+                    providers: [XDrawerService]
                 }]
         }] });
 
@@ -172,5 +383,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XDrawerComponent, XDrawerModule, XDrawerPrefix, XDrawerProperty };
+export { XDrawerCloseDirective, XDrawerComponent, XDrawerContainerComponent, XDrawerContentDirective, XDrawerModule, XDrawerPrefix, XDrawerProperty, XDrawerRef, XDrawerService, XDrawerTitleDirective, X_DRAWER_CONFIG_NAME, X_DRAWER_DATA };
 //# sourceMappingURL=ng-nest-ui-drawer.js.map

package/fesm2015/ng-nest-ui-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-drawer.js","sources":["../../../../lib/ng-nest/ui/drawer/drawer.property.ts","../../../../lib/ng-nest/ui/drawer/drawer.component.ts","../../../../lib/ng-nest/ui/drawer/drawer.component.html","../../../../lib/ng-nest/ui/drawer/drawer.module.ts","../../../../lib/ng-nest/ui/drawer/ng-nest-ui-drawer.ts"],"sourcesContent":["import { XTemplate, XPosition, XProperty, XInputBoolean, XBoolean, XWithConfig } from '@ng-nest/ui/core';\r\nimport { Input, Output, EventEmitter, Component } from '@angular/core';\r\n\r\n/**\r\n * Drawer\r\n * @selector x-drawer\r\n * @decorator component\r\n */\r\nexport const XDrawerPrefix = 'x-drawer';\r\nconst X_CONFIG_NAME = 'drawer';\r\n\r\n/**\r\n * Drawer Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDrawerProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 标题\r\n   * @en_US Title\r\n   */\r\n  @Input() title?: XTemplate;\r\n  /**\r\n   * @zh_CN 显示/隐藏\r\n   * @en_US Show/hide\r\n   */\r\n  @Input() @XInputBoolean() visible?: XBoolean;\r\n  /**\r\n   * @zh_CN 展示方向\r\n   * @en_US Display direction\r\n   */\r\n  @Input() @XWithConfig<XPosition>(X_CONFIG_NAME, 'right') placement?: XPosition;\r\n  /**\r\n   * @zh_CN 尺寸，支持固定值\r\n   * @en_US Size, supports fixed value\r\n   */\r\n  @Input() @XWithConfig<string>(X_CONFIG_NAME, '30%') size?: string;\r\n  /**\r\n   * @zh_CN 关闭的事件\r\n   * @en_US Closed event\r\n   */\r\n  @Output() close = new EventEmitter();\r\n  /**\r\n   * @zh_CN 显示/隐藏的事件\r\n   * @en_US Show/hide event\r\n   */\r\n  @Output() visibleChange = new EventEmitter<boolean>();\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  ViewChild,\r\n  SimpleChanges,\r\n  OnChanges,\r\n  TemplateRef,\r\n  ViewContainerRef\r\n} from '@angular/core';\r\nimport { XDrawerPrefix, XDrawerProperty } from './drawer.property';\r\nimport { XIsChange, XIsEmpty, XSlideAnimation, XConfigService } from '@ng-nest/ui/core';\r\nimport { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';\r\nimport { Subscription } from 'rxjs';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\n\r\n@Component({\r\n  selector: `${XDrawerPrefix}`,\r\n  templateUrl: './drawer.component.html',\r\n  styleUrls: ['./drawer.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [XSlideAnimation]\r\n})\r\nexport class XDrawerComponent extends XDrawerProperty implements OnInit, OnChanges {\r\n  @ViewChild('drawerTpl', { static: true }) drawerTpl!: TemplateRef<void>;\r\n  portal!: XPortalOverlayRef<any>;\r\n  back$: Subscription | null = null;\r\n\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public overlay: Overlay,\r\n    public portalService: XPortalService,\r\n    public viewContainerRef: ViewContainerRef,\r\n    public configService: XConfigService\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(simples: SimpleChanges) {\r\n    const { visible } = simples;\r\n    XIsChange(visible) && this.setVisible();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.unsubscribe();\r\n  }\r\n\r\n  unsubscribe() {\r\n    this.back$?.unsubscribe();\r\n  }\r\n\r\n  setClassMap() {\r\n    this.classMap = {\r\n      [`${XDrawerPrefix}-${this.placement}`]: !XIsEmpty(this.placement),\r\n      [`${XDrawerPrefix}-no-title`]: XIsEmpty(this.title)\r\n    };\r\n  }\r\n\r\n  setVisible() {\r\n    if (this.visible) {\r\n      this.createPortal();\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  createPortal() {\r\n    const width = this.placement === 'left' || this.placement === 'right' ? this.size : '100%';\r\n    const height = this.placement === 'top' || this.placement === 'bottom' ? this.size : '100%';\r\n    this.portal = this.portalService.attach({\r\n      content: this.drawerTpl,\r\n      viewContainerRef: this.viewContainerRef,\r\n      overlayConfig: {\r\n        hasBackdrop: true,\r\n        scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n        positionStrategy: this.portalService.setPosition(this.placement, width, height)\r\n      }\r\n    });\r\n    if (this.portal.overlayRef) this.back$ = this.portal.overlayRef.backdropClick().subscribe(() => this.closePortal());\r\n  }\r\n\r\n  portalAttached() {\r\n    return this.portal?.overlayRef?.hasAttached();\r\n  }\r\n\r\n  closePortal() {\r\n    if (this.portalAttached()) {\r\n      this.portal?.overlayRef?.detach();\r\n      this.unsubscribe();\r\n      this.visibleChange.emit(this.visible as boolean);\r\n      this.close.emit();\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n}\r\n","<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XDrawerComponent } from './drawer.component';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XButtonModule } from '@ng-nest/ui/button';\r\nimport { XPortalModule } from '@ng-nest/ui/portal';\r\nimport { XDrawerProperty } from './drawer.property';\r\n\r\n@NgModule({\r\n  declarations: [XDrawerComponent, XDrawerProperty],\r\n  exports: [XDrawerComponent],\r\n  imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule]\r\n})\r\nexport class XDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-drawer.js","sources":["../../../../lib/ng-nest/ui/drawer/drawer.property.ts","../../../../lib/ng-nest/ui/drawer/drawer.component.ts","../../../../lib/ng-nest/ui/drawer/drawer.component.html","../../../../lib/ng-nest/ui/drawer/drawer-container.component.ts","../../../../lib/ng-nest/ui/drawer/drawer-container.component.html","../../../../lib/ng-nest/ui/drawer/drawer-ref.ts","../../../../lib/ng-nest/ui/drawer/drawer-container.directives.ts","../../../../lib/ng-nest/ui/drawer/drawer.service.ts","../../../../lib/ng-nest/ui/drawer/drawer.module.ts","../../../../lib/ng-nest/ui/drawer/ng-nest-ui-drawer.ts"],"sourcesContent":["import { XTemplate, XPosition, XProperty, XInputBoolean, XBoolean, XWithConfig } from '@ng-nest/ui/core';\r\nimport { Input, Output, EventEmitter, Component, InjectionToken, ViewContainerRef } from '@angular/core';\r\nimport { XPortalOverlayRef } from '@ng-nest/ui/portal';\r\nimport { XDrawerContainerComponent } from './drawer-container.component';\r\nimport { XDrawerRef } from './drawer-ref';\r\n\r\n/**\r\n * Drawer\r\n * @selector x-drawer\r\n * @decorator component\r\n */\r\nexport const XDrawerPrefix = 'x-drawer';\r\nexport const X_DRAWER_CONFIG_NAME = 'drawer';\r\nexport const X_DRAWER_DATA = new InjectionToken<any>('XDrawerData');\r\n\r\n/**\r\n * Drawer Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDrawerProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 标题\r\n   * @en_US Title\r\n   */\r\n  @Input() title?: XTemplate;\r\n  /**\r\n   * @zh_CN 显示/隐藏\r\n   * @en_US Show/hide\r\n   */\r\n  @Input() @XInputBoolean() visible?: XBoolean;\r\n  /**\r\n   * @zh_CN 展示方向\r\n   * @en_US Display direction\r\n   */\r\n  @Input() @XWithConfig<XPosition>(X_DRAWER_CONFIG_NAME, 'right') placement?: XPosition;\r\n  /**\r\n   * @zh_CN 尺寸，支持固定值\r\n   * @en_US Size, supports fixed value\r\n   */\r\n  @Input() @XWithConfig<string>(X_DRAWER_CONFIG_NAME, '30%') size?: string;\r\n  /**\r\n   * @zh_CN 点击遮罩关闭\r\n   * @en_US Click the mask to close\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_DRAWER_CONFIG_NAME, true) backdropClose!: XBoolean;\r\n  /**\r\n   * @zh_CN 是否显示背景遮罩\r\n   * @en_US Whether to display the background mask\r\n   */\r\n  @Input() @XWithConfig<XBoolean>(X_DRAWER_CONFIG_NAME, true) hasBackdrop!: XBoolean;\r\n  /**\r\n   * @zh_CN 自定义样式名\r\n   * @en_US Custom style name\r\n   */\r\n  @Input() @XWithConfig<string>(X_DRAWER_CONFIG_NAME, '') className!: string;\r\n  /**\r\n   * @zh_CN 关闭的事件\r\n   * @en_US Closed event\r\n   */\r\n  @Output() close = new EventEmitter();\r\n  /**\r\n   * @zh_CN 显示/隐藏的事件\r\n   * @en_US Show/hide event\r\n   */\r\n  @Output() visibleChange = new EventEmitter<boolean>();\r\n}\r\n\r\n/**\r\n * Drawer Option\r\n */\r\nexport interface XDrawerOption {\r\n  /**\r\n   * @zh_CN 展示方向\r\n   * @en_US Display direction\r\n   * @default 'right'\r\n   * @withConfig true\r\n   */\r\n  placement?: XPosition;\r\n  /**\r\n   * @zh_CN 尺寸，支持固定值\r\n   * @en_US Size, supports fixed value\r\n   * @default '30%'\r\n   * @withConfig true\r\n   */\r\n  size?: string;\r\n  /**\r\n   * @zh_CN 自定义样式名\r\n   * @en_US Custom style name\r\n   */\r\n  className?: string;\r\n  /**\r\n   * @zh_CN 点击遮罩关闭\r\n   * @en_US Click the mask to close\r\n   * @default true\r\n   * @withConfig true\r\n   */\r\n  backdropClose?: boolean;\r\n  /**\r\n   * @zh_CN 是否显示背景遮罩\r\n   * @en_US Whether to display the background mask\r\n   * @default true\r\n   * @withConfig true\r\n   */\r\n  hasBackdrop?: boolean;\r\n  /**\r\n   * @zh_CN 数据，通过 \"@Inject(X_DRAWER_DATA)\" 来接收数据\r\n   * @en_US Data. Receive data by \"@Inject(X_DRAWER_DATA)\"\r\n   */\r\n  data?: any;\r\n  /**\r\n   * @en_US 视图容器实例可以包含其他视图容器。\r\n   * @en_US A view container instance can contain other view containers.\r\n   */\r\n  viewContainerRef?: ViewContainerRef;\r\n}\r\n\r\n/**\r\n * @zh_CN 创建的抽屉对象\r\n * @en_US Drawer object created\r\n */\r\nexport interface XDrawerOverlayRef extends XPortalOverlayRef<XDrawerContainerComponent> {\r\n  drawerRef?: XDrawerRef<any>;\r\n}\r\n\r\nexport type XDrawerAnimationState = XPosition | 'void';\r\n\r\nexport interface XDrawerAnimationEvent {\r\n  state: XDrawerAnimationState;\r\n  action: 'start' | 'done';\r\n  totalTime: number;\r\n}\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  Renderer2,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  ChangeDetectionStrategy,\r\n  ViewChild,\r\n  SimpleChanges,\r\n  OnChanges,\r\n  TemplateRef,\r\n  ViewContainerRef\r\n} from '@angular/core';\r\nimport { XDrawerPrefix, XDrawerProperty } from './drawer.property';\r\nimport { XIsChange, XIsEmpty, XSlideAnimation, XConfigService } from '@ng-nest/ui/core';\r\nimport { XPortalService, XPortalOverlayRef } from '@ng-nest/ui/portal';\r\nimport { Subscription } from 'rxjs';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\n\r\n@Component({\r\n  selector: `${XDrawerPrefix}`,\r\n  templateUrl: './drawer.component.html',\r\n  styleUrls: ['./drawer.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [XSlideAnimation]\r\n})\r\nexport class XDrawerComponent extends XDrawerProperty implements OnInit, OnChanges {\r\n  @ViewChild('drawerTpl', { static: true }) drawerTpl!: TemplateRef<void>;\r\n  portal!: XPortalOverlayRef<any>;\r\n  back$: Subscription | null = null;\r\n\r\n  constructor(\r\n    public renderer: Renderer2,\r\n    public elementRef: ElementRef,\r\n    public cdr: ChangeDetectorRef,\r\n    public overlay: Overlay,\r\n    public portalService: XPortalService,\r\n    public viewContainerRef: ViewContainerRef,\r\n    public configService: XConfigService\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(simples: SimpleChanges) {\r\n    const { visible } = simples;\r\n    XIsChange(visible) && this.setVisible();\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.unsubscribe();\r\n  }\r\n\r\n  unsubscribe() {\r\n    this.back$?.unsubscribe();\r\n  }\r\n\r\n  setClassMap() {\r\n    this.classMap = {\r\n      [`${XDrawerPrefix}-${this.placement}`]: !XIsEmpty(this.placement),\r\n      [`${XDrawerPrefix}-no-title`]: XIsEmpty(this.title)\r\n    };\r\n  }\r\n\r\n  setVisible() {\r\n    if (this.visible) {\r\n      this.createPortal();\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  createPortal() {\r\n    const width = this.placement === 'left' || this.placement === 'right' ? this.size : '100%';\r\n    const height = this.placement === 'top' || this.placement === 'bottom' ? this.size : '100%';\r\n    this.portal = this.portalService.attach({\r\n      content: this.drawerTpl,\r\n      viewContainerRef: this.viewContainerRef,\r\n      overlayConfig: {\r\n        hasBackdrop: true,\r\n        scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n        positionStrategy: this.portalService.setPosition(this.placement, width, height)\r\n      }\r\n    });\r\n    if (this.portal.overlayRef) this.back$ = this.portal.overlayRef.backdropClick().subscribe(() => this.closePortal());\r\n  }\r\n\r\n  portalAttached() {\r\n    return this.portal?.overlayRef?.hasAttached();\r\n  }\r\n\r\n  closePortal() {\r\n    if (this.portalAttached()) {\r\n      this.portal?.overlayRef?.detach();\r\n      this.unsubscribe();\r\n      this.visibleChange.emit(this.visible as boolean);\r\n      this.close.emit();\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n}\r\n","<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n","import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ComponentRef,\r\n  EmbeddedViewRef,\r\n  EventEmitter,\r\n  HostBinding,\r\n  HostListener,\r\n  ViewChild,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\nimport { XSlideAnimation } from '@ng-nest/ui/core';\r\nimport { XDrawerAnimationEvent, XDrawerAnimationState } from './drawer.property';\r\nimport { AnimationEvent } from '@angular/animations';\r\n\r\n@Component({\r\n  selector: 'x-drawer-container',\r\n  templateUrl: './drawer-container.component.html',\r\n  styleUrls: ['./drawer-container.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [XSlideAnimation]\r\n})\r\nexport class XDrawerContainerComponent extends BasePortalOutlet {\r\n  @HostBinding('class.x-drawer-container') _has = true;\r\n  @HostBinding('@x-slide-animation') public placement?: XDrawerAnimationState;\r\n  @HostListener('@x-slide-animation.done', ['$event']) done({ toState, totalTime }: AnimationEvent) {\r\n    this.animationChanged.next({ action: 'done', state: toState as XDrawerAnimationState, totalTime });\r\n  }\r\n  @HostListener('@x-slide-animation.start', ['$event']) start({ toState, totalTime }: AnimationEvent) {\r\n    this.animationChanged.next({ action: 'start', state: toState as XDrawerAnimationState, totalTime });\r\n  }\r\n  @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet!: CdkPortalOutlet;\r\n\r\n  animationChanged = new EventEmitter<XDrawerAnimationEvent>();\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {\r\n    if (this.portalOutlet.hasAttached()) {\r\n      throw Error('drawer portal has attached');\r\n    }\r\n    return this.portalOutlet.attachComponentPortal(portal);\r\n  }\r\n  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {\r\n    if (this.portalOutlet.hasAttached()) {\r\n      throw Error('drawer portal has attached');\r\n    }\r\n    return this.portalOutlet.attachTemplatePortal(portal);\r\n  }\r\n}\r\n","<ng-template cdkPortalOutlet></ng-template>\r\n","import { OverlayRef } from '@angular/cdk/overlay';\r\nimport { filter, take } from 'rxjs/operators';\r\nimport { XDrawerContainerComponent } from './drawer-container.component';\r\n\r\n// TODO: add more function\r\nexport class XDrawerRef<C> {\r\n  componentInstance!: C;\r\n  constructor(public overlayRef: OverlayRef, public containerInstance: XDrawerContainerComponent) {}\r\n  close() {\r\n    this.containerInstance.animationChanged\r\n      .pipe(\r\n        filter((event) => event.state === 'void' && event.action === 'done'),\r\n        take(1)\r\n      )\r\n      .subscribe(() => {\r\n        this.overlayRef.detach();\r\n      });\r\n    this.containerInstance.placement = 'void';\r\n  }\r\n}\r\n","import { Directive, HostBinding, HostListener, Optional } from '@angular/core';\r\nimport { XDrawerRef } from './drawer-ref';\r\n\r\n@Directive({\r\n  selector: `[x-drawer-close]`\r\n})\r\nexport class XDrawerCloseDirective {\r\n  @HostListener('click', ['$event']) onCloseClick() {\r\n    this.drawerRef && this.drawerRef.close();\r\n  }\r\n  constructor(@Optional() public drawerRef: XDrawerRef<any>) {}\r\n}\r\n\r\n@Directive({\r\n  selector: `[x-drawer-title]`\r\n})\r\nexport class XDrawerTitleDirective {\r\n  @HostBinding('class.x-drawer-container-title') _has = true;\r\n}\r\n\r\n@Directive({\r\n  selector: `[x-drawer-content], x-drawer-content`\r\n})\r\nexport class XDrawerContentDirective {\r\n  @HostBinding('class.x-drawer-container-content') _has = true;\r\n}\r\n","import { Overlay } from '@angular/cdk/overlay';\r\nimport { ComponentPortal, ComponentType, TemplatePortal } from '@angular/cdk/portal';\r\nimport { Injectable, TemplateRef } from '@angular/core';\r\nimport { fillDefault, XConfigService, XDrawerConfig } from '@ng-nest/ui/core';\r\nimport { XPortalService } from '@ng-nest/ui/portal';\r\nimport { XDrawerContainerComponent } from './drawer-container.component';\r\nimport { XDrawerRef } from './drawer-ref';\r\nimport { XDrawerOption, X_DRAWER_CONFIG_NAME, X_DRAWER_DATA } from './drawer.property';\r\n\r\n@Injectable()\r\nexport class XDrawerService {\r\n  default: XDrawerOption = {\r\n    placement: 'right',\r\n    size: '30%',\r\n    hasBackdrop: true,\r\n    backdropClose: true\r\n  };\r\n  configDefault?: XDrawerConfig;\r\n\r\n  constructor(public portalService: XPortalService, public configService: XConfigService, public overlay: Overlay) {\r\n    this.configDefault = this.configService.getConfigForComponent(X_DRAWER_CONFIG_NAME);\r\n    Object.assign(this.default, this.configDefault);\r\n  }\r\n\r\n  create<T>(content: TemplateRef<any> | ComponentType<T>, option: XDrawerOption = {}): XDrawerRef<T> {\r\n    fillDefault(option, this.default);\r\n    const width = ['left', 'right'].includes(option.placement as string) ? option.size : '100%';\r\n    const height = ['top', 'bottom'].includes(option.placement as string) ? option.size : '100%';\r\n    const portal = this.portalService.attach<XDrawerContainerComponent>({\r\n      content: XDrawerContainerComponent,\r\n      viewContainerRef: option.viewContainerRef,\r\n      overlayConfig: {\r\n        hasBackdrop: option.hasBackdrop,\r\n        panelClass: option.className,\r\n        scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n        positionStrategy: this.portalService.setPosition(option.placement, width, height)\r\n      }\r\n    });\r\n    const { overlayRef, componentRef } = portal || {};\r\n    const { instance } = componentRef! || {};\r\n    instance.placement = option.placement;\r\n    const drawerRef = new XDrawerRef<T>(overlayRef!, instance);\r\n    if (content instanceof TemplateRef) {\r\n      instance.attachTemplatePortal(\r\n        new TemplatePortal(content, option.viewContainerRef!, { $implicit: option.data, drawerRef: drawerRef })\r\n      );\r\n    } else {\r\n      const injector = this.portalService.createInjector([\r\n        { provide: X_DRAWER_DATA, useValue: option.data },\r\n        { provide: XDrawerRef, useValue: drawerRef }\r\n      ]);\r\n\r\n      instance.attachComponentPortal(new ComponentPortal(content, option.viewContainerRef, injector));\r\n    }\r\n    if (option.hasBackdrop && option.backdropClose && overlayRef)\r\n      overlayRef.backdropClick().subscribe(() => {\r\n        drawerRef.close();\r\n      });\r\n\r\n    return drawerRef;\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { XDrawerComponent } from './drawer.component';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XButtonModule } from '@ng-nest/ui/button';\r\nimport { XPortalModule } from '@ng-nest/ui/portal';\r\nimport { XDrawerProperty } from './drawer.property';\r\nimport { XDrawerService } from './drawer.service';\r\nimport { XDrawerContainerComponent } from './drawer-container.component';\r\nimport { XDrawerCloseDirective, XDrawerContentDirective, XDrawerTitleDirective } from './drawer-container.directives';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    XDrawerComponent,\r\n    XDrawerCloseDirective,\r\n    XDrawerTitleDirective,\r\n    XDrawerContentDirective,\r\n    XDrawerContainerComponent,\r\n    XDrawerProperty\r\n  ],\r\n  exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent],\r\n  imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule],\r\n  providers: [XDrawerService]\r\n})\r\nexport class XDrawerModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -296,6 +296,7 @@ class XInputComponent extends XInputProperty {
         else {
             this.clearShow = false;
         }
+        this.setPadding();
     }
     setInheritedValue() {
         if (!this.inputGroup)
@@ -349,7 +350,7 @@ class XInputComponent extends XInputProperty {
     }
 }
 /** @nocollapse */ XInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", 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: "12.0.0", version: "12.0.5", type: XInputComponent, selector: "x-input", providers: [XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #inputElement\r\n  class=\"x-input\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-clearable]=\"clearable\"\r\n  [class.x-clear-show]=\"clearShow\"\r\n  [class.x-input-icon]=\"getIcon\"\r\n  [class.x-input-active]=\"active\"\r\n  [class.x-input-pointer]=\"pointer\"\r\n  [class.x-input-bordered]=\"bordered\"\r\n  [class.x-input-icon-left]=\"getIconLayoutLeft\"\r\n  [class.x-input-icon-right]=\"getIconLayoutRight\"\r\n  [class.x-input-after]=\"after\"\r\n  [class.x-input-before]=\"before\"\r\n  [class.x-input-after-template]=\"afterIsTemplate\"\r\n  [class.x-input-before-template]=\"beforeIsTemplate\"\r\n  [class.x-input-value-template]=\"valueTpl\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  <label *ngIf=\"label\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-input-row\">\r\n    <div class=\"x-input-row-before\" *ngIf=\"before\" [class.x-input-row-before-template]=\"beforeIsTemplate\">\r\n      <ng-container *xOutlet=\"before\">{{ before }}</ng-container>\r\n    </div>\r\n    <div class=\"x-input-input\" (mouseenter)=\"xMouseenter.emit($event)\" (mouseleave)=\"xMouseleave.emit($event)\">\r\n      <div\r\n        class=\"x-input-value-template-value\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (click)=\"xClick.emit($event)\"\r\n        *ngIf=\"valueTpl\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"valueTpl; context: valueTplContext ? valueTplContext : { $value: value }\"></ng-container>\r\n      </div>\r\n      <input\r\n        #inputRef\r\n        [ngStyle]=\"inputStyle\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [maxlength]=\"maxlength\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"change($event)\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (focus)=\"xFocus.emit($event)\"\r\n        (blur)=\"xBlur.emit($event)\"\r\n        (input)=\"xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft)\" [type]=\"icon\" [spin]=\"iconSpin\"></x-icon>\r\n      <span class=\"x-input-max-length\" *ngIf=\"maxlength\">{{ lengthTotal }}</span>\r\n      <span class=\"x-input-error-message\" *ngIf=\"invalid\">{{ invalidMessage }}</span>\r\n      <ng-container *ngIf=\"requiredIsEmpty || invalid\">\r\n        <div class=\"x-border-error x-top-left\"></div>\r\n        <div class=\"x-border-error x-top-right\"></div>\r\n        <div class=\"x-border-error x-bottom-left\"></div>\r\n        <div class=\"x-border-error x-bottom-right\"></div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"x-input-row-after\" *ngIf=\"after\" [class.x-input-row-after-template]=\"afterIsTemplate\">\r\n      <ng-container *xOutlet=\"after\">{{ after }}</ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-input{display:inline-block}.x-input{width:100%;margin:0;padding:0}.x-input.x-flex{display:flex}.x-input.x-justify-start{justify-content:flex-start}.x-input.x-justify-center{justify-content:center}.x-input.x-justify-end{justify-content:flex-end}.x-input.x-justify-space-between{justify-content:space-between}.x-input.x-justify-space-around{justify-content:space-around}.x-input.x-align-start{align-items:flex-start}.x-input.x-align-center{align-items:center}.x-input.x-align-end{align-items:flex-end}.x-input.x-direction-column{flex-direction:column}.x-input.x-direction-column-reverse{flex-direction:column-reverse}.x-input.x-direction-row{flex-direction:row}.x-input.x-direction-row-reverse{flex-direction:row-reverse}.x-input>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-input>label.x-text-align-start{text-align:start}.x-input>label.x-text-align-center{text-align:center}.x-input>label.x-text-align-end{text-align:end}.x-input-row{flex:1;display:flex;align-items:center}.x-input-row .x-input-row-before:not(.x-input-row-before-template),.x-input-row .x-input-row-after:not(.x-input-row-after-template){border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);border-width:0}.x-input-row .x-input-row-before-template{display:contents}.x-input-row .x-input-row-before-template input,.x-input-row .x-input-row-before-template .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-row .x-input-row-after-template{display:contents}.x-input-row .x-input-row-after-template input,.x-input-row .x-input-row-after-template .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-row .x-input-row-before-template:hover,.x-input-row .x-input-row-before-template:focus{z-index:1}.x-input-row .x-input-row-before-template input:hover,.x-input-row .x-input-row-before-template input:focus,.x-input-row .x-input-row-before-template .x-button:hover,.x-input-row .x-input-row-before-template .x-button:focus,.x-input-row .x-input-row-after-template input:hover,.x-input-row .x-input-row-after-template input:focus,.x-input-row .x-input-row-after-template .x-button:hover,.x-input-row .x-input-row-after-template .x-button:focus{z-index:1}.x-input-row>.x-input-input{position:relative;width:100%;display:inline-flex;align-items:center}.x-input-row>.x-input-input>input{flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);border-width:0;box-shadow:var(--x-box-shadow) transparent;transition:all var(--x-animation-duration-slow)}.x-input-row>.x-input-input>input::-moz-placeholder{color:var(--x-text-700);opacity:1}.x-input-row>.x-input-input>input:-ms-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input::-webkit-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input[disabled]{color:var(--x-text-500)}.x-input-row>.x-input-input>input:focus{border-color:var(--x-primary);outline:0}.x-input-row>.x-input-input>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base);z-index:2}.x-input-row>.x-input-input:hover>input{border-color:var(--x-primary-300)}.x-input-row>.x-input-input:focus>input{border-color:var(--x-primary);outline:0}.x-input-value-template .x-input-input>input{color:transparent}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;left:0}.x-input-value-template-value:hover+input{border-color:var(--x-primary-300)}.x-input-error-message{position:absolute;bottom:0;left:0;font-size:var(--x-font-size)-.125rem;color:var(--x-danger);margin-bottom:calc(calc(var(--x-font-size) + .45rem) * -1);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-input.x-invalid>label,.x-input.x-required>label{color:var(--x-danger)}.x-input.x-invalid .x-input-input>x-icon,.x-input.x-required .x-input-input>x-icon{color:var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error,.x-input.x-required .x-input-input .x-border-error{position:absolute;height:.5rem;width:.5rem;z-index:10}.x-input.x-invalid .x-input-input .x-border-error.x-top-left,.x-input.x-required .x-input-input .x-border-error.x-top-left{border-top-left-radius:var(--x-border-radius);top:0;left:0;border-top:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-top-right,.x-input.x-required .x-input-input .x-border-error.x-top-right{border-top-right-radius:var(--x-border-radius);top:0;right:0;border-top:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-left,.x-input.x-required .x-input-input .x-border-error.x-bottom-left{border-bottom-left-radius:var(--x-border-radius);bottom:0;left:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-right,.x-input.x-required .x-input-input .x-border-error.x-bottom-right{border-bottom-right-radius:var(--x-border-radius);bottom:0;right:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-disabled>.x-input-row>.x-input-input>x-icon{color:var(--x-text-400)}.x-input.x-disabled>.x-input-row>.x-input-input>input,.x-input.x-disabled>.x-input-row>.x-input-input>.x-input-value-template-value{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear{position:absolute;color:var(--x-text-400);font-size:var(--x-font-size-medium);padding:.4rem;right:0;left:inherit;opacity:0;cursor:pointer;z-index:2}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear:hover{color:var(--x-text-300)}.x-input.x-clearable>.x-input-row>.x-input-input:hover>input .x-input-clear,.x-input.x-clearable>.x-input-row>.x-input-input:hover>.x-input-value-template-value .x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>.x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>input{padding-right:calc(var(--x-font-size-medium) + .4rem * 2)!important}.x-input-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-400);padding:0 .4rem;right:0}.x-input.x-direction-row>label{padding:0 .5rem 0 0}.x-input.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-input.x-direction-column{align-items:inherit}.x-input.x-direction-column-reverse{align-items:inherit}.x-input-icon>.x-input-row>.x-input-input>x-icon{position:absolute;font-size:var(--x-font-size-medium);padding:.4rem}.x-input-icon>.x-input-row>.x-input-input>x-icon.x-icon-spin{padding:0;margin:.4rem}.x-input-icon-left>.x-input-row>.x-input-input>input,.x-input-icon-left>.x-input-row>.x-input-input>.x-input-value-template-value{padding-left:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-left>.x-input-row>.x-input-input>x-icon{left:0}.x-input-icon-right>.x-input-row>.x-input-input>input,.x-input-icon-right>.x-input-row>.x-input-input>.x-input-value-template-value{padding-right:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-right>.x-input-row>.x-input-input>x-icon{right:0}.x-input-icon-right>.x-input-row>.x-input-input>.x-input-max-length{right:inherit;left:0}.x-input-bordered>.x-input-row>.x-input-input>input{border-width:var(--x-border-width)}.x-input-bordered .x-input-row .x-input-row-before:not(.x-input-row-before-template){border-width:var(--x-border-width);border-right-width:0}.x-input-bordered .x-input-row .x-input-row-after:not(.x-input-row-after-template){border-width:var(--x-border-width);border-left-width:0}.x-input-before>.x-input-row>.x-input-input>input{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-before-template .x-input-input>input{margin-left:calc(var(--x-border-width) * -1)}.x-input-before-template .x-input-input>input:hover,.x-input-before-template .x-input-input>input:focus{z-index:1}.x-input-after>.x-input-row>.x-input-input>input{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-after-template>.x-input-row>.x-input-input>input{margin-right:calc(var(--x-border-width) * -1)}.x-input-after-template>.x-input-row>.x-input-input>input:hover,.x-input-after-template>.x-input-row>.x-input-input>input:focus{z-index:1}.x-input-active .x-input-row>.x-input-input>input{border-color:var(--x-primary)}.x-input-pointer .x-input-row>.x-input-input>input,.x-input-pointer .x-input-row>.x-input-input>.x-input-value-template-value{cursor:pointer}.x-input-big>.x-input-row>.x-input-input>input,.x-input-big>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-big>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-large>.x-input-row>.x-input-input>input,.x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-medium>.x-input-row>.x-input-input>input,.x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-small>.x-input-row>.x-input-input>input,.x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-mini>.x-input-row>.x-input-input>input,.x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], components: [{ type: i3.XIconComponent, selector: "x-icon" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XInputComponent, selector: "x-input", providers: [XValueAccessor(XInputComponent)], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  #inputElement\r\n  class=\"x-input\"\r\n  [class.x-flex]=\"justify || align || direction\"\r\n  [class.x-disabled]=\"disabled\"\r\n  [class.x-required]=\"requiredIsEmpty\"\r\n  [class.x-invalid]=\"invalid\"\r\n  [class.x-clearable]=\"clearable\"\r\n  [class.x-clear-show]=\"clearShow\"\r\n  [class.x-input-icon]=\"getIcon\"\r\n  [class.x-input-active]=\"active\"\r\n  [class.x-input-pointer]=\"pointer\"\r\n  [class.x-input-bordered]=\"bordered\"\r\n  [class.x-input-icon-left]=\"getIconLayoutLeft\"\r\n  [class.x-input-icon-right]=\"getIconLayoutRight\"\r\n  [class.x-input-after]=\"after\"\r\n  [class.x-input-before]=\"before\"\r\n  [class.x-input-after-template]=\"afterIsTemplate\"\r\n  [class.x-input-before-template]=\"beforeIsTemplate\"\r\n  [class.x-input-value-template]=\"valueTpl\"\r\n  [ngClass]=\"classMap\"\r\n>\r\n  <label *ngIf=\"label\" [style.width]=\"labelWidth\" [ngClass]=\"labelMap\">{{ label }}</label>\r\n  <div class=\"x-input-row\">\r\n    <div class=\"x-input-row-before\" *ngIf=\"before\" [class.x-input-row-before-template]=\"beforeIsTemplate\">\r\n      <ng-container *xOutlet=\"before\">{{ before }}</ng-container>\r\n    </div>\r\n    <div class=\"x-input-input\" (mouseenter)=\"xMouseenter.emit($event)\" (mouseleave)=\"xMouseleave.emit($event)\">\r\n      <div\r\n        class=\"x-input-value-template-value\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (click)=\"xClick.emit($event)\"\r\n        *ngIf=\"valueTpl\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"valueTpl; context: valueTplContext ? valueTplContext : { $value: value }\"></ng-container>\r\n      </div>\r\n      <input\r\n        #inputRef\r\n        [ngStyle]=\"inputStyle\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        [required]=\"required\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [maxlength]=\"maxlength\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"change($event)\"\r\n        [style.padding-left.rem]=\"paddingLeft\"\r\n        [style.padding-right.rem]=\"paddingRight\"\r\n        (focus)=\"xFocus.emit($event)\"\r\n        (blur)=\"xBlur.emit($event)\"\r\n        (input)=\"xInput.emit($event)\"\r\n        (keydown)=\"xKeydown.emit($event)\"\r\n        (click)=\"xClick.emit($event)\"\r\n      />\r\n      <x-icon *ngIf=\"clearShow\" class=\"x-input-clear\" type=\"fto-x\" (click)=\"onClear()\"></x-icon>\r\n      <x-icon\r\n        *ngIf=\"icon && ((!clearShow && getIconLayoutRight) || getIconLayoutLeft)\"\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}.x-input{width:100%;margin:0;padding:0}.x-input.x-flex{display:flex}.x-input.x-justify-start{justify-content:flex-start}.x-input.x-justify-center{justify-content:center}.x-input.x-justify-end{justify-content:flex-end}.x-input.x-justify-space-between{justify-content:space-between}.x-input.x-justify-space-around{justify-content:space-around}.x-input.x-align-start{align-items:flex-start}.x-input.x-align-center{align-items:center}.x-input.x-align-end{align-items:flex-end}.x-input.x-direction-column{flex-direction:column}.x-input.x-direction-column-reverse{flex-direction:column-reverse}.x-input.x-direction-row{flex-direction:row}.x-input.x-direction-row-reverse{flex-direction:row-reverse}.x-input>label{display:inline-block;white-space:nowrap;position:relative;color:var(--x-text-300);font-weight:600}.x-input>label.x-text-align-start{text-align:start}.x-input>label.x-text-align-center{text-align:center}.x-input>label.x-text-align-end{text-align:end}.x-input-row{flex:1;display:flex;align-items:center}.x-input-row .x-input-row-before:not(.x-input-row-before-template),.x-input-row .x-input-row-after:not(.x-input-row-after-template){border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);background-color:var(--x-background-a100);border-width:0}.x-input-row .x-input-row-before-template{display:contents}.x-input-row .x-input-row-before-template input,.x-input-row .x-input-row-before-template .x-button{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-row .x-input-row-after-template{display:contents}.x-input-row .x-input-row-after-template input,.x-input-row .x-input-row-after-template .x-button{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-row .x-input-row-before-template:hover,.x-input-row .x-input-row-before-template:focus{z-index:1}.x-input-row .x-input-row-before-template input:hover,.x-input-row .x-input-row-before-template input:focus,.x-input-row .x-input-row-before-template .x-button:hover,.x-input-row .x-input-row-before-template .x-button:focus,.x-input-row .x-input-row-after-template input:hover,.x-input-row .x-input-row-after-template input:focus,.x-input-row .x-input-row-after-template .x-button:hover,.x-input-row .x-input-row-after-template .x-button:focus{z-index:1}.x-input-row>.x-input-input{position:relative;width:100%;display:inline-flex;align-items:center}.x-input-row>.x-input-input>input{flex:1;width:100%;font-size:var(--x-font-size);background-color:var(--x-background);background-image:none;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);border-width:0;box-shadow:var(--x-box-shadow) transparent;transition:all var(--x-animation-duration-slow)}.x-input-row>.x-input-input>input::-moz-placeholder{color:var(--x-text-700);opacity:1}.x-input-row>.x-input-input>input:-ms-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input::-webkit-input-placeholder{color:var(--x-text-700)}.x-input-row>.x-input-input>input[disabled]{color:var(--x-text-500)}.x-input-row>.x-input-input>input:focus{border-color:var(--x-primary);outline:0}.x-input-row>.x-input-input>x-icon{color:var(--x-text-400);transition:all var(--x-animation-duration-base);z-index:2}.x-input-row>.x-input-input:hover>input{border-color:var(--x-primary-300)}.x-input-row>.x-input-input:focus>input{border-color:var(--x-primary);outline:0}.x-input-value-template .x-input-input>input{color:transparent}.x-input-value-template-value{position:absolute;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;left:0}.x-input-value-template-value:hover+input{border-color:var(--x-primary-300)}.x-input-error-message{position:absolute;bottom:0;left:0;font-size:var(--x-font-size)-.125rem;color:var(--x-danger);margin-bottom:calc(calc(var(--x-font-size) + .45rem) * -1);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-input.x-invalid>label,.x-input.x-required>label{color:var(--x-danger)}.x-input.x-invalid .x-input-input>x-icon,.x-input.x-required .x-input-input>x-icon{color:var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error,.x-input.x-required .x-input-input .x-border-error{position:absolute;height:.5rem;width:.5rem;z-index:10}.x-input.x-invalid .x-input-input .x-border-error.x-top-left,.x-input.x-required .x-input-input .x-border-error.x-top-left{border-top-left-radius:var(--x-border-radius);top:0;left:0;border-top:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-top-right,.x-input.x-required .x-input-input .x-border-error.x-top-right{border-top-right-radius:var(--x-border-radius);top:0;right:0;border-top:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-left,.x-input.x-required .x-input-input .x-border-error.x-bottom-left{border-bottom-left-radius:var(--x-border-radius);bottom:0;left:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-left:var(--x-border-width) solid var(--x-danger)}.x-input.x-invalid .x-input-input .x-border-error.x-bottom-right,.x-input.x-required .x-input-input .x-border-error.x-bottom-right{border-bottom-right-radius:var(--x-border-radius);bottom:0;right:0;border-bottom:var(--x-border-width) solid var(--x-danger);border-right:var(--x-border-width) solid var(--x-danger)}.x-input.x-disabled>.x-input-row>.x-input-input>x-icon{color:var(--x-text-400)}.x-input.x-disabled>.x-input-row>.x-input-input>input,.x-input.x-disabled>.x-input-row>.x-input-input>.x-input-value-template-value{color:var(--x-text-400);cursor:not-allowed;border-color:var(--x-border-100);background-color:var(--x-background-a100)}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear{position:absolute;color:var(--x-text-400);font-size:var(--x-font-size-medium);padding:.4rem;right:0;left:inherit;opacity:0;cursor:pointer;z-index:2}.x-input.x-clearable>.x-input-row>.x-input-input>.x-input-clear:hover{color:var(--x-text-300)}.x-input.x-clearable>.x-input-row>.x-input-input:hover>input .x-input-clear,.x-input.x-clearable>.x-input-row>.x-input-input:hover>.x-input-value-template-value .x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>.x-input-clear{opacity:1}.x-input.x-clearable.x-clear-show>.x-input-row>.x-input-input>input{padding-right:calc(var(--x-font-size-medium) + .4rem * 2)!important}.x-input-max-length{position:absolute;font-size:var(--x-font-size-small);color:var(--x-text-400);padding:0 .4rem;right:0}.x-input.x-direction-row>label{padding:0 .5rem 0 0}.x-input.x-direction-row-reverse>label{padding:0 0 0 .5rem}.x-input.x-direction-column{align-items:inherit}.x-input.x-direction-column-reverse{align-items:inherit}.x-input-icon>.x-input-row>.x-input-input>x-icon{position:absolute;font-size:var(--x-font-size-medium);padding:.4rem}.x-input-icon>.x-input-row>.x-input-input>x-icon.x-icon-spin{padding:0;margin:.4rem}.x-input-icon-left>.x-input-row>.x-input-input>input,.x-input-icon-left>.x-input-row>.x-input-input>.x-input-value-template-value{padding-left:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-left>.x-input-row>.x-input-input>x-icon{left:0}.x-input-icon-right>.x-input-row>.x-input-input>input,.x-input-icon-right>.x-input-row>.x-input-input>.x-input-value-template-value{padding-right:calc($--x-input-icon-font-size + $--x-input-icon-padding * 2)}.x-input-icon-right>.x-input-row>.x-input-input>x-icon{right:0}.x-input-icon-right>.x-input-row>.x-input-input>.x-input-max-length{right:inherit;left:0}.x-input-bordered>.x-input-row>.x-input-input>input{border-width:var(--x-border-width)}.x-input-bordered .x-input-row .x-input-row-before:not(.x-input-row-before-template){border-width:var(--x-border-width);border-right-width:0}.x-input-bordered .x-input-row .x-input-row-after:not(.x-input-row-after-template){border-width:var(--x-border-width);border-left-width:0}.x-input-before>.x-input-row>.x-input-input>input{border-top-left-radius:0;border-bottom-left-radius:0}.x-input-before-template .x-input-input>input{margin-left:calc(var(--x-border-width) * -1)}.x-input-before-template .x-input-input>input:hover,.x-input-before-template .x-input-input>input:focus{z-index:1}.x-input-after>.x-input-row>.x-input-input>input{border-top-right-radius:0;border-bottom-right-radius:0}.x-input-after-template>.x-input-row>.x-input-input>input{margin-right:calc(var(--x-border-width) * -1)}.x-input-after-template>.x-input-row>.x-input-input>input:hover,.x-input-after-template>.x-input-row>.x-input-input>input:focus{z-index:1}.x-input-active .x-input-row>.x-input-input>input{border-color:var(--x-primary)}.x-input-pointer .x-input-row>.x-input-input>input,.x-input-pointer .x-input-row>.x-input-input>x-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),.x-input-big>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-big>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-big>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-input-big>label{height:var(--x-height-big);line-height:var(--x-height-big)}.x-input-large>.x-input-row>.x-input-input>input,.x-input-large>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-large>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-large>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-large>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-input-large>label{height:var(--x-height-large);line-height:var(--x-height-large)}.x-input-medium>.x-input-row>.x-input-input>input,.x-input-medium>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-medium>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-medium>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-medium>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-input-medium>label{height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-input-small>.x-input-row>.x-input-input>input,.x-input-small>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-small>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-small>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-small>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-input-small>label{height:var(--x-height-small);line-height:var(--x-height-small)}.x-input-mini>.x-input-row>.x-input-input>input,.x-input-mini>.x-input-row>.x-input-input>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-row-after:not(.x-input-row-after-template),.x-input-mini>.x-input-row>.x-input-input>.x-input-value-template-value{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>.x-input-row>.x-input-input>.x-input-max-length{height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-input-mini>.x-input-row>.x-input-row-before:not(.x-input-row-before-template),.x-input-mini>.x-input-row>.x-input-row-after:not(.x-input-row-after-template){height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-input-mini>label{height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], components: [{ type: i3.XIconComponent, selector: "x-icon" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: XInputComponent, decorators: [{
             type: Component,
             args: [{