@sumaris-net/ngx-components 2.6.4-alpha5 → 2.6.4-alpha6

package/src/app/shared/material/datetime/material.datetime.scss

@@ -1,90 +0,0 @@
-:host {
-  display: inline-block;
-  width: 100%;
-  position: relative;
-  --ion-grid-column-padding: 0;
-}
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-mat-form-field {
-  input[readonly] {
-    user-select: none !important;
-  }
-  .datetime-md {
-    padding: 0 !important;
-  }
-  button[hidden] {
-    display: none;
-  }
-}
-
-ion-row.no-wrap {
-  flex-wrap: nowrap;
-}
-ion-col.day {
-  min-width: 100px;
-
-  .mat-form-field-subscript-wrapper {
-    overflow: visible;
-    right: -64px; // right offset to align hour
-    width: calc(100% + 64px); // get the full component width (overflow on the time part)
-
-    .mat-form-field-hint-wrapper {
-      display: flex;
-
-      .mat-form-field-hint-spacer {
-        flex: 1 0 1em;
-      }
-    }
-  }
-}
-
-ion-col.hour {
-  min-width: 55px;
-  max-width: 65px;
-
-  mat-form-field {
-    width: 100%;
-
-    mat-label,
-    input[type=text] {
-      text-align: left;
-      min-width: 50px; // Make placeholder (hh:mm) visible
-    }
-  }
-}
-
-mat-form-field.mat-form-field-disabled {
-  ion-col.day {
-    min-width: 100px;
-  }
-}
-
-.mat-form-field-outline {
-  ion-col.day {
-    min-width: 153px;
-  }
-  ion-col.hour {
-    min-width: 100px;
-    max-width: 110px;
-  }
-}
-
-
-.hour .mat-form-field-label {
-  max-width: 40px;
-}
-
-.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder {
-  max-width: inherit;
-}
-
-mat-error {
-  text-align: right;
-  width: 100%
-}
-

package/src/app/shared/material/datetime/material.datetime.ts

