@sumaris-net/ngx-components 2.7.3-rc5 → 2.7.3-rc50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.7.3-rc5",
+  "version": "2.7.3-rc50",
   "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/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

@@ -36,35 +36,38 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     private _formControl;
     private _controlName;
     private _required;
+    private _appearance;
     private _subscriptSizing;
+    private readonly _defaultAppearance;
     private readonly _defaultSubscriptSizing;
-    dateControl: UntypedFormControl;
-    timeControl: UntypedFormControl;
-    displayPattern: string;
-    datePattern: string;
-    timePattern: string;
-    locale: string;
-    maskitoDateOptions: MaskitoOptions;
-    maskitoTimeOptions: MaskitoOptions;
-    datePlaceholder: string;
-    timePlaceholder: string;
-    set subscriptSizing(value: SubscriptSizing);
-    get subscriptSizing(): SubscriptSizing;
-    set formControl(value: UntypedFormControl);
-    get formControl(): UntypedFormControl;
-    set formControlName(value: string);
-    get formControlName(): string;
-    set required(value: boolean | any);
-    get required(): boolean | any;
+    protected dateControl: UntypedFormControl;
+    protected timeControl: UntypedFormControl;
+    protected displayPattern: string;
+    protected datePattern: string;
+    protected timePattern: string;
+    protected locale: string;
+    protected maskitoDateOptions: MaskitoOptions;
+    protected maskitoTimeOptions: MaskitoOptions;
+    protected datePlaceholder: string;
+    protected timePlaceholder: string;
     placeholder: string;
     floatLabel: AppFloatLabelType;
-    appearance: MatFormFieldAppearance;
     mobile: boolean;
     compact: boolean;
     autofocus: boolean;
     startDate: Moment | null;
     clearable: boolean;
     datePickerFilter: DateFilterFn<Moment>;
+    set appearance(value: MatFormFieldAppearance);
+    get appearance(): MatFormFieldAppearance;
+    set subscriptSizing(value: SubscriptSizing);
+    get subscriptSizing(): SubscriptSizing;
+    set formControl(value: UntypedFormControl);
+    get formControl(): UntypedFormControl;
+    set formControlName(value: string);
+    get formControlName(): string;
+    set required(value: boolean | any);
+    get required(): boolean | any;
     set readonly(value: boolean);
     get readonly(): boolean;
     set tabindex(value: number);
@@ -77,7 +80,6 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     matError: MatError;
     constructor(dateAdapter: MomentDateAdapter, translate: TranslateService, formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, defaultOptions?: MatFormFieldDefaultOptions);
     ngOnInit(): void;
-    _getDisplayedMessages(): 'error' | 'hint';
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     writeValue(value: any): void;
@@ -95,9 +97,10 @@ 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;
+    private updateTranslations;
     private onFormChange;
     private emitChange;
     private updateTabIndex;
