@ng-nest/ui 16.0.2 → 16.0.4

package/fesm2022/ng-nest-ui-date-picker.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Pipe, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Pipe, HostBinding, HostListener, ViewChild, inject, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i2 from '@ng-nest/ui/core';
-import { XWithConfig, XInputBoolean, XDataConvert, XProperty, XIsFunction, XIsChange, XDateYearWeek, XIsNull, XChunk, XDateWeek, XDateQuarter, XDateYearQuarter, XIsUndefined, XIsEmpty, XAddDays, XConnectBaseAnimation, XIsDate, XIsNumber, XIsString, XClearClass, XAddMonths, XAddYears, XIsArray } from '@ng-nest/ui/core';
+import { XWithConfig, XInputBoolean, XDataConvert, XProperty, XIsFunction, XIsChange, XDateYearWeek, XIsNull, XChunk, XDateWeek, XDateQuarter, XDateYearQuarter, XIsUndefined, XIsEmpty, XAddDays, XConnectBaseAnimation, XIsDate, XIsNumber, XIsString, XParents, XClearClass, XAddMonths, XAddYears, XIsArray } from '@ng-nest/ui/core';
 import { XControlValueAccessor, XValueAccessor, XBaseFormModule } from '@ng-nest/ui/base-form';
-import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { Subject, fromEvent } from 'rxjs';
+import { map, takeUntil, filter } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { DatePipe, LowerCasePipe, CommonModule } from '@angular/common';
+import { DatePipe, LowerCasePipe, DOCUMENT, CommonModule } from '@angular/common';
 import * as i3 from '@ng-nest/ui/i18n';
 import { XI18nModule } from '@ng-nest/ui/i18n';
 import * as i3$1 from '@ng-nest/ui/time-picker';
@@ -2040,7 +2040,7 @@ class XDatePickerComponent extends XDatePickerProperty {
             return this.locale.selectDate;
         }
     }