@@ -1,575 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Provider,
-  QueryList,
-  ViewChild,
-  ViewChildren
-} from '@angular/core';
-import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
-import { ControlValueAccessor, FormGroupDirective, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { isMoment, Moment } from 'moment';
-import { DEFAULT_PLACEHOLDER_CHAR } from '../../constants';
-import { SharedValidators } from '../../validator/validators';
-import { filter } from 'rxjs/operators';
-import { InputElement, setTabIndex } from '../../inputs';
-import { isFocusableElement } from '../../focusable';
-import { merge, Subscription } from 'rxjs';
-import { DateFilterFn, MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
-import {isBlankString, isNil, isNilOrBlank, isNotNil, isNotNilBoolean, toBoolean} from '../../functions';
-import { DateUtils, fromDateISOString, toDateISOString } from '../../dates';
-import { isMobile } from '../../platforms';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-
-const DEFAULT_VALUE_ACCESSOR: Provider = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => MatDateTime),
-  multi: true
-};
-
-const DAY_MASK = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
-
-const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
-const HOUR_MASK = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-
-const noop = () => {};
-
-declare interface NgxTimePicker {
-  selectedHour: { time: number };
-  selectedMinute: { time: number };
-  open();
-  close();
-}
-
-@Component({
-  selector: 'mat-date-time-field',
-  templateUrl: './material.datetime.html',
-  styleUrls: ['./material.datetime.scss'],
-  providers: [
-    DEFAULT_VALUE_ACCESSOR,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MatDateTime implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, InputElement {
-  private _onChangeCallback: (_: any) => void = noop;
-  private _onTouchedCallback: () => void = noop;
-  private _subscription = new Subscription();
-  private _controlSubscription: Subscription;
-  private _writing = true;
-  private _disabling = false;
-  private _tabindex: number;
-  private _readonly = false;
-  private _formControl: UntypedFormControl;
-  private _controlName: string;
-  private _required: boolean;
-
-  dayControl: UntypedFormControl;
-  hourControl: UntypedFormControl;
-  displayPattern: string;
-  dayPattern: string;
-  locale: string;
-  readonly dayMask = DAY_MASK;
-  readonly hourMask = HOUR_MASK;
-
-  @Input() set formControl(value: UntypedFormControl) {
-    this._setFormControl(value);
-  }
-  get formControl(): UntypedFormControl {
-    return this._formControl;
-  }
-
-  @Input() set formControlName(value: string) {
-    this._setFormControlName(value);
-  }
-  get formControlName(): string {
-    return this._controlName;
-  }
-
-  @Input() set required(value: boolean|any) {
-    if (this._required === value) return; // SKip
-
-    this._required = value;
-    if (this._formControl) {
-      this._updateControlValidators(this._formControl, value);
-    }
-  }
-  get required(): boolean|any {
-    return this._required;
-  }
-
-  @Input() placeholder: string;
-  @Input() floatLabel: FloatLabelType = 'auto';
-  @Input() appearance: MatFormFieldAppearance;
-  @Input() mobile: boolean;
-  @Input() compact = false;
-  @Input() placeholderChar: string = DEFAULT_PLACEHOLDER_CHAR;
-  @Input() autofocus = false;
-  @Input() startDate: Moment | null = null;
-  @Input() clearable = false;
-  @Input() datePickerFilter: DateFilterFn<Moment>;
-
-  @Input() set readonly(value: boolean){
-    this._readonly = value;
-    this.markForCheck();
-  }
-
-  get readonly(): boolean {
-    return this._readonly;
-  }
-
-  @Input() set tabindex(value: number) {
-    if (this._tabindex !== value) {
-      this._tabindex = value;
-      if (!this._writing) this.updateTabIndex();
-    }
-  }
-
-  get tabindex(): number {
-    return this._tabindex;
-  }
-
-  get value(): any {
-    return this.formControl.value;
-  }
-
-  get disabled(): boolean {
-    return this.formControl.disabled;
-  }
-
-  @ViewChild('datePicker') datePicker: MatDatepicker<Moment>;
-  @ViewChild('timePicker') timePicker: NgxTimePicker;
-  @ViewChildren('matInput') matInputs: QueryList<ElementRef>;
-
-  constructor(
-    private dateAdapter: MomentDateAdapter,
-    private translate: TranslateService,
-    private formBuilder: UntypedFormBuilder,
-    private cd: ChangeDetectorRef,
-    @Optional() private formGroupDir: FormGroupDirective,
-  ) {
-    this.locale = (translate.currentLang || translate.defaultLang).substring(0, 2);
-  }
-
-  ngOnInit() {
-
-    const control = this._formControl || (this._controlName && this.formGroupDir?.form.get(this._controlName) as UntypedFormControl);
-    if (!control) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-time-field>.');
-
-    // Default values
-    this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
-    this._required = isNotNilBoolean(this._required) ? this._required : (control.hasValidator(Validators.required) || isBlankString(this._required));
-
-    this._setFormControl(control);
-
-    // Create the day control
-    this.dayControl = this.formBuilder.control(null);
-
-    // Create the hour control
-    this.hourControl = this.formBuilder.control(null, this.mobile ? null : Validators.pattern(HOUR_REGEXP));
-
-    // Get patterns to display date and date+time
-    this._subscription.add(
-        this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN'])
-            .subscribe((patterns) => this.updatePattern(patterns))
-    );
-
-    this._subscription.add(
-      merge(
-        this.dayControl.valueChanges,
-        this.hourControl.valueChanges
-      )
-        .subscribe((_) => this.onFormChange())
-    );
-
-    this._writing = false;
-  }
-
-  ngAfterViewInit() {
-    this.updateTabIndex();
-  }
-
-  ngOnDestroy() {
-    this._subscription.unsubscribe();
-    this._controlSubscription?.unsubscribe();
-  }
-
-
-
-  writeValue(value: any): void {
-    if (this._writing) return; // Skip
-    this._writing = true;
-
-    // DEBUG
-    // console.debug("[mat-date-time] writeValue() with:", value);
-
-    // Convert into date
-    const date = isMoment(value) ? value : fromDateISOString(value);
-
-    if (!date || !date.isValid()) {
-      this.dayControl.patchValue(null, {emitEvent: false});
-      this.hourControl.patchValue(null, {emitEvent: false});
-    }
-    else {
-      const day = date
-        // Important: clone, because startOf() will update the existing date
-        .clone()
-        // Reset hour
-        .startOf('day');
-      const dayStr = this.dateAdapter.format(day, this.dayPattern);
-
-      // Format time
-      let timeStr;
-      if (DateUtils.isNoTime(date)) {
-        // Clear time
-        timeStr = null;
-      } else {
-        // - Format hh
-        let hour: number | string = date.hour();
-        hour = hour < 10 ? ('0' + hour) : hour;
-        // - Format mm
-        let minutes: number | string = date.minutes();
-        minutes = minutes < 10 ? ('0' + minutes) : minutes;
-        timeStr = `${hour}:${minutes}`;
-      }
-
-      // Update controls
-      this.dayControl.patchValue(dayStr, {emitEvent: false});
-      this.hourControl.patchValue(timeStr, {emitEvent: false});
-    }
-
-    this._writing = false;
-    this.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this._onChangeCallback = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this._onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (this._disabling) return; // Skip
-    this._disabling = true;
-
-    if (isDisabled) {
-      this.dayControl.disable({emitEvent: false});
-      this.hourControl.disable({emitEvent: false});
-    } else {
-      this.dayControl.enable({emitEvent: false});
-      this.hourControl.enable({emitEvent: false});
-    }
-
-    this._disabling = false;
-    this.markForCheck();
-  }
-
-  openDatePicker(event?: Event|Event, datePicker?: MatDatepicker<any>) {
-    datePicker = datePicker || this.datePicker;
-    if (datePicker) {
-
-      if (event) this._preventEvent(event);
-
-      if (!datePicker.opened) {
-        datePicker.open();
-      }
-    }
-  }
-
-  openTimePicker(event?: Event|Event) {
-    if (!this.timePicker) return; // Skip
-
-    this._preventEvent(event);
-
-    this.timePicker.open();
-  }
-
-  focus() {
-    const input = this.matInputs.first;
-    if (!input) return;
-
-    setTimeout(() => {
-      if (isFocusableElement(input.nativeElement)) {
-        input.nativeElement.focus();
-      }
-    });
-  }
-
-  clear() {
-    this._formControl.setValue(null);
-    this.markAsTouched();
-    this.markAsDirty();
-  }
-  /* -- protected functions -- */
-
-  protected _setFormControlName(controlName: string) {
-    if (!controlName || this._controlName === controlName) return; // Skip
-
-    this._controlName = controlName;
-
-    const control = this.formGroupDir?.form?.get(controlName) as UntypedFormControl;
-    if (control) this._setFormControl(control);
-  }
-
-  protected _setFormControl(control: UntypedFormControl) {
-    if (!control) return;  // Skip
-
-    if (this._formControl !== control) {
-      this._formControl = control;
-
-      // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
-      this._controlSubscription?.unsubscribe();
-      this._controlSubscription = control.statusChanges
-        .pipe(
-          filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
-        )
-        .subscribe((_) => {
-          this.dayControl.updateValueAndValidity({emitEvent: false});
-          this.hourControl.updateValueAndValidity({emitEvent: false});
-          if (this._formControl.touched) {
-            if (!this.dayControl.touched) this.dayControl.markAsTouched();
-            if (!this.hourControl.touched) this.hourControl.markAsTouched();
-          }
-          this.markForCheck();
-        });
-    }
-
-    // Update validators
-    this._updateControlValidators(control, this._required)
-  }
-
-  protected _updateControlValidators(control: UntypedFormControl, required: boolean) {
-    if (!control) return;
-
-    // Add 'validDate' validator
-    if (!control.hasValidator(SharedValidators.validDate)) {
-      control.addValidators(SharedValidators.validDate)
-    }
-
-    // Add required validator (if need)
-    if (required) {
-      if (!control.hasValidator(Validators.required)) {
-        control.addValidators(Validators.required)
-      }
-    }
-    else if (control.hasValidator(Validators.required)) {
-      control.removeValidators(Validators.required)
-    }
-  }
-
-  protected _onDatePickerChange(event: MatDatepickerInputEvent<Moment>): void {
-    //console.debug(`[${this.constructor.name}._onDatePickerChange]`);
-
-    // Make sure event is valid
-    if (!event || (event.value !== null && !isMoment(event.value))) {
-      console.warn('Invalid MatDatepicker event. Skipping', event);
-      return; // Skip
-    }
-
-    let value = event.value;
-
-    // No value, but mobile mode: use the current date
-    if (!value && this.mobile) {
-      this._writing = true;
-      value = DateUtils.resetTime(DateUtils.moment().locale(this.locale));
-      this._formControl.setValue(value, {emitEvent: false});
-      this.markForCheck();
-      this._writing = false;
-    }
-
-    // Convert to usable date, then convert to day pattern (e.g DD/MM/YYYY)
-    const day = value?.locale(this.locale) // set locale
-      .hour(0).minute(0).seconds(0).millisecond(0) // Reset hour
-      .utc(true);
-    const dayStr = day && this.dateAdapter.format(day, this.dayPattern) || null;
-
-    // Update the day control
-    if (this.dayControl.value !== dayStr) {
-
-      // DEBUG
-      // console.debug("[mat-date-time] onDatePickerChange() new value:", dayStr);
-
-      this.dayControl.setValue(dayStr, {
-        emitEvent: true // Will call onFormChange
-      });
-    }
-
-    if (this.mobile) {
-      // Loop if invalid
-      if (!event.value && this.required) {
-        if (this.required) this._openDatePickerIfMobile();
-      }
-      else {
-        this._openTimePickerIfMobile();
-      }
-    }
-    this._writing = false;
-  }
-
-
-  protected _onTimePickerChange(timeStr: string) {
-    // Update the time control, if need
-    if (this.hourControl.value !== timeStr) {
-
-      // DEBUG
-      // console.debug("[mat-date-time] onTimePickerChange() new value:", timeStr);
-
-      this.hourControl.setValue(timeStr, {
-        emitEvent: true // Will call onFormChange
-      });
-    }
-  }
-
-  protected _openDatePickerIfMobile(event?: Event, datePicker?: MatDatepicker<any>) {
-    if (!this.mobile || event?.defaultPrevented || this.disabled) return;
-
-    this._preventEvent(event);
-
-    // Open the picker
-    this.openDatePicker(null, datePicker);
-  }
-
-  protected _openTimePickerIfMobile(event?: Event) {
-    if (!this.mobile || event?.defaultPrevented || this.disabled) return;
-
-    // Open the picker
-    this.openTimePicker(event);
-  }
-
-  protected _checkIfTouched() {
-    if (this.dayControl.touched || this.hourControl.touched) {
-      this._onTouchedCallback();
-      this.markForCheck();
-    }
-  }
-
-  protected _preventEvent(event?: Event) {
-    if (!event) return;
-    event.preventDefault();
-    if (event.stopPropagation) event.stopPropagation();
-    if (event.stopImmediatePropagation) event.stopImmediatePropagation();
-  }
-
-  /* -- private method -- */
-
-  private updatePattern(patterns: {[key: string]: string}) {
-    this.displayPattern = (patterns['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? patterns['COMMON.DATE_TIME_PATTERN'] : 'L LT');
-    this.dayPattern = (patterns['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? patterns['COMMON.DATE_PATTERN'] : 'L');
-  }
-
-  private onFormChange() {
-    if (this._writing) return; // Skip if call by self
-    this._writing = true;
-
-    let dayStr = this.dayControl.value;
-    const time = this.hourControl.value;
-
-    // DEBUG
-    //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
-
-    const incompleteValue = isNilOrBlank(time) !== isNilOrBlank(dayStr);
-    if (incompleteValue || this.dayControl.invalid || this.hourControl.invalid) {
-      this._formControl.markAsPending({onlySelf: true});
-      this._formControl.setErrors({
-        validDate: incompleteValue,
-        ...this._formControl.errors,
-        ...this.dayControl.errors,
-        ...this.hourControl.errors
-      });
-      if (this.dayControl.dirty || this.hourControl.dirty) {
-        this._formControl.markAsDirty();
-      }
-      this._writing = false;
-      return;
-    }
-
-    // Make to remove placeholder chars
-    while (dayStr && dayStr.indexOf(this.placeholderChar) !== -1) {
-      dayStr = dayStr.replace(this.placeholderChar, '');
-    }
-
-    // Force '0' for empty month (otherwise moment will use the current month)
-    dayStr = dayStr && dayStr.replace('//', '/0/')
-      // Force '0' for empty year (otherwise moment will use the current year)
-      .replace(/\/$/, '/0');
-
-    // Parse day
-    const day: Moment = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
-
-    // Parse time
-    const hourParts = (time || '').split(':');
-    const hour = parseInt(hourParts[0] || 0);
-    const minutes = parseInt(hourParts[1] || 0);
-    const dateTime = day && day
-      .locale(this.locale) // set as time as locale time
-      .hour(hour).minute(minutes)// Set local hour
-      .seconds(0).millisecond(0) // Reset seconds/millisecond
-      .utc(); // Convert to UTC (avoid TZ offset in final string)
-
-    // Set model value
-    this.emitChange(dateTime);
-
-    this._writing = false;
-    this.markForCheck();
-  }
-
-  private emitChange(value: Moment) {
-
-    // Get the model value
-    const dateStr = toDateISOString(value) || null;
-
-    if (this._formControl.value !== dateStr) {
-
-      // DEBUG
-      //console.debug('[mat-date-time] Emit new value: ' + dateStr);
-
-      // Apply to form control. => Will call writeValue()
-      // NOT NEED, because a formControl should NOT be used by multiple fields
-      //this.formControl.setValue(dateStr, {emitEvent: false});
-
-      // Changes comes from inside function: use the callback
-      this._onChangeCallback(dateStr);
-
-      // Check if need to update controls
-      this._checkIfTouched();
-    }
-  }
-
-  private updateTabIndex() {
-    if (isNil(this._tabindex) || this._tabindex === -1) return; // skip
-
-    // Focus to first input
-    setTimeout(() => {
-      this.matInputs.forEach((elementRef, index) => {
-        setTabIndex(elementRef, this._tabindex + index);
-      });
-      this.markForCheck();
-    });
-  }
-
-  private markAsTouched(opts?: {onlySelf?: boolean}) {
-    this.dayControl.markAsTouched(opts);
-    this.hourControl.markAsTouched(opts);
-    this._onTouchedCallback();
-    this.markForCheck();
-  }
-
-  private markAsDirty(opts?: any) {
-    this._formControl.markAsDirty(opts);
-  }
-
-  private markForCheck() {
-    this.cd.markForCheck();
-  }
-}
-