novo-elements 8.3.0 → 8.4.0-next.1

package/fesm2020/novo-elements-elements-date-picker.mjs

@@ -13,17 +13,16 @@ import * as i4 from 'novo-elements/elements/button';
 import { NovoButtonModule } from 'novo-elements/elements/button';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from 'angular2-text-mask';
-import { TextMaskModule } from 'angular2-text-mask';
+import * as i5 from 'angular-imask';
+import { IMaskDirectiveModule } from 'angular-imask';
 import * as i8 from 'novo-elements/pipes';
 import { NovoPipesModule } from 'novo-elements/pipes';
+import * as i2$3 from 'novo-elements/elements/chips';
+import { NovoChipsModule } from 'novo-elements/elements/chips';
 import * as i2$1 from 'novo-elements/elements/common';
 import { NovoOverlayTemplateComponent, NovoOverlayModule } from 'novo-elements/elements/common';
 import * as i2$2 from 'novo-elements/elements/icon';
 import { NovoIconModule } from 'novo-elements/elements/icon';
-import * as i2$3 from 'novo-elements/elements/chips';
-import { NovoChipsModule } from 'novo-elements/elements/chips';
-import { createAutoCorrectedDatePipe } from 'text-mask-addons';
 
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -502,18 +501,16 @@ class NovoDatePickerInputElement {
             this._initFormatOptions();
         }
     }
+    ngAfterViewInit() {
+        this.overlay.panelClosingActions.subscribe(this._handleOverlayClickout.bind(this));
+    }
     _initFormatOptions() {
         this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
         if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
-            this.maskOptions = this.maskOptions || {
-                mask: this.dateFormatService.getDateMask(),
-                pipe: createAutoCorrectedDatePipe((this.format || this.labels.dateFormatString()).toLowerCase()),
-                keepCharPositions: false,
-                guide: true,
-            };
+            this.maskOptions = this.maskOptions || this.dateFormatService.getDateMask(this.format);
         }
         else {
-            this.maskOptions = { mask: false };
+            this.maskOptions = undefined;
         }
         this.setupInvalidDateErrorMessage();
     }