@@ -107,6 +110,6 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     private updateDateMaskOptions;
     private updateTimeMaskOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDateTime, [null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateTime, "mat-date-time-field", never, { "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "datePickerFilter": { "alias": "datePickerFilter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; }, {}, ["matError"], ["mat-error", "mat-hint", "[matPrefix]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateTime, "mat-date-time-field", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "datePickerFilter": { "alias": "datePickerFilter"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; }, {}, ["matError"], ["mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']", "[matPrefix]"], false, never>;
 }
 export {};

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

@@ -16,12 +16,12 @@ export declare class DateTimeTestPage implements OnInit {
     memoryTimer: Subscription;
     form: UntypedFormGroup;
     mode: 'mobile' | 'desktop' | 'memory' | 'temp';
-    mobileApparence: MatFormFieldAppearance;
+    appearance: MatFormFieldAppearance;
     noTimeProperty: string;
     constructor(platform: Platform, formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef);
     ngOnInit(): void;
     toggleMode(value: any): void;
-    toggleMobileApparence(event: MatCheckboxChange): void;
+    toggleAppearance(event: MatCheckboxChange): void;
     loadData(): Promise<void>;
     doSubmit(event: any): void;
     log(message: string): void;

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

@@ -15,7 +15,9 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     private _formatOptions;
     private _disabling;
     private _writing;
+    private _appearance;
     private _subscriptSizing;
+    private readonly _defaultAppearance;
     private readonly _defaultSubscriptSizing;
     _readonly: boolean;
     _formatFn: LatLongFormatFn;
@@ -31,13 +33,14 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     pattern: LatLongPattern;
     required: boolean;
     floatLabel: AppFloatLabelType;
-    appearance: MatFormFieldAppearance;
     placeholder: string;
     tabindex: number;
     defaultSign: '-' | '+' | '+ ' | '- ';
     maxDecimals: number;
     placeholderChar: string;
     autofocus: boolean;
+    set appearance(value: MatFormFieldAppearance);
+    get appearance(): MatFormFieldAppearance;
     set readonly(value: boolean);
     get readonly(): boolean;
     set subscriptSizing(value: SubscriptSizing);
@@ -48,7 +51,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;
@@ -69,5 +71,5 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     private checkIfTouched;
     private markForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, ["matError"], ["mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']", "[matPrefix]", "[matSuffix]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, ["matError"], ["mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']", "[matPrefix]", "[matSuffix]"], false, never>;
 }

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

@@ -1,6 +1,8 @@
 import { OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { PlatformService } from '../../../../core/services/platform.service';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import * as i0 from "@angular/core";
 export declare class LatLongTestPage implements OnInit {
     protected formBuilder: UntypedFormBuilder;
@@ -8,12 +10,14 @@ export declare class LatLongTestPage implements OnInit {
     form: UntypedFormGroup;
     geoPositionMessage: string;
     mode: string;
+    appearance: MatFormFieldAppearance;
     constructor(formBuilder: UntypedFormBuilder, platform: PlatformService);
     ngOnInit(): void;
     toggleMode(value: any): void;
     loadData(): Promise<void>;
     doSubmit(event: any): void;
     geoPosition(event: Event, controlName?: string): Promise<void>;
+    toggleAppearance(event: MatCheckboxChange): void;
     stringify: {
         (value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
         (value: any, replacer?: (string | number)[], space?: string | number): string;

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

@@ -1,2 +1,3 @@
-import { SubscriptSizing } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 export declare const MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING: SubscriptSizing;
+export declare const MAT_FORM_FIELD_DEFAULT_APPEARANCE: MatFormFieldAppearance;

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-rc5",
+  "version": "2.7.3-rc50",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.globals.scss

@@ -2,7 +2,6 @@
 // Import material theme
 // --------------------------------------------------
 @use '@angular/material' as mat;
-@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -40,22 +39,6 @@ $mat-indigo-app: (
     A700: white
   )
 );
-//mat.$light-theme-background-palette: (
-//  status-bar: map_get(mat.$grey-palette, 300),
-//  app-bar:    map_get(mat.$grey-palette, 100),
-//  background: var(--background, map_get(mat.$grey-palette, 50)),
-//  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
-//  card:       white,
-//  dialog:     white,
-//  disabled-button: rgba(black, 0.12),
-//  raised-button: white,
-//  focused-button: rgba(black, 0.12),
-//  selected-button: map_get(mat.$grey-palette, 300),
-//  selected-disabled-button: map_get(mat.$grey-palette, 400),
-//  disabled-button-toggle: map_get(mat.$grey-palette, 200),
-//  unselected-chip: map_get(mat.$grey-palette, 300),
-//  disabled-list-option: map_get(mat.$grey-palette, 200),
-//);
 
 // FIXME: Why loader toolbar is so dark ?
 $candy-app-primary: mat.define-palette($mat-indigo-app, 500, 100, 900);
@@ -75,28 +58,9 @@ $candy-app-theme: mat.define-light-theme((
 
 ));
 
-@include mat.all-component-themes($candy-app-theme);
-
-
 // --------------------------------------------------
 // Material theme
 // --------------------------------------------------
-//$primary: mat.define-palette(mat.$indigo-palette, 500);
-//$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-//$warn: mat.define-palette(mat.$red-palette);
-//
-//$theme: mat.define-light-theme((
-//  color: (
-//    primary: $primary,
-//    accent: $accent,
-//    warn: $warn,
-//  ),
-//  typography: mat.define-typography-config(),
-//  density: 0,
-//));
-//@include mat.all-component-themes($theme);
-
-
 
 // Expose some variables
 $mat-tab-link-height: 48px !default;

package/src/theme/_material.scss

@@ -1,3 +1,11 @@
+@use '@angular/material' as mat;
+
+// --------------------------------------------------
+// Standard metrial style
+// --------------------------------------------------
+@include mat.core();
+@include mat.all-component-themes($candy-app-theme);
+
 // --------------------------------------------------
 // Override material style
 // --------------------------------------------------
@@ -28,33 +36,51 @@
 }
 
 // Icon, Button
+.mat-button.mat-primary,
 .mat-icon.mat-primary,
 .mat-icon-button.mat-primary,
-.mat-button.mat-primary,
+.mat-mdc-button.mat-primary,
+.mat-mdc-icon-button.mat-primary,
 .mat-stroked-button.mat-primary {
   color: var(--ion-color-tertiary, $tertiary);
 }
-.mat-icon.mat-secondary,
 .mat-button.mat-secondary,
+.mat-icon.mat-secondary,
 .mat-icon-button.mat-secondary,
+.mat-mdc-button.mat-secondary,
+.mat-mdc-icon-button.mat-secondary,
 .mat-stroked-button.mat-secondary {
   color: var(--ion-color-secondary, $secondary);
 }
-.mat-icon.mat-accent,
 .mat-button.mat-accent,
+.mat-icon.mat-accent,
 .mat-icon-button.mat-accent,
+.mat-mdc-button.mat-accent,
+.mat-mdc-icon-button.mat-accent,
 .mat-stroked-button.mat-accent {
-  color: var(--ion-color-accent);
+  color: var(--ion-color-accent, $accent);
 }
 .mdc-button {
   --mdc-typography-button-letter-spacing: normal;
   --mdc-text-button-label-text-tracking: normal;
 }
-
-// Badge
-.mdc-tab .mat-badge-content {
-    padding-left: 2px;
+.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;
+}
+
 .mat-badge-primary .mat-badge-content {
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);

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.forms.scss

@@ -0,0 +1,201 @@
+
+// --------------------------------------------------
+// Material Forms
+// --------------------------------------------------
+.form-container,
+form.form-container {
+  color: #{$app-form-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 {
+      min-height: var(--mat-form-field-container-height);
+    }
+  }
+
+  mat-form-field,
+  mat-autocomplete-field,
+  app-form-field {
+    width: 100%;
+  }
+
+  .mat-mdc-form-field {
+    &:not(.mat-mdc-form-field-has-icon-prefix) {
+      .mdc-text-field {
+        padding-left: 4px;
+      }
+    }
+
+    ion-icon[matPrefix],
+    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: var(--mdc-icon-button-icon-size) !important;
+        line-height: 1.125;
+        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);
+      }
+    }
+
+    ion-icon[matSuffix],
+    mat-icon[matSuffix],
+    .mat-mdc-form-field-icon-suffix {
+      white-space: nowrap;
+
+      .mat-mdc-icon-button {
+        --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 {
+          height: var(--mdc-icon-button-icon-size);
+          width: var(--mdc-icon-button-icon-size);
+          font-size: var(--mdc-icon-button-icon-size);
+        }
+
+        .mat-mdc-button-touch-target {
+          width: var(--mdc-icon-button-state-layer-size);
+        }
+      }
+
+      ion-icon, .mat-icon {
+
+        &.large {
+          $font-size: calculateRem(14px);
+          font-size: $font-size;
+          line-height: 1.125;
+        }
+      }
+
+    }
+
+    // When field use choice button, reduce the font size, and optimize layout
+    button.mat-mdc-form-field-button,
+    ion-button.mat-mdc-form-field-button {
+      @include font-size-important(12px);
+      margin: 0;
+      white-space: normal;
+    }
+
+    // Used to customize mat-boolean-field
+    &.mat-boolean-field-checkbox {
+      --mdc-checkbox-state-layer-size: 20px;
+
+      .mat-mdc-form-field-infix {
+        padding-top: 16px;
+      }
+
+      .mdc-floating-label {
+        transform: unset !important;
+        padding-left: 30px;
+        top: 20px;
+      }
+    }
+
+    &.mat-boolean-field-radio {
+      --mdc-radio-state-layer-size: 20px;
+
+      .mat-mdc-radio-button {
+        padding-left: 8px;
+      }
+    }
+
+    &.mat-boolean-field-button {
+      .mat-mdc-form-field-infix {
+        padding-top: calc(var(--mat-form-field-filled-with-label-container-padding-top, 0px) + 4px);
+      }
+    }
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    mat-hint {
+      --color: rgb(115,115,115);
+      color: var(--color);
+    }
+  }
+
+  /* -- 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 {
+    color: var(--ion-color-primary-tint) !important;
+    font-style: italic;
+  }
+
+  /* MatSwipeField */
+  mat-swipe-field {
+
+    .mdc-floating-label--float-above {
+      transform: translateY(-106%) translateX(40px) scale(0.75) !important;
+    }
+  }
+
+
+}
+// Manage first child grid inside a form
+form.form-container > ion-grid,
+ion-grid.form-container {
+  padding: 0;
+
+  & > ion-row {
+    // No between grid rows
+    padding: 0;
+
+    & > ion-col {
+
+      // No top/bottom padding between grid cell
+      padding-bottom: 0;
+      padding-top: 0;
+
+      & > ion-label {
+        color: var(--ion-color-primary100);
+        padding-inline-end: 5px;
+      }
+
+      & > ion-label[text-wrap] {
+        word-wrap: normal;
+        white-space: normal;
+      }
+    }
+  }
+}

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;