@sumaris-net/ngx-components 2.18.0-beta8 → 2.21.0-rc1

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 {
@@ -27,29 +32,29 @@
   --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));
 
-  --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);
@@ -72,11 +77,6 @@
       }
     }
 
-    // force invisible
-    &.cdk-visually-hidden {
-      position: absolute !important;
-    }
-
     & > ion-label,
     & > mat-label,
     & button > ion-label,
@@ -125,6 +125,11 @@
         padding-inline-start: var(--mat-cell-horizontal-padding);
       }
 
+      // force invisible
+      &.cdk-visually-hidden {
+        position: absolute !important;
+      }
+
       &.mat-mdc-table-sticky-border-elem-left {
         border-right: 1px solid #{$app-table-border-color};
       }
@@ -216,6 +221,10 @@
       }
     }
 
+    .mat-latlong-field {
+      min-width: 130px;
+    }
+
     .mat-column-comments {
       min-width: 30px;
     }
@@ -243,7 +252,8 @@
     }
   }
 
-  .mat-mdc-row {
+  .mat-mdc-row,
+  .mat-mdc-footer-row {
     // Disabled row
     &.mat-mdc-row-disabled *,
     &.mat-row-disabled * {
@@ -266,10 +276,11 @@
       --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);
+      --mat-radio-label-text-color: var(--ion-text-color);
 
       background-color: var(--ion-background-color);
 
@@ -310,9 +321,6 @@
 
     .mat-mdc-input-element:disabled,
     .mat-form-field-disabled {
-      //.mat-mdc-form-field-label {
-      //  visibility: hidden;
-      //}
       color: inherit;
 
       .mdc-floating-label {
@@ -329,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 {
@@ -407,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,
@@ -418,7 +426,7 @@
           }
 
           .mat-mdc-button-touch-target {
-            width: var(--mdc-icon-button-state-layer-size);
+            width: var(--mat-icon-button-state-layer-size);
           }
         }
       }
@@ -430,6 +438,7 @@
 
       // Specific behavior for select
       &.mat-mdc-form-field-type-mat-select {
+        --mat-select-arrow-transform: translateY(0px);
         .mdc-text-field {
           padding-right: 8px;
         }
@@ -452,7 +461,10 @@
     .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
       margin-top: -1.5rem;
       text-align: right;
-      pointer-events: none;
+
+      // Avoid subscript to be clicked, in table
+      // + use !important to avoid override when row is disabled
+      pointer-events: none !important;
 
       mat-error,
       mat-hint {
@@ -476,13 +488,11 @@
     }
 
     mat-latlong-field {
+      --mat-select-arrow-transform: translateY(-3px);
       height: calc(var(--mat-row-height) - 2px);
-      ion-col.text {
-        min-width: unset !important; // make sure column is resizable
-      }
-      ion-col.sign {
-        --min-width: 35px !important;
-        --max-width: 45px !important;
+
+      .mat-mdc-form-field-infix {
+        height: calc(var(--mat-row-height) - 14px) !important;
       }
     }
 
@@ -544,8 +554,59 @@
     border-bottom-width: var(--mat-table-row-item-outline-width, 1px) !important;
     border-bottom-style: solid !important;
   }
-}
 
+  // Cell selection
+  --app-cell-selected-color: var(--ion-color-secondary50);
+  --app-cell-dragging-color: var(--ion-color-secondary50-shade);
+  --app-cell-selection-border-color: var(--ion-color-accent, gray);
+
+  td.cell-selected {
+    background-color: var(--app-cell-selected-color) !important;
+  }
+
+  td.cell-multiple-selected {
+    user-select: none; // To prevent text selection when multiple cells are selected
+  }
+
+  td.cell-dragging {
+    background-color: var(--app-cell-dragging-color) !important;
+  }
+
+  div.cell-selection-overlay {
+    position: absolute;
+    z-index: 5;
+    animation: linearGradientMove 0.3s infinite linear;
+    background:
+      linear-gradient(90deg, var(--app-cell-selection-border-color) 50%, transparent 0) repeat-x,
+      linear-gradient(90deg, var(--app-cell-selection-border-color) 50%, transparent 0) repeat-x,
+      linear-gradient(0deg, var(--app-cell-selection-border-color) 50%, transparent 0) repeat-y,
+      linear-gradient(0deg, var(--app-cell-selection-border-color) 50%, transparent 0) repeat-y;
+    background-size:
+      4px 2px,
+      4px 2px,
+      2px 4px,
+      2px 4px;
+    background-position:
+      0 0,
+      0 100%,
+      0 0,
+      100% 0;
+    background-color: unset;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  // Animated dashed border keyframes
+  @keyframes linearGradientMove {
+    100% {
+      background-position:
+        4px 0,
+        -4px 100%,
+        0 -4px,
+        100% 4px;
+    }
+  }
+}
 
 // Paginator
 .mat-mdc-paginator {
@@ -566,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
@@ -39,16 +41,46 @@
   display: inherit;
 }
 
+// --- Avoid use selection of tab labels
+.mat-mdc-tab-label,
+.mat-mdc-tab-link {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
 // --- 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;
+  }
+}
+
+// Keep some style element that have changed after angular 15 migration
+// (but keep new style if enable stretch tabs)
+.mat-mdc-tab-group:not(.mat-mdc-tab-group-stretch-tabs) {
+  .mdc-tab {
+    min-width: 160px;
+  }
+}
+
+
+// Smaller tab label padding, on xxs device
+@media screen and (max-width: $screen-xxs-max) {
+  .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs {
+    .mdc-tab {
+      // Reduce horizontal padding in tab label, from 24px to 16px (should be enough for badge)
+      padding: 0 16px;
+    }
   }
 }
+

package/src/theme/_responsive.scss

@@ -1,3 +1,5 @@
+@use "ionic.globals" as *;
+
 // --------------------------------------------------
 // Hidden/Visible responsive
 // --------------------------------------------------
@@ -21,6 +23,7 @@ html:not(.plt-mobile) {
   }
 }
 
+// Extra extra small devices
 @media screen and (max-width: $screen-xxs-max) {
   @-ms-viewport {
     width: 320px;
@@ -30,6 +33,18 @@ html:not(.plt-mobile) {
     display: none !important;
     visibility: hidden !important;
   }
+  [visible-xxs],
+  .visible-xxs {
+    display: inherit !important;
+    visibility: visible !important;
+  }
+}
+@media screen and (min-width: $screen-xs) {
+  [visible-xxs],
+  .visible-xxs {
+    display: none !important;
+    visibility: hidden !important;
+  }
 }
 
 // Extra small device

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();
@@ -12,11 +18,9 @@ html {
  * Dark Theme
  * -------------------------------------------
  */
-
 html.dark {
   @include css-variables-to-root-dark();
 
-
   --ion-color-primary: #428cff;
   --ion-color-primary-rgb: 66, 140, 255;
   --ion-color-primary-contrast: #ffffff;
@@ -81,7 +85,7 @@ html.dark {
   --ion-color-light-tint: #383a3e;
 
   --ion-toolbar-background: #1f1f1f;
-  --ion-border-color: #222222;
+  --ion-border-color: #303030;
   --ion-backdrop-opacity: 0.15;
 
   --app-form-field-background-color: var(--ion-color-light-tint);

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