@sumaris-net/ngx-components 2.7.3-rc3 → 2.7.3-rc30

package/package.json

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

package/src/app/core/services/config/core.config.d.ts

@@ -24,6 +24,7 @@ export declare const CORE_CONFIG_OPTIONS: Readonly<{
     COLOR_WARNING: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
     COLOR_ACCENT: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
     COLOR_DANGER: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
+    FORM_FIELD_BACKGROUND_COLOR: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
     ANDROID_INSTALL_URL: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
     DB_TIMEZONE: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;
     ACCOUNT_READONLY: FormFieldDefinition<string, import("../../../shared/form/field.model").FormFieldType, any>;

package/src/app/shared/form/field.component.d.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@angular/forms';
-import { DisplayFn, FormFieldDefinition, FormFieldType, AppFloatLabelType } from './field.model';
+import { AppFloatLabelType, DisplayFn, FormFieldDefinition, FormFieldType } from './field.model';
 import { TranslateService } from '@ngx-translate/core';
 import { filterNumberInput, selectInputContent } from '../inputs';
 import { Property } from '../types';
 import { ThemePalette } from '@angular/material/core';
 import { PredefinedColors } from '@ionic/core';
 import { MatAutocompleteField } from '../material/autocomplete/material.autocomplete';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 import * as i0 from "@angular/core";
 export declare class AppFormField implements OnInit, ControlValueAccessor {
     protected translate: TranslateService;
@@ -29,12 +30,13 @@ export declare class AppFormField implements OnInit, ControlValueAccessor {
     placeholder: string;
     compact: boolean;
     floatLabel: AppFloatLabelType;
+    appearance: MatFormFieldAppearance;
     tabindex: number;
     autofocus: boolean;
     clearable: boolean;
     chipColor: ThemePalette | PredefinedColors;
-    debug: boolean;
     classList: string;
+    debug: boolean;
     onKeyupEnter: EventEmitter<any>;
     get value(): any;
     matInput: ElementRef;
@@ -67,5 +69,5 @@ export declare class AppFormField implements OnInit, ControlValueAccessor {
     }): void;
     protected updateTabIndex(timeout?: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppFormField, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppFormField, "app-form-field", never, { "definition": { "alias": "definition"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "onKeyupEnter": "keyup.enter"; }, never, ["[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppFormField, "app-form-field", never, { "definition": { "alias": "definition"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; }, { "onKeyupEnter": "keyup.enter"; }, never, ["[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]"], false, never>;
 }

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

@@ -112,6 +112,7 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     filterInputTextFocusEvent(event: FocusEvent): boolean;
     protected filterInputTextBlurEvent(event: FocusEvent): void;
     protected ionSearchBarChanged(event: Event): void;
+    ionSearchBarChanged1(event: any): void;
     filterMatSelectFocusEvent(event: FocusEvent): void;
     filterMatSelectBlurEvent(event: FocusEvent): boolean;
     clearValue(event?: Event): void;

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

@@ -3,7 +3,7 @@ import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@a
 import { BehaviorSubject, Observable } from 'rxjs';
 import { InputElement } from '../../inputs';
 import { SuggestFn } from '../../services/entity-service.class';
-import { DisplayFn, EqualsFn, AppFloatLabelType } from '../../form/field.model';
+import { AppFloatLabelType, DisplayFn, EqualsFn } from '../../form/field.model';
 import { ThemePalette } from '@angular/material/core';
 import { MatAutocompleteFieldConfig } from '../autocomplete/material.autocomplete.config';
 import { MatFormFieldAppearance } from '@angular/material/form-field';

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

@@ -61,6 +61,7 @@ export declare class MatDate implements OnInit, AfterViewInit, OnDestroy, Contro
     clear(): void;
     protected _onDatePickerChange(event: MatDatepickerInputEvent<Moment>): void;
     protected _openDatePickerIfMobile(event: Event): void;
+    protected _onBlur(): void;
     protected _checkIfTouched(opts?: {
         emitEvent?: boolean;
     }): void;

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

@@ -95,6 +95,7 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     protected _onTimePickerChange(timeStr: string): void;
     protected _openDatePickerIfMobile(event?: Event, datePicker?: MatDatepicker<any>): void;
     protected _openTimePickerIfMobile(event?: Event): void;
+    protected _onBlur(): void;
     protected _checkIfTouched(): void;
     protected _preventEvent(event?: Event): void;
     private updatePattern;

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

@@ -48,7 +48,6 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     matError: MatError;
     constructor(formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, defaultOptions?: MatFormFieldDefaultOptions);
     ngOnInit(): void;
-    _getDisplayedMessages(): 'error' | 'hint';
     ngOnDestroy(): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "2.7.3-rc3",
+  "version": "2.7.3-rc30",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -50,8 +50,24 @@
   --mdc-typography-button-letter-spacing: normal;
   --mdc-text-button-label-text-tracking: normal;
 }
+.mat-mdc-menu-item {
+  --mat-menu-item-label-text-tracking: normal;
+  --mat-menu-item-label-text-size: 14px;
+  --mat-menu-item-icon-color: #0000008a;
+}
+.mat-mdc-option {
+  --mat-option-label-text-tracking: normal;
+  --mat-option-label-text-size: 16px;
+}
+.mat-mdc-select {
+  --mat-select-trigger-text-font: inherit;
+  --mat-select-trigger-text-tracking: normal;
+  --mat-select-trigger-text-size: inherit;
+  --mat-select-disabled-trigger-text-color: inherit;
+  --mat-select-trigger-text-line-height: inherit;
+}
 
-// Badge
+  // Badge
 .mdc-tab .mat-badge-content {
     padding-left: 2px;
 }

package/src/theme/_mixins.scss

@@ -98,21 +98,23 @@
   --ion-grid-column-padding: #{$ion-grid-column-padding};
   --ion-padding: #{$ion-padding};
   --ion-margin: #{$ion-margin};
+  --ion-toolbar-height: #{$ion-toolbar-height};
 
   --expansion-panel-padding: var(--ion-padding);
   --expansion-panel-header-padding: var(--ion-padding);
 
   --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-paginator-height: mat.$paginator-height;
-  --ion-toolbar-height: #{$ion-toolbar-height};
+  --mat-tab-link-height: #{$mat-tab-link-height};
+  --mat-tab-bar-height: #{$mat-tab-bar-height};
 
   --app-table-header-height: #{$app-table-header-height};
   --app-toolbar-height: #{$app-toolbar-height};
-  //--app-paginator-height: #{$app-paginator-height};
+  --app-paginator-height: #{$app-paginator-height};
   --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
   --app-footer-height: var(--app-form-buttons-bar-height);
-  --mat-tab-link-height: #{$mat-tab-link-height};
-  --mat-tab-bar-height: #{$mat-tab-bar-height};
+  --app-form-field-background-color: #{$app-form-field-background-color};
+  --app-form-field-disabled-background-color: #{$app-form-field-disabled-background-color};
 }
 
 @mixin css-variables-to-root-mobile() {

package/src/theme/_ngx-components.globals.scss

@@ -16,7 +16,10 @@ $app-form-buttons-bar-height: 56px !default;
 $app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
 $app-table-border-color: rgba(0, 0, 0, 0.08) !default;
 
-$app-form-field-background-color: rgba(0,0,0,0) !default;
-//$app-form-field-background-color: whitesmoke !default;
-$app-form-field-focus-background-color: rgba(0, 0, 0, 0) !default;
-//$app-form-field-focus-background-color: rgba(0, 0, 0, 0.87) !default;
+// Form's field background
+$app-form-field-background-color: rgb(245,245,245) !default;
+$app-form-field-disabled-background-color: #fafafa !default;
+
+// Form fields background : transparent
+//$app-form-field-background-color: transparent !default;
+//$app-form-field-disabled-background-color: transparent !default;

package/src/theme/_ngx-components.scss

@@ -132,18 +132,27 @@ ion-menu.menu-side-left {
 .form-container,
 form.form-container {
   color: #{$app-form-color};
-  --mdc-filled-text-field-container-color: #{$app-form-field-background-color};
-  --mdc-filled-text-field-disabled-container-color: #{$app-form-field-background-color};
-  --mat-form-field-state-layer-color: #{$app-form-field-focus-background-color};
   @include font-size(16px);
 
+  --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
+  --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
+  --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
+  --mat-form-field-container-height: 45px;
+  --mat-form-field-container-text-size: inherit;
+  --mat-form-field-filled-label-display: block;
+  --mat-form-field-container-vertical-padding: 8px;
+  --mat-form-field-filled-with-label-container-padding-top: 18px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 0px;
+  --mdc-filled-text-field-label-text-tracking: normal;
+  --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
+
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
     color: #{$app-form-color-disabled} !important;
   }
 
   .mat-form-field-disabled {
-    .mat-mdc-form-field-infix{
+    .mat-mdc-form-field-infix {
       min-height: 41px;
     }
   }
@@ -166,16 +175,21 @@ form.form-container {
     mat-icon[matPrefix],
     .mat-mdc-form-field-icon-prefix {
 
+      --mdc-icon-button-icon-size: 24px;
+      --mdc-icon-button-icon-color: inherit;
+      --mdc-icon-button-state-layer-size: 48px;
+      --mdc-icon-button-margin-vertical: 12px;
+
       ion-icon, .mat-icon {
-        $font-size: calculateRem(24px);
-        $margin-vertical: calculateRem(4px);
-        font-size: $font-size !important;
+        font-size: var(--mdc-icon-button-icon-size) !important;
         line-height: 1.125;
-        height: $font-size;
-        width: $font-size;
-        margin-left: $margin-vertical;
-        margin-right: $margin-vertical;
+        height: var(--mdc-icon-button-icon-size);
+        width: var(--mdc-icon-button-icon-size);
+        margin-left: var(--mdc-icon-button-margin-vertical);
+        margin-right: var(--mdc-icon-button-margin-vertical);
         position: relative;
+        color: var(--mdc-icon-button-icon-color);
+        fill: var(--mdc-icon-button-icon-color);
       }
     }
 
@@ -183,15 +197,24 @@ form.form-container {
     mat-icon[matSuffix],
     .mat-mdc-form-field-icon-suffix {
       white-space: nowrap;
+      align-self: baseline;
 
       .mat-mdc-icon-button {
-        --mdc-icon-button-icon-size: 24px;
-        --mdc-icon-button-state-layer-size: 28px;
-        padding: 2px;
+        --mdc-icon-button-state-layer-size: 24px;
+        --mdc-icon-button-icon-size: 16px;
+        --mdc-icon-button-padding: 4px;
+        padding: var(--mdc-icon-button-padding);
+
+        &.large {
+          --mdc-icon-button-state-layer-size: 48px;
+          --mdc-icon-button-icon-size: 24px;
+          --mdc-icon-button-padding: 12px;
+        }
 
-        ion-icon, .mat-icon, .mat-icon.large {
+        ion-icon, .mat-icon {
+          height: var(--mdc-icon-button-icon-size);
+          width: var(--mdc-icon-button-icon-size);
           font-size: var(--mdc-icon-button-icon-size);
-          line-height: var(--mdc-icon-button-icon-size);
         }
 
         .mat-mdc-button-touch-target {
@@ -202,7 +225,7 @@ form.form-container {
       ion-icon, .mat-icon {
 
         &.large {
-          $font-size: calculateRem(24px);
+          $font-size: calculateRem(14px);
           font-size: $font-size;
           line-height: 1.125;
         }
@@ -253,12 +276,12 @@ form.form-container {
   /* -- Computed field -- */
 
   // Set color on computed field (if enable or disable)
-  .computed mat-mdc-form-field,
-  mat-mdc-form-field .computed,
-  mat-mdc-form-field.computed,
-  .computed mat-mdc-form-field .mat-mdc-input-element:disabled,
-  mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
-  mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
+  .computed .mat-mdc-form-field,
+  .mat-mdc-form-field .computed,
+  .mat-mdc-form-field.computed,
+  .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
     color: var(--ion-color-primary-tint) !important;
     font-style: italic;
   }
@@ -300,9 +323,6 @@ ion-grid.form-container {
 }
 
 mat-form-field {
-  //mat-error {
-  //  text-align: right;
-  //}
 
   .mat-paginator-page-size-select {
     @include font-size-important(14px);
@@ -351,12 +371,6 @@ mat-option {
     flex-grow: 1;
   }
   .mat-option-text:not(:has(ion-row)),
-
-  // TODO : Disabled : mat-option already have padding : this is redundant
-  //.mdc-list-item__primary-text:not(:has(ion-row)) {
-  //  padding: 0 16px;
-  //}
-
   .mat-option-text:has(ion-searchbar),
   .mdc-list-item__primary-text:has(ion-searchbar) {
     padding: 0 !important;
@@ -384,191 +398,74 @@ mat-option:not(:last-of-type) {
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
 }
-.mat-autocomplete-panel {
-  --min-width: 250px;
+.mat-mdc-autocomplete-panel {
+  --min-width: 200px;
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
   width: var(--max-width) !important;
 }
 
-.mat-autocomplete-panel-medium-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-medium-size.mat-autocomplete-panel,
-.min-width-medium .mat-autocomplete-panel,
-.min-width-medium.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-medium-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-medium-size.mat-mdc-autocomplete-panel,
+.min-width-medium .mat-mdc-autocomplete-panel,
+.min-width-medium.mat-mdc-autocomplete-panel,
+.min-width-medium.mat-mdc-select-panel {
   --min-width: 300px;
 }
-.mat-autocomplete-panel-large-size .mat-autocomplete-panel,
-.mat-autocomplete-panel.mat-autocomplete-panel-large-size,
-.min-width-large .mat-autocomplete-panel,
-.min-width-large.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-large-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-panel-large-size,
+.min-width-large .mat-mdc-autocomplete-panel,
+.min-width-large.mat-mdc-autocomplete-panel,
+.min-width-large.mat-mdc-select-panel{
   --min-width: 400px;
 }
-.mat-autocomplete-panel-xlarge-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-xlarge-size.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-xlarge-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-select-panel {
   --min-width: 450px;
 }
 .mat-select-panel.min-width-80vw,
 .mat-mdc-select-panel.min-width-80vw,
-.min-width-80vw .mat-autocomplete-panel,
-.min-width-80vw.mat-autocomplete-panel {
+.min-width-80vw .mat-mdc-autocomplete-panel,
+.min-width-80vw.mat-mdc-autocomplete-panel {
   --min-width: 80vw;
 }
 
-.mat-autocomplete-panel-center .mat-autocomplete-panel,
-.mat-autocomplete-panel-center.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-center .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-center.mat-mdc-autocomplete-panel {
   margin-left: calc(var(--min-width, 200px) / -2 + 50%) !important;
 }
 
-.mat-autocomplete-panel-full-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-full-size.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-full-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-full-size.mat-mdc-autocomplete-panel {
   --min-width: calc(100vw - 64px);
   --max-width: calc(100vw - 64px);
   position: fixed;
   left: 32px;
 }
 
-.mat-select-panel,
 .mat-mdc-select-panel,
-.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel {
   /* when multiple selection enable */
   mat-pseudo-checkbox {
     margin-left: 8px;
   }
+
+  padding: 0 !important;
 }
 
 ion-list,
-.mat-select-panel,
-.mat-menu-panel,
-.mat-autocomplete-panel {
-
+.mat-mdc-menu-panel {
   &.ion-list-popover {
     padding: 0 !important;
   }
-
-  /* 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;
-    }
-  }
-
-  mat-option.mat-select-searchbar,
-  mat-option.mat-autocomplete-searchbar
-  {
-    padding: 0 !important;
-    height: 58px !important;
-    background-color: var(--ion-color-secondary100) !important;
-
-    /* hide pseudo checkbox, in the searchbar*/
-    mat-pseudo-checkbox {
-      visibility: hidden;
-      display: none;
-    }
-
-    &.mat-select-searchbar-sticky {
-      z-index: 1001;
-      /* Set header as sticky*/
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-    }
-  }
-
-  ion-row.ion-list-header,
-  ion-row.mat-select-header,
-  ion-row.mat-menu-header,
-  ion-row.mat-autocomplete-header {
-    &.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;
-      }
-      &.mat-select-searchbar-sticky {
-        /* offset because of the searchbar height */
-        top: 58px;
-      }
-    }
-
-  }
-
-  ion-row.ion-list-footer,
-  ion-row.mat-select-footer,
-  ion-row.mat-menu-footer,
-  ion-row.mat-autocomplete-footer,
-  mat-option.mat-autocomplete-footer {
-    /* Set footer as sticky*/
-    position: -webkit-sticky;
-    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);
-    font-weight: 500;
-    height: 20px;
-    line-height: 20px;
-
-    ion-col {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ion-row {
-    --ion-grid-column-padding: 0;
-
-    ion-col {
-      --ion-padding-start: 8px;
-      padding: 0 !important;
-      padding-left: var(--ion-padding-start) !important;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-
-  }
-
-  .odd {
-    background: var(--ion-light-color-shade, $light);
-  }
-
-  .mat-option[no-padding],
-  mat-option[no-padding] {
-    padding: 0 !important;
-  }
 }
 
+ion-list,
+.mat-mdc-menu-panel,
 .mat-mdc-select-panel,
-.mat-mdc-autocomplete-panel
-//ion-list,
-//.mat-menu-panel,
-{
-
-  //&.ion-list-popover {
-    padding: 0 !important;
-  //}
+.mat-mdc-autocomplete-panel {
 
   /* Avoid bad display, when opening panel for the first time  */
   &.ng-trigger-transformPanel {
@@ -581,12 +478,19 @@ ion-list,
     }
   }
 
-  mat-option.mat-select-searchbar,
-  mat-option.mat-autocomplete-searchbar
+  .mat-mdc-optgroup.mat-select-searchbar,
+  .mat-mdc-option.mat-autocomplete-searchbar
   {
     padding: 0 !important;
     height: 58px !important;
     background-color: var(--ion-color-secondary100) !important;
+    pointer-events: inherit !important;
+
+    .mat-mdc-optgroup-label {
+      background-color: var(--ion-color-secondary100) !important;
+      padding: 0;
+      display: block;
+    }
 
     /* hide pseudo checkbox, in the searchbar*/
     mat-pseudo-checkbox {
@@ -671,6 +575,7 @@ ion-list,
       padding-left: var(--ion-padding-start) !important;
       text-overflow: ellipsis;
       overflow: hidden;
+      white-space: nowrap;
     }
 
 
@@ -680,12 +585,13 @@ ion-list,
     background: var(--ion-light-color-shade, $light);
   }
 
-  .mat-option[no-padding],
+  .mat-mdc-option[no-padding],
   mat-option[no-padding] {
     padding: 0 !important;
   }
 }
 
+
 mat-expansion-panel {
 
   &.filter-panel {
@@ -843,7 +749,7 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
 // --------------------------------------------------
 
 
-.mat-menu-panel {
+.mat-mdc-menu-panel {
 
   // Max width = 400px
   &.mat-menu-size-400 {
@@ -860,31 +766,31 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
 
   // No padding
   &.ion-no-padding {
-    .mat-menu-content {
+    .mat-mdc-menu-content {
       padding: 0 !important;
     }
   }
 
   // Small menu item (e.g. for actions on a table row)
-  &.mat-menu-small-item-height .mat-menu-item,
-  .mat-menu-item.mat-menu-item-small-height
+  &.mat-mdc-menu-item-small-height .mat-mdc-menu-item,
+  .mat-mdc-menu-item.mat-mdc-menu-item-small-height
   {
     padding: 0 8px;
     height: 35px;
     line-height: 35px;
   }
   //  Reduce the font size, on label just inside a mat-menu (e.g. see trips.page.html)
-  .mat-menu-content > ion-label {
+  .mat-mdc-menu-content > ion-label {
     @include font-size(12px);
   }
 
-  .mat-menu-content ion-item > ion-icon[slot="start"] {
+  .mat-mdc-menu-content ion-item > ion-icon[slot="start"] {
     margin-right: 16px;
     vertical-align: middle;
   }
 
   // Menu title (e.g. see extraction map)
-  .mat-menu-item.mat-menu-title {
+  .mat-mdc-menu-item.mat-mdc-menu-title {
     padding: 0 8px;
     height: 27px;
     line-height: 27px;
@@ -962,7 +868,6 @@ ngx-material-timepicker-content {
 
 .mat-mdc-form-field-type-mat-chip-grid {
   .mat-mdc-form-field-infix {
-    padding-bottom: 5px !important;
     --mdc-chip-container-height: 24px !important;
   }
 }