@sumaris-net/ngx-components 1.17.1 → 1.18.0-rc1

package/package.json

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

package/src/app/shared/hotkeys/hotkeys.service.d.ts

@@ -1,7 +1,7 @@
 import { EventManager } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
-import { ModalController, PopoverController } from '@ionic/angular';
+import { ModalController } from '@ionic/angular';
 interface Options {
     element: any;
     elementName: string;
@@ -14,11 +14,10 @@ export declare class Hotkeys {
     private dialog;
     private document;
     private modalController;
-    private popoverController;
     private _debug;
     private _hotkeys;
     private _defaults;
-    constructor(eventManager: EventManager, dialog: MatDialog, document: any, modalController: ModalController, popoverController: PopoverController);
+    constructor(eventManager: EventManager, dialog: MatDialog, document: any, modalController: ModalController);
     addShortcut(options: Partial<Options>): Observable<UIEvent>;
     openHelpModal(): 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/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;
     }