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

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;
   }
 }
 

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

@@ -1,3 +1,8 @@
+@use 'ionic.globals' as *;
+@use 'ngx-components.globals' as *;
+@use 'functions' as *;
+@use 'mixins' as *;
+
 // --------------------------------------------------
 // Material Table
 // --------------------------------------------------
@@ -9,12 +14,12 @@
 }
 
 .dark .mat-mdc-table {
-  --mdc-checkbox-selected-checkmark-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-icon-color: var(--ion-text-color);
-  --mdc-checkbox-selected-icon-color: var(--ion-color-accent);
-  --mdc-checkbox-unselected-focus-icon-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-hover-icon-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-pressed-icon-color: var(--ion-color-accent);
+  --mat-checkbox-selected-checkmark-color: var(--ion-text-color);
+  --mat-checkbox-unselected-icon-color: var(--ion-text-color);
+  --mat-checkbox-selected-icon-color: var(--ion-color-accent);
+  --mat-checkbox-unselected-focus-icon-color: var(--ion-text-color);
+  --mat-checkbox-unselected-hover-icon-color: var(--ion-text-color);
+  --mat-checkbox-unselected-pressed-icon-color: var(--ion-color-accent);
 }
 
 .mat-mdc-table {
@@ -32,24 +37,24 @@
   --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));
 
-  --mdc-typography-body1-font-size: 14px;
-  --mdc-typography-body1-letter-spacing: normal;
+  --mat-typography-body1-font-size: 14px;
+  --mat-typography-body1-letter-spacing: normal;
 
   --mat-form-field-container-text-tracking: normal;
   --mat-form-field-state-layer-color: #{$app-table-cell-focus-background-color};
   --mat-form-field-subscript-text-size: 10px;
-  --mdc-checkbox-state-layer-size: 20px;
-  --mdc-radio-state-layer-size: 20px;
-  --mdc-filled-text-field-container-color: transparent;
-  --mdc-filled-text-field-disabled-container-color: transparent;
-  --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-active-indicator-color: transparent;
-  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-active-indicator-color: transparent;
-  --mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
+  --mat-checkbox-state-layer-size: 20px;
+  --mat-radio-state-layer-size: 20px;
+  --mat-form-field-filled-container-color: transparent;
+  --mat-form-field-filled-disabled-container-color: transparent;
+  --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-active-indicator-color: transparent;
+  --mat-form-field-filled-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-active-indicator-color: transparent;
+  --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-select-enabled-trigger-text-color: var(--ion-text-color);
   --mat-select-disabled-trigger-text-color: var(--ion-text-color);
@@ -271,7 +276,7 @@
       --ion-text-color: var(--app-table-row-item-selected-text-color) !important;
       --ion-background-color: var(--app-table-row-item-selected-background-color) !important;
 
-      --mdc-filled-text-field-input-text-color: var(--ion-text-color);
+      --mat-form-field-filled-input-text-color: var(--ion-text-color);
       --mat-select-enabled-trigger-text-color: var(--ion-text-color);
       --mat-select-disabled-trigger-text-color: var(--ion-text-color);
       --mat-checkbox-label-text-color: var(--ion-text-color);
@@ -332,10 +337,10 @@
       width: 100%;
 
       --mat-form-field-container-text-size: 14px;
-      --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
+      --mat-form-field-filled-label-text-size: var(--mat-form-field-container-text-size);
       --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
       --mat-mdc-form-field-height: calc(var(--mat-row-height) - 2px);
-      --mdc-outlined-text-field-outline-width: 0;
+      --mat-form-field-outlined-outline-width: 0;
       height: var(--mat-mdc-form-field-height);
 
       .mat-mdc-form-field-label {
@@ -410,7 +415,7 @@
         padding: 0;
 
         .mat-mdc-icon-button {
-          --mdc-icon-button-state-layer-size: 24px;
+          --mat-icon-button-state-layer-size: 24px;
           padding: 0;
 
           ion-icon,
@@ -421,7 +426,7 @@
           }
 
           .mat-mdc-button-touch-target {
-            width: var(--mdc-icon-button-state-layer-size);
+            width: var(--mat-icon-button-state-layer-size);
           }
         }
       }
@@ -622,7 +627,7 @@
   }
 
   button {
-    --mdc-icon-button-state-layer-size: var(--mat-paginator-container-size) !important;
+    --mat-icon-button-state-layer-size: var(--mat-paginator-container-size) !important;
     padding: 6px !important;
   }
 }

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

@@ -1,21 +1,23 @@
+@use "ionic.globals" as *;
+
 // --------------------------------------------------
 // Material tab group/link
 // --------------------------------------------------
 
 // -- Keep Angular 14 tab style
 .mat-mdc-tab-label-container, .mat-mdc-tab-link-container {
-  --mat-tab-header-divider-color: rgba(0,0,0,.12) !important;
-  --mat-tab-header-divider-height: 1px !important;
-  --mat-tab-header-background-color: var(--background, var(--ion-background-color));
-  background-color: var(--mat-tab-header-background-color);
+  --mat-tab-divider-color: rgba(0,0,0,.12) !important;
+  --mat-tab-divider-height: 1px !important;
+  --mat-tab-background-color: var(--background, var(--ion-background-color));
+  background-color: var(--mat-tab-background-color);
 }
 .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: #000000de !important;
-  --mat-tab-header-active-focus-label-text-color: #000000de !important;
-  --mat-tab-header-active-hover-label-text-color: #000000de !important;
+  --mat-tab-active-label-text-color: #000000de !important;
+  --mat-tab-active-focus-label-text-color: #000000de !important;
+  --mat-tab-active-hover-label-text-color: #000000de !important;
 }
 .mat-mdc-tab-header {
-  --mat-tab-header-label-text-tracking: 0.0178571429em !important;
+  --mat-tab-label-text-tracking: 0.0178571429em !important;
 }
 
 // --- Allow to hide headers
