@sumaris-net/ngx-components 2.6.17 → 4.0.0-rc1

package/src/app/social/message/message.service.d.ts

@@ -1,19 +1,17 @@
 import { GraphqlService } from '../../core/graphql/graphql.service';
-import { ModalController, ToastController } from '@ionic/angular';
+import { ToastController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { BaseGraphqlService } from '../../core/services/base-graphql-service.class';
 import { Environment } from '../../../environments/environment.class';
 import { Message, MessageFilter } from './message.model';
 import { ShowToastOptions } from '../../shared/toast/toasts';
-import { MessageModalOptions } from './message.modal';
 import * as i0 from "@angular/core";
 export declare class MessageService extends BaseGraphqlService<Message, MessageFilter> {
     protected graphql: GraphqlService;
     protected translate: TranslateService;
-    protected modalCtrl: ModalController;
     protected toastController: ToastController;
     protected environment: Environment;
-    constructor(graphql: GraphqlService, translate: TranslateService, modalCtrl: ModalController, toastController: ToastController, environment: Environment);
+    constructor(graphql: GraphqlService, translate: TranslateService, toastController: ToastController, environment: Environment);
     /**
      * Send a message to recipient(s)
      *
@@ -23,10 +21,7 @@ export declare class MessageService extends BaseGraphqlService<Message, MessageF
     send(entity: Message, opts?: {
         showToast?: boolean;
     }): Promise<boolean>;
-    openComposeModal(options: MessageModalOptions & {
-        showToast?: boolean;
-    }): Promise<any>;
     protected showToast(opts: ShowToastOptions): Promise<import("@ionic/core").OverlayEventDetail<any>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MessageService, [null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageService, [null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MessageService>;
 }

package/src/app/social/user-event/notification/user-event-notification.icon.d.ts

@@ -17,8 +17,8 @@ export declare class UserEventNotificationIcon implements OnInit, OnDestroy {
     autoHide: boolean;
     headerActions: IUserEventAction[];
     footerActions: IUserEventAction[];
-    visible: boolean;
-    get countChanges(): Observable<number>;
+    protected visible: boolean;
+    protected readonly countChanges$: Observable<number>;
     private _logPrefix;
     private _readEvent;
     private _readEvents;
@@ -26,6 +26,7 @@ export declare class UserEventNotificationIcon implements OnInit, OnDestroy {
     ngOnInit(): Promise<void>;
     showList(event: Event): Promise<void>;
     ngOnDestroy(): void;
+    protected setVisible(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UserEventNotificationIcon, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventNotificationIcon, "app-user-event-notification-icon", never, { "debug": "debug"; "titleI18n": "titleI18n"; "disabled": "disabled"; "filter": "filter"; "autoHide": "autoHide"; "headerActions": "headerActions"; "footerActions": "footerActions"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventNotificationIcon, "app-user-event-notification-icon", never, { "debug": { "alias": "debug"; "required": false; }; "titleI18n": { "alias": "titleI18n"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "autoHide": { "alias": "autoHide"; "required": false; }; "headerActions": { "alias": "headerActions"; "required": false; }; "footerActions": { "alias": "footerActions"; "required": false; }; }, {}, never, never, false, never>;
 }

package/src/app/social/user-event/notification/user-event-notification.list.d.ts

@@ -67,5 +67,5 @@ export declare class UserEventNotificationList<E extends IUserEvent<any> = IUser
     protected markForCheck(): void;
     protected getPanelElement(): Promise<HTMLElement>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UserEventNotificationList<any, any>, [null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventNotificationList<any, any>, "app-user-event-notification-list", never, { "debug": "debug"; "mobile": "mobile"; "titleI18n": "titleI18n"; "sortBy": "sortBy"; "sortDirection": "sortDirection"; "filter": "filter"; "enableInfiniteScroll": "enableInfiniteScroll"; "infiniteScrollThreshold": "infiniteScrollThreshold"; "headerActions": "headerActions"; "footerActions": "footerActions"; "pageSize": "pageSize"; }, { "readEvent": "readEvent"; "readEvents": "readEvents"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventNotificationList<any, any>, "app-user-event-notification-list", never, { "debug": { "alias": "debug"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "titleI18n": { "alias": "titleI18n"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "enableInfiniteScroll": { "alias": "enableInfiniteScroll"; "required": false; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; }; "headerActions": { "alias": "headerActions"; "required": false; }; "footerActions": { "alias": "footerActions"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; }, { "readEvent": "readEvent"; "readEvents": "readEvents"; }, never, never, false, never>;
 }

package/src/app/social/user-event/testing/user-event.testing.d.ts

@@ -30,5 +30,5 @@ export declare class UserEventTestingPage implements OnDestroy {
     addNotificationWithDefaultAction(): void;
     protected showMessage(text: string): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UserEventTestingPage, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventTestingPage, "job-progression-testing", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserEventTestingPage, "job-progression-testing", never, {}, {}, never, never, false, never>;
 }

package/src/app/social/user-event/testing/user-event.testing.model.d.ts

@@ -11,7 +11,6 @@ export declare class UserEventTest extends Entity<UserEventTest> implements IUse
     level: EventLevel;
     issuer: string;
     recipient: string;
-    updateDate: Moment;
     creationDate: Moment;
     readDate: Moment;
     message: string | undefined;

package/src/app/social/user-event/user-event.model.d.ts

@@ -2,7 +2,7 @@ import { Moment } from 'moment';
 import { Entity, IEntity } from '../../core/services/model/entity.model';
 import { IEntityFilter } from '../../core/services/model/filter.model';
 import { AppColors, IconRef } from '../../shared/types';
-export declare type EventLevel = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG';
+export type EventLevel = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG';
 export interface IUserEvent<E extends Entity<E, ID>, ID = number, U = string, L = EventLevel> extends IEntity<E, ID> {
     issuer: U;
     recipient: U;
@@ -41,4 +41,4 @@ export interface IUserEventAction {
 /**
  * @deprecated use IUserEventAction instead
  */
-export declare type UserEventAction = IUserEventAction;
+export type UserEventAction = IUserEventAction;

package/src/app/social/user-event/user-event.module.d.ts

@@ -4,9 +4,10 @@ import * as i2 from "./notification/user-event-notification.list";
 import * as i3 from "@angular/common";
 import * as i4 from "../../shared/shared.module";
 import * as i5 from "../../core/icon/icon.module";
-import * as i6 from "ngx-jdenticon";
+import * as i6 from "../../shared/rx-state.module";
+import * as i7 from "ngx-jdenticon";
 export declare class UserEventModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UserEventModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UserEventModule, [typeof i1.UserEventNotificationIcon, typeof i2.UserEventNotificationList], [typeof i3.CommonModule, typeof i4.SharedModule, typeof i5.AppIconModule, typeof i6.NgxJdenticonModule], [typeof i1.UserEventNotificationIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UserEventModule, [typeof i1.UserEventNotificationIcon, typeof i2.UserEventNotificationList], [typeof i3.CommonModule, typeof i4.SharedModule, typeof i5.AppIconModule, typeof i6.RxStateModule, typeof i7.NgxJdenticonModule], [typeof i1.UserEventNotificationIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UserEventModule>;
 }

package/src/app/social/user-event/user-event.service.d.ts

@@ -11,8 +11,6 @@ import { NetworkService } from '../../core/services/network.service';
 import { BaseGraphqlService, BaseGraphqlServiceOptions } from '../../core/services/base-graphql-service.class';
 import { Moment } from 'moment';
 import { IStartableService } from '../../shared/services/startable-service.class';
-import { DocumentNode } from 'graphql/index';
-import { MutableWatchQueriesUpdatePolicy } from '../../core/services/base-entity-service.class';
 import * as i0 from "@angular/core";
 export declare const APP_USER_EVENT_SERVICE: InjectionToken<IUserEventService<any, any, number, UserEventWatchOptions, UserEventLoadOptions>>;
 export declare interface UserEventLoadOptions extends EntitiesServiceLoadOptions {
@@ -44,7 +42,6 @@ export interface UserEventServiceOptions<Q extends IUserEventQueries = IUserEven
     queries: Q;
     mutations?: Partial<M>;
     subscriptions?: Partial<S>;
-    watchQueriesUpdatePolicy?: MutableWatchQueriesUpdatePolicy;
 }
 export interface IUserEventService<E extends IUserEvent<E, ID>, F extends IUserEventFilter<E, ID>, ID = number, WO extends UserEventWatchOptions = UserEventWatchOptions, LO extends UserEventLoadOptions = UserEventLoadOptions> extends IEntitiesService<E, F, WO>, IStartableService {
     countSubject: Observable<number>;
@@ -77,7 +74,6 @@ export declare abstract class AbstractUserEventService<E extends IUserEvent<E, I
     protected readonly mutations: Partial<M>;
     protected readonly subscriptions: Partial<S>;
     protected readonly _countSubject: BehaviorSubject<number>;
-    protected readonly watchQueriesUpdatePolicy: MutableWatchQueriesUpdatePolicy;
     protected resetCountDate: Moment;
     protected listeners: IUserEventListener<E, ID>[];
     private _subscriptions;
@@ -123,7 +119,6 @@ export declare abstract class AbstractUserEventService<E extends IUserEvent<E, I
     protected fillDefaultProperties(entity: E): void;
     protected unreadEvents(events: E[]): number;
     protected copyIdAndUpdateDate(source: E, target: E): void;
-    protected getLoadQueries(): DocumentNode[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractUserEventService<any, any, any, any, any, any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractUserEventService<any, any, any, any, any, any, any, any>, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractUserEventService<any, any, any, any, any, any, any, any>, never, never, {}, {}, never, never, false, never>;
 }

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

@@ -33,8 +33,6 @@
     "BTN_SAVE": "Save",
     "BTN_SAVE_WITH_SHORTCUT": "<u>S</u>ave",
     "BTN_SAVE_WITH_SHORTCUT_HELP": "Save (Ctrl+S)",
-    "BTN_SAVE_AND_CLOSE": "Save and close",
-    "BTN_SAVE_AND_NEXT": "Save and next",
     "BTN_FILTER": "Filter",
     "BTN_RELOAD": "Reload",
     "BTN_REFRESH": "Refresh",
@@ -106,7 +104,6 @@
 
     "YES": "Yes",
     "NO": "No",
-    "DEBUG": "Debug",
 
     "UPDATED_ON": "Last modification on",
     "RECORDER": "Recorder",
@@ -116,8 +113,10 @@
     "PLEASE_WAIT": "Please wait...",
     "NO_DATA": "No data",
     "MISSING": "Missing",
+
     "DISPLAYED_COLUMNS": "Displayed columns",
     "DISPLAYED_COLUMNS_DOTS": "Displayed columns...",
+
     "FORM": {
       "HAS_ERROR": "Please correct errors in the form"
     },
@@ -182,8 +181,8 @@
         "LOCATION_LEVEL_COUNTRY_ID": "Referential > Location level de lieu > Country",
         "LOCATION_LEVEL_PORT_ID": "Referential > Location level > Port",
         "LOCATION_LEVEL_AUCTION_ID": "Referential > Location level > Sale auction",
-        "LOCATION_LEVEL_RECTANGLE_ICES_ID": "Referential > Location level > CIEM/ICES Statistical Rectangle",
-        "LOCATION_LEVEL_DIVISION_ICES_ID": "Referential > Location level > CIEM/ICES Division",
+        "LOCATION_LEVEL_ICES_RECTANGLE_ID": "Referential > Location level > CIEM/ICES Statistical Rectangle",
+        "LOCATION_LEVEL_ICES_DIVISION_ID": "Referential > Location level > CIEM/ICES Division",
         "TAXONOMIC_LEVEL_FAMILY_ID": "Referential > Taxonomic level > Family",
         "TAXONOMIC_LEVEL_GENUS_ID": "Referential > Taxonomic level > Genus",
         "TAXONOMIC_LEVEL_SPECIES_ID": "Referential > Taxonomic level > Species",
@@ -199,7 +198,9 @@
         "TOKEN": "Crypto",
         "BASIC_AND_TOKEN": "Basic and crypto"
       },
-      "ENABLE_AUTH_API_TOKENS": "API > Enable auth tokens"
+      "ACCOUNT": {
+        "ENABLE_AUTH_TOKENS": "Activer les jetons d'authentifications"
+      }
     }
   },
   "MENU": {
@@ -213,12 +214,7 @@
     "LOCAL_SETTINGS": "Settings",
     "LOGOUT": "Logout",
     "ABOUT": "About",
-    "BTN_MY_ACCOUNT": "My account",
-
-    "TRIPS": "Trips",
-    "LOGBOOKS": "Logbooks",
-    "OCCASIONS": "Occasions",
-    "AUCTION_OCCASIONS": "Auction occasions"
+    "BTN_MY_ACCOUNT": "My account"
   },
   "ABOUT": {
     "TITLE": "About",
@@ -464,6 +460,14 @@
       "NOT_COMPATIBLE_PEER": "The application works in <b>offline mode</b>, because the node <b>use a too old version</b>.<br/><small>If the problem persists, please <b>contact your administrator</b>, or select a node v{{version}} or superior.</small>"
     }
   },
