@sumaris-net/ngx-components 1.17.1 → 1.18.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "1.17.1",
+  "version": "1.18.1",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/app/core/services/platform.service.d.ts

@@ -60,8 +60,8 @@ export declare class PlatformService extends StartableService {
     isCordova(): boolean;
     isAndroidCordova(): boolean;
     isIOSCordova(): boolean;
-    isWeb(): boolean;
     isApp(): boolean;
+    isWeb(): boolean;
     isMobileWeb(): boolean;
     get canDownload(): boolean;
     get canOpenFile(): boolean;

package/src/app/shared/directives/autofocus.directive.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Platform } from '@ionic/angular';
 import { Keyboard } from '@ionic-native/keyboard/ngx';
 export declare class AutofocusDirective implements AfterContentInit, OnChanges, OnDestroy {
     protected keyboard: Keyboard;
@@ -7,7 +8,7 @@ export declare class AutofocusDirective implements AfterContentInit, OnChanges,
     private readonly _elementRef;
     private readonly _mobile;
     private _timer;
-    constructor(elementRef: ElementRef, keyboard: Keyboard);
+    constructor(platform: Platform, elementRef: ElementRef, keyboard: Keyboard);
     ngAfterContentInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;

package/src/app/shared/material/autocomplete/material.autocomplete.d.ts

@@ -7,6 +7,7 @@ import { DisplayFn, EqualsFn } from '../../form/field.model';
 import { FloatLabelType } from '@angular/material/form-field';
 import { MatSelect } from '@angular/material/select';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { IonSearchbar } from '@ionic/angular';
 export declare interface MatAutocompleteFieldConfig<T = any, F = any> {
     attributes: string[];
     suggestFn?: (value: any, options?: any) => Promise<T[] | LoadResult<T>>;
@@ -14,6 +15,7 @@ export declare interface MatAutocompleteFieldConfig<T = any, F = any> {
     items?: Observable<T[]> | T[];
     columnSizes?: (number | 'auto' | undefined)[];
     columnNames?: (string | undefined)[];
+    multiple?: boolean;
     displayWith?: DisplayFn;
     equals?: EqualsFn;
     showAllOnFocus?: boolean;
@@ -75,6 +77,8 @@ export declare class MatAutocompleteField implements OnInit, OnDestroy, InputEle
     suggestLengthThreshold: number;
     showLoadingSpinner: boolean;
     debug: boolean;
+    showSearchBar: boolean;
+    stickySearchBar: boolean;
     clicked: EventEmitter<MouseEvent>;
     blurred: EventEmitter<FocusEvent>;
     focused: EventEmitter<FocusEvent>;
@@ -82,15 +86,14 @@ export declare class MatAutocompleteField implements OnInit, OnDestroy, InputEle
     keydownEscape: EventEmitter<any>;
     keyupEnter: EventEmitter<any>;
     matSelect: MatSelect;
+    ionSearchbar: IonSearchbar;
     matInputText: ElementRef;
     autocomplete: MatAutocomplete;
     autocompleteTrigger: MatAutocompleteTrigger;
     _readonly: boolean;
     _tabindex: number;
-    matSelectItems$: Observable<any[]>;
     $inputItems: BehaviorSubject<any[]>;
     $filteredItems: BehaviorSubject<any[]>;
-    searchable: boolean;
     displayValue: string;
     _moreItemsCount: number;
     _fetchMore$: EventEmitter<Event>;
@@ -117,6 +120,7 @@ export declare class MatAutocompleteField implements OnInit, OnDestroy, InputEle
     get disabled(): boolean;
     get enabled(): boolean;
     get loading(): boolean;
+    get desktop(): boolean;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -130,9 +134,10 @@ export declare class MatAutocompleteField implements OnInit, OnDestroy, InputEle
     focus(): void;
     filterInputTextFocusEvent(event: FocusEvent): boolean;
     filterInputTextBlurEvent(event: FocusEvent): boolean;
+    ionSearchBarChanged(event: CustomEvent<InputEvent>): void;
+    ionSearchBarClear(event: UIEvent): void;
     filterMatSelectFocusEvent(event: FocusEvent): void;
     filterMatSelectBlurEvent(event: FocusEvent): boolean;
-    toggleSearch(event: UIEvent): void;
     clearValue(event: UIEvent): void;
     _initAutocompleteInfiniteScroll(threshold?: string): void;
     _initMatSelectInfiniteScroll(threshold?: string): void;

package/src/app/shared/material/autocomplete/testing/autocomplete.test.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import { OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatAutocompleteConfigHolder } from '../material.autocomplete';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { MatAutocompleteConfigHolder, MatAutocompleteField } from '../material.autocomplete';
 import { LoadResult } from '../../../services/entity-service.class';
 import Timer = NodeJS.Timer;
 declare class EntityTestClass {
@@ -20,18 +20,20 @@ export declare class AutocompleteTestPage implements OnInit {
     memoryAutocompleteFieldName: string;
     memoryTimer: Timer;
     mode: 'mobile' | 'desktop' | 'memory' | 'temp';
+    entitiesArray: FormArray;
     constructor(formBuilder: FormBuilder);
     ngOnInit(): void;
     loadData(): Promise<void>;
     loadItems(): Promise<void>;
     entityToString(item: any): string;
+    entitiesToString(items: any[]): string;
     suggest(value: any, filter?: any): Promise<LoadResult<EntityTestClass>>;
     doSubmit(event: any): void;
     equals(o1: EntityTestClass, o2: EntityTestClass): boolean;
     toggleMode(value: any): void;
     startMemoryTimer(): void;
     stopMemoryTimer(): void;
-    updateFilter(fieldName: string): void;
+    updateFilter(autocompleteField: MatAutocompleteField, fieldName: string): void;
     stringify(value: any): string;
 }
 export {};

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

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core';
-import { Platform } from '@ionic/angular';
 import { AbstractControl, ControlValueAccessor, FormBuilder, FormControl, FormGroupDirective } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Moment } from 'moment';
@@ -9,7 +8,6 @@ import { FloatLabelType } from '@angular/material/form-field';
 import { DateFilterFn, MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { DateAdapter } from '@angular/material/core';
 export declare class MatDate implements OnInit, OnDestroy, ControlValueAccessor, InputElement {
-    private platform;
     private dateAdapter;
     private translate;
     private formBuilder;
@@ -29,12 +27,12 @@ export declare class MatDate implements OnInit, OnDestroy, ControlValueAccessor,
     dayPattern: string;
     locale: string;
     readonly dayMask: (string | RegExp)[];
+    mobile: boolean;
     formControl: FormControl;
     formControlName: string;
     placeholder: string;
     floatLabel: FloatLabelType;
     required: boolean;
-    mobile: boolean;
     compact: boolean;
     placeholderChar: string;
     autofocus: boolean;
@@ -49,7 +47,7 @@ export declare class MatDate implements OnInit, OnDestroy, ControlValueAccessor,
     get value(): any;
     datePicker: MatDatepicker<Moment>;
     matInputs: QueryList<ElementRef>;
-    constructor(platform: Platform, dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
+    constructor(dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
     ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: any): void;

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

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, ElementRef, OnInit, QueryList } from '@angular/core';
-import { Platform } from '@ionic/angular';
 import { AbstractControl, ControlValueAccessor, FormBuilder, FormControl, FormGroupDirective } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Moment } from 'moment/moment';
@@ -21,13 +20,13 @@ export declare class MatDateShort implements OnInit, ControlValueAccessor, Input
     protected disabling: boolean;
     protected _tabindex: number;
     protected keyboardHideDelay: number;
-    mobile: boolean;
     dayControl: AbstractControl;
     displayPattern: string;
     dayPattern: string;
     _value: Moment;
     locale: string;
     dayMask: RegExp[];
+    mobile: boolean;
     disabled: boolean;
     formControl: FormControl;
     formControlName: string;
@@ -45,7 +44,7 @@ export declare class MatDateShort implements OnInit, ControlValueAccessor, Input
     datePicker2: MatDatepicker<Moment>;
     matInputs: QueryList<ElementRef>;
     get value(): any;
-    constructor(platform: Platform, dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
+    constructor(dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
     ngOnInit(): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;

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

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core';
-import { Platform } from '@ionic/angular';
 import { DateAdapter } from '@angular/material/core';
 import { FloatLabelType } from '@angular/material/form-field';
 import { ControlValueAccessor, FormBuilder, FormControl, FormGroupDirective } from '@angular/forms';
@@ -19,7 +18,6 @@ declare interface NgxTimePicker {
     close(): any;
 }
 export declare class MatDateTime implements OnInit, OnDestroy, ControlValueAccessor, InputElement {
-    private platform;
     private dateAdapter;
     private translate;
     private formBuilder;
@@ -61,7 +59,7 @@ export declare class MatDateTime implements OnInit, OnDestroy, ControlValueAcces
     datePicker: MatDatepicker<Moment>;
     timePicker: NgxTimePicker;
     matInputs: QueryList<ElementRef>;
-    constructor(platform: Platform, dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
+    constructor(dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, keyboard: Keyboard, formGroupDir: FormGroupDirective);
     ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: any): void;

package/src/app/shared/material/datetime/testing/mat-date.test.d.ts

@@ -1,10 +1,8 @@
 /// <reference types="node" />
 import { ChangeDetectorRef, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Platform } from '@ionic/angular';
 import Timer = NodeJS.Timer;
 export declare class DateTestPage implements OnInit {
-    protected platform: Platform;
     protected formBuilder: FormBuilder;
     protected cd: ChangeDetectorRef;
     showLogPanel: boolean;
@@ -14,7 +12,7 @@ export declare class DateTestPage implements OnInit {
     memoryTimer: Timer;
     timezone: string;
     form: FormGroup;
-    constructor(platform: Platform, formBuilder: FormBuilder, cd: ChangeDetectorRef);
+    constructor(formBuilder: FormBuilder, cd: ChangeDetectorRef);
     ngOnInit(): void;
     loadData(): Promise<void>;
     doSubmit(event: any): void;

package/src/app/shared/material/latlong/material.latlong.d.ts

@@ -1,12 +1,10 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { Platform } from '@ionic/angular';
 import { FloatLabelType } from '@angular/material/form-field';
 import { ControlValueAccessor, FormBuilder, FormControl, FormGroupDirective } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { LatLongFormatFn, LatLongFormatOptions, LatLongPattern } from './latlong.utils';
 import { TextMaskConfig } from 'angular2-text-mask';
 export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueAccessor {
-    private platform;
     private translate;
     private formBuilder;
     private cd;
@@ -44,7 +42,7 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     onBlur: EventEmitter<FocusEvent>;
     onFocus: EventEmitter<FocusEvent>;
     inputElement: ElementRef;
-    constructor(platform: Platform, translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
+    constructor(translate: TranslateService, formBuilder: FormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
     ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(obj: any): void;

package/src/app/shared/services/entity-service.class.d.ts

@@ -16,7 +16,10 @@ export declare interface LoadResult<T> {
     errors?: any[];
     fetchMore?: FetchMoreFn<LoadResult<T>>;
 }
-export declare type SuggestFn<T, F> = (value: any, filter?: F, sortBy?: string, sortDirection?: SortDirection) => Promise<T[] | LoadResult<T>>;
+export declare type SuggestFn<T, F> = (value: any, filter?: F, sortBy?: string | keyof T, sortDirection?: SortDirection, opts?: {
+    fetchPolicy: FetchPolicy;
+    [key: string]: any;
+}) => Promise<T[] | LoadResult<T>>;
 export declare interface SuggestService<T, F> {
     suggest: SuggestFn<T, F>;
 }

package/src/theme/_ngx-components.scss

@@ -274,7 +274,7 @@ mat-option {
   }
 }
 
-mat-option:not(:last-child) {
+mat-option:not(:last-of-type) {
   border-bottom: 1px solid #{$app-select-option-border-color};
 }
 
@@ -322,31 +322,77 @@ mat-option:not(:last-child) {
   left: 0;
 }
 
+.mat-select-panel,
+.mat-autocomplete-panel {
+  /* when multiple selection enable */
+  mat-pseudo-checkbox {
+    margin-left: 8px;
+  }
+}
 .mat-select-panel,
 .mat-menu-panel,
 .mat-autocomplete-panel {
 
+  /* Avoid bad display, when opening panel for the first time  */
+  &.ng-trigger-transformPanel {
+    ion-searchbar.mat-select-header,
+    ion-searchbar.mat-autocomplete-header {
+      visibility: visible;
+      display: flex;
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  ion-searchbar.mat-select-header,
+  ion-searchbar.mat-autocomplete-header
+  {
+    visibility: hidden;
+    display: none;
+    opacity: 0;
+
+    height: 58px;
+    background-color: var(--ion-color-secondary100) !important;
+
+    &.ion-searchbar-sticky {
+      z-index: 1001;
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+    }
+  }
+
   ion-row.mat-select-header,
   ion-row.mat-menu-header,
   ion-row.mat-autocomplete-header {
-    /* Set header as sticky*/
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1001;
-
-    background-color: var(--ion-color-secondary);
-    color: var(--ion-color-secondary-contrast);
-    border-bottom: 1px solid #{$app-select-option-border-color};
-    @include font-size(12px);
-    font-weight: 500;
-    height: 20px;
-    line-height: 20px;
-
-    ion-col {
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    &.multiple {
+      /* Offset due to mat-pseudo-checkbox */
+      padding-left: 32px;
+    }
+    &.column {
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 1001;
+      background-color: var(--ion-color-secondary);
+      border-bottom: 1px solid #{$app-select-option-border-color};
+      color: var(--ion-color-secondary-contrast);
+      line-height: 20px;
+      @include font-size(12px);
+      font-weight: 500;
+      height: 20px;
+      ion-col {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      &.ion-searchbar-sticky {
+        /* offset because of the searchbar height */
+        top: 58px;
+      }
     }
+
   }
 
   ion-row.mat-select-footer,
@@ -357,7 +403,7 @@ mat-option:not(:last-child) {
     position: sticky;
     bottom: 0;
     z-index: 1001;
-
+    border-top: 1px solid #{$app-select-option-border-color};
     background-color: whitesmoke;
     color: var(--ion-color-medium);
     @include font-size(12px);
@@ -375,8 +421,9 @@ mat-option:not(:last-child) {
     --ion-grid-column-padding: 0;
 
     ion-col {
+      --ion-padding-start: 8px;
       padding: 0 !important;
-      padding-left: 8px !important;
+      padding-left: var(--ion-padding-start) !important;
       text-overflow: ellipsis;
       overflow: hidden;
     }