@@ -52,14 +54,14 @@
 // --- Dark mode
 .dark {
   .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-    --mat-tab-header-active-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-active-focus-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-active-hover-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-inactive-label-text-color: var(--app-form-color-disabled);
-    --mat-tab-header-inactive-hover-label-text-color: var(--ion-text-color, #000000de);
+    --mat-tab-active-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-active-focus-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-active-hover-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-inactive-label-text-color: var(--app-form-color-disabled);
+    --mat-tab-inactive-hover-label-text-color: var(--ion-text-color, #000000de);
   }
   .mat-mdc-tab-label-container, .mat-mdc-tab-link-container {
-    --mat-tab-header-divider-color: var(--ion-border-color, rgba(0,0,0,.12)) !important;
+    --mat-tab-divider-color: var(--ion-border-color, rgba(0,0,0,.12)) !important;
   }
 }
 

package/src/theme/_responsive.scss

@@ -1,3 +1,5 @@
+@use "ionic.globals" as *;
+
 // --------------------------------------------------
 // Hidden/Visible responsive
 // --------------------------------------------------

package/src/theme/_roboto.scss

@@ -1,4 +1,7 @@
+@use "ionic.globals" as *;
+
 // Roboto Font
+// --------------------------
 // Google
 // Apache License, version 2.0
 // http://www.apache.org/licenses/LICENSE-2.0.html

package/src/theme/_theme.scss

@@ -1,37 +1,34 @@
-// --------------------------------------------------
-// Import globals (variables, functions and mixins)
-// --------------------------------------------------
-@import "globals";
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use "ngx-components.globals" as *;
+
 // --------------------------------------------------
 // Import Ionic style
 // --------------------------------------------------
-@import "ionic";
+@use "ionic";
 // --------------------------------------------------
 // Import Ion Icons
 // --------------------------------------------------
 $ionicons-font-path: '~ionicons/dist/fonts';
-@import "icons";
+@use "icons";
 // --------------------------------------------------
 // Import Fonts
 // --------------------------------------------------
 $roboto-font-path: '~roboto-fontface/fonts/roboto';
-@import "roboto";
+@use "roboto";
 // --------------------------------------------------
 // Import responsive style
 // --------------------------------------------------
-@import "responsive";
+@use "responsive";
 // --------------------------------------------------
 // Import material style
 // --------------------------------------------------
-@import "material";
+@use "material";
 // --------------------------------------------------
 // Import markdown style
 // --------------------------------------------------
-@import "markdown";
+@use "markdown";
 // --------------------------------------------------
 // Import SUMARiS style
 // --------------------------------------------------
-@import "ngx-components";
-@import "ngx-components.tabs";
-@import "ngx-components.table";
-@import "ngx-components.forms";
+@use "ngx-components";

package/src/theme/_theme.variables.scss

@@ -1,3 +1,9 @@
+@use "mixins" as *;
+
+* {
+  @include font-roboto();
+}
+
 /** Inject all CSS Variables **/
 html {
   @include css-variables-to-root();
@@ -15,7 +21,6 @@ html {
 html.dark {
   @include css-variables-to-root-dark();
 
-
   --ion-color-primary: #428cff;
   --ion-color-primary-rgb: 66, 140, 255;
   --ion-color-primary-contrast: #ffffff;

package/src/theme/ionic/ionic.functions.color.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:map";
+
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
@@ -20,8 +23,8 @@
 // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
 // --------------------------------------------------------------------------------------------
 @function ion-color($name, $variation, $alpha: null, $rgb: null) {
-  $values: map-get($colors, $name);
-  $value: map-get($values, $variation);
+  $values: map.get($colors, $name);
+  $value: map.get($values, $variation);
   $variable: --ion-color-#{$name}-#{$variation};
 
   @if ($variation == base) {
@@ -43,17 +46,22 @@
 // Mixes a color with black to create its shade.
 // --------------------------------------------------------------------------------------------
 @function get-color-shade($color) {
-  @return mix(#000, $color, 12%);
+  @return color.mix(#000, $color, 12%);
 }
 
 // Mixes a color with white to create its tint.
 // --------------------------------------------------------------------------------------------
 @function get-color-tint($color) {
-  @return mix(#fff, $color, 10%);
+  @return color.mix(#fff, $color, 10%);
 }
 
 // Converts a color to a comma separated rgb.
 // --------------------------------------------------------------------------------------------
 @function color-to-rgb-list($color) {
-  @return #{red($color)},#{green($color)},#{blue($color)};
+
+  $red:   color.channel($color, "red",   $space: rgb);
+  $green: color.channel($color, "green", $space: rgb);
+  $blue:  color.channel($color, "blue",  $space: rgb);
+
+  @return #{$red},#{$green},#{$blue};
 }

package/src/theme/ionic/ionic.globals.scss

@@ -1,14 +1,14 @@
 // Global Utility Functions
-@import "./ionic.functions.string";
+@use "./ionic.functions.string" as *;
 
 // Global Color Functions
-@import "./ionic.functions.color";
+@use "./ionic.functions.color" as *;
 
 // Global Mixins
-@import "./ionic.mixins";
+@use "./ionic.mixins" as *;
 
 // Default Theme
-@import "./ionic.theme.default";
+@use "./ionic.theme.default" as *;
 
 
 // Default General

package/src/theme/ionic/ionic.theme.default.scss

@@ -1,3 +1,5 @@
+@use './ionic.functions.color' as *;
+
 // Ionic Theme
 // -------------------------------------------------------------------------------------------
 // This file contains the theme variables shared