@sumaris-net/ngx-components 18.23.63 → 21.0.0-rc1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.23.63",
+  "version": "21.0.0-rc1",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",
@@ -22,20 +22,21 @@
     "@noble/ed25519": "^1.7.3",
     "@polkadot/util": "~12.6.2",
     "@polkadot/util-crypto": "~12.6.2",
-    "@rx-angular/cdk": "~18.0.0",
-    "@rx-angular/state": "~18.1.0",
-    "@rx-angular/template": "~18.0.3",
+    "@rx-angular/cdk": "~21.1.0",
+    "@rx-angular/state": "~21.1.1",
+    "@rx-angular/template": "~21.2.0",
+    "buffer": "^6.0.3",
     "clone": "~2.1.2",
-    "marked-base-url": "^1.1.6",
+    "marked-base-url": "^1.1.8",
+    "material-symbols": "^0.43.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@apollo/client": "~3.12.4",
+    "@apollo/client": "^3.7.17",
     "@ionic/storage": "~4.0.0",
     "d3": "~7.6.1",
     "localforage": "~1.10.0",
-    "rxjs": "~7.8.2",
-    "zone.js": "~0.14.10"
+    "rxjs": "~7.8.1"
   },
   "optionalDependencies": {
     "@awesome-cordova-plugins/audio-management": "^6.16.0",
@@ -73,8 +74,8 @@
     "url": "https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components/-/issues"
   },
   "engines": {
-    "node": ">= 20.17.0",
-    "npm": ">= 10.7.0"
+    "node": ">= 22.0.0",
+    "npm": ">= 11.0.0"
   },
   "optimizeDeps": {
     "exclude": [
@@ -82,17 +83,16 @@
     ]
   },
   "module": "fesm2022/sumaris-net.ngx-components.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/sumaris-net.ngx-components.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/sumaris-net.ngx-components.mjs",
-      "esm": "./esm2022/sumaris-net.ngx-components.mjs",
+      "types": "./types/sumaris-net.ngx-components.d.ts",
       "default": "./fesm2022/sumaris-net.ngx-components.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }

package/src/assets/environments/environment-test.json

@@ -1,6 +1,6 @@
 {
   "defaultPeer": {
-    "host": "test.sumaris.net",
-    "port": 443
+    "host": "localhost",
+    "port": 8080
   }
 }

package/src/assets/i18n/fr.json

