@sumaris-net/ngx-components 4.0.0-rc8 → 18.0.0-rc1

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

@@ -21,6 +21,4 @@ export declare class EnvironmentHttpLoader<T extends Environment = Environment>
     get(): T;
     load(): Promise<T>;
     protected fetch(url: string): Promise<Partial<T>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<EnvironmentHttpLoader<any>, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<EnvironmentHttpLoader<any>>;
 }

package/src/theme/_functions.scss

@@ -5,3 +5,18 @@
   $remSize: $size / 16px;
   @return $remSize * 1rem;
 }
+
+@function get-color-contrast($color, $bw: false) {
+  $lightness: lightness($color);
+
+  @if $bw == true {
+    @if $lightness > 50% {
+      @return #000000; // retourne noir si la couleur est claire
+    } @else {
+      @return #ffffff; // retourne blanc si la couleur est foncée
+    }
+  }
+  @else {
+    @return invert($color); // retourne la couleur inversée si bw n'est pas true
+  }
+}

package/src/theme/_icons.scss

@@ -7,7 +7,7 @@
 
 $ionicons-font-path: $font-path !default;
 
-//@import '~ionicons/dist/scss/ionicons';
+//@import 'ionicons/dist/scss/ionicons';
 
 // --------------------------------------------------
 // Import material icons

package/src/theme/_ionic.globals.scss

@@ -54,15 +54,21 @@ $dark:        #222428 !default;
 $transparent: transparent;
 
 // Main background color
-$background-color: #fff !default;
+$background-color-value: #fff;
+$background-color-rgb-value: 255, 255, 255;
+$ion-toolbar-background: whitesmoke !default;
+
 // Text color
+$text-color-value: rgba(black, 0.87);
+$text-color-rgb-value: 0,0,0;
+
 $dark-primary-text: rgba(black, 0.87);
 $dark-secondary-text: rgba(black, 0.54);
 $dark-disabled-text: rgba(black, 0.38);
 $light-primary-text: white;
 $light-secondary-text: rgba(white, 0.7);
 $light-disabled-text: rgba(white, 0.5);
-$text-color: $dark-primary-text;
+$card-background-color: rgba(white, 0.7);
 
 // Default General Colors
 // --------------------------------------------------

package/src/theme/_ionic.scss

@@ -1,18 +1,18 @@
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import "@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
-@import '~@ionic/angular/css/display.css';
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
 
 // --------------------------------------------------
 // Override Ionic style

package/src/theme/_material.globals.scss

@@ -2,7 +2,6 @@
 // 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
@@ -40,63 +39,34 @@ $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),
-//);
 
 // FIXME: Why loader toolbar is so dark ?
-$candy-app-primary: mat.define-palette($mat-indigo-app, 500, 100, 900);
+$candy-app-primary: mat.m2-define-palette($mat-indigo-app, 500, 100, 900);
 
-$candy-app-accent: mat.define-palette($mat-indigo-app, A200, A100, A400);
+$candy-app-accent: mat.m2-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);
+$candy-app-warn: mat.m2-define-palette(mat.$m2-red-palette);
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat.define-light-theme((
+$candy-light-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $candy-app-primary,
+    accent: $candy-app-accent,
+    warn: $candy-app-warn,
+  ),
+  typography: mat.m2-define-typography-config(),
+  density: 0,
+));
+$candy-dark-theme: mat.m2-define-dark-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;
@@ -104,3 +74,6 @@ $mat-tab-bar-height: 48px !default;
 $mat-tab-animation-duration: 200ms !default;
 $mat-toolbar-height-desktop: 64px !default;
 $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;

package/src/theme/_material.scss

@@ -1,3 +1,11 @@
+@use '@angular/material' as mat;
+
+// --------------------------------------------------
+// Standard material style
+// --------------------------------------------------
+@include mat.core();
+@include mat.all-component-themes($candy-light-theme);
+
 // --------------------------------------------------
 // Override material style
 // --------------------------------------------------
@@ -16,41 +24,66 @@
   min-width: 160px !important;
 }
 .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: #000000de;
-  --mat-tab-header-active-focus-label-text-color: #000000de;
-  --mat-tab-header-active-hover-label-text-color: #000000de;
+  --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-mdc-tab-header {
+  --mat-tab-header-label-text-tracking: 0.0178571429em;
 }
 .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
   transform: translateY(0px) !important;
 }
 
 // Icon, Button
+.mat-button.mat-primary,
 .mat-icon.mat-primary,
 .mat-icon-button.mat-primary,
-.mat-button.mat-primary,
+.mat-mdc-button.mat-primary,
+.mat-mdc-icon-button.mat-primary,
 .mat-stroked-button.mat-primary {
   color: var(--ion-color-tertiary, $tertiary);
 }
-.mat-icon.mat-secondary,
 .mat-button.mat-secondary,
+.mat-icon.mat-secondary,
 .mat-icon-button.mat-secondary,
+.mat-mdc-button.mat-secondary,
+.mat-mdc-icon-button.mat-secondary,
 .mat-stroked-button.mat-secondary {
   color: var(--ion-color-secondary, $secondary);
 }
-.mat-icon.mat-accent,
 .mat-button.mat-accent,
+.mat-icon.mat-accent,
 .mat-icon-button.mat-accent,
+.mat-mdc-button.mat-accent,
+.mat-mdc-icon-button.mat-accent,
 .mat-stroked-button.mat-accent {
-  color: var(--ion-color-accent);
+  color: var(--ion-color-accent, $accent);
 }
 .mdc-button {
   --mdc-typography-button-letter-spacing: normal;
+  --mdc-text-button-label-text-tracking: normal;
 }
-
-// Badge
-.mdc-tab .mat-badge-content {
-    padding-left: 2px;
+.mat-mdc-menu-item {
+  --mat-menu-item-label-text-tracking: normal;
+  --mat-menu-item-label-text-size: 14px;
+  --mat-menu-item-icon-color: #0000008a;
+}
+.mat-mdc-option {
+  --mat-option-label-text-tracking: normal;
+  --mat-option-label-text-size: 16px;
+  min-height: var(--mat-option-min-height, 48px);
+}
+.mat-mdc-select {
+  --mat-select-trigger-text-font: inherit;
+  --mat-select-trigger-text-tracking: normal;
+  --mat-select-trigger-text-size: inherit;
+  --mat-select-disabled-trigger-text-color: inherit;
+  --mat-select-trigger-text-line-height: inherit;
 }
+
 .mat-badge-primary .mat-badge-content {
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
@@ -64,6 +97,7 @@
   color: var(--ion-color-warning-contrast);
 }
 
+
 // Progress bar
 .mat-progress-bar {
   --background-color: var(--ion-color-primary-tint, mix(#fff, $primary, 10%));
@@ -81,27 +115,6 @@
   }
 }
 
-// Date picker
-@media (orientation: landscape) {
-  .mat-datepicker-content-touch {
-    height: unset !important;
-    min-height: 80vh;
-
-    .mat-calendar-controls {
-      margin-top: 0;
-    }
-    .mat-datepicker-content-container {
-      &.mat-datepicker-content-container-with-actions {
-        height: unset !important;
-      }
-     .mat-datepicker-actions {
-       background-color: white;
-       margin-top: -12px;
-     }
-  }
-}
-
-}
 
 .mat-option, .mat-mdc-option {
   padding-top: var(--padding-top, 0) !important;

package/src/theme/_mixins.scss

@@ -8,7 +8,6 @@
   font-size: calculateRem($size) !important;
 }
 
-
 @mixin font-roboto($size: false, $colour: false, $weight: false, $lh: false) {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
 
@@ -45,18 +44,12 @@
   $contrast: map-get($value, contrast);
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
-  --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)}) !important;
-  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast,
-    #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb,
-    #{color-to-rgb-list($contrast)}) !important;
-  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade,
-    #{$shade}) !important;
-  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint,
-    #{$tint}) !important;
+  --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)}) !important;
+  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade, #{$shade}) !important;
+  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
 
 @mixin generate-color-list($color-name) {
@@ -73,6 +66,20 @@
   --ion-color-#{""+$color-name}-tint: #{$tint};
 }
 
+@mixin generate-dark-color-list($color-name) {
+  $value: map-get($colors, $color-name);
+  $base: mix(map-get($value, base), #000, 50%);
+  $contrast: get-color-contrast($base, true);
+  $shade: lighten($base, 10%);
+  $tint: darken($base, 12%);
+  --ion-color-#{""+$color-name} : #{$base};
+  --ion-color-#{""+$color-name}-rgb: #{color-to-rgb-list($base)};
+  --ion-color-#{""+$color-name}-contrast: #{$contrast};
+  --ion-color-#{""+$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
+  --ion-color-#{""+$color-name}-shade: #{$shade};
+  --ion-color-#{""+$color-name}-tint: #{$tint};
+}
+
 @mixin set-color-each-ion-colors($element-name) {
 
   @each $color-name, $value in $colors {
@@ -95,24 +102,52 @@
     @include generate-color-list($color-name);
   }
 
+  --ion-text-color: #{$text-color-value};
+  --ion-text-color-rgb: #{$text-color-rgb-value};
   --ion-grid-column-padding: #{$ion-grid-column-padding};
   --ion-padding: #{$ion-padding};
   --ion-margin: #{$ion-margin};
+  --ion-background-color: #{$background-color-value};
+  --ion-background-color-rgb: #{$background-color-rgb-value};
+  --ion-toolbar-height: #{$ion-toolbar-height};
+  --ion-toolbar-background: #{$ion-toolbar-background};
+  --ion-backdrop-color: #{$text-color};
+  --ion-backdrop-color-rgb: #{$text-color-rgb};
+  --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-tab-link-height: #{$mat-tab-link-height};
+  --mat-tab-bar-height: #{$mat-tab-bar-height};
+
   --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-paginator-height: mat.$paginator-height;
-  --ion-toolbar-height: #{$ion-toolbar-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);
+  --mat-toolbar-container-background-color: var(--ion-toolbar-background);
+  --mat-toolbar-container-text-color: var(--ion-text-color);
+  --mat-table-background-color: var(--ion-background-color);
 
   --app-table-header-height: #{$app-table-header-height};
-  --app-toolbar-height: #{$app-toolbar-height};
   --app-paginator-height: #{$app-paginator-height};
-  --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
+  --app-toolbar-height: #{$app-toolbar-height};
   --app-footer-height: var(--app-form-buttons-bar-height);
-  --mat-tab-link-height: #{$mat-tab-link-height};
-  --mat-tab-bar-height: #{$mat-tab-bar-height};
+  --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
+  --app-form-color: #{$app-form-color};
+  --app-form-color-rgb: #{$app-form-color-rgb};
+  --app-form-color-disabled: #{$app-form-color-disabled};
+  --app-form-color-computed: #{$app-form-color-computed};
+  --app-form-field-background-color: #{$app-form-field-background-color};
+  --app-form-field-background-color-shade: #{$app-form-color-background-color-shade};
+  --app-form-field-focus-background-color: #{$app-form-field-focus-background-color};
+  --app-form-field-disabled-background-color: #{$app-form-field-disabled-background-color};
+  --app-form-field-label-color: #{$app-form-field-label-color};
+  --app-form-field-disabled-label-color: #{$app-form-field-disabled-label-color};
+  --app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
+  --app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
 }
 
 @mixin css-variables-to-root-mobile() {
@@ -121,4 +156,50 @@
   // Disable form footer, in mobile
   --app-form-buttons-bar-height: 0px;
   --app-footer-height: 0px;
+
+}
+
+@mixin css-variables-to-root-dark() {
+
+  @include mat.all-component-colors($candy-dark-theme);
+
+  // Change scroll bar style
+  color-scheme: dark;
+
+  @each $color-name,
+  $value in $colors {
+    @include generate-dark-color-list($color-name);
+  }
+
+  // Inverse background/text color
+  --ion-background-color: #{$text-color-value};
+  --ion-background-color-rgb: #{$text-color-rgb-value};
+  --ion-text-color: #{$background-color-value};
+  --ion-text-color-rgb: #{$background-color-rgb-value};
+  --app-form-color: #{$background-color-value};
+  --app-form-color-rgb: #{$background-color-rgb-value};
+  --app-form-field-focus-background-color: rgba(#{$background-color-rgb-value}, 0.87);
+
+  // Step colors
+  --ion-color-step-50: #{$text-color-step-50};
+  --ion-color-step-100: #{$text-color-step-100};
+  --ion-color-step-150: #{$text-color-step-150};
+  --ion-color-step-200: #{$text-color-step-200};
+  --ion-color-step-250: #{$text-color-step-250};
+  --ion-color-step-300: #{$text-color-step-200};
+  --ion-color-step-350: #{$text-color-step-350};
+  --ion-color-step-400: #{$text-color-step-400};
+  --ion-color-step-450: #{$text-color-step-450};
+  --ion-color-step-500: #{$text-color-step-500};
+  --ion-color-step-550: #{$text-color-step-550};
+  --ion-color-step-600: #{$text-color-step-600};
+  --ion-color-step-650: #{$text-color-step-650};
+  --ion-color-step-700: #{$text-color-step-700};
+  --ion-color-step-750: #{$text-color-step-750};
+  --ion-color-step-800: #{$text-color-step-800};
+  --ion-color-step-850: #{$text-color-step-850};
+  --ion-color-step-900: #{$text-color-step-900};
+  --ion-color-step-950: #{$text-color-step-950};
+
+
 }