@sumaris-net/ngx-components 2.6.26 → 2.7.0-rc2

package/src/theme/_material.globals.scss

@@ -2,6 +2,7 @@
 // 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
@@ -39,22 +40,22 @@ $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),
-);
+//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);
@@ -63,12 +64,43 @@ $candy-app-accent: mat.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);
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat.define-light-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;
 $mat-tab-bar-height: 48px !default;
 $mat-tab-animation-duration: 200ms !default;
-$mat-mat-toolbar-height-desktop: 64px !default;
-$mat-mat-toolbar-height-mobile: 56px !default;
+$mat-toolbar-height-desktop: 64px !default;
+$mat-toolbar-height-mobile: 56px !default;

package/src/theme/_material.scss

@@ -1,28 +1,29 @@
-
-// Plus imports for other components in your app.
-@use '@angular/material' as mat;
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($candy-app-theme);
-
 // --------------------------------------------------
 // Override material style
 // --------------------------------------------------
-.mat-tab-group.mat-secondary, .mat-tab-nav-bar.mat-secondary {
+.mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
   background-color: var(--ion-color-secondary, $secondary);
-  .mat-tab-link {
+  .mat-mdc-tab-link {
     color: var(--ion-color-secondary-contrast);
+    --mat-tab-header-label-text-tracking: normal;
   }
 }
-.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
+.mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
   background-color: var(--ion-color-primary, $primary);
 }
+// Keep some style element that have changed after angular 15 migration
+.mdc-tab {
+  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-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
+  transform: translateY(0px) !important;
+}
+
 // Icon, Button
 .mat-icon.mat-primary,
 .mat-icon-button.mat-primary,
@@ -42,8 +43,14 @@
 .mat-stroked-button.mat-accent {
   color: var(--ion-color-accent);
 }
+.mdc-button {
+  --mdc-typography-button-letter-spacing: normal;
+}
 
 // Badge
+.mdc-tab .mat-badge-content {
+    padding-left: 2px;
+}
 .mat-badge-primary .mat-badge-content {
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
@@ -96,7 +103,7 @@
 
 }
 
-.mat-option {
+.mat-option, .mat-mdc-option {
   padding-top: var(--padding-top, 0) !important;
   padding-right: var(--padding-end, 16px) !important;
   padding-bottom: var(--padding-bottom, 0) !important;
@@ -133,8 +140,8 @@ mat-icon[slot] {
   pointer-events: none;
 }
 
-
-.mat-form-field-errors {
+// Form Fields
+.mat-mdc-form-field-errors {
   margin-top: -20px;
 
   mat-hint,
@@ -144,3 +151,12 @@ mat-icon[slot] {
     font-size: 75%;
   }
 }
+
+.mat-mdc-form-field-infix {
+  label {
+    width: 100% !important;
+    mat-label {
+      text-overflow: ellipsis;
+    }
+  }
+}

package/src/theme/_mixins.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 
 @mixin font-size($size) {
   font-size: calculateRem($size);
@@ -82,7 +83,6 @@
 }
 
 @mixin css-variables-to-root() {
-
   @each $color-name,
   $value in $colors {
     .ion-color-#{""+$color-name} {
@@ -102,13 +102,13 @@
   --expansion-panel-padding: var(--ion-padding);
   --expansion-panel-header-padding: var(--ion-padding);
 
-  --mat-toolbar-height: #{$mat-mat-toolbar-height-desktop};
+  --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-paginator-height: mat.$paginator-height;
   --ion-toolbar-height: #{$ion-toolbar-height};
 
   --app-table-header-height: #{$app-table-header-height};
   --app-toolbar-height: #{$app-toolbar-height};
-  --app-paginator-height: #{$app-paginator-height};
+  //--app-paginator-height: #{$app-paginator-height};
   --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
   --app-footer-height: var(--app-form-buttons-bar-height);
   --mat-tab-link-height: #{$mat-tab-link-height};
@@ -116,7 +116,7 @@
 }
 
 @mixin css-variables-to-root-mobile() {
-  --mat-toolbar-height: #{$mat-mat-toolbar-height-mobile};
+  --mat-toolbar-height: #{$mat-toolbar-height-mobile};
 
   // Disable form footer, in mobile
   --app-form-buttons-bar-height: 0px;

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

@@ -6,7 +6,7 @@ $app-form-color: rgba(0, 0, 0, 0.87) !default;
 $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
 
 $app-table-header-height: 44px !default;
-$app-table-cell-vertical-padding: 8px !default;
+$app-table-cell-horizontal-padding: 8px !default;
 $app-table-row-height: 48px !default;
 $app-table-row-max-height: 52px !default;
 
@@ -15,3 +15,8 @@ $app-form-buttons-bar-height: 56px !default;
 
 $app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
 $app-table-border-color: rgba(0, 0, 0, 0.08) !default;
+
+$app-form-field-background-color: rgba(0,0,0,0) !default;
+//$app-form-field-background-color: whitesmoke !default;
+$app-form-field-focus-background-color: rgba(0, 0, 0, 0) !default;
+//$app-form-field-focus-background-color: rgba(0, 0, 0, 0.87) !default;