@@ -233,7 +233,6 @@
   },
   "MENU": {
     "HOME": "Accueil",
-    "TESTING": "Mode développeur",
     "DATA_ENTRY_DIVIDER": "Saisie de données",
     "DATA_ACCESS_DIVIDER": "Accès aux données",
     "ADMINISTRATION_DIVIDER": "Administration",
@@ -243,10 +242,12 @@
     "LOGOUT": "Se déconnecter",
     "ABOUT": "À propos",
     "BTN_MY_ACCOUNT": "Mon compte",
-    "TRIPS": "Marées",
-    "LOGBOOKS": "Logbooks",
-    "OCCASIONS": "Sorties",
-    "AUCTION_OCCASIONS": "Sorties en criées"
+    "AUCTION_OCCASIONS": "Sorties en criées",
+    "TESTING": {
+      "TITLE": "Mode développeur",
+      "OTHER_1": "Autre 1",
+      "OTHER_2": "Autre 2"
+    }
   },
   "ABOUT": {
     "TITLE": "À propos",

package/src/assets/manifest.json

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

package/src/theme/_icons.scss

@@ -1,19 +1,11 @@
-@import "mixins";
-
-// Ionicons Icon Font CSS
-// --------------------------
-// Ionicons CSS for Ionic's <ion-icon> element
-// ionicons-icons.scss has the icons and their unicode characters
-
-$ionicons-font-path: $font-path !default;
-
-//@import 'ionicons/dist/scss/ionicons';
+@use "mixins" as *;
 
 // --------------------------------------------------
 // Import material icons
 // --------------------------------------------------
-$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
-@import 'material-design-icons-iconfont/src/material-design-icons';
+@use 'material-design-icons-iconfont/src/material-design-icons' with (
+  $material-design-icons-font-directory-path: '../dist/fonts/'
+);
 
 mat-icon > span {
   position: absolute;
@@ -22,3 +14,7 @@ mat-icon > span {
 }
 
 @include set-color-each-ion-colors('mat-icon');
+
+.ion-flex {
+  display: flex;
+}

package/src/theme/_ionic.globals.scss

@@ -1,4 +1,11 @@
-@import 'ionic/ionic.globals';
+@use 'ionic/ionic.globals' as *;
+@use 'ionic/ionic.theme.default' as *;
+
+// --------------------------------------------------
+// Define Ionic defaults
+// --------------------------------------------------
+@forward 'ionic/ionic.globals';
+@forward 'ionic/ionic.theme.default';
 
 $ionicons-font-path: '~ionicons/dist/fonts';
 

package/src/theme/_material.globals.scss

@@ -1,7 +1,10 @@
+@use '@angular/material' as mat;
+@use 'ionic.globals' as *;
+
 // --------------------------------------------------
 // Import material theme
 // --------------------------------------------------
-@use '@angular/material' as mat;
+@forward '@angular/material';
 
 // 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

package/src/theme/_material.scss

@@ -1,9 +1,12 @@
 @use '@angular/material' as mat;
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
 
 // --------------------------------------------------
 // Standard material style
 // --------------------------------------------------
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 @include mat.all-component-themes($candy-light-theme);
 
 // --------------------------------------------------
@@ -14,7 +17,7 @@
 
   .mat-mdc-tab-link {
     color: var(--ion-color-secondary-contrast);
-    --mat-tab-header-label-text-tracking: normal;
+    --mat-tab-label-text-tracking: normal;
   }
 }
 
@@ -23,15 +26,15 @@
 }
 
 .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-focus-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-hover-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
-  --mat-tab-header-pagination-icon-color: $text-color;
+  --mat-tab-active-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-active-focus-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-active-hover-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
+  --mat-tab-pagination-icon-color: $text-color;
 }
 
 .mat-mdc-tab-header {
-  --mat-tab-header-label-text-tracking: 0.0178571429em;
+  --mat-tab-label-text-tracking: 0.0178571429em;
 }
 
 // Fix height of the mat-latlong-field, otherwise there is one more pixel (because of the sign that use a mat-select)
@@ -75,8 +78,8 @@
 }
 
 .mdc-button {
-  --mdc-typography-button-letter-spacing: normal;
-  --mdc-text-button-label-text-tracking: normal;
+  --mat-typography-button-letter-spacing: normal;
+  --mat-button-text-label-text-tracking: normal;
 }
 
 .mat-mdc-menu-item {
@@ -203,13 +206,13 @@ mat-icon[slot] {
   }
   .mat-mdc-select-placeholder {
     transition: none !important;
-    color: var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color));
+    color: var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color));
   }
 
 }
 
 // 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);
+  --mat-dialog-container-color: var(--ion-background-color);
+  --mat-dialog-supporting-text-color: var(--ion-text-color);
 }

package/src/theme/_mixins.scss

@@ -1,5 +1,11 @@
+@use 'functions' as *;
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use 'ngx-components.globals' as *;
 @use '@angular/material' as mat;
 
+@forward "functions";
+
 @mixin font-size($size) {
   font-size: calculateRem($size);
 }
@@ -127,7 +133,7 @@
   --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-toolbar-standard-height: #{$mat-toolbar-height-desktop};
   --mat-toolbar-mobile-height: #{$mat-toolbar-height-mobile};
-  --mat-paginator-height: mat.$paginator-height;
+  --mat-paginator-height: $paginator-height;
   --mat-option-min-height: #{$mat-option-min-height};
   --mat-option-max-height: #{$mat-option-max-height};
   --mat-toolbar-background-color: var(--ion-toolbar-background);

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

@@ -1,3 +1,6 @@
+@use "mixins" as *;
+@use "ionic.globals" as *;
+@use "ngx-components.globals" as *;
 
 // --------------------------------------------------
 // Material Forms
@@ -6,35 +9,35 @@
 form.form-container {
   @include font-size(16px);
 
-  --mdc-icon-button-icon-color: var(--app-form-field-label-color);
-
-  --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(--ion-text-color);
-  --mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-caret-color: var(--ion-text-color);
-  --mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-label-text-tracking: normal;
-  --mdc-filled-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
-  --mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
-  --mdc-filled-text-field-active-indicator-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-active-indicator-color: var(--ion-text-color);
-  --mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
-
-  --mdc-outlined-text-field-input-text-color: var(--ion-text-color);
-  --mdc-outlined-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-caret-color: var(--ion-text-color);
-  --mdc-outlined-text-field-label-text-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-label-text-tracking: normal;
-  --mdc-outlined-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
-  --mdc-outlined-text-field-disabled-input-text-color: var(--app-form-color-disabled);
-  --mdc-outlined-text-field-outline-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-outlined-text-field-hover-outline-color: var(--ion-text-color);
-  --mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
+  --mat-icon-button-icon-color: var(--app-form-field-label-color);
+
+  --mat-form-field-filled-container-color: var(--app-form-field-background-color);
+  --mat-form-field-filled-disabled-container-color: var(--app-form-field-disabled-background-color);
+  --mat-form-field-filled-input-text-color: var(--ion-text-color);
+  --mat-form-field-filled-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-caret-color: var(--ion-text-color);
+  --mat-form-field-filled-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-label-text-tracking: normal;
+  --mat-form-field-filled-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mat-form-field-filled-disabled-input-text-color: var(--app-form-color-disabled);
+  --mat-form-field-filled-active-indicator-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-active-indicator-color: var(--ion-text-color);
+  --mat-form-field-filled-focus-label-text-color: var(--ion-color-primary);
+  --mat-form-field-filled-focus-active-indicator-color: var(--ion-color-primary);
+
+  --mat-form-field-outlined-input-text-color: var(--ion-text-color);
+  --mat-form-field-outlined-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-caret-color: var(--ion-text-color);
+  --mat-form-field-outlined-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-label-text-tracking: normal;
+  --mat-form-field-outlined-disabled-label-text-color: var(--app-form-field-disabled-label-color);
+  --mat-form-field-outlined-disabled-input-text-color: var(--app-form-color-disabled);
+  --mat-form-field-outlined-outline-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-outlined-hover-outline-color: var(--ion-text-color);
+  --mat-form-field-outlined-focus-label-text-color: var(--ion-color-primary);
+  --mat-form-field-outlined-focus-outline-color: var(--ion-color-primary);
 
   --mat-checkbox-label-text-color: var(--ion-text-color);
   --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
@@ -49,12 +52,12 @@ form.form-container {
   --mat-select-enabled-trigger-text-color: var(--ion-text-color);
   --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
 
-  --mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-selected-focus-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-hover-track-color: var(--app-form-field-background-color-shade);
-  --mdc-switch-unselected-focus-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-focus-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-selected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-hover-track-color: var(--app-form-field-background-color-shade);
+  --mat-slide-toggle-unselected-focus-track-color: var(--app-form-field-background-color-shade);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
@@ -84,21 +87,21 @@ form.form-container {
     mat-icon[matPrefix],
     .mat-mdc-form-field-icon-prefix {
 
-      --mdc-icon-button-icon-size: 24px;
-      --mdc-icon-button-icon-color: inherit;
-      --mdc-icon-button-state-layer-size: 48px;
-      --mdc-icon-button-margin-vertical: 12px;
+      --mat-icon-button-icon-size: 24px;
+      --mat-icon-button-icon-color: inherit;
+      --mat-icon-button-state-layer-size: 48px;
+      --mat-icon-button-margin-vertical: 12px;
 
       ion-icon, .mat-icon {
-        font-size: var(--mdc-icon-button-icon-size) !important;
+        font-size: var(--mat-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);
+        height: var(--mat-icon-button-icon-size);
+        width: var(--mat-icon-button-icon-size);
+        margin-left: var(--mat-icon-button-margin-vertical);
+        margin-right: var(--mat-icon-button-margin-vertical);
         position: relative;
-        color: var(--mdc-icon-button-icon-color);
-        fill: var(--mdc-icon-button-icon-color);
+        color: var(--mat-icon-button-icon-color);
+        fill: var(--mat-icon-button-icon-color);
       }
     }
 
@@ -108,25 +111,25 @@ form.form-container {
       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);
+        --mat-icon-button-state-layer-size: 24px;
+        --mat-icon-button-icon-size: 16px;
+        --mat-icon-button-padding: 4px;
+        padding: var(--mat-icon-button-padding);
 
         &.large {
-          --mdc-icon-button-state-layer-size: 48px;
-          --mdc-icon-button-icon-size: 24px;
-          --mdc-icon-button-padding: 12px;
+          --mat-icon-button-state-layer-size: 48px;
+          --mat-icon-button-icon-size: 24px;
+          --mat-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);
+          height: var(--mat-icon-button-icon-size);
+          width: var(--mat-icon-button-icon-size);
+          font-size: var(--mat-icon-button-icon-size);
         }
 
         .mat-mdc-button-touch-target {
-          width: var(--mdc-icon-button-state-layer-size);
+          width: var(--mat-icon-button-state-layer-size);
         }
       }
 
@@ -152,7 +155,7 @@ form.form-container {
 
     // Used to customize mat-boolean-field
     &.mat-boolean-field-checkbox {
-      --mdc-checkbox-state-layer-size: 20px;
+      --mat-checkbox-state-layer-size: 20px;
 
       .mdc-text-field--outlined .mat-mdc-form-field-infix,
       .mdc-text-field--no-label .mat-mdc-form-field-infix{
@@ -171,14 +174,14 @@ form.form-container {
     }
 
     &.mat-boolean-field-radio {
-      --mdc-radio-state-layer-size: 20px;
-      --mdc-radio-radio-touch-target-size: 24px;
+      --mat-radio-state-layer-size: 20px;
+      --mat-radio-radio-touch-target-size: 24px;
       --mat-mdc-form-field-label-offset-x: 0px;
 
       // Fix outline appearance
       &.mat-mdc-form-field-has-icon-prefix {
         .mat-mdc-text-field-wrapper {
-          --mat-mdc-form-field-label-offset-x: var(--mdc-icon-button-icon-size, 24px);
+          --mat-mdc-form-field-label-offset-x: var(--mat-icon-button-icon-size, 24px);
         }
       }
 
@@ -190,8 +193,8 @@ form.form-container {
         }
 
         .mat-mdc-radio-touch-target {
-          height: var(--mdc-radio-radio-touch-target-size, 48px);
-          width: var(--mdc-radio-radio-touch-target-size, 48px);
+          height: var(--mat-radio-radio-touch-target-size, 48px);
+          width: var(--mat-radio-radio-touch-target-size, 48px);
         }
       }
 
@@ -229,7 +232,7 @@ form.form-container {
   .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 {
-    --mdc-filled-text-field-input-text-color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
+    --mat-form-field-filled-input-text-color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
     color: var(--app-form-color-computed, #{$app-form-color-computed}) !important;
     font-style: italic;
   }
@@ -245,10 +248,10 @@ form.form-container {
   // Ckeckbox
   .mat-mdc-checkbox {
     --mat-checkbox-label-text-color: var(--app-form-color);
-    --mdc-checkbox-unselected-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
-    --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-focus-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-hover-icon-color: var(--app-form-color);
+    --mat-checkbox-unselected-pressed-icon-color: var(--app-form-color);
   }
 
   // Radio
@@ -256,16 +259,16 @@ form.form-container {
     --mat-checkbox-label-text-color: var(--app-form-color);
     --mat-radio-label-text-color: var(--app-form-color);
 
-    --mdc-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
-    --mdc-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
-    --mdc-radio-unselected-hover-icon-color: var(--app-form-color);
-    --mdc-radio-unselected-focus-icon-color: var(--app-form-color);
-    --mdc-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-    --mdc-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-    --mdc-radio-selected-hover-icon-color: var(--ion-color-accent);
-    --mdc-radio-selected-icon-color: var(--ion-color-accent);
-    --mdc-radio-selected-focus-icon-color: var(--ion-color-primary);
-    --mdc-radio-selected-pressed-icon-color: var(--ion-color-accent);
+    --mat-radio-disabled-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mat-radio-disabled-selected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    --mat-radio-unselected-hover-icon-color: var(--app-form-color);
+    --mat-radio-unselected-focus-icon-color: var(--app-form-color);
+    --mat-radio-unselected-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mat-radio-unselected-pressed-icon-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+    --mat-radio-selected-hover-icon-color: var(--ion-color-accent);
+    --mat-radio-selected-icon-color: var(--ion-color-accent);
+    --mat-radio-selected-focus-icon-color: var(--ion-color-primary);
+    --mat-radio-selected-pressed-icon-color: var(--ion-color-accent);
     --mat-radio-ripple-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);;
     --mat-radio-checked-ripple-color: var(--ion-color-accent);
     --mat-radio-disabled-label-color: var(--app-form-color-disabled, rgba(black, 0.38));
@@ -273,13 +276,13 @@ form.form-container {
 
   // Slide
   .mat-mdc-slide-toggle {
-    --mdc-switch-selected-focus-handle-color: var(--ion-color-accent);
-    --mdc-switch-selected-icon-color: var(--ion-color-accent-contrast);
-    --mdc-switch-selected-hover-handle-color: var(--ion-color-accent-contrast);
-    --mdc-switch-selected-pressed-handle-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-focus-handle-color: var(--ion-color-accent);
+    --mat-slide-toggle-selected-icon-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-hover-handle-color: var(--ion-color-accent-contrast);
+    --mat-slide-toggle-selected-pressed-handle-color: var(--ion-color-accent-contrast);
 
     &.mat-mdc-slide-toggle-checked:not(.cdk-focused){
-      --mdc-switch-selected-icon-color: var(--ion-color-accent);
+      --mat-slide-toggle-selected-icon-color: var(--ion-color-accent);
     }
   }
 
@@ -370,7 +373,7 @@ html.dark {
     .mat-mdc-option {
       --mat-option-label-text-color: var(--ion-text-color);
       --mat-option-selected-state-label-text-color: var(--ion-color-primary);
-      --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
+      --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--ion-color-primary);
       color: var(--mat-option-label-text-color) !important;
     }
   }

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

@@ -1,3 +1,5 @@
+@use "ionic/ionic.theme.default" as *;
+
 $app-menu-width: 300px !default;
 
 $app-toolbar-height: 60px !default; // = $mat-toolbar-height-mobile + 4 (progress bar);

package/src/theme/_ngx-components.scss

@@ -1,3 +1,12 @@
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use 'ngx-components.globals' as *;
+@use 'mixins' as *;
+
+
+@forward "ngx-components.tabs";
+@forward "ngx-components.table";
+@forward "ngx-components.forms";
 
 body,
 html {
@@ -9,6 +18,12 @@ html {
   background: var(--ion-color-shade, rgba(var(--ion-color-text-rgb, 0, 0, 0), 0.3));
 }
 
+:root {
+  ion-icon {
+    pointer-events: none !important;
+  }
+}
+
 // Text style
 // --------------------------------------------------
 .text-italic {
@@ -213,8 +228,8 @@ mat-option:not(:last-of-type) {
   }
 
   .mat-mdc-select-panel {
-    --mat-switch-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
-    transition: --mat-switch-visible-track-transition;
+    --mat-slide-toggle-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
+    transition: --mat-slide-toggle-visible-track-transition;
     transform: scaleY(1) !important;
 
     &.hidden {
@@ -754,7 +769,7 @@ mat-calendar {
       }
 
       &.mat-accent {
-        --mdc-fab-small-container-color: var(--ion-color-accent);
+        --mat-fab-small-container-color: var(--ion-color-accent);
         --mat-fab-small-foreground-color: var(--ion-color-accent-contrast);
       }
     }
@@ -773,7 +788,7 @@ mat-calendar {
 
 .mat-mdc-form-field-type-mat-chip-grid {
   .mat-mdc-form-field-infix {
-    --mdc-chip-container-height: 24px !important;
+    --mat-chip-container-height: 24px !important;
   }
 }