cmat 0.0.80 → 0.0.82

package/fesm2022/cmat-components-material-datetimepicker.mjs

@@ -1,8 +1,9 @@
 import { NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, HostListener, Input, HostBinding, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, signal, Directive, ViewChild, InjectionToken, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, ContentChild } from '@angular/core';
+import { EventEmitter, inject, ElementRef, HostListener, Input, HostBinding, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, signal, Directive, DestroyRef, ViewChild, InjectionToken, Injector, ViewContainerRef, DOCUMENT, afterNextRender, forwardRef, ContentChild } from '@angular/core';
 import { DatetimeAdapter, CMAT_DATETIME_FORMATS } from 'cmat/components/adapter';
 import { coerceNumberProperty, coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { Subject, Subscription, merge, of } from 'rxjs';
@@ -135,15 +136,15 @@ class CmatDatetimepickerClockComponent {
         this.activeDate = this._activeDate || this._adapter.today();
         this._init();
     }
+    ngOnDestroy() {
+        this._removeDocumentListeners();
+    }
     handleMousemove(event) {
         event.preventDefault();
         this._setTime(event);
     }
     handleMouseup() {
-        document.removeEventListener('mousemove', this._mouseMoveListener);
-        document.removeEventListener('touchmove', this._mouseMoveListener);
-        document.removeEventListener('mouseup', this._mouseUpListener);
-        document.removeEventListener('touchend', this._mouseUpListener);
+        this._removeDocumentListeners();
         if (this._timeChanged) {
             this.selectedChange.emit(this.activeDate);
             if (!this.hourView) {
@@ -151,6 +152,12 @@ class CmatDatetimepickerClockComponent {
             }
         }
     }
+    _removeDocumentListeners() {
+        document.removeEventListener('mousemove', this._mouseMoveListener);
+        document.removeEventListener('touchmove', this._mouseMoveListener);
+        document.removeEventListener('mouseup', this._mouseUpListener);
+        document.removeEventListener('touchend', this._mouseUpListener);
+    }
     _init() {
         this.hours.length = 0;
         this.minutes.length = 0;
@@ -211,8 +218,8 @@ class CmatDatetimepickerClockComponent {
         const triggerRect = trigger.getBoundingClientRect();
         const width = trigger.offsetWidth;
         const height = trigger.offsetHeight;
-        const pageX = event.pageX !== undefined ? event.pageX : event.touches[0].pageX;
-        const pageY = event.pageY !== undefined ? event.pageY : event.touches[0].pageY;
+        const pageX = event instanceof MouseEvent ? event.pageX : event.touches[0].pageX;
+        const pageY = event instanceof MouseEvent ? event.pageY : event.touches[0].pageY;
         const x = (width / 2) - (pageX - triggerRect.left - window.scrollX);
         const y = (height / 2) - (pageY - triggerRect.top - window.scrollY);
         let radian = Math.atan2(-x, y);
@@ -848,9 +855,12 @@ class CmatDatetimepickerTimeComponent {
         this.intlVersion = signal(0, ...(ngDevMode ? [{ debugName: "intlVersion" }] : /* istanbul ignore next */ []));
         this.datetimepickerIntl = inject(CmatDatetimepickerIntl);
         this._adapter = inject(DatetimeAdapter);
+        this._destroyRef = inject(DestroyRef);
         this._twelvehour = false;
         this._clockView = 'hour';
-        this.datetimepickerIntlChangesSubscription = this.datetimepickerIntl.changes.subscribe(() => {
+        this.datetimepickerIntl.changes
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
             this.intlVersion.update(value => value + 1);
         });
     }
@@ -858,7 +868,7 @@ class CmatDatetimepickerTimeComponent {
         return this._clockView === 'hour';
     }
     get isMinuteView() {
-        return this._clockView === 'hour';
+        return this._clockView === 'minute';
     }
     get hour() {
         if (!this.activeDate) {
@@ -1021,11 +1031,6 @@ class CmatDatetimepickerTimeComponent {
     handleCancel() {
         this.userSelection.emit();
     }
-    ngOnDestroy() {
-        if (this.datetimepickerIntlChangesSubscription) {
-            this.datetimepickerIntlChangesSubscription.unsubscribe();
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatDatetimepickerTimeComponent, isStandalone: true, selector: "cmat-datetimepicker-time", inputs: { dateFilter: "dateFilter", interval: "interval", AMPM: "AMPM", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", userSelection: "userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: CmatDatetimepickerTimeInputDirective }], exportAs: ["cmatDatetimepickerTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-datetimepicker-time-input-wrapper\" [attr.data-refresh]=\"intlVersion()\">\r\n  <div class=\"cmat-datetimepicker-time-input-inner\">\r\n    <input #hourInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n      type=\"text\" inputmode=\"numeric\"\r\n      maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'hour'\" [class.cmat-datetimepicker-time-input-warning]=\"!hourInput.valid\" [timeMin]=\"twelvehour ? 1 : 0\" [timeMax]=\"twelvehour ? 12 : 23\"\r\n      [timeValue]=\"hour\" (timeValueChanged)=\"handleHourInputChange($event)\" (focus)=\"handleFocus('hour')\" />\r\n\r\n      <div class=\"cmat-datetimepicker-time-seperator\">:</div>\r\n\r\n      <input #minuteInput=\"cmatDatetimepickerTimeInput\" class=\"cmat-datetimepicker-time-input\"\r\n        type=\"text\" inputmode=\"numeric\"\r\n        maxlength=\"2\" [class.cmat-datetimepicker-time-input-active]=\"clockView === 'minute'\" [class.cmat-datetimepicker-time-input-warning]=\"!minuteInput.valid\" [timeMin]=\"0\" [timeMax]=\"59\" [timeValue]=\"minute\"\r\n        [timeInterval]=\"interval\" (timeValueChanged)=\"handleMinuteInputChange($event)\" (focus)=\"handleFocus('minute')\" />\r\n\r\n        @if (twelvehour) {\r\n          <div class=\"cmat-datetimepicker-time-ampm\">\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-am\"\r\n              aria-label=\"AM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'AM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('AM')\">AM</button>\r\n            <button matButton type=\"button\" class=\"cmat-datetimepicker-time-pm\"\r\n              aria-label=\"PM\" [class.cmat-datetimepicker-time-ampm-active]=\"AMPM === 'PM'\"\r\n            (keydown)=\"$event.stopPropagation()\" (click)=\"ampmChange.emit('PM')\">PM</button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <cmat-datetimepicker-clock [dateFilter]=\"dateFilter\" [interval]=\"interval\"\r\n      [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"selected\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\"\r\n      (selectedChange)=\"timeSelected($event)\" (activeDateChange)=\"onActiveDateChange($event)\">\r\n    </cmat-datetimepicker-clock>\r\n\r\n    <div class=\"cmat-datetimepicker-time-button-wrapper flex flex-row gap-4\">\r\n      <button class=\"cmat=datetimepicker-time-cancel-button\" matButton=\"outlined\" type=\"button\" (click)=\"handleCancel()\">\r\n        {{ datetimepickerIntl.cancelLabel }}\r\n      </button>\r\n      <button class=\"cmat-datetimepicker-time-ok-button\" matButton=\"filled\" type=\"button\" color=\"primary\" [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\"\r\n        (click)=\"handleOk()\">\r\n        {{ datetimepickerIntl.okLabel }}\r\n      </button>\r\n    </div>\r\n", styles: [".cmat-datetimepicker-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.cmat-datetimepicker-time-input-wrapper{padding:8px 0;text-align:center}.cmat-datetimepicker-time-input-inner{display:inline-flex;height:56px;align-items:center}.cmat-datetimepicker-time-input{width:72px;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;height:100%}.cmat-datetimepicker-time-seperator{display:inline-flex;justify-content:center;width:24px;font-size:36px;height:100%}.cmat-datetimepicker-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px;height:100%}[dir=rtl] .cmat-datetimepicker-time-ampm{margin-left:auto;margin-right:12px}.cmat-datetimepicker-time-am.mat-mdc-button,.cmat-datetimepicker-time-pm.mat-mdc-button{flex:1;width:40px;min-width:auto;padding:0;line-height:normal;border-width:1px;border-style:solid;min-height:0}.cmat-datetimepicker-time-am.mat-mdc-button{border-radius:8px 8px 0 0!important}.cmat-datetimepicker-time-pm.mat-mdc-button{border-radius:0 0 8px 8px!important;border-top:none}.cmat-datetimepicker-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}\n"], dependencies: [{ kind: "directive", type: CmatDatetimepickerTimeInputDirective, selector: "input.cmat-datetimepicker-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["cmatDatetimepickerTimeInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1210,6 +1215,7 @@ class CmatDatetimepickerCalendarComponent {
         this._intl = inject(CmatDatetimepickerIntl);
         this._adapter = inject(DatetimeAdapter, { optional: true });
         this._dateFormats = inject(CMAT_DATETIME_FORMATS, { optional: true });
+        this._destroyRef = inject(DestroyRef);
         this._type = 'date';
         this._timeInput = false;
         this._calendarAnimationListener = this.calendarStateDone.bind(this);
@@ -1217,14 +1223,14 @@ class CmatDatetimepickerCalendarComponent {
             (!this.dateFilter || this.dateFilter(date, CmatDatetimepickerFilterType.DATE)) &&
             (!this.minDate || this._adapter.compareDate(date, this.minDate) >= 0) &&
             (!this.maxDate || this._adapter.compareDate(date, this.maxDate) <= 0);
-        const _intl = this._intl;
         if (!this._adapter) {
             throw createMissingDateImplError('CDatetimeAdapter');
         }
         if (!this._dateFormats) {
             throw createMissingDateImplError('CMAT_DATETIME_FORMATS');
         }
-        this._intlChanges = _intl.changes
+        this._intl.changes
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.intlVersion.update(value => value + 1));
         this._elementRef.nativeElement.addEventListener('animationend', this._calendarAnimationListener);
     }
@@ -1418,7 +1424,6 @@ class CmatDatetimepickerCalendarComponent {
     }
     ngOnDestroy() {
         this._elementRef.nativeElement.removeEventListener('animationend', this._calendarAnimationListener);
-        this._intlChanges.unsubscribe();
     }
     dateSelected(date) {
         if (this.type === 'date') {
@@ -1869,6 +1874,7 @@ class CmatDatetimepickerComponent {
         this._focusedElementBeforeOpen = null;
         this._backdropHarnessClass = `${this.id}-backdrop`;
         this._inputStateChanges = Subscription.EMPTY;
+        this._closeAnimationTimeoutId = null;
         this._multiYearSelector = false;
         this._twelvehour = false;
         this._opened = false;
@@ -2023,7 +2029,16 @@ class CmatDatetimepickerComponent {
         if (this._componentRef) {
             const { instance, location } = this._componentRef;
             instance.startExitAnimation();
+            this._closeAnimationTimeoutId = window.setTimeout(() => {
+                this._closeAnimationTimeoutId = null;
+                this._focusedElementBeforeOpen = null;
+                this._destroyOverlay();
+            }, 500);
             instance.animationDone.pipe(take(1)).subscribe(() => {
+                if (this._closeAnimationTimeoutId !== null) {
+                    clearTimeout(this._closeAnimationTimeoutId);
+                    this._closeAnimationTimeoutId = null;
+                }
                 const activeElement = this._document.activeElement;
                 if (canRestoreFocus &&
                     (!activeElement ||
@@ -2232,6 +2247,7 @@ class CmatDatetimepickerInputDirective {
         this._formField = inject(MatFormField, { optional: true });
         this._datepickerSubscription = Subscription.EMPTY;
         this._localeSubscription = Subscription.EMPTY;
+        this._valueChangeTimeoutId = null;
         this._lastValueValid = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouched = () => { };
@@ -2287,7 +2303,11 @@ class CmatDatetimepickerInputDirective {
         const oldDate = this.value;
         this._value = value;
         this._formatValue(value);
-        setTimeout(() => {
+        if (this._valueChangeTimeoutId !== null) {
+            clearTimeout(this._valueChangeTimeoutId);
+        }
+        this._valueChangeTimeoutId = window.setTimeout(() => {
+            this._valueChangeTimeoutId = null;
             if (!this._dateAdapter.sameDatetime(oldDate, value)) {
                 this.valueChange.emit(value);
             }
@@ -2332,6 +2352,10 @@ class CmatDatetimepickerInputDirective {
         }
     }
     ngOnDestroy() {
+        if (this._valueChangeTimeoutId !== null) {
+            clearTimeout(this._valueChangeTimeoutId);
+            this._valueChangeTimeoutId = null;
+        }
         this._datepickerSubscription.unsubscribe();
         this._localeSubscription.unsubscribe();
         this.valueChange.complete();
@@ -2499,7 +2523,7 @@ class CmatDatetimepickerToggleComponent {
         this.class = 'cmat-datetimepicker-toggle';
         this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.intl = inject(CmatDatetimepickerIntl);
-        this._stateChanges = Subscription.EMPTY;
+        this._destroyRef = inject(DestroyRef);
     }
     get disabled() {
         return this._disabled === undefined ? this.datetimepicker.disabled : !!this._disabled;
@@ -2512,9 +2536,6 @@ class CmatDatetimepickerToggleComponent {
             this._watchStateChanges();
         }
     }
-    ngOnDestroy() {
-        this._stateChanges.unsubscribe();
-    }
     ngAfterContentInit() {
         this._watchStateChanges();
     }
@@ -2525,11 +2546,12 @@ class CmatDatetimepickerToggleComponent {
         }
     }
     _watchStateChanges() {
-        const datepickerDisabled = this.datetimepicker ? this.datetimepicker.disabledChange : of();
-        const inputDisabled = this.datetimepicker?.datetimepickerInput ?
-            this.datetimepicker.datetimepickerInput.disabledChange : of();
-        this._stateChanges.unsubscribe();
-        this._stateChanges = merge([this.intl.changes, datepickerDisabled, inputDisabled])
+        const datepickerDisabled = this.datetimepicker?.disabledChange ? this.datetimepicker.disabledChange : of(false);
+        const inputDisabled = this.datetimepicker?.datetimepickerInput?.disabledChange
+            ? this.datetimepicker.datetimepickerInput.disabledChange
+            : of(false);
+        merge(this.intl.changes, datepickerDisabled, inputDisabled)
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.refreshVersion.update(value => value + 1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }