@sumaris-net/ngx-components 21.0.0-rc8 → 21.0.0

package/src/assets/manifest.json

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

package/src/theme/_functions.scss

@@ -1,5 +1,5 @@
-//@use './ionic/ionic.functions.string';
-//@use './ionic/ionic.functions.color';
+@forward './ionic/ionic.functions.string';
+@forward './ionic/ionic.functions.color';
 
 @function calculateRem($size) {
   $remSize: $size / 16px;

package/src/theme/_icons.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 // Import material icons
 // --------------------------------------------------
-@use 'material-design-icons-iconfont/src/material-design-icons' with (
+@forward 'material-design-icons-iconfont/src/material-design-icons' with (
   $material-design-icons-font-directory-path: '../dist/fonts/'
 );
 

package/src/theme/_ionic.globals.scss

@@ -4,16 +4,10 @@
 // values for --ion-color-*-tint/-shade/-rgb. With Sass modules, `@use ... as *` is NOT
 // transitive, so we must use/forward this module explicitly (the legacy @import made it global).
 @use 'ionic/ionic.functions.color' as *;
-@use 'ionic/ionic.globals' as *;
-@use 'ionic/ionic.theme.default' as *;
 
 // --------------------------------------------------
 // Define Ionic defaults
 // --------------------------------------------------
-@forward 'ionic/ionic.functions.color';
-@forward 'ionic/ionic.globals';
-@forward 'ionic/ionic.theme.default';
-
 $ionicons-font-path: '~ionicons/dist/fonts';
 
 // --------------------------------------------------
@@ -147,4 +141,9 @@ $colors: (
   dark: (base: $dark, contrast: #fff, shade: get-color-shade($dark), tint: get-color-tint($dark)),
   /* transparent */
   transparent: (base: $transparent, contrast: $dark, shade: $transparent, tint: $transparent)
+) !default;
+
+@forward 'ionic/ionic.functions.color';
+@forward 'ionic/ionic.globals' with (
+  $colors: $colors
 );

package/src/theme/_material.globals.scss

@@ -80,3 +80,5 @@ $mat-toolbar-height-mobile: 56px !default;
 $mat-toolbar-background-color: var(--ion-toolbar-background, var(--ion-background-color, whitesmoke)) !default;
 $mat-option-min-height: 48px !default;
 $mat-option-max-height: 48px !default;
+$mat-expansion-container-background-color: var(--ion-color-secondary100) !default;
+$mat-expansion-container-text-color: var(--ion-text-color) !default;

package/src/theme/_mixins.scss

@@ -4,8 +4,6 @@
 @use 'ngx-components.globals' as *;
 @use '@angular/material' as mat;
 
-@forward "functions";
-
 @mixin font-size($size) {
   font-size: calculateRem($size);
 }
@@ -44,12 +42,20 @@
 /**
 * Define CSS theme colors
 */
-@mixin generate-color($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-color($color-name, $value) {
   $base: map-get($value, base);
   $contrast: map-get($value, contrast);
+  @if not $contrast {
+    $contrast: get-color-contrast($base);
+  }
   $shade: map-get($value, shade);
+  @if not $shade {
+    $shade: get-color-shade($base);
+  }
   $tint: map-get($value, tint);
+  @if not $tint {
+    $tint: get-color-tint($base);
+  }
   --ion-color-base: var(--ion-color-#{""+$color-name}, #{$base}) !important;
   --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb, #{color-to-rgb-list($base)});
   --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
@@ -58,10 +64,12 @@
   --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
 
-@mixin generate-color-list($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-color-list($color-name, $value) {
   $base: map-get($value, base);
   $contrast: map-get($value, contrast);
+  @if not $contrast {
+    $contrast: get-color-contrast($base);
+  }
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
   --ion-color-#{""+$color-name} : #{$base};
@@ -72,8 +80,7 @@
   --ion-color-#{""+$color-name}-tint: #{$tint};
 }
 
-@mixin generate-dark-color-list($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-dark-color-list($color-name, $value) {
   $base: mix(map-get($value, base), #000, 50%);
   $contrast: get-color-contrast($base, true);
   $shade: lighten($base, 10%);
@@ -95,19 +102,19 @@
   }
 }
 
-@mixin css-variables-to-root() {
-  @each $color-name,
-  $value in $colors {
+@mixin css-variables-to-root($colors) {
+  @each $color-name, $value in $colors {
     .ion-color-#{""+$color-name} {
-      @include generate-color($color-name);
+      @include generate-color($color-name, $value);
     }
   }
 
   @each $color-name,
   $value in $colors {
-    @include generate-color-list($color-name);
+    @include generate-color-list($color-name, $value);
   }
 
+
   --ion-text-color: #{$text-color-value};
   --ion-text-color-rgb: #{$text-color-rgb-value};
   --ion-grid-column-padding: #{$ion-grid-column-padding};
@@ -122,10 +129,10 @@
   --ion-backdrop-opacity: 0.32;
   --ion-card-background-color: #{$card-background-color};
 
-  --expansion-panel-padding: var(--ion-padding);
-  --expansion-panel-header-padding: var(--ion-padding);
-  --mat-expansion-container-background-color: var(--ion-background-color);
-  --mat-expansion-container-text-color: var(--ion-text-color);
+  --expansion-panel-padding: var($app-expansion-panel-padding, var(--ion-padding));
+  --expansion-panel-header-padding: var($app-expansion-panel-header-padding, var(--ion-padding));
+  --mat-expansion-container-background-color:var($mat-expansion-container-background-color, var(--ion-background-color));
+  --mat-expansion-container-text-color: var($mat-expansion-container-text-color, var(--ion-text-color));
 
   --mat-tab-link-height: #{$mat-tab-link-height};
   --mat-tab-bar-height: #{$mat-tab-bar-height};
@@ -193,7 +200,7 @@
 
 }
 
-@mixin css-variables-to-root-dark() {
+@mixin css-variables-to-root-dark($colors) {
 
   @include mat.all-component-colors($candy-dark-theme);
 
@@ -202,7 +209,7 @@
 
   @each $color-name,
   $value in $colors {
-    @include generate-dark-color-list($color-name);
+    @include generate-dark-color-list($color-name, $value);
   }
 
   // Inverse background/text color

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

@@ -13,6 +13,9 @@ $app-table-cell-focus-background-color: transparent !default;
 $app-paginator-height: 34px !default;
 $app-form-buttons-bar-height: 56px !default;
 
+$app-expansion-panel-padding: 0 !default;
+$app-expansion-panel-header-padding: 0 !default;
+
 // Form's field text and label
 $app-form-color: #{$text-color} !default;
 $app-form-color-rgb: #{$text-color-rgb} !default;

package/src/theme/_ngx-components.scss

@@ -209,6 +209,12 @@ mat-option {
       padding: 0 !important;
     }
   }
+
+  /* hide pseudo checkbox, in the footer*/
+  &.mat-pseudo-checkbox-hidden mat-pseudo-checkbox {
+    visibility: hidden;
+    display: none;
+  }
 }
 
 mat-option:not(:last-of-type) {
@@ -404,12 +410,14 @@ ion-list,
       /* Offset due to mat-pseudo-checkbox */
       padding-left: 32px;
     }
-    &.column {
+    &.sticky {
       /* Set header as sticky*/
       position: -webkit-sticky;
       position: sticky;
-      top: 0;
+      top: var(--top, 0);
       z-index: 1001;
+    }
+    &.column {
       background-color: var(--ion-color-secondary);
       border-bottom: 1px solid #{$app-select-option-border-color};
       color: var(--ion-color-secondary-contrast);
@@ -417,16 +425,16 @@ ion-list,
       @include font-size(12px);
       font-weight: 500;
       height: 20px;
+      --top: var(--header-column-top, 0);
       ion-col {
         white-space: nowrap;
         text-overflow: ellipsis;
       }
       &.mat-select-searchbar-sticky {
         /* offset because of the searchbar height */
-        top: var(--ion-searchbar-height, 58px);
+        --header-column-top: var(--ion-searchbar-height, 58px);
       }
     }
-
   }
 
   ion-row.ion-list-footer,
@@ -437,7 +445,7 @@ ion-list,
     /* Set footer as sticky*/
     position: -webkit-sticky;
     position: sticky;
-    bottom: 0;
+    bottom: var(--footer-bottom, 0);
     z-index: 1001;
     border-top: 1px solid #{$app-select-option-border-color};
     background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
@@ -453,6 +461,8 @@ ion-list,
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+
   }
 
   ion-row {

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

@@ -126,6 +126,8 @@
     .mat-mdc-footer-cell {
       // Remove default padding
       padding-inline: 0;
+      padding-inline-start: 0; // Compat Chrome < 87 (padding-inline not exists yet)
+      padding-inline-end: 0; // Compat Chrome < 87 (padding-inline not exists yet)
 
       &.ion-padding-start {
         padding-inline-start: var(--mat-cell-horizontal-padding);
@@ -363,7 +365,10 @@
       }
 
       .mdc-text-field {
+        // Remove default padding
         padding-inline: 0;
+        padding-inline-start: 0; // Compat Chrome < 87 (padding-inline not exists yet)
+        padding-inline-end: 0; // Compat Chrome < 87 (padding-inline not exists yet)
       }
 
       // Prefix

package/src/theme/_theme.scss

@@ -1,21 +1,22 @@
-@use 'ionic.globals' as *;
-@use 'material.globals' as *;
-@use "ngx-components.globals" as *;
+@forward 'ionic.globals';
+@forward 'material.globals';
+@forward 'ngx-components.globals';
 
 // --------------------------------------------------
 // Import Ionic style
 // --------------------------------------------------
 @use "ionic";
 // --------------------------------------------------
-// Import Ion Icons
+// Import Icons
 // --------------------------------------------------
 $ionicons-font-path: '~ionicons/dist/fonts';
 @use "icons";
 // --------------------------------------------------
 // Import Fonts
 // --------------------------------------------------
-$roboto-font-path: '~roboto-fontface/fonts/roboto';
-@use "roboto";
+@use "roboto" as * with (
+  $roboto-font-path: '~roboto-fontface/fonts/roboto'
+);
 // --------------------------------------------------
 // Import responsive style
 // --------------------------------------------------

package/src/theme/_theme.variables.scss

@@ -1,5 +1,7 @@
+@use 'ionic.globals' as *;
 @use "mixins" as *;
 
+
 * {
   @include font-roboto();
 }
@@ -10,9 +12,9 @@
 // A 'html' selector has a lower specificity than ':root' and would always be
 // overridden by Ionic's defaults (e.g. --ion-color-primary: #0054e9).
 :root {
-  @include css-variables-to-root();
+  @include css-variables-to-root($colors);
 
-  &.plt-mobile {
+  &:has(html.plt-mobile) {
     @include css-variables-to-root-mobile();
   }
 
@@ -23,7 +25,7 @@
  * -------------------------------------------
  */
 html.dark {
-  @include css-variables-to-root-dark();
+  @include css-variables-to-root-dark($colors);
 
   --ion-color-primary: #428cff;
   --ion-color-primary-rgb: 66, 140, 255;

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

@@ -8,8 +8,7 @@
 @use "./ionic.mixins" as *;
 
 // Default Theme
-@use "./ionic.theme.default" as *;
-
+@forward "./ionic.theme.default";
 
 // Default General
 // --------------------------------------------------

package/types/sumaris-net-ngx-components-testing.d.ts

@@ -1,5 +1,6 @@
-import { Page, Locator } from 'playwright';
-import { PlaywrightTestArgs } from '@playwright/test';
+import { Page, Locator, PlaywrightTestArgs } from '@playwright/test';
+
+declare const STARTUP_DATA_STORAGE_KEY = "__appStartupData";
 
 /**
  * Utility selectors and helpers for Ionic components in e2e tests.
@@ -282,5 +283,5 @@ interface LoginEnv {
     password: string;
 }
 
-export { AuthHelper, IonicHelper, IonicSelectors, MaterialHelper, MaterialSelectors, UiHelper, testWithEnv, withEnvs };
+export { AuthHelper, IonicHelper, IonicSelectors, MaterialHelper, MaterialSelectors, STARTUP_DATA_STORAGE_KEY, UiHelper, testWithEnv, withEnvs };
 export type { EnvFilter, LoginEnv };