-    constructor(renderer, configService, cdr, portalService, viewContainerRef, datePipe, i18n, overlay) {
+    constructor(renderer, configService, cdr, portalService, viewContainerRef, datePipe, i18n, elementRef, overlay) {
         super();
         this.renderer = renderer;
         this.configService = configService;
@@ -2049,6 +2049,7 @@ class XDatePickerComponent extends XDatePickerProperty {
         this.viewContainerRef = viewContainerRef;
         this.datePipe = datePipe;
         this.i18n = i18n;
+        this.elementRef = elementRef;
         this.overlay = overlay;
         this.modelType = 'date';
         this.isInput = false;
@@ -2065,12 +2066,14 @@ class XDatePickerComponent extends XDatePickerProperty {
         this.closeSubject = new Subject();
         this.locale = {};
         this._unSubject = new Subject();
+        this.document = inject(DOCUMENT);
     }
     ngOnInit() {
         this.setFlex(this.datePicker.nativeElement, this.renderer, this.justify, this.align, this.direction);
         this.setFormat();
         this.setClassMap();
         this.setSubject();
+        this.setParantScroll();
     }
     ngAfterViewInit() {
         this.setPortal();
@@ -2146,6 +2149,30 @@ class XDatePickerComponent extends XDatePickerProperty {
             this.cdr.detectChanges();
         }
     }
+    setParantScroll() {
+        if (!this.document)
+            return;
+        const parents = XParents(this.elementRef.nativeElement);
+        let firstScroll = null;
+        for (let item of parents) {
+            if (item.clientHeight < item.scrollHeight) {
+                firstScroll = item;
+                break;
+            }
+        }
+        if (firstScroll && firstScroll.tagName !== 'BODY') {
+            fromEvent(firstScroll, 'scroll')
+                .pipe(filter(() => this.portalAttached()), takeUntil(this._unSubject))
+                .subscribe(() => {
+                this.portal?.overlayRef?.updatePosition();
+                const eract = this.elementRef.nativeElement.getBoundingClientRect();
+                const frect = firstScroll.getBoundingClientRect();
+                if (eract.top + eract.height - frect.top < 0 || eract.bottom > frect.bottom) {
+                    this.closeSubject.next();
+                }
+            });
+        }
+    }
     clearEmit() {
         this.value = null;
         this.numberValue = '';
@@ -2289,13 +2316,13 @@ class XDatePickerComponent extends XDatePickerProperty {
         this.ngOnInit();
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XDatePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i2.XConfigService }, { token: i0.ChangeDetectorRef }, { token: i2$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i1.DatePipe }, { token: i3.XI18nService }, { token: i5$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XDatePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i2.XConfigService }, { token: i0.ChangeDetectorRef }, { token: i2$1.XPortalService }, { token: i0.ViewContainerRef }, { token: i1.DatePipe }, { token: i3.XI18nService }, { token: i0.ElementRef }, { token: i5$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XDatePickerComponent, selector: "x-date-picker", providers: [XValueAccessor(XDatePickerComponent), DatePipe], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true, static: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #datePicker class=\"x-date-picker\">\r\n  <div class=\"x-date-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable && inputClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"pointer\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xInput)=\"onInput()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-date-picker{display:inline-block;width:12rem}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XDatePickerPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XDatePickerComponent), DatePipe], template: "<div #datePicker class=\"x-date-picker\">\r\n  <div class=\"x-date-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label\"\r\n      [labelWidth]=\"labelWidth\"\r\n      [labelAlign]=\"labelAlign\"\r\n      [justify]=\"justify\"\r\n      [align]=\"align\"\r\n      [direction]=\"direction\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [validator]=\"validator\"\r\n      [icon]=\"icon\"\r\n      [placeholder]=\"getPlaceholder\"\r\n      [readonly]=\"readonly\"\r\n      [clearable]=\"clearable && inputClearable\"\r\n      [(ngModel)]=\"displayValue\"\r\n      [valueTpl]=\"valueTpl\"\r\n      [valueTplContext]=\"valueTplContext\"\r\n      [size]=\"size\"\r\n      [bordered]=\"bordered\"\r\n      [before]=\"before\"\r\n      [after]=\"after\"\r\n      [pattern]=\"pattern\"\r\n      [message]=\"message\"\r\n      [pointer]=\"pointer\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xInput)=\"onInput()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-date-picker{display:inline-block;width:12rem}.x-date-picker{margin:0;padding:0;width:100%}.x-date-picker x-input{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i2.XConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i1.DatePipe }, { type: i3.XI18nService }, { type: i5$1.Overlay }]; }, propDecorators: { datePicker: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i2.XConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.XPortalService }, { type: i0.ViewContainerRef }, { type: i1.DatePipe }, { type: i3.XI18nService }, { type: i0.ElementRef }, { type: i5$1.Overlay }]; }, propDecorators: { datePicker: [{
                 type: ViewChild,
                 args: ['datePicker', { static: true }]
             }], inputCom: [{
@@ -2724,6 +2751,7 @@ class XDateRangeComponent extends XDateRangeProperty {
         this.flexClass = [];
         this.locale = {};
         this._unSubject = new Subject();
+        this.document = inject(DOCUMENT);
     }
     ngOnInit() {
         this.setFlex(this.dateRange.nativeElement, this.renderer, this.justify, this.align, this.direction);
@@ -2770,6 +2798,30 @@ class XDateRangeComponent extends XDateRangeProperty {
     setHostTypeClass() {
         this.renderer.addClass(this.elementRef.nativeElement, `x-date-range-${this.type}`);
     }
+    setParantScroll() {
+        if (!this.document)
+            return;
+        const parents = XParents(this.elementRef.nativeElement);
+        let firstScroll = null;
+        for (let item of parents) {
+            if (item.clientHeight < item.scrollHeight) {
+                firstScroll = item;
+                break;
+            }
+        }
+        if (firstScroll && firstScroll.tagName !== 'BODY') {
+            fromEvent(firstScroll, 'scroll')
+                .pipe(filter(() => this.portalAttached()), takeUntil(this._unSubject))
+                .subscribe(() => {
+                this.portal?.overlayRef?.updatePosition();
+                const eract = this.elementRef.nativeElement.getBoundingClientRect();
+                const frect = firstScroll.getBoundingClientRect();
+                if (eract.top + eract.height - frect.top < 0 || eract.bottom > frect.bottom) {
+                    this.closeSubject.next();
+                }
+            });
+        }
+    }
     setFormat() {
         if (this.format !== 'yyyy-MM-dd')
             return;