@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/shared/material/chips/testing/chips.test.html

@@ -1,207 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Chips field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    <ion-grid>
-      <ion-row>
-        <ion-col size="6">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-text color="primary">Suggest() function</ion-text>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-chips-field
-                      formControlName="entity"
-                      placeholder="A chip field"
-                      [appearance]="appearance"
-                      [config]="autocompleteFields.get('entity-suggestFn')"
-                      [logPrefix]="'[mat-chips-empty] '"
-                      chipColor="accent"
-                      [debug]="true"
-                    ></mat-chips-field>
-                  </ion-col>
-
-                  <ion-col>
-                    <mat-form-field [appearance]="appearance">
-                      <mat-label>Another field</mat-label>
-                      <input matInput type="text" />
-                    </mat-form-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row>
-                  <ion-col>
-                    {{ form.controls.entity.value | json }}
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col size="6">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-text color="primary">Required</ion-text>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <pre><small>required: true</small></pre>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-chips-field
-                      formControlName="requiredEntity"
-                      placeholder="A required chip field"
-                      [appearance]="appearance"
-                      [config]="autocompleteFields.get('entity-items')"
-                      [logPrefix]="'[mat-chips-required] '"
-                      chipColor="accent"
-                      required
-                      [debug]="true"
-                    ></mat-chips-field>
-                  </ion-col>
-
-                  <ion-col>
-                    <mat-form-field [appearance]="appearance">
-                      <mat-label>Another required field</mat-label>
-                      <input matInput type="text" required />
-                    </mat-form-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row>
-                  <ion-col>
-                    {{ form.controls.entity.value | json }}
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Suggest() function with initial value</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-chips-field
-                formControlName="entityInitial"
-                [config]="autocompleteFields.get('entity-suggestFn')"
-                placeholder="A suggestFn field"
-                [logPrefix]="'[mat-chips-initialized] '"
-                chipColor="primary"
-                [debug]="true"
-              ></mat-chips-field>
-              {{ form.controls.entityInitial.value | json }}
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Disabled control</ion-label>
-              </ion-card-title>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-chips-field
-                formControlName="disableEntity"
-                [config]="autocompleteFields.get('entity-suggestFn')"
-                [equals]="equals"
-                placeholder="A disabled field"
-                [logPrefix]="'[mat-chips-disabled] '"
-                chipColor="warn"
-                [debug]="true"
-              ></mat-chips-field>
-              {{ form.controls.disableEntity.value | json }}
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Readonly control</ion-label>
-              </ion-card-title>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-chips-field
-                formControlName="entity"
-                [config]="autocompleteFields.get('entity-suggestFn')"
-                [equals]="equals"
-                placeholder="A readonly field"
-                [logPrefix]="'[mat-chips-readonly] '"
-                [readonly]="true"
-              ></mat-chips-field>
-              {{ form.controls.entity?.value | json }}
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Suggest with length threshold</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>
-                          suggest: (value, filter) => LoadResult&lt;any&gt;
-                          suggestLengthThreshold: '3'</pre
-                    >
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-chips-field
-                formControlName="entity"
-                placeholder="Entity"
-                [config]="autocompleteFields.get('entity-suggestFn')"
-                [equals]="equals"
-                [suggestLengthThreshold]="3"
-                [logPrefix]="'[mat-chips-suggestLengthThreshold] '"
-                [debug]="true"
-              ></mat-chips-field>
-              {{ form.controls.entity?.value | json }}
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ion-content>

package/src/app/shared/material/chips/testing/chips.test.ts