+  "MAP": {
+    "ZOOM_IN": "Zoom in",
+    "ZOOM_OUT": "Zoom out",
+    "ENTER_FULLSCREEN": "Fullscreen mode",
+    "EXIT_FULLSCREEN": "Exit fullscreen mode",
+    "SHOW_GRATICULE": "Show graticule",
+    "HIDE_GRATICULE": "Hide graticule"
+  },
   "SOCIAL": {
     "USER_EVENT": {
       "NOTIFICATION": {
@@ -482,8 +486,7 @@
       "TYPE_ENUM": {
         "DEBUG_DATA": "Debug data",
         "INBOX_MESSAGE": "Inbox message",
-        "FEED": "Feed",
-        "JOB": "{{name}}<br/><b>{{status}}</b>"
+        "FEED": "Feed"
       }
     },
     "JOB": {
@@ -495,7 +498,6 @@
     "MESSAGE": {
       "TYPE": "Message type",
       "RECIPIENTS": "Recipients",
-      "RECIPIENT_FILTER_COUNT": "{{count}} filtered users",
       "SUBJECT": "Object",
       "BODY_HELP": "Your message...",
       "NEW": {

package/src/assets/i18n/en.json

@@ -33,8 +33,6 @@
     "BTN_SAVE": "Save",
     "BTN_SAVE_WITH_SHORTCUT": "<u>S</u>ave",
     "BTN_SAVE_WITH_SHORTCUT_HELP": "Save (Ctrl+S)",
-    "BTN_SAVE_AND_CLOSE": "Save and close",
-    "BTN_SAVE_AND_NEXT": "Save and next",
     "BTN_FILTER": "Filter",
     "BTN_RELOAD": "Reload",
     "BTN_REFRESH": "Refresh",
@@ -106,7 +104,6 @@
 
     "YES": "Yes",
     "NO": "No",
-    "DEBUG": "Debug",
 
     "UPDATED_ON": "Last modification on",
     "RECORDER": "Recorder",
@@ -116,8 +113,10 @@
     "PLEASE_WAIT": "Please wait...",
     "NO_DATA": "No data",
     "MISSING": "Missing",
+
     "DISPLAYED_COLUMNS": "Displayed columns",
     "DISPLAYED_COLUMNS_DOTS": "Displayed columns...",
+
     "FORM": {
       "HAS_ERROR": "Please correct errors in the form"
     },
@@ -182,8 +181,8 @@
         "LOCATION_LEVEL_COUNTRY_ID": "Referential > Location level de lieu > Country",
         "LOCATION_LEVEL_PORT_ID": "Referential > Location level > Port",
         "LOCATION_LEVEL_AUCTION_ID": "Referential > Location level > Sale auction",
-        "LOCATION_LEVEL_RECTANGLE_ICES_ID": "Referential > Location level > CIEM/ICES Statistical Rectangle",
-        "LOCATION_LEVEL_DIVISION_ICES_ID": "Referential > Location level > CIEM/ICES Division",
+        "LOCATION_LEVEL_ICES_RECTANGLE_ID": "Referential > Location level > CIEM/ICES Statistical Rectangle",
+        "LOCATION_LEVEL_ICES_DIVISION_ID": "Referential > Location level > CIEM/ICES Division",
         "TAXONOMIC_LEVEL_FAMILY_ID": "Referential > Taxonomic level > Family",
         "TAXONOMIC_LEVEL_GENUS_ID": "Referential > Taxonomic level > Genus",
         "TAXONOMIC_LEVEL_SPECIES_ID": "Referential > Taxonomic level > Species",
@@ -199,7 +198,9 @@
         "TOKEN": "Crypto",
         "BASIC_AND_TOKEN": "Basic and crypto"
       },
-      "ENABLE_AUTH_API_TOKENS": "API > Enable auth tokens"
+      "ACCOUNT": {
+        "ENABLE_AUTH_TOKENS": "Enable auth tokens"
+      }
     }
   },
   "MENU": {
@@ -213,12 +214,7 @@
     "LOCAL_SETTINGS": "Settings",
     "LOGOUT": "Logout",
     "ABOUT": "About",
-    "BTN_MY_ACCOUNT": "My account",
-
-    "TRIPS": "Trips",
-    "LOGBOOKS": "Logbooks",
-    "OCCASIONS": "Occasions",
-    "AUCTION_OCCASIONS": "Auction occasions"
+    "BTN_MY_ACCOUNT": "My account"
   },
   "ABOUT": {
     "TITLE": "About",
@@ -464,6 +460,14 @@
       "NOT_COMPATIBLE_PEER": "The application works in <b>offline mode</b>, because the node <b>use a too old version</b>.<br/><small>If the problem persists, please <b>contact your administrator</b>, or select a node v{{version}} or superior.</small>"
     }
   },
+  "MAP": {
+    "ZOOM_IN": "Zoom in",
+    "ZOOM_OUT": "Zoom out",
+    "ENTER_FULLSCREEN": "Fullscreen mode",
+    "EXIT_FULLSCREEN": "Exit fullscreen mode",
+    "SHOW_GRATICULE": "Show graticule",
+    "HIDE_GRATICULE": "Hide graticule"
+  },
   "SOCIAL": {
     "USER_EVENT": {
       "NOTIFICATION": {
@@ -482,8 +486,7 @@
       "TYPE_ENUM": {
         "DEBUG_DATA": "Debug data",
         "INBOX_MESSAGE": "Inbox message",
-        "FEED": "Feed",
-        "JOB": "{{name}}<br/><b>{{status}}</b>"
+        "FEED": "Feed"
       }
     },
     "JOB": {
@@ -495,7 +498,6 @@
     "MESSAGE": {
       "TYPE": "Message type",
       "RECIPIENTS": "Recipients",
-      "RECIPIENT_FILTER_COUNT": "{{count}} filtered users",
       "SUBJECT": "Object",
       "BODY_HELP": "Your message...",
       "NEW": {

package/src/assets/i18n/fr.json

@@ -81,10 +81,10 @@
     "LAT_LONG": {
       "DDMMSS_PLACEHOLDER": "DD° MM' SS\"",
       "DDMM_PLACEHOLDER": "DD° MM.MMM'",
-      "DD_PLACEHOLDER": "+DD.DDD°",
+      "DD_PLACEHOLDER": "± DD.DDDDDDD°",
       "DDDMMSS_PLACEHOLDER": "DDD° MM' SS\"",
       "DDDMM_PLACEHOLDER": "DDD° MM.MMM'",
-      "DDD_PLACEHOLDER": "+DDD.DDD°",
+      "DDD_PLACEHOLDER": "±DDD.DDDDDDD°",
       "LAT_SIGN_PLACEHOLDER": "N|S",
       "LAT_SIGN_N": "N",
       "LAT_SIGN_S": "S",
@@ -182,8 +182,8 @@
         "LOCATION_LEVEL_COUNTRY_ID": "Référentiel > Niveau de lieu > Pays",
         "LOCATION_LEVEL_PORT_ID": "Référentiel > Niveau de lieu > Port",
         "LOCATION_LEVEL_AUCTION_ID": "Référentiel > Niveau de lieu > Criée",
-        "LOCATION_LEVEL_RECTANGLE_ICES_ID": "Référentiel > Niveau de lieu > Rectangle statistique CIEM/ICES",
-        "LOCATION_LEVEL_DIVISION_ICES_ID": "Référentiel > Niveau de lieu > Division CIEM/ICES",
+        "LOCATION_LEVEL_ICES_RECTANGLE_ID": "Référentiel > Niveau de lieu > Rectangle statistique CIEM/ICES",
+        "LOCATION_LEVEL_ICES_DIVISION_ID": "Référentiel > Niveau de lieu > Division CIEM/ICES",
         "TAXONOMIC_LEVEL_FAMILY_ID": "Référentiel > Niveau taxinomique > Famille",
         "TAXONOMIC_LEVEL_GENUS_ID": "Référentiel > Niveau taxinomique > Genre",
         "TAXONOMIC_LEVEL_SPECIES_ID": "Référentiel > Niveau taxinomique > Espèce",
@@ -199,7 +199,9 @@
         "TOKEN": "Cryptographique",
         "BASIC_AND_TOKEN": "Basique et cryptographique"
       },
-      "ENABLE_AUTH_API_TOKENS": "API > Activer les jetons d'authentification"
+      "ACCOUNT": {
+        "ENABLE_AUTH_TOKENS": "Activer les jetons d'authentification"
+      }
     }
   },
   "MENU": {
@@ -495,7 +497,6 @@
     "MESSAGE": {
       "TYPE": "Type d'envoi",
       "RECIPIENTS": "Destinataires",
-      "RECIPIENT_FILTER_COUNT": "{{count}} utilisateurs filtrés",
       "SUBJECT": "Objet",
       "BODY_HELP": "Votre message...",
       "NEW": {

package/src/assets/manifest.json

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

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

@@ -8,7 +8,6 @@ export declare class Environment {
     name: string;
     version: string;
     production: boolean;
-    externalEnvironmentUrl?: string;
     baseUrl: string;
     sameUrlPeer?: boolean;
     defaultPeer?: {

package/src/theme/_material.globals.scss

@@ -2,6 +2,7 @@
 // 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
@@ -39,22 +40,22 @@ $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),
-);
+//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);
@@ -63,12 +64,43 @@ $candy-app-accent: mat.define-palette($mat-indigo-app, A200, A100, A400);
 // The warn palette is optional (defaults to red).
 $candy-app-warn: mat.define-palette(mat.$red-palette);
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat.define-light-theme((
+  color: (
+    primary: $candy-app-primary,
+    accent: $candy-app-accent,
+    warn: $candy-app-warn,
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+
+));
+
+@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;
 $mat-tab-bar-height: 48px !default;
 $mat-tab-animation-duration: 200ms !default;
-$mat-mat-toolbar-height-desktop: 64px !default;
-$mat-mat-toolbar-height-mobile: 56px !default;
+$mat-toolbar-height-desktop: 64px !default;
+$mat-toolbar-height-mobile: 56px !default;

package/src/theme/_material.scss

@@ -1,16 +1,3 @@
-
-// Plus imports for other components in your app.
-@use '@angular/material' as mat;
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($candy-app-theme);
-
 // --------------------------------------------------
 // Override material style
 // --------------------------------------------------
@@ -18,6 +5,7 @@
   background-color: var(--ion-color-secondary, $secondary);
   .mat-tab-link {
     color: var(--ion-color-secondary-contrast);
+    --mat-tab-header-label-text-tracking: normal;
   }
 }
 .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
@@ -42,6 +30,9 @@
 .mat-stroked-button.mat-accent {
   color: var(--ion-color-accent);
 }
+.mdc-button {
+  --mdc-typography-button-letter-spacing: normal;
+}
 
 // Badge
 .mat-badge-primary .mat-badge-content {
@@ -96,7 +87,7 @@
 
 }
 
-.mat-option {
+.mat-option, .mat-mdc-option {
   padding-top: var(--padding-top, 0) !important;
   padding-right: var(--padding-end, 16px) !important;
   padding-bottom: var(--padding-bottom, 0) !important;
@@ -134,7 +125,7 @@ mat-icon[slot] {
 }
 
 
-.mat-form-field-errors {
+.mat-mdc-form-field-errors {
   margin-top: -20px;
 
   mat-hint,
@@ -144,3 +135,12 @@ mat-icon[slot] {
     font-size: 75%;
   }
 }
+
+.mat-mdc-form-field-infix {
+  label {
+    width: 100% !important;
+    mat-label {
+      text-overflow: ellipsis;
+    }
+  }
+}

package/src/theme/_mixins.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 
 @mixin font-size($size) {
   font-size: calculateRem($size);
@@ -82,7 +83,6 @@
 }
 
 @mixin css-variables-to-root() {
-
   @each $color-name,
   $value in $colors {
     .ion-color-#{""+$color-name} {
@@ -102,7 +102,7 @@
   --expansion-panel-padding: var(--ion-padding);
   --expansion-panel-header-padding: var(--ion-padding);
 
-  --mat-toolbar-height: #{$mat-mat-toolbar-height-desktop};
+  --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-paginator-height: mat.$paginator-height;
   --ion-toolbar-height: #{$ion-toolbar-height};
 
@@ -116,7 +116,7 @@
 }
 
 @mixin css-variables-to-root-mobile() {
-  --mat-toolbar-height: #{$mat-mat-toolbar-height-mobile};
+  --mat-toolbar-height: #{$mat-toolbar-height-mobile};
 
   // Disable form footer, in mobile
   --app-form-buttons-bar-height: 0px;

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

@@ -6,7 +6,7 @@ $app-form-color: rgba(0, 0, 0, 0.87) !default;
 $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
 
 $app-table-header-height: 44px !default;
-$app-table-cell-vertical-padding: 8px !default;
+$app-table-cell-horizontal-padding: 8px !default;
 $app-table-row-height: 48px !default;
 $app-table-row-max-height: 52px !default;
 
@@ -15,3 +15,8 @@ $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;