@sumaris-net/ngx-components 2.8.14 → 2.9.0-alpha2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.8.14",
+  "version": "2.9.0-alpha2",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",
@@ -67,7 +67,7 @@
     "url": "https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/issues"
   },
   "engines": {
-    "node": ">= 18.18.2",
+    "node": ">= 18.19.0",
     "npm": ">= 9.9.1",
     "yarn": ">= 1.22.19"
   },

package/src/app/core/peer/select-peer.modal.d.ts

@@ -13,6 +13,7 @@ export interface ISelectPeerModalOptions {
     allowSelectDownPeer: boolean;
     onRefresh: EventEmitter<Event>;
     showSetManuallyButton: boolean;
+    selectedPeer?: string;
 }
 export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptions {
     private modalCtrl;
@@ -24,14 +25,16 @@ export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptio
     protected loggingService?: ILoggingService;
     private _subscription;
     private readonly _logger;
-    loading: boolean;
-    mobile: boolean;
-    $peers: Subject<Peer[]>;
-    peerMinVersion: string;
+    protected loading: boolean;
+    protected mobile: boolean;
+    protected $peers: Subject<Peer[]>;
+    protected peerMinVersion: string;
+    protected peerDefaultPrefix: string;
+    selectedPeer: string;
     canCancel: boolean;
     allowSelectDownPeer: boolean;
-    onRefresh: EventEmitter<Event>;
     showSetManuallyButton: boolean;
+    onRefresh: EventEmitter<Event>;
     constructor(modalCtrl: ModalController, popoverController: PopoverController, translate: TranslateService, http: HttpClient, cd: ChangeDetectorRef, environment: Environment, loggingService?: ILoggingService);
     set peers(peers: Observable<Peer[]>);
     cancel(): void;
@@ -43,12 +46,15 @@ export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptio
      * @param peer
      */
     isCompatible(peer: Peer): boolean;
-    refresh(event: any): void;
+    refresh(event: Event): void;
     clickSetManually(event?: Event): Promise<void>;
     refreshPeers(peers: Peer[]): Promise<void>;
     protected refreshPeer(peer: Peer): Promise<Peer>;
     protected openPeerUrlPopover(event: Event, opts?: Partial<TextPopoverOptions>): Promise<any>;
     protected markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectPeerModal, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectPeerModal, "select-peer-modal", never, { "canCancel": { "alias": "canCancel"; "required": false; }; "allowSelectDownPeer": { "alias": "allowSelectDownPeer"; "required": false; }; "onRefresh": { "alias": "onRefresh"; "required": false; }; "showSetManuallyButton": { "alias": "showSetManuallyButton"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectPeerModal, "select-peer-modal", never, { "selectedPeer": { "alias": "selectedPeer"; "required": false; }; "canCancel": { "alias": "canCancel"; "required": false; }; "allowSelectDownPeer": { "alias": "allowSelectDownPeer"; "required": false; }; "showSetManuallyButton": { "alias": "showSetManuallyButton"; "required": false; }; "onRefresh": { "alias": "onRefresh"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_canCancel: unknown;
+    static ngAcceptInputType_allowSelectDownPeer: unknown;
+    static ngAcceptInputType_showSetManuallyButton: unknown;
 }

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

@@ -5,7 +5,7 @@ import { SuggestFn } from '../../services/entity-service.class';
 import { InputElement } from '../../inputs';
 import { AppFloatLabelType, DisplayFn, EqualsFn } from '../../form/field.model';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-import { MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect } from '@angular/material/select';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { IonSearchbar, ModalController } from '@ionic/angular';
 import { MatAutocompleteFieldConfig } from './material.autocomplete.config';
@@ -58,7 +58,7 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     config: MatAutocompleteFieldConfig;
     i18nPrefix: string;
     noResultMessage: string;
-    classList: string;
+    panelClass: string;
     panelWidth: string;
     matAutocompletePosition: 'auto' | 'above' | 'below';
     multiple: boolean;
@@ -68,9 +68,11 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     debug: boolean;
     showSearchBar: boolean;
     stickySearchBar: boolean;
+    disableRipple: boolean;
     applyImplicitValue: boolean | (() => boolean);
     dropButtonTitle: string;
     clearButtonTitle: string;
+    sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
     clicked: EventEmitter<MouseEvent>;
     blurred: EventEmitter<FocusEvent>;
     focused: EventEmitter<FocusEvent>;
@@ -140,5 +142,19 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
      */
     private _fixSearchbarOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteField, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_mobile: unknown;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_debounceTime: unknown;
+    static ngAcceptInputType_highlightAccent: unknown;
+    static ngAcceptInputType_showAllOnFocus: unknown;
+    static ngAcceptInputType_showPanelOnFocus: unknown;
+    static ngAcceptInputType_autofocus: unknown;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_showLoadingSpinner: unknown;
+    static ngAcceptInputType_debug: unknown;
+    static ngAcceptInputType_showSearchBar: unknown;
+    static ngAcceptInputType_stickySearchBar: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
 }

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

@@ -17,6 +17,6 @@ import * as i15 from "@angular/material/select";
 import * as i16 from "@ngx-translate/core";
 export declare class SharedMatAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedMatAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ScrollingModule, typeof i5.ReactiveFormsModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.RxStateModule, typeof i9.MatCommonModule, typeof i10.MatAutocompleteModule, typeof i11.MatFormFieldModule, typeof i12.MatInputModule, typeof i13.MatIconModule, typeof i14.MatButtonModule, typeof i15.MatSelectModule, typeof i16.TranslateModule], [typeof i10.MatAutocompleteModule, typeof i1.MatAutocompleteField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ScrollingModule, typeof i5.ReactiveFormsModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.RxStateModule, typeof i9.MatCommonModule, typeof i10.MatAutocompleteModule, typeof i11.MatFormFieldModule, typeof i12.MatInputModule, typeof i13.MatIconModule, typeof i14.MatButtonModule, typeof i15.MatSelectModule, typeof i9.MatRippleModule, typeof i16.TranslateModule], [typeof i10.MatAutocompleteModule, typeof i1.MatAutocompleteField]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedMatAutocompleteModule>;
 }

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

@@ -14,6 +14,20 @@ export declare class MatChipsField implements OnInit, OnDestroy, InputElement, C
     private formGroupDir;
     private _onChangeCallback;
     private _onTouchedCallback;
+    private _onFetchMoreCallback;
+    private _implicitValue;
+    private _subscription;
+    private _itemsSubscription;
+    private _openedSubscription;
+    private _$filter;
+    private _itemCount;
+    private _reload$;
+    protected _tabindex: number;
+    protected _$inputItems: BehaviorSubject<any[]>;
+    protected _$filteredItems: BehaviorSubject<any[]>;
+    protected _inputControl: UntypedFormControl;
+    protected _moreItemsCount: number;
+    protected _fetchMore$: EventEmitter<Event>;
     equals: EqualsFn;
     logPrefix: string;
     formControl: UntypedFormControl;
@@ -39,7 +53,7 @@ export declare class MatChipsField implements OnInit, OnDestroy, InputElement, C
     config: MatAutocompleteFieldConfig;
     i18nPrefix: string;
     noResultMessage: string;
-    classList: string;
+    panelClass: string;
     panelWidth: string;
     matAutocompletePosition: 'auto' | 'above' | 'below';
     itemSize: string;
@@ -59,20 +73,6 @@ export declare class MatChipsField implements OnInit, OnDestroy, InputElement, C
     matInputText: ElementRef;
     autocomplete: MatAutocomplete;
     autocompleteTrigger: MatAutocompleteTrigger;
-    _tabindex: number;
-    $inputItems: BehaviorSubject<any[]>;
-    $filteredItems: BehaviorSubject<any[]>;
-    inputControl: UntypedFormControl;
-    _moreItemsCount: number;
-    _fetchMore$: EventEmitter<Event>;
-    private _onFetchMoreCallback;
-    private _implicitValue;
-    private _subscription;
-    private _itemsSubscription;
-    private _openedSubscription;
-    private _$filter;
-    private _itemCount;
-    private _reload$;
     constructor(cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
     get itemCount(): number;
     get canFetchMore(): boolean;
@@ -124,5 +124,16 @@ export declare class MatChipsField implements OnInit, OnDestroy, InputElement, C
     private markForCheck;
     private markAsLoading;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsField, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipsField, "mat-chips-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipsField, "mat-chips-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_mobile: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_debounceTime: unknown;
+    static ngAcceptInputType_highlightAccent: unknown;
+    static ngAcceptInputType_showAllOnFocus: unknown;
+    static ngAcceptInputType_showPanelOnFocus: unknown;
+    static ngAcceptInputType_autofocus: unknown;
+    static ngAcceptInputType_showLoadingSpinner: unknown;
+    static ngAcceptInputType_debug: unknown;
 }

package/src/assets/i18n/en-US.json

@@ -288,6 +288,8 @@
   "REFERENTIAL": {
     "LABEL": "Code",
     "NAME": "Name",
+    "DESCRIPTION": "Description",
+    "COMMENTS": "",
     "TYPE": "Type",
     "STATUS_ENUM": {
       "ENABLE": "Enable",

package/src/assets/i18n/en.json

@@ -288,6 +288,8 @@
   "REFERENTIAL": {
     "LABEL": "Code",
     "NAME": "Name",
+    "DESCRIPTION": "Description",
+    "COMMENTS": "",
     "TYPE": "Type",
     "STATUS_ENUM": {
       "ENABLE": "Enable",

package/src/assets/i18n/fr.json

@@ -288,6 +288,8 @@
   "REFERENTIAL": {
     "LABEL": "Code",
     "NAME": "Libellé",
+    "DESCRIPTION": "Description",
+    "COMMENTS": "",
     "TYPE": "Type",
     "STATUS_ENUM": {
       "ENABLE": "Actif à la saisie",

package/src/assets/manifest.json

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

package/src/environments/environment.class.d.ts

@@ -31,6 +31,7 @@ export declare class Environment {
         path?: string;
     }[];
     peerMinVersion?: string;
+    peerDefaultPrefix?: string;
     checkAppVersionIntervalInSeconds?: number;
     persistCache?: boolean;
     offline?: boolean;

package/src/theme/_functions.scss

@@ -5,3 +5,18 @@
   $remSize: $size / 16px;
   @return $remSize * 1rem;
 }
+
+@function get-color-contrast($color, $bw: false) {
+  $lightness: lightness($color);
+
+  @if $bw == true {
+    @if $lightness > 50% {
+      @return #000000; // retourne noir si la couleur est claire
+    } @else {
+      @return #ffffff; // retourne blanc si la couleur est foncée
+    }
+  }
+  @else {
+    @return invert($color); // retourne la couleur inversée si bw n'est pas true
+  }
+}

package/src/theme/_mixins.scss

@@ -44,18 +44,12 @@
   $contrast: map-get($value, contrast);
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
-  --ion-color-base: var(--ion-color-#{""+$color-name},
-    #{$base}) !important;
-  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb,
-    #{color-to-rgb-list($base)}) !important;
-  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast,
-    #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb,
-    #{color-to-rgb-list($contrast)}) !important;
-  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade,
-    #{$shade}) !important;
-  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint,
-    #{$tint}) !important;
+  --ion-color-base: var(--ion-color-#{""+$color-name}, #{$base}) !important;
+  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
+  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade, #{$shade}) !important;
+  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
 
 @mixin generate-color-list($color-name) {
@@ -72,6 +66,20 @@
   --ion-color-#{""+$color-name}-tint: #{$tint};
 }
 
+@mixin generate-dark-color-list($color-name) {
+  $value: map-get($colors, $color-name);
+  $base: mix(map-get($value, base), #000, 50%);
+  $contrast: get-color-contrast($base, true);
+  $shade: lighten($base, 10%);
+  $tint: darken($base, 12%);
+  --ion-color-#{""+$color-name} : #{$base};
+  --ion-color-#{""+$color-name}-rgb: #{color-to-rgb-list($base)};
+  --ion-color-#{""+$color-name}-contrast: #{$contrast};
+  --ion-color-#{""+$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
+  --ion-color-#{""+$color-name}-shade: #{$shade};
+  --ion-color-#{""+$color-name}-tint: #{$tint};
+}
+
 @mixin set-color-each-ion-colors($element-name) {
 
   @each $color-name, $value in $colors {
@@ -125,6 +133,7 @@
   --app-form-color-computed: #{$app-form-color-computed};
   --app-form-field-background-color: #{$app-form-field-background-color};
   --app-form-field-disabled-background-color: #{$app-form-field-disabled-background-color};
+  --app-form-field-label-color: #{$app-form-field-label-color};
   --app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
   --app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
 }
@@ -136,3 +145,10 @@
   --app-form-buttons-bar-height: 0px;
   --app-footer-height: 0px;
 }
+
+@mixin css-variables-to-root-dark() {
+  @each $color-name,
+  $value in $colors {
+    @include generate-dark-color-list($color-name);
+  }
+}

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

@@ -10,6 +10,10 @@ form.form-container {
 
   --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);
+  --mdc-filled-text-field-input-text-color: var(--app-form-color);
+  --mdc-filled-text-field-caret-color: var(--app-form-color);
+  --mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-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;
@@ -19,6 +23,7 @@ form.form-container {
   --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-select-enabled-trigger-text-color: var(--app-form-color);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
@@ -203,3 +208,16 @@ ion-grid.form-container {
     }
   }
 }
+
+// TODO: activer ce code et tester les mat-select en dark mode
+//html {
+//  div.mat-mdc-select-panel {
+//    --mat-select-panel-background-color: var(--ion-color-light);
+//
+//    .mat-mdc-option {
+//      --mat-option-label-text-color: var(--ion-color);
+//      --mat-option-selected-state-label-text-color: var(--ion-color-primary);
+//      color: var(--mat-option-label-text-color) !important;
+//    }
+//  }
+//}

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

@@ -14,6 +14,7 @@ $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
 $app-form-color-computed: var(--ion-color-primary-tint) !default;
 $app-form-field-background-color: #f5f5f5 !default; // Form's field background
 $app-form-field-disabled-background-color: #fafafa !default;
+$app-form-field-label-color: rgba(0, 0, 0, 0.6) !default;
 
 $app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
 $app-table-border-color: rgba(0, 0, 0, 0.08) !default;

package/src/theme/_ngx-components.scss

@@ -155,8 +155,23 @@ mat-calendar.mat-date-short-panel {
     }
   }
 }
+// --------------------------------------------------
+// mat-checkbox
+// --------------------------------------------------
+
+mat-checkbox {
+  .mat-checkbox-checkmark {
+    .mat-checkbox-checkmark-path {
+      // TODO: change to accent-contrast
+      stroke: white !important;
+    }
+  }
+}
+
+// --------------------------------------------------
+// mat-autocomplete and mat-select panel
+// --------------------------------------------------
 
-// --- mat-autocomplete and mat-select panel
 // When simple text option, add a padding
 mat-option {
 
@@ -186,7 +201,8 @@ mat-option:not(:last-of-type) {
   border-bottom: 1px solid #{$app-select-option-border-color};
 }
 
-.mat-select-panel, .mat-mdc-select-panel {
+
+.cdk-overlay-pane:has(.mat-mdc-select-panel) {
   --min-width: 200px;
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
@@ -226,17 +242,31 @@ mat-option:not(:last-of-type) {
   --min-width: 80vw;
 }
 
+
+// FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+.cdk-overlay-pane:has(.mat-mdc-select-panel.fit-content) {
+  min-width: fit-content;
+
+  .mat-mdc-select-panel.fit-content {
+    left: unset;
+  }
+}
+
+
 .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-mdc-autocomplete-panel-full-size .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-full-size.mat-mdc-autocomplete-panel {
+.mat-mdc-autocomplete-panel-full-size.mat-mdc-autocomplete-panel,
+.full-size .mat-mdc-autocomplete-panel,
+.full-size.mat-mdc-autocomplete-panel,
+.cdk-overlay-pane:has(.mat-mdc-select-panel.full-size) {
   --min-width: calc(100vw - 64px);
   --max-width: calc(100vw - 64px);
   position: fixed;
-  left: 32px;
+  left: 32px !important;
 }
 
 .mat-mdc-select-panel,
@@ -256,6 +286,18 @@ ion-list,
   }
 }
 
+// --------------------------------------------------
+// mat-autocomplete-field
+// --------------------------------------------------
+
+// Define useful variable
+html.plt-ios {
+  --ion-searchbar-height: 60px;
+}
+html {
+  --ion-searchbar-height: 58px;
+}
+
 ion-list,
 .mat-mdc-menu-panel,
 .mat-mdc-select-panel,
@@ -276,7 +318,7 @@ ion-list,
   .mat-mdc-option.mat-autocomplete-searchbar
   {
     padding: 0 !important;
-    height: 58px !important;
+    height: var(--ion-searchbar-height, 58px) !important;
     background-color: var(--ion-color-secondary100) !important;
     pointer-events: inherit !important;
 
@@ -299,6 +341,10 @@ ion-list,
       position: sticky;
       top: 0;
     }
+
+    .searchbar-input {
+      --background: var(--app-form-field-background-color, var(--ion-background-color));
+    }
   }
 
   ion-row.ion-list-header,
@@ -328,7 +374,7 @@ ion-list,
       }
       &.mat-select-searchbar-sticky {
         /* offset because of the searchbar height */
-        top: 58px;
+        top: var(--ion-searchbar-height, 58px);
       }
     }
 
@@ -385,6 +431,9 @@ ion-list,
   }
 }
 
+// --------------------------------------------------
+// Table > Filter expansion panel
+// --------------------------------------------------
 
 mat-expansion-panel {
 
@@ -432,15 +481,6 @@ mat-expansion-panel {
   }
 }
 
-mat-checkbox {
-  .mat-checkbox-checkmark {
-    .mat-checkbox-checkmark-path {
-      // TODO: change to accent-contrast
-      stroke: white !important;
-    }
-  }
-}
-
 // --------------------------------------------------
 // Form buttons bar
 // --------------------------------------------------

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

@@ -21,6 +21,8 @@
   min-width: calc(100% - 1px);
   border-collapse: separate;
   --mat-table-background-color: var(--background, var(--ion-background-color));
+  --mat-table-header-color: var(--ion-color-primary);
+  --mat-table-header-background-color: var(--mat-table-background-color);
   --mat-table-row-item-label-text-color: var(--ion-text-color);
   --mat-table-row-item-outline-color: var(--ion-border-color);
   --mat-table-row-item-label-text-size: 14px;
@@ -46,8 +48,8 @@
   --mdc-form-field-label-text-color: var(--ion-text-color);
 
   .mat-mdc-header-cell {
-    color: var(--ion-color-primary);
-    background: var(--mat-table-background-color) !important;
+    color: var(--mat-table-header-color);
+    background: var(--mat-table-header-background-color) !important;
 
     &.disabled {
       color: var(--ion-color-medium, grey);
@@ -529,6 +531,7 @@
   }
 }
 
+
 // Paginator
 .mat-mdc-paginator {
   --mat-paginator-container-size: var(--app-paginator-height, #{$app-paginator-height});