@@ -1,169 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
-import { SharedValidators } from '../../../validator/validators';
-import { isNil, isNotNil, sleep } from '../../../functions';
-import { LoadResult } from '../../../services/entity-service.class';
-import { EntityUtils } from '../../../../core/services/model/entity.model';
-import { suggestFromArray } from '../../../services';
-import { MatAutocompleteConfigHolder } from '../../autocomplete/material.autocomplete.config';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
-
-class EntityTestClass {
-  id: number;
-  label: string;
-  name: string;
-}
-
-const FAKE_ENTITIES: EntityTestClass[] = [
-  { id: 1, label: 'AAA', name: 'Item A' },
-  { id: 2, label: 'BBB', name: 'Item B' },
-  { id: 3, label: 'CCC', name: 'Item C' },
-  { id: 4, label: 'DDD', name: 'Item D' },
-  { id: 5, label: 'EEE', name: 'Item E' },
-  { id: 6, label: 'FFF', name: 'Item F' },
-  { id: 7, label: 'GGG', name: 'Item G' },
-];
-
-function deepCopy(values?: EntityTestClass[], size?: number): EntityTestClass[] {
-  if (isNil(size)) {
-    return (values || FAKE_ENTITIES).map((entity) => Object.assign({}, entity));
-  }
-
-  let result = [];
-  let i = 1;
-  while (result.length < size) {
-    result = result.concat(
-      (values || FAKE_ENTITIES).map((entity) => {
-        const name = entity.name + ' #' + i;
-        return { ...entity, id: i++, name };
-      })
-    );
-  }
-  return result.slice(0, size);
-}
-
-@Component({
-  selector: 'app-chips-test',
-  templateUrl: './chips.test.html',
-})
-export class ChipsTestPage implements OnInit {
-  private _items = deepCopy(FAKE_ENTITIES, 100);
-  private _$items = new BehaviorSubject<EntityTestClass[]>(undefined);
-
-  form: UntypedFormGroup;
-  autocompleteFields = new MatAutocompleteConfigHolder();
-  appearance: MatFormFieldAppearance = 'fill';
-  mobile = true;
-
-  constructor(protected formBuilder: UntypedFormBuilder) {
-    this.form = formBuilder.group({
-      entity: [null, SharedValidators.entity],
-      entityInitial: [null, SharedValidators.entity],
-      disableEntity: [null, SharedValidators.entity],
-      farEntity: [null, SharedValidators.entity],
-      requiredEntity: [null, Validators.compose([Validators.required, SharedValidators.entities])],
-    });
-
-    this.form.get('disableEntity').disable();
-  }
-
-  ngOnInit() {
-    // From suggest
-    this.autocompleteFields.add('entity-suggestFn', {
-      suggestFn: (value, filter) => this.suggest(value, filter),
-      attributes: ['label', 'name'],
-      displayWith: this.entityToString,
-      equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0,
-    });
-
-    // From items
-    this.autocompleteFields.add('entity-items', {
-      items: this._items.slice(),
-      attributes: ['label', 'name'],
-      displayWith: this.entityToString,
-      equals: (o1, o2) => EntityUtils.compare(o1, o2, 1, 'id') === 0,
-    });
-
-    // Far entity, in the list
-    this.autocompleteFields.add('entity-far', {
-      suggestFn: (value, filter) => this.suggest(value, filter),
-      attributes: ['label', 'name'],
-      displayWith: this.entityToString,
-    });
-
-    // From $items observable
-    this.autocompleteFields.add('entity-$items', {
-      items: this._$items,
-      attributes: ['label', 'name'],
-      displayWith: this.entityToString,
-    });
-
-    this.loadData();
-  }
-
-  // Load the form with data
-  async loadData() {
-    const items = deepCopy(FAKE_ENTITIES);
-    const data = {
-      entity: items.slice(0, 1), // Select the first
-      entityInitial: items.slice(1, 2),
-      disableEntity: items.slice(1, 2),
-      farEntity: items[2],
-      requiredEntity: null,
-    };
-
-    this.form.setValue(data);
-
-    // Load observables
-    setTimeout(() => this.loadItems(), 1000);
-  }
-
-  async loadItems() {
-    this._$items.next(this._items.slice());
-  }
-
-  entityToString(item: any) {
-    return [(item && item.label) || undefined, (item && item.name) || undefined].filter(isNotNil).join(' - ');
-  }
-
-  async suggest(value: any, filter?: any): Promise<LoadResult<EntityTestClass>> {
-    filter = { offset: 0, size: 30, ...filter };
-    const res = suggestFromArray(this._items, value, {
-      ...filter,
-      searchAttributes: ['label', 'name'],
-    });
-
-    // Simulate a size = 30
-    const total = res.total || res.data.length;
-
-    const nextOffset = filter.offset + res.data.length;
-    if (nextOffset < total) {
-      filter = { ...filter, offset: nextOffset };
-      return {
-        total,
-        data: res.data,
-        fetchMore: async (variables) => {
-          await sleep(1000); // Simulate access to server
-          return this.suggest(value, { ...filter, ...variables });
-        },
-      };
-    }
-
-    return res;
-  }
-
-  doSubmit(_) {
-    console.debug('Validate form: ', this.form.value);
-  }
-
-  equals(o1: EntityTestClass, o2: EntityTestClass): boolean {
-    return o1 && o2 && o1.id === o2.id;
-  }
-
-  /* -- protected methods -- */
-
-  stringify(value: any) {
-    return JSON.stringify(value);
-  }
-}

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