@@ -527,32 +524,39 @@ class NovoDatePickerInputElement {
         this.overlay.closePanel();
     }
     get panelOpen() {
-        return this.overlay && this.overlay.panelOpen;
+        return this.overlay?.panelOpen;
     }
     /** END: Convenient Panel Methods. */
     _handleKeydown(event) {
         if ((event.key === "Escape" /* Escape */ || event.key === "Enter" /* Enter */ || event.key === "Tab" /* Tab */) && this.panelOpen) {
-            this._handleEvent(event, true);
+            this._handleValueUpdate(event.target.value, true);
             this.closePanel();
             event.stopPropagation();
         }
     }
     _handleInput(event) {
-        if (document.activeElement === event.target) {
-            this._handleEvent(event, false);
+        // if maskOptions is enabled, then we do not want to process inputs until the mask has accepted them - so those events will be
+        // handled by the (accept) event.
+        if (document.activeElement === event.target && !this.maskOptions) {
+            this._handleValueUpdate(event.target.value, false);
         }
     }
     _handleBlur(event) {
-        this.handleInvalidDate();
-        this.blurEvent.emit(event);
+        if (!this.overlay.isBlurRecipient(event)) {
+            this.handleInvalidDate();
+            this.blurEvent.emit(event);
+        }
+    }
+    _handleOverlayClickout() {
+        this.handleInvalidDate(/*fromPanelClose:*/ true);
+        this.blurEvent.emit();
     }
     _handleFocus(event) {
         this.showInvalidDateError = false;
         this.openPanel();
         this.focusEvent.emit(event);
     }
-    _handleEvent(event, blur) {
-        const value = event.target.value;
+    _handleValueUpdate(value, blur) {
         if (value === '') {
             this.clearValue();
             this.closePanel();
@@ -562,15 +566,27 @@ class NovoDatePickerInputElement {
             this.openPanel();
         }
     }
+    handleMaskAccept(maskValue) {
+        this._handleValueUpdate(maskValue, false);
+    }
     formatDate(value, blur) {
         try {
-            const [dateTimeValue, formatted, isInvalidDate] = this.dateFormatService.parseString(value, false, 'date');
+            let dateTimeValue;
+            let isInvalidDate;
+            if (this.format) {
+                [dateTimeValue, , isInvalidDate] = this.dateFormatService.parseCustomDateString(value, this.format);
+            }
+            else {
+                [dateTimeValue, , isInvalidDate] = this.dateFormatService.parseString(value, false, 'date');
+            }
             this.isInvalidDate = isInvalidDate;
-            if (!isNaN(dateTimeValue.getUTCDate())) {
+            // if we have a full date - set the dateTimeValue
+            if (dateTimeValue?.getFullYear()?.toString().length === 4) {
                 const dt = new Date(dateTimeValue);
                 this.dispatchOnChange(dt, blur);
+                // if we only have a partial date - set the value to null
             }
-            else {
+            else if (isNaN(dateTimeValue?.getUTCDate())) {
                 this.dispatchOnChange(null, blur);
             }
         }
@@ -588,11 +604,13 @@ class NovoDatePickerInputElement {
     setDisabledState(disabled) {
         this.disabled = disabled;
     }
-    handleInvalidDate() {
-        if (this.isInvalidDate && this.value) {
+    handleInvalidDate(fromPanelClose = false) {
+        if (this.isInvalidDate) { //} && this.value) {
             this.showInvalidDateError = true;
             this.clearValue();
-            this.closePanel();
+            if (!fromPanelClose) {
+                this.closePanel();
+            }
         }
     }
     setupInvalidDateErrorMessage() {
@@ -647,7 +665,8 @@ class NovoDatePickerInputElement {
      * stemmed from the user.
      */
     setValueAndClose(event) {
-        if (event && event.date) {
+        if (event?.date) {
+            this.showInvalidDateError = false;
             this.dispatchOnChange(event.date, true);
         }
         this.closePanel();
@@ -696,12 +715,13 @@ NovoDatePickerInputElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       type="text"
       [name]="name"
       [(ngModel)]="formattedValue"
-      [textMask]="maskOptions"
+      [imask]="maskOptions"
       [placeholder]="placeholder"
       (focus)="_handleFocus($event)"
       (keydown)="_handleKeydown($event)"
       (input)="_handleInput($event)"
       (blur)="_handleBlur($event)"
+      (accept)="handleMaskAccept($event)"
       #input
       data-automation-id="date-input"
       [disabled]="disabled"
@@ -720,7 +740,7 @@ NovoDatePickerInputElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         [weekStart]="weekStart"
       ></novo-date-picker>
     </novo-overlay-template>
-  `, isInline: true, styles: [":host{flex:1;position:relative;display:block!important}:host.disabled{pointer-events:none;opacity:1}:host input{font-size:1em;border:none;border-bottom:1px solid #dbdbdb;background:transparent!important;border-radius:0;outline:none;height:2rem;width:100%;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}:host input:focus{border-bottom:1px solid #4a89dc}:host span.error-text{color:#da4453;padding-top:10px;flex:1;display:flex}:host>i.bhi-clock,:host>i.bhi-search,:host>i.bhi-times,:host>i.bhi-calendar{position:absolute;right:0;top:0px;font-size:1.2rem}\n"], components: [{ type: i2$1.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }], directives: [{ type: i4$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{flex:1;position:relative;display:block!important}:host.disabled{pointer-events:none;opacity:1}:host input{font-size:1em;border:none;border-bottom:1px solid #dbdbdb;background:transparent!important;border-radius:0;outline:none;height:2rem;width:100%;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}:host input:focus{border-bottom:1px solid #4a89dc}:host span.error-text{color:#da4453;padding-top:10px;flex:1;display:flex}:host>i.bhi-clock,:host>i.bhi-search,:host>i.bhi-times,:host>i.bhi-calendar{position:absolute;right:0;top:0px;font-size:1.2rem}\n"], components: [{ type: i2$1.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }], directives: [{ type: i4$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDatePickerInputElement, decorators: [{
             type: Component,
             args: [{ selector: 'novo-date-picker-input', providers: [DATE_VALUE_ACCESSOR$1], template: `
@@ -728,12 +748,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
       type="text"
       [name]="name"
       [(ngModel)]="formattedValue"
-      [textMask]="maskOptions"
+      [imask]="maskOptions"
       [placeholder]="placeholder"
       (focus)="_handleFocus($event)"
       (keydown)="_handleKeydown($event)"
       (input)="_handleInput($event)"
       (blur)="_handleBlur($event)"
+      (accept)="handleMaskAccept($event)"
       #input
       data-automation-id="date-input"
       [disabled]="disabled"
@@ -852,15 +873,10 @@ class NovoDateRangeInputElement {
     _initFormatOptions() {
         this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
         if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
-            this.maskOptions = this.maskOptions || {
-                mask: this.dateFormatService.getDateMask(),
-                pipe: createAutoCorrectedDatePipe((this.format || this.labels.dateFormatString()).toLowerCase()),
-                keepCharPositions: false,
-                guide: true,
-            };
+            this.maskOptions = this.maskOptions || this.dateFormatService.getDateMask(this.format);
         }
         else {
-            this.maskOptions = { mask: false };
+            this.maskOptions = undefined;
         }
     }
     /** BEGIN: Convenient Panel Methods. */
@@ -892,7 +908,7 @@ class NovoDateRangeInputElement {
     formatDate(value) {
         try {
             const [dateTimeValue] = this.dateFormatService.parseString(value, false, 'date');
-            return new Date(dateTimeValue);
+            return dateTimeValue ? new Date(dateTimeValue) : null;
         }
         catch (err) {
             return null;
@@ -1013,7 +1029,7 @@ NovoDateRangeInputElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         type="text"
         [name]="name"
         [(ngModel)]="formattedStartDate"
-        [textMask]="maskOptions"
+        [imask]="maskOptions"
         [placeholder]="placeholder"
         (keydown)="_onStartInputChange($event)"
         (input)="_onStartInputChange($event)"
@@ -1032,7 +1048,7 @@ NovoDateRangeInputElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         type="text"
         [name]="name"
         [(ngModel)]="formattedEndDate"
-        [textMask]="maskOptions"
+        [imask]="maskOptions"
         [placeholder]="placeholder"
         (keydown)="_onEndInputChange($event)"
         (input)="_onEndInputChange($event)"
@@ -1057,7 +1073,7 @@ NovoDateRangeInputElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         [weekStart]="weekStart"
       ></novo-date-picker>
     </novo-overlay-template>
-  `, isInline: true, styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host.disabled{pointer-events:none;opacity:1}:host .date-range-input-container{position:relative;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host .date-range-input-divider{font-weight:800;margin:0 .5em;align-self:center;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host input{font-size:1em;border:none;border-bottom:1px solid var(--border);background:transparent!important;border-radius:0;outline:none;height:2rem;width:9em;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:var(--text-main)}:host input:focus{border-bottom:1px solid #4a89dc}:host novo-icon{position:absolute;right:0;top:0;font-size:1em}:host novo-icon[size=small]{top:calc(50% - .75em);font-size:.5em}\n"], components: [{ type: i2$2.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { type: i2$1.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }], directives: [{ type: i4$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{flex:1;position:relative;display:flex;flex-flow:row nowrap;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host.disabled{pointer-events:none;opacity:1}:host .date-range-input-container{position:relative;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host .date-range-input-divider{font-weight:800;margin:0 .5em;align-self:center;height:-webkit-min-content;height:-moz-min-content;height:min-content}:host input{font-size:1em;border:none;border-bottom:1px solid var(--border);background:transparent!important;border-radius:0;outline:none;height:2rem;width:9em;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:var(--text-main)}:host input:focus{border-bottom:1px solid #4a89dc}:host novo-icon{position:absolute;right:0;top:0;font-size:1em}:host novo-icon[size=small]{top:calc(50% - .75em);font-size:.5em}\n"], components: [{ type: i2$2.NovoIconComponent, selector: "novo-icon", inputs: ["raised", "theme", "shape", "color", "size", "smaller", "larger", "alt", "name"] }, { type: i2$1.NovoOverlayTemplateComponent, selector: "novo-overlay-template", inputs: ["position", "scrollStrategy", "width", "height", "closeOnSelect", "hasBackdrop", "parent"], outputs: ["select", "opening", "closing"] }, { type: NovoDatePickerElement, selector: "novo-date-picker", inputs: ["minYear", "maxYear", "start", "end", "inline", "weekStart", "preselected", "hideOverflowDays", "hideFooter", "disabledDateMessage", "numberOfMonths", "mode", "range", "weekRangeSelect"], outputs: ["onSelect"] }], directives: [{ type: i4$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imaskElement", "imask", "unmask"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NovoDateRangeInputElement, decorators: [{
             type: Component,
             args: [{ selector: 'novo-date-range-input', providers: [DATE_VALUE_ACCESSOR], template: `
@@ -1066,7 +1082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         type="text"
         [name]="name"
         [(ngModel)]="formattedStartDate"
-        [textMask]="maskOptions"
+        [imask]="maskOptions"
         [placeholder]="placeholder"
         (keydown)="_onStartInputChange($event)"
         (input)="_onStartInputChange($event)"
@@ -1085,7 +1101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         type="text"
         [name]="name"
         [(ngModel)]="formattedEndDate"
-        [textMask]="maskOptions"
+        [imask]="maskOptions"
         [placeholder]="placeholder"
         (keydown)="_onEndInputChange($event)"
         (input)="_onEndInputChange($event)"
@@ -1196,7 +1212,6 @@ class NovoMultiDateInputElement {
     set value(value) {
         if (this.value !== value) {
             this._value = value;
-            this._setFormValue(value);
             this.onChangeCallback(this._value);
         }
     }
@@ -1209,16 +1224,6 @@ class NovoMultiDateInputElement {
     }
     ngOnInit() {
         this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
-        // if (!this.userDefinedFormat && this.textMaskEnabled && !this.allowInvalidDate) {
-        //   this.maskOptions = this.maskOptions || {
-        //     mask: this.dateFormatService.getDateMask(),
-        //     pipe: createAutoCorrectedDatePipe(this.format || this.labels.dateFormatString().toLowerCase()),
-        //     keepCharPositions: false,
-        //     guide: true,
-        //   };
-        // } else {
-        //   this.maskOptions = { mask: false };
-        // }
     }
     formatter(value) {
         const [dateTimeValue, formatted] = this.dateFormatService.parseString(value, false, 'date');
@@ -1270,11 +1275,6 @@ class NovoMultiDateInputElement {
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
-    _setFormValue(value) {
-        if (this.value) {
-            // this.formattedStartDate = this.formatDateValue(this.value.startDate);
-        }
-    }
     /**
      * This method closes the panel, and if a value is specified, also sets the associated
      * control to that value. It will also mark the control as dirty if this interaction
@@ -1406,7 +1406,7 @@ NovoDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         NovoButtonModule,
         NovoPipesModule,
         NovoOverlayModule,
-        TextMaskModule,
+        IMaskDirectiveModule,
         NovoIconModule,
         NovoChipsModule,
         NovoCalendarModule], exports: [NovoDatePickerElement, NovoDatePickerInputElement, NovoDateRangeInputElement, NovoMultiDateInputElement] });
@@ -1416,7 +1416,7 @@ NovoDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             NovoButtonModule,
             NovoPipesModule,
             NovoOverlayModule,
-            TextMaskModule,
+            IMaskDirectiveModule,
             NovoIconModule,
             NovoChipsModule,
             NovoCalendarModule,
@@ -1430,7 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NovoButtonModule,
                         NovoPipesModule,
                         NovoOverlayModule,
-                        TextMaskModule,
+                        IMaskDirectiveModule,
                         NovoIconModule,
                         NovoChipsModule,
                         NovoCalendarModule,