ngx-render-material-forms 2.5.17 → 2.5.19

package/fesm2022/ngx-render-material-forms.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Inject, NgModule } from '@angular/core';
+import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, ElementRef, Inject, NgModule } from '@angular/core';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i1 from '@angular/common';
@@ -57,7 +57,7 @@ import NumberComponent from 'formiojs/components/number/Number.js';
 import _, { get as get$1 } from 'lodash';
 import CurrencyComponent from 'formiojs/components/currency/Currency.js';
 import DayComponent from 'formiojs/components/day/Day.js';
-import { momentDate } from 'formiojs/utils/utils.js';
+import { momentDate, convertFormatToMoment } from 'formiojs/utils/utils.js';
 import HiddenComponent from 'formiojs/components/hidden/Hidden.js';
 import HtmlComponent from 'formiojs/components/html/HTML.js';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
@@ -606,6 +606,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 PhoneNumberComponent.MaterialComponent = MaterialPhoneNumberComponent;
 
+// `beforeinput` types that add content to the field (typing, paste, drag & drop, autocomplete).
+const INSERTING_INPUT_TYPES = [
+    'insertText',
+    'insertReplacementText',
+    'insertFromPaste',
+    'insertFromDrop',
+    'insertFromYank',
+    'insertCompositionText'
+];
 class MaterialNumberComponent extends MaterialTextfieldComponent {
     constructor(element, ref, renderer) {
         super(element, ref);
@@ -618,6 +627,9 @@ class MaterialNumberComponent extends MaterialTextfieldComponent {
         super.ngAfterViewInit();
         if (this.instance) {
             const { instance } = this;
+            this.renderer.listen(this.input.nativeElement, 'beforeinput', (event) => {
+                this.blockNonNumericInput(event);
+            });
             this.renderer.listen(this.input.nativeElement, 'blur', () => {
                 let value = instance.parseValue(this.control.value);
                 value = instance.formatValue(value);
@@ -626,6 +638,43 @@ class MaterialNumberComponent extends MaterialTextfieldComponent {
             });
         }
     }
+    /**
+     * The input is rendered as type="text" so that the formio number/currency masks (delimiters,
+     * decimal separator, currency affixes) can be displayed. Typing, pasting or dropping characters
+     * that are not part of that numeric format is rejected before it reaches the control.
+     */
+    blockNonNumericInput(event) {
+        if (!event || !event.cancelable || !INSERTING_INPUT_TYPES.includes(event.inputType)) {
+            return;
+        }
+        const data = event.data !== undefined && event.data !== null
+            ? event.data
+            : (event.dataTransfer ? event.dataTransfer.getData('text') : '');
+        if (!data || this.isAllowedNumericInput(data)) {
+            return;
+        }
+        event.preventDefault();
+    }
+    isAllowedNumericInput(data) {
+        const instance = this.instance;
+        const allowed = new Set('0123456789'.split(''));
+        if (_.get(instance.component, 'allowNegative', true)) {
+            allowed.add('-');
+        }
+        if (!_.isFunction(instance.isDecimalAllowed) || instance.isDecimalAllowed()) {
+            allowed.add(instance.decimalSeparator || '.');
+        }
+        if (instance.delimiter) {
+            allowed.add(instance.delimiter);
+        }
+        // Currency renders its prefix/suffix (for example `$`) inside the input value.
+        [instance.currencyPrefix, instance.currencySuffix].forEach((affix) => {
+            if (_.isString(affix)) {
+                affix.split('').forEach((char) => allowed.add(char));
+            }
+        });
+        return data.split('').every((char) => allowed.has(char));
+    }
     getValue() {
         let value = this.control.value;
         if (value && this.instance) {
@@ -1744,7 +1793,9 @@ class MaterialDateComponent extends MaterialComponent {
         return this.instance && this.instance.component.enableTime === true;
     }
     setDisplayControlValue(value = null) {
-        const format = `YYYY-MM-DD${this.enableTime ? 'THH:mm' : ''}`;
+        const format = this.instance.component.format
+            ? convertFormatToMoment(this.instance.component.format)
+            : `YYYY-MM-DD${this.enableTime ? 'THH:mm' : ''}`;
         value = value || this.getDateTimeValue();
         if (value) {
             this.displayControl.setValue(momentDate(value).format(format));
@@ -1757,12 +1808,18 @@ class MaterialDateComponent extends MaterialComponent {
         this.selectedDate = momentDate(event).utc().format();
         this.control.setValue(this.selectedDate);
         this.setDateTime();
+        if (!this.enableTime) {
+            this.isPickerOpened = false;
+        }
     }
     onChangeTime(time) {
         this.selectedTime = time;
         if (this.selectedDate || (this.enableTime && !this.enableDate)) {
             this.setDateTime();
         }
+        if ((this.enableDate && this.selectedDate) || (this.enableTime && !this.enableDate)) {
+            this.isPickerOpened = false;
+        }
     }
     onChangeInput() {
         const value = this.dateFilter(this.displayControl.value) &&
@@ -1773,6 +1830,7 @@ class MaterialDateComponent extends MaterialComponent {
     getDateTimeValue() {
         let newDate = '';
         let isSelectedTime = false;
+        console.log(this.calendar);
         if (this.calendar && this.calendar.selectedTime) {
             const { selectedTime } = this.calendar;
             isSelectedTime = true;
@@ -1881,20 +1939,19 @@ class MaterialDateComponent extends MaterialComponent {
         return !formattedDates.includes(momentDate(d).format('YYYY-MM-DD'));
     }
     clickOutside(event) {
-        if (this.isPickerOpened && (event.target.classList.value == "mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-today" || event.target.classList.value == "mat-calendar-body" || event.target.classList.value == "mat-calendar-body-cell mat-calendar-body-active" || event.target.classList.value == '' || event.target.classList.value == "mat-calendar-body-label" || event.target.classList.value == "mat-calendar-table-header-divider" || event.target.classList.value == "mat-calendar-controls" || event.target.classList.value == "mat-button-wrapper" || event.target.classList.value == "mat-calendar-header" || event.target.classList.value == "mat-calendar-arrow mat-calendar-invert" || event.target.classList.value == "mat-calendar-content cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-calendar calendar ng-star-inserted" || event.target.classList.value == "mat-focus-indicator mat-calendar-period-button mat-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator' || event.target.classList.value == "mat-focus-indicator mat-calendar-next-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-focus-indicator mat-calendar-previous-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused")) {
-            this.isPickerOpened = true;
+        if (!this.isPickerOpened) {
+            return;
         }
-        else {
-            if (event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected' && this.isPickerOpened) {
-                this.toggleCalendar(event);
-            }
-            else {
-                this.isPickerOpened = false;
-            }
+        const target = event.target;
+        const clickedInsideCalendar = this.calendarElRef && this.calendarElRef.nativeElement.contains(target);
+        const clickedToggle = this.toggleElRef && this.toggleElRef.nativeElement.contains(target);
+        // Any interaction within the calendar (day/month/year navigation, time picker, etc.)
+        // must not close the picker. Closing on an actual selection is handled in
+        // onChangeDate/onChangeTime once the value is complete.
+        if (clickedInsideCalendar || clickedToggle) {
+            return;
         }
-        // if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened) {
-        //   this.toggleCalendar(event);
-        // }
+        this.isPickerOpened = false;
     }
     improveMinMaxDate(minDate, maxDate) {
         if (minDate && minDate.length === 4) {
@@ -1906,7 +1963,7 @@ class MaterialDateComponent extends MaterialComponent {
         return { minDate, maxDate };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarElRef", first: true, predicate: ["calendar"], descendants: true, read: ElementRef }, { propertyName: "toggleElRef", first: true, predicate: ["toggleBtn"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
     <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
     <ng-template #componentTemplate let-hasLabel>
       <mat-label *ngIf="hasLabel" fxFill>
@@ -1914,7 +1971,7 @@ class MaterialDateComponent extends MaterialComponent {
       </mat-label>
 
       <form class="example-form">
-        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
+        <mat-datepicker-toggle #toggleBtn [disabled]="isDisabled()" (click)="toggleCalendar($event)">
           <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
         </mat-datepicker-toggle>
         <mat-form-field class="example-full-width">
@@ -1946,20 +2003,22 @@ class MaterialDateComponent extends MaterialComponent {
           >
         </mat-form-field>
 
-        <mat-formio-calendar
-          #calendar
-          [minDate]="instance.component.datePicker.minDate || ''"
-          [maxDate]="instance.component.datePicker.maxDate || ''"
-          [dateFilter]="dateFilter"
-          [hidden]="!isPickerOpened"
-          (dateSelectEvent)="onChangeDate($event)"
-          (timeSelectEvent)="onChangeTime($event)"
-          [enableDate]="enableDate"
-          [enableTime]="enableTime"
-          [hourStep]="instance.component.timePicker.hourStep"
-          [minuteStep]="instance.component.timePicker.minuteStep"
-          [instance]="instance"
-        ></mat-formio-calendar>
+        <div (click)="$event.stopPropagation()">
+          <mat-formio-calendar
+            #calendar
+            [minDate]="instance.component.datePicker.minDate || ''"
+            [maxDate]="instance.component.datePicker.maxDate || ''"
+            [dateFilter]="dateFilter"
+            [hidden]="!isPickerOpened"
+            (dateSelectEvent)="onChangeDate($event)"
+            (timeSelectEvent)="onChangeTime($event)"
+            [enableDate]="enableDate"
+            [enableTime]="enableTime"
+            [hourStep]="instance.component.timePicker.hourStep"
+            [minuteStep]="instance.component.timePicker.minuteStep"
+            [instance]="instance"
+          ></mat-formio-calendar>
+        </div>
         <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </form>
     </ng-template>
@@ -1980,7 +2039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </mat-label>
 
       <form class="example-form">
-        <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
+        <mat-datepicker-toggle #toggleBtn [disabled]="isDisabled()" (click)="toggleCalendar($event)">
           <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
         </mat-datepicker-toggle>
         <mat-form-field class="example-full-width">
@@ -2012,20 +2071,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           >
         </mat-form-field>
 
-        <mat-formio-calendar
-          #calendar
-          [minDate]="instance.component.datePicker.minDate || ''"
-          [maxDate]="instance.component.datePicker.maxDate || ''"
-          [dateFilter]="dateFilter"
-          [hidden]="!isPickerOpened"
-          (dateSelectEvent)="onChangeDate($event)"
-          (timeSelectEvent)="onChangeTime($event)"
-          [enableDate]="enableDate"
-          [enableTime]="enableTime"
-          [hourStep]="instance.component.timePicker.hourStep"
-          [minuteStep]="instance.component.timePicker.minuteStep"
-          [instance]="instance"
-        ></mat-formio-calendar>
+        <div (click)="$event.stopPropagation()">
+          <mat-formio-calendar
+            #calendar
+            [minDate]="instance.component.datePicker.minDate || ''"
+            [maxDate]="instance.component.datePicker.maxDate || ''"
+            [dateFilter]="dateFilter"
+            [hidden]="!isPickerOpened"
+            (dateSelectEvent)="onChangeDate($event)"
+            (timeSelectEvent)="onChangeTime($event)"
+            [enableDate]="enableDate"
+            [enableTime]="enableTime"
+            [hourStep]="instance.component.timePicker.hourStep"
+            [minuteStep]="instance.component.timePicker.minuteStep"
+            [instance]="instance"
+          ></mat-formio-calendar>
+        </div>
         <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </form>
     </ng-template>
@@ -2034,6 +2095,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar']
+            }], calendarElRef: [{
+                type: ViewChild,
+                args: ['calendar', { read: ElementRef }]
+            }], toggleElRef: [{
+                type: ViewChild,
+                args: ['toggleBtn', { read: ElementRef }]
             }] } });
 DateTimeComponent.MaterialComponent = MaterialDateComponent;