@sumaris-net/ngx-components 18.7.1-rc3 → 18.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.7.1-rc3",
+  "version": "18.7.1",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",
@@ -53,9 +53,9 @@
     "@capacitor/status-bar": "~6.0.2",
     "@e-is/cordova-plugin-audiomanagement": "^1.0.3",
     "@e-is/cordova-plugin-downloader": "^1.2.0",
-    "@ionic-native/audio-management": "^5.36.0",
-    "@ionic-native/core": "^5.36.0",
-    "@ionic-native/downloader": "^5.36.0",
+    "@awesome-cordova-plugins/core": "^6.15.0",
+    "@awesome-cordova-plugins/audio-management": "^6.15.0",
+    "@awesome-cordova-plugins/downloader": "^6.15.0",
     "clipboard": "^2.0.11",
     "cordova-sqlite-storage": "~6.0.0",
     "emoji-toolkit": ">= 8.0.0 < 10.0.0",
@@ -71,9 +71,8 @@
     "url": "https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/issues"
   },
   "engines": {
-    "node": ">= 18.19.1",
-    "npm": ">= 9.9.1",
-    "yarn": ">= 1.22.19"
+    "node": ">= 20.17.0",
+    "npm": ">= 10.7.0"
   },
   "optimizeDeps": {
     "exclude": [

package/src/app/admin/services/person.service.d.ts

@@ -10,7 +10,7 @@ import { PersonFilter } from './filter/person.filter';
 import { BaseEntityService } from '../../core/services/base-entity-service.class';
 import * as i0 from "@angular/core";
 export declare const PersonFragments: {
-    person: import("graphql/language/ast").DocumentNode;
+    person: import("apollo-angular").TypedDocumentNode<unknown, unknown>;
 };
 export declare class PersonService extends BaseEntityService<Person, PersonFilter> implements SuggestService<Person, PersonFilter> {
     protected graphql: GraphqlService;

package/src/app/admin/users/users.d.ts

@@ -25,12 +25,18 @@ export declare class UsersPage extends AppTable<Person, PersonFilter> implements
     readonly profiles: import("../../core/services/model/person.model").UserProfileLabel[];
     readonly statusList: readonly import("../../core/services/model/referential.model").IStatus[];
     readonly statusById: Readonly<import("@sumaris-net/ngx-components").KeyValueType<import("../../core/services/model/referential.model").IStatus>>;
-    additionalFields: FormFieldDefinition[];
-    filterCriteriaCount: number;
+    protected additionalFields: FormFieldDefinition[];
+    protected filterCriteriaCount: number;
+    protected defaultCompact: boolean;
     set showUsernameColumn(value: boolean);
+    get showUsernameColumn(): boolean;
     set showUsernameExtranetColumn(value: boolean);
+    get showUsernameExtranetColumn(): boolean;
+    compact: boolean;
+    usePageSettings: boolean;
     sticky: boolean;
     stickyEnd: boolean;
+    canDownload: boolean;
     constructor(injector: Injector, formBuilder: UntypedFormBuilder, accountService: AccountService, validatorService: ValidatorService, configService: ConfigService, dataService: PersonService, messageService: MessageService, menuService: MenuService, environment: any);
     filterExpansionPanel: MatExpansionPanel;
     get firstUserColumn(): string;
@@ -40,6 +46,16 @@ export declare class UsersPage extends AppTable<Person, PersonFilter> implements
     protected restoreFilterOrLoad(): Promise<void>;
     clearControlValue(event: Event, formControl: AbstractControl): boolean;
     openComposeMessageModal(event?: Event): Promise<any>;
+    restoreCompactMode(opts?: {
+        emitEvent?: boolean;
+    }): Promise<void>;
+    toggleCompactMode(): Promise<void>;
+    exportToCsv(event: Event): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UsersPage, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UsersPage, "app-users-table", never, { "sticky": { "alias": "sticky"; "required": false; }; "stickyEnd": { "alias": "stickyEnd"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UsersPage, "app-users-table", never, { "compact": { "alias": "compact"; "required": false; }; "usePageSettings": { "alias": "usePageSettings"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "stickyEnd": { "alias": "stickyEnd"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_compact: unknown;
+    static ngAcceptInputType_usePageSettings: unknown;
+    static ngAcceptInputType_sticky: unknown;
+    static ngAcceptInputType_stickyEnd: unknown;
+    static ngAcceptInputType_canDownload: unknown;
 }

package/src/app/core/home/home.d.ts

@@ -32,6 +32,7 @@ export interface HomePageState {
     showLegalInformation: boolean;
     showInstallLinks: boolean;
     pageHistory: HistoryPageReference[];
+    darkMode: boolean;
 }
 export declare class HomePage extends RxState<HomePageState> implements OnDestroy {
     private accountService;
@@ -49,6 +50,7 @@ export declare class HomePage extends RxState<HomePageState> implements OnDestro
     private readonly _debug;
     private _subscription;
     private _config;
+    protected darkMode$: import("rxjs").Observable<boolean>;
     protected pageHistory$: import("rxjs").Observable<HistoryPageReference[]>;
     protected loading$: import("rxjs").Observable<boolean>;
     protected readonly mobile: boolean;
@@ -79,6 +81,8 @@ export declare class HomePage extends RxState<HomePageState> implements OnDestro
     get showLegalInformation(): boolean;
     set showInstallLinks(value: boolean);
     get showInstallLinks(): boolean;
+    set darkMode(value: boolean);
+    get darkMode(): boolean;
     get currentLocaleCode(): string;
     get partnerBannerSize(): number;
     constructor(accountService: AccountService, modalCtrl: ModalController, translate: TranslateService, toastController: ToastController, configService: ConfigService, platform: PlatformService, cd: ChangeDetectorRef, network: NetworkService, settings: LocalSettingsService, environment: Environment, locales: LocaleConfig[], buttons: IMenuItem[]);
@@ -97,6 +101,7 @@ export declare class HomePage extends RxState<HomePageState> implements OnDestro
     protected onLogout(): void;
     protected refreshButtons(account?: Account): void;
     openMarkdownModal(event?: Event, item?: IMenuItem): Promise<void>;
+    protected toggleDarkMode(): Promise<void>;
     protected removePageHistory(path: string): Promise<void>;
     protected markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HomePage, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;

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

@@ -16,7 +16,7 @@ import { IStartableService } from '../../shared/services/startable-service.class
 import { AccountService } from './account.service';
 import * as i0 from "@angular/core";
 export declare const ConfigFragments: {
-    config: import("graphql/language/ast").DocumentNode;
+    config: import("apollo-angular").TypedDocumentNode<unknown, unknown>;
 };
 export declare const APP_CONFIG_OPTIONS: InjectionToken<FormFieldDefinitionMap>;
 export declare class ConfigService extends BaseGraphqlService<Configuration, any, number, Configuration> implements IEntityService<Configuration>, IStartableService<Configuration> {

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

@@ -76,9 +76,17 @@ export declare class NetworkService extends StartableObservableService<Peer, Pee
      * Check if the peer is alive
      *
      * @param peer
-     * @param opts
      */
     checkPeerAlive(peer?: string | Peer): Promise<NodeInfo>;
+    /**
+     * Checks whether a peer is compatible based on its software version and the required minimum version.
+     * Optionally displays a toast notification if the peer is not compatible.
+     *
+     * @param {NodeInfo} peerInfo - Information about the peer, including its software version.
+     * @param {Object} [opts] - Additional options for the compatibility check.
+     * @param {boolean} [opts.showToast] - Whether to show a toast notification if the peer is not compatible. Defaults to true.
+     * @return {Promise<boolean>} - A promise that resolves to `true` if the peer is compatible, otherwise `false`.
+     */
     checkPeerCompatible(peerInfo: NodeInfo, opts?: {
         showToast?: boolean;
     }): Promise<boolean>;

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

@@ -13,7 +13,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { Environment } from '../../../environments/environment.class';
 import { ConfigService } from './config.service';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { Downloader, DownloadRequest } from '@ionic-native/downloader/ngx';
+import { Downloader, DownloadRequest } from '@awesome-cordova-plugins/downloader/ngx';
 import { StartableService } from '../../shared/services/startable-service.class';
 import { OpenOptions } from '@capacitor/browser';
 import { ILoggingService } from '../../shared/logging/logger.model';
@@ -92,6 +92,7 @@ export declare class PlatformService extends StartableService {
     } & Partial<DownloadRequest>): Observable<string | undefined>;
     copyToClipboard(data: string | WriteOptions, opts?: ShowToastOptions): Promise<void>;
     toggleDarkTheme(enable: boolean): void;
+    toggleHighContrast(enable: boolean): void;
     showToast(opts: ShowToastOptions): Promise<HTMLIonToastElement>;
     closeToast(id?: string): Promise<boolean>;
     protected configureTheme(mobile: boolean, win?: any): Promise<void>;

package/src/app/core/table/table.model.d.ts

@@ -3,11 +3,16 @@ export declare const SETTINGS_DISPLAY_COLUMNS = "displayColumns";
 export declare const SETTINGS_SORTED_COLUMN = "sortedColumn";
 export declare const SETTINGS_FILTER = "filter";
 export declare const SETTINGS_PAGE_SIZE = "pageSize";
+export declare const SETTINGS_COMPACT_ROWS = "compactRows";
 export declare const DEFAULT_PAGE_SIZE = 20;
 export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
 export declare const RESERVED_START_COLUMNS: string[];
 export declare const RESERVED_END_COLUMNS: string[];
 export declare const DEFAULT_REQUIRED_COLUMNS: string[];
+export declare const TABLE_SETTINGS_ENUM: {
+    FILTER_KEY: string;
+    COMPACT_ROWS_KEY: string;
+};
 export declare class CellValueChangeListener {
     subject: Subject<any>;
     subscription: Subscription;

package/src/app/shared/audio/audio.d.ts

@@ -1,5 +1,5 @@
 import { Platform } from '@ionic/angular';
-import { AudioManagement } from '@ionic-native/audio-management/ngx';
+import { AudioManagement, AudioMode } from '@awesome-cordova-plugins/audio-management/ngx';
 import { StartableService } from '../services/startable-service.class';
 import * as i0 from "@angular/core";
 export type AudioType = 'html5' | 'native';
@@ -38,7 +38,7 @@ export declare class AudioProvider extends StartableService<void> {
      * @param duration Duration of the vibration in milliseconds.
      */
     vibrate(duration?: number | number[]): Promise<void>;
-    setAudioMode(mode: AudioManagement.AudioMode): Promise<void>;
+    setAudioMode(mode: AudioMode): Promise<void>;
     protected readAudioMode(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AudioProvider, [null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AudioProvider>;

package/src/app/shared/functions.d.ts

@@ -14,7 +14,7 @@ export declare function arrayResize<T>(array: T[] | null | undefined, size: numb
 export declare function newArray<T>(size: number, defaultValue?: T): T[];
 export declare function isNotNilBoolean(obj: any | null | undefined): obj is boolean;
 export declare function isNotNilString(obj: any | null | undefined): obj is string;
-export declare function isNotNilObject(obj: any | null | undefined): obj is string;
+export declare function isNotNilObject(obj: any | null | undefined): obj is object;
 export declare function isBlankString(obj: any | null | undefined): obj is string;
 export declare function notNilOrDefault<T>(obj: T | null | undefined, defaultValue: T): T;
 export declare function arraySize<T>(obj: T[] | null | undefined): number;

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

@@ -32,6 +32,7 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     private _itemCount;
     private _suggestExecutionId;
     private _reload$;
+    private _destroy$;
     protected _readonly: boolean;
     protected _tabindex: number;
     protected _$inputItems: BehaviorSubject<any[]>;

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

@@ -46,19 +46,19 @@ export declare class MatLatLongFieldInput implements MatFormFieldControl<number>
     defaultSign: LatLongSign;
     maxDecimals: number;
     readonly: boolean;
-    degreesSymbolUnit: string;
-    minutesSymbolUnit: string;
-    secondsSymbolUnit: string;
-    showMinutes: boolean;
-    showSeconds: boolean;
-    showSign: boolean;
-    degreesMask: MaskitoOptions;
-    minutesMask: MaskitoOptions;
-    secondsMask: MaskitoOptions;
-    degreesPlaceholder: string;
-    minutesPlaceholder: string;
-    secondsPlaceholder: string;
-    lastInputMaxDecimals: number;
+    protected degreesSymbolUnit: string;
+    protected minutesSymbolUnit: string;
+    protected secondsSymbolUnit: string;
+    protected showMinutes: boolean;
+    protected showSeconds: boolean;
+    protected showSign: boolean;
+    protected degreesMask: MaskitoOptions;
+    protected minutesMask: MaskitoOptions;
+    protected secondsMask: MaskitoOptions;
+    protected degreesPlaceholder: string;
+    protected minutesPlaceholder: string;
+    protected secondsPlaceholder: string;
+    protected lastInputMaxDecimals: number;
     private logPrefix;
     private _subscription;
     private cd;
@@ -79,6 +79,7 @@ export declare class MatLatLongFieldInput implements MatFormFieldControl<number>
     setDisabledState(isDisabled: boolean): void;
     private computeLatLongFormGroupValue;
     private safeParseFloat;
+    private updateValidators;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongFieldInput, [null, { optional: true; }, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongFieldInput, "mat-latlong-input", never, { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -82,6 +82,8 @@ export declare class MatLatLongField implements ControlValueAccessor, OnInit, Af
     private markForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [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; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, {}, never, ["[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_autofocus: unknown;
     static ngAcceptInputType_mobile: unknown;
     static ngAcceptInputType_clearable: unknown;
     static ngAcceptInputType_tabindex: unknown;

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

@@ -13,6 +13,7 @@
     "BTN_COPY": "Copy",
     "BTN_CLEAR": "Clear",
     "BTN_CLOSE": "Close",
+    "BTN_COMPACT_ROWS": "Compact rows",
     "BTN_DONE": "Done",
     "BTN_DOWNLOAD": "Download",
     "BTN_IMPORT": "Import",
@@ -261,6 +262,7 @@
     "BTN_DISCONNECT": "Disconnect this account",
     "BTN_MY_ACCOUNT": "My account",
     "BTN_REGISTER": "Register",
+    "BTN_DARK_MODE": "Dark or light theme",
     "SHOW_AT": "Show at",
     "LEGAL_INFORMATION": "Legal information",
     "PRIVACY_POLICY": "Privacy policy",
@@ -464,6 +466,9 @@
     },
     "STATUS": "State",
     "PUBKEY": "Public key",
+    "CREATION_DATE": "Creation date",
+    "UPDATE_DATE": "Update date",
+
     "PROFILE": "Profile",
     "PROFILE_ENUM": {
       "ADMIN": "Administrator",
@@ -548,7 +553,7 @@
     },
     "MESSAGE": {
       "TYPE": "Message type",
-      "RECIPIENTS": "Recipients",
+      "RECIPIENTS": "Recipients",²
       "RECIPIENT_FILTER_COUNT": "{{count}} filtered users",
       "SUBJECT": "Object",
       "BODY_HELP": "Your message...",
@@ -576,11 +581,13 @@
   },
   "FILE": {
     "JSON": {
-      "ENCODING": "UTF-8"
+      "ENCODING": "UTF-8",
+      "BTN_DOWNLOAD_HELP": "Download data (JSON)"
     },
     "CSV": {
       "SEPARATOR": ",",
-      "ENCODING": "UTF-8"
+      "ENCODING": "UTF-8",
+      "BTN_DOWNLOAD_HELP": "Download data (CSV)"
     },
     "UPLOAD": {
       "DRAG_AND_DROP": "Drag and drop a file{{ extension }} here<br/>or",

package/src/assets/i18n/en.json

@@ -13,6 +13,7 @@
     "BTN_COPY": "Copy",
     "BTN_CLEAR": "Clear",
     "BTN_CLOSE": "Close",
+    "BTN_COMPACT_ROWS": "Compact rows",
     "BTN_DONE": "Done",
     "BTN_DOWNLOAD": "Download",
     "BTN_IMPORT": "Import",
@@ -63,6 +64,7 @@
     "BTN_DECIMAL_SEPARATOR": ".",
     "EMPTY_OPTION": "(Empty)",
     "All_OPTION": "(All)",
+
     "DATE_PATTERN": "DD/MM/YYYY",
     "DATE_TIME_PATTERN": "DD/MM/YYYY HH:mm",
     "DATE_TIME_SECONDS_PATTERN": "DD/MM/YYYY HH:mm:ss",
@@ -260,6 +262,7 @@
     "BTN_DISCONNECT": "Disconnect this account",
     "BTN_MY_ACCOUNT": "My account",
     "BTN_REGISTER": "Register",
+    "BTN_DARK_MODE": "Dark or light theme",
     "SHOW_AT": "Show at",
     "LEGAL_INFORMATION": "Legal information",
     "PRIVACY_POLICY": "Privacy policy",
@@ -463,6 +466,9 @@
     },
     "STATUS": "State",
     "PUBKEY": "Public key",
+    "CREATION_DATE": "Creation date",
+    "UPDATE_DATE": "Update date",
+
     "PROFILE": "Profile",
     "PROFILE_ENUM": {
       "ADMIN": "Administrator",
@@ -575,11 +581,13 @@
   },
   "FILE": {
     "JSON": {
-      "ENCODING": "UTF-8"
+      "ENCODING": "UTF-8",
+      "BTN_DOWNLOAD_HELP": "Download data (JSON)"
     },
     "CSV": {
       "SEPARATOR": ",",
-      "ENCODING": "UTF-8"
+      "ENCODING": "UTF-8",
+      "BTN_DOWNLOAD_HELP": "Download data (CSV)"
     },
     "UPLOAD": {
       "DRAG_AND_DROP": "Drag and drop a file{{ extension }} here<br/>or",

package/src/assets/i18n/fr.json

@@ -13,6 +13,7 @@
     "BTN_COPY": "Copier",
     "BTN_CLEAR": "Vider",
     "BTN_CLOSE": "Fermer",
+    "BTN_COMPACT_ROWS": "Compacter les lignes",
     "BTN_DONE": "Terminer",
     "BTN_DOWNLOAD": "Télécharger",
     "BTN_IMPORT": "Importer",
@@ -105,7 +106,6 @@
     "DURATION_DOTS": "Durée :",
     "YES": "Oui",
     "NO": "Non",
-
     "UPDATED_ON": "Mis à jour le",
     "RECORDER": "Saisisseur",
     "RESULT_COUNT": "{{count}} résultats",
@@ -260,6 +260,7 @@
     "BTN_DISCONNECT": "Déconnecter ce compte",
     "BTN_MY_ACCOUNT": "Mon compte",
     "BTN_REGISTER": "S'inscrire",
+    "BTN_DARK_MODE": "Thème (sombre ou clair)",
     "SHOW_AT": "Consulté le ",
     "LEGAL_INFORMATION": "Informations légales",
     "PRIVACY_POLICY": "Politique de confidentialité",
@@ -414,7 +415,7 @@
     "NETWORK_DIVIDER": "Paramètres réseau",
     "PEER_URL": "Adresse du nœud réseau",
     "BTN_CHANGE_PEER": "Voir les nœuds disponibles",
-    "BTN_DARK_MODE": "Mode sombre ? (expérimental)",
+    "BTN_DARK_MODE": "Thème sombre ? (expérimental)",
     "BTN_SHOW_ACCOUNT": "Voir mon compte",
     "BTN_SHOW_MORE_HELP": "Afficher plus de paramètres",
     "BTN_SHOW_OPTION_KEY": "Afficher le code des options ?",
@@ -465,6 +466,8 @@
     },
     "STATUS": "Etat",
     "PUBKEY": "Clé publique",
+    "CREATION_DATE": "Date création",
+    "UPDATE_DATE": "Date MAJ",
     "PROFILE": "Profil",
     "PROFILE_ENUM": {
       "ADMIN": "Administrateur",
@@ -581,7 +584,8 @@
     },
     "CSV": {
       "SEPARATOR": ";",
-      "ENCODING": "UTF-8"
+      "ENCODING": "UTF-8",
+      "BTN_DOWNLOAD_HELP": "Télécharger les données (CSV)"
     },
     "UPLOAD": {
       "DRAG_AND_DROP": "Glisser et déposer un fichier{{ extension }} ici<br/>ou",

package/src/assets/manifest.json

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

package/src/theme/_material.scss

@@ -208,3 +208,9 @@ mat-icon[slot] {
   }
 
 }
+
+// Mat dialog (e.g. timepicker)
+.mat-mdc-dialog-container {
+  --mdc-dialog-container-color: var(--ion-background-color);
+  --mdc-dialog-supporting-text-color: var(--ion-text-color);
+}

package/src/theme/_ngx-components.scss

@@ -280,8 +280,10 @@ mat-option:not(:last-of-type) {
 .mat-mdc-select-panel,
 .mat-mdc-autocomplete-panel {
   /* when multiple selection enable */
-  mat-pseudo-checkbox {
-    margin-left: 8px;
+  .mat-mdc-option mat-pseudo-checkbox,
+  .mat-mdc-option .mat-pseudo-checkbox-full {
+    margin-left: 12px;
+    margin-right: 4px;
   }
 
   padding: 0 !important;
@@ -353,6 +355,7 @@ ion-list,
 
     .searchbar-input {
       --background: var(--app-form-field-background-color, var(--ion-background-color));
+      padding-inline-end: 34px; // Keep a place for the clear button
     }
   }
 
@@ -421,7 +424,7 @@ ion-list,
     ion-col {
       --padding-start: 8px;
       padding: 0 !important;
-      padding-left: var(--padding-start) !important;
+      padding-left: var(--padding-start, 0) !important;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -734,12 +737,34 @@ mat-calendar {
 // --------------------------------------------------
 
 .timepicker {
-  .timepicker-header {
+  .timepicker-header,
+  .timepicker-header .mat-toolbar.mat-accent{
     // Change header color to 'secondary'
     --mat-toolbar-container-background-color: var(--ion-color-secondary) !important;
+    --mat-toolbar-container-text-color: var(--ion-color-secondary-contrast) !important;
+  }
+
+  ngx-mat-timepicker-face .clock-face {
+    background-color: var(--app-form-field-background-color) !important;
+
+    .mat-toolbar.mat-accent {
+      --mat-toolbar-container-background-color: var(--ion-color-accent);
+      --mat-toolbar-container-text-color: var(--ion-color-accent-contrast);
+    }
+    button.mat-mdc-mini-fab {
+      &.mat-unthemed {
+        --mat-fab-small-foreground-color: var(--ion-text-color);
+      }
+
+      &.mat-accent {
+        --mdc-fab-small-container-color: var(--ion-color-accent);
+        --mat-fab-small-foreground-color: var(--ion-color-accent-contrast);
+      }
+    }
   }
 }
 
+
 .ngx-mat-timepicker-dialog {
   // Increase max-width for very small screen
   --mat-dialog-container-small-max-width: calc(100vw - var(--ion-padding, 16px) * 2);
@@ -975,3 +1000,7 @@ mat-toolbar app-named-filter-selector {
     visibility: hidden;
   }
 }
+
+// --------------------------------------------------
+// Toolbar
+// --------------------------------------------------

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

@@ -27,7 +27,7 @@
   --mat-table-row-item-outline-color: var(--ion-border-color);
   --mat-table-row-item-label-text-size: 14px;
   --mat-table-row-item-label-text-tracking: normal;
-  --mat-row-height: #{$app-table-row-height} !important;
+  --mat-row-height: #{$app-table-row-height};
   --mat-row-max-height: #{$app-table-row-max-height} !important;
   --mat-cell-horizontal-padding: #{$app-table-cell-horizontal-padding};
   --mat-cell-padding-top: calc(var(--mat-row-height) / 2 - var(--mat-table-row-item-label-text-size, 14px));