@@ -1,42 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatCommonModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { SharedPipesModule } from '../../pipes/pipes.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatDate } from './material.date';
-import { MatDateTime } from './material.datetime';
-import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDateShort } from './material.dateshort';
-import { SharedDirectivesModule } from '../../directives/directives.module';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MaskitoDirective } from '@maskito/angular';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    ReactiveFormsModule,
-    SharedPipesModule,
-    MatCommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatIconModule,
-    MatButtonModule,
-    MatDatepickerModule,
-    MatMomentDateModule,
-    MaskitoDirective,
-    TranslateModule.forChild(),
-    SharedDirectivesModule,
-    NgxMatTimepickerModule,
-  ],
-  exports: [MatIconModule, MatDate, MatDateTime, MatDateShort],
-  declarations: [MatDate, MatDateTime, MatDateShort],
-})
-export class SharedMatDateTimeModule {}

package/src/app/shared/material/datetime/material.date.html

@@ -1,186 +0,0 @@
-<!-- readonly -->
-@if (readonly) {
-  <mat-form-field
-    [floatLabel]="floatLabel | asFloatLabelType"
-    [appearance]="appearance"
-    [subscriptSizing]="subscriptSizing"
-    class="mat-form-field-disabled"
-  >
-    <div matPrefix>
-      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
-    </div>
-    @if (floatLabel !== 'never' && !!placeholder) {
-      <mat-label>{{ placeholder }}</mat-label>
-    }
-    <input matInput hidden type="text" readonly [formControl]="formControl" />
-    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>
-    <div matSuffix>
-      <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
-    </div>
-
-    <!-- hints -->
-    <mat-hint [class.cdk-visually-hidden]="formControl.invalid">
-      <ng-container *ngTemplateOutlet="matHintTemplate"></ng-container>
-    </mat-hint>
-  </mat-form-field>
-} @else {
-  <mat-form-field
-    [floatLabel]="floatLabel | asFloatLabelType"
-    (focus)="_openDatePickerIfMobile($event)"
-    (click)="_openDatePickerIfMobile($event)"
-    [appearance]="appearance"
-  >
-    <div matPrefix>
-      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
-    </div>
-
-    @if (floatLabel !== 'never' && !!placeholder) {
-      <mat-label>{{ placeholder }}</mat-label>
-    }
-    <!-- Desktop -->
-    @if (!mobile) {
-      <input
-        matInput
-        #matInput
-        autocomplete="off"
-        type="text"
-        [maskito]="maskitoOptions"
-        [formControl]="textControl"
-        (blur)="_onBlur()"
-        (keyup.arrowDown)="openDatePicker()"
-        (keyup.escape)="_preventEvent($event)"
-        [required]="required"
-        [tabindex]="tabindex"
-        [appAutofocus]="autofocus"
-      />
-      <input
-        type="text"
-        [formControl]="formControl"
-        hidden
-        [matDatepicker]="datePicker"
-        [matDatepickerFilter]="datePickerFilter"
-        (dateChange)="_onDatePickerChange($event)"
-        readonly
-      />
-    } @else {
-      <!-- Mobile -->
-      <input
-        #matInput
-        autocomplete="off"
-        type="text"
-        class="mat-mdc-form-field-input-control mdc-text-field__input"
-        [formControl]="textControl"
-        [required]="required"
-        [tabindex]="tabindex"
-        readonly
-      />
-      <input
-        matInput
-        type="text"
-        [formControl]="formControl"
-        hidden
-        [matDatepicker]="datePicker"
-        [matDatepickerFilter]="datePickerFilter"
-        (dateChange)="_onDatePickerChange($event)"
-        readonly
-      />
-    }
-
-    <div matSuffix>
-      <button type="button" mat-icon-button tabindex="-1" (click)="openDatePicker()" [disabled]="disabled">
-        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>
-      </button>
-
-      @if (clearable) {
-        <button
-          mat-icon-button
-          tabindex="-1"
-          type="button"
-          (click)="clear($event)"
-          [hidden]="formControl.disabled || !formControl.value"
-        >
-          <mat-icon>close</mat-icon>
-        </button>
-      }
-
-      <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
-    </div>
-
-    <!-- errors -->
-    <mat-error *ngIf="formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey">
-      @switch (errorKey) {
-        @case ('required') {
-          <span translate>ERROR.FIELD_REQUIRED</span>
-        }
-        @case ('validDate') {
-          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>
-        }
-        @case ('dateIsAfter') {
-          <span>
-            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}
-          </span>
-        }
-        @case ('dateIsBefore') {
-          <span>
-            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}
-          </span>
-        }
-        @case ('dateRange') {
-          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>
-        }
-        @case ('dateMaxDuration') {
-          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>
-        }
-        @case ('dateMinDuration') {
-          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>
-        }
-        @case ('msg') {
-          <span>
-            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}
-          </span>
-        }
-      }
-    </mat-error>
-    <ng-container *ngTemplateOutlet="matErrorTemplate"></ng-container>
-    <!-- hints -->
-    @if (!formControl.invalid) {
-      <mat-hint>
-        <ng-container *ngTemplateOutlet="matHintTemplate"></ng-container>
-      </mat-hint>
-    }
-  </mat-form-field>
-
-  <mat-datepicker #datePicker [touchUi]="mobile" [disabled]="disabled" [startAt]="startDate">
-    <!-- Date picker buttons -->
-    @if (mobile) {
-      <mat-datepicker-actions>
-        <ion-button fill="clear" color="dark" matDatepickerCancel>
-          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-        </ion-button>
-        <ion-button fill="solid" color="tertiary" matDatepickerApply>
-          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-        </ion-button>
-      </mat-datepicker-actions>
-    }
-  </mat-datepicker>
-}
-
-<ng-template #matPrefixTemplate>
-  <ng-content select="[matPrefix]"></ng-content>
-</ng-template>
-
-<ng-template #matSuffixTemplate>
-  <ng-content select="[matSuffix]"></ng-content>
-</ng-template>
-
-<ng-template #matErrorTemplate>
-  <ng-content select="mat-error,[matError]"></ng-content>
-</ng-template>
-
-<ng-template #matHintTemplate>
-  <div class="mat-mdc-form-field-hint-wrapper">
-    <ng-content select="mat-hint:not([align='end']),[matHint]"></ng-content>
-    <div class="mat-mdc-form-field-hint-spacer"></div>
-    <ng-content select="mat-hint[align='end']"></ng-content>
-  </div>
-</ng-template>

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

@@ -1,17 +0,0 @@
-:host {
-  display: inline-block;
-  width: 100%;
-  position: relative;
-}
-
-mat-form-field {
-  input[readonly] {
-    user-select: none !important;
-  }
-  .datetime-md {
-    padding: 0 !important;
-  }
-  button[hidden] {
-    display: none;
-  }
-}