@gravitee/ui-particles-angular 7.58.0 → 8.0.0-angular15-be0770c

package/src/scss/gio-mat-theme-variable.scss

@@ -21,19 +21,19 @@
 // Config mat Typography
 $mat-typography: mat.define-typography-config(
   $font-family: '"Golos UI", Roboto, "Helvetica Neue", sans-serif',
-  $display-4: mat.define-typography-level(112px, 112px, 400, $letter-spacing: -0.05em),
-  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $display-1: mat.define-typography-level(60px, 66px, 600, $letter-spacing: -0.5px),
-  $headline: mat.define-typography-level(42px, 52px, 600),
-  $title: mat.define-typography-level(26px, 36px, 600),
-  $subheading-2: mat.define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
-  $subheading-1: mat.define-typography-level(16px, 24px, 600, $letter-spacing: 0.4px),
-  $body-2: mat.define-typography-level(14px, 20px, 600, $letter-spacing: 0.4px),
-  $body-1: mat.define-typography-level(14px, 20px, 400, $letter-spacing: 0.4px),
+  $headline-1: mat.define-typography-level(112px, 112px, 400, $letter-spacing: -0.05em),
+  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $headline-4: mat.define-typography-level(60px, 66px, 600, $letter-spacing: -0.5px),
+  $headline-5: mat.define-typography-level(34px, 44px, 600),
+  $headline-6: mat.define-typography-level(26px, 36px, 600),
+  $subtitle-1: mat.define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
+  $subtitle-2: mat.define-typography-level(14px, 20px, 500, $letter-spacing: 0.4px),
+  $body-1: mat.define-typography-level(14px, 20px, 500, $letter-spacing: 0.4px),
+  $body-2: mat.define-typography-level(14px, 20px, 400, $letter-spacing: 0.4px),
   $caption: mat.define-typography-level(12px, 16px, 400),
   $button: mat.define-typography-level(14px, 14px, 500),
-  $input: mat.define-typography-level(inherit, 1.125, 400),
+  $overline: mat.define-typography-level(inherit, 1.125, 400),
 );
 
 // Mat default light theme
@@ -45,6 +45,7 @@ $mat-theme-default: mat.define-light-theme(
       warn: palettes.$mat-error-palette,
     ),
     typography: $mat-typography,
+    density: 0,
   )
 );
 

package/src/scss/gio-mat-theme.scss

@@ -15,15 +15,48 @@
  */
 @use '@angular/material' as mat;
 
+@use './gio-mat-legacy-theme-variable' as legacy-theme-variable;
 @use './gio-mat-theme-variable' as theme-variable;
 
 @use './mat-override' as override;
 
 // Config material theme with gio theme
-@mixin mat-theme() {
-  @include mat.core(theme-variable.$mat-typography);
+@mixin mat-theme($legacy: false) {
+  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+  //  The following line adds:
+  //    1. Default typography styles for all components
+  //    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+  //  If you specify typography styles for the components you use elsewhere, you should delete this line.
+  //  If you don't need the default component typographies but still want the hierarchy styles,
+  //  you can delete this line and instead use:
+  //    `@include mat.legacy-typography-hierarchy(theme-variable.$mat-typography);`
+
+  /*
+ TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated
+ */
+  @include mat.all-legacy-component-typographies(legacy-theme-variable.$mat-legacy-typography);
+  @include mat.all-component-typographies(theme-variable.$mat-typography);
+
+  /*
+ TODO(mdc-migration): Remove legacy-core once all legacy components are migrated
+ */
+  @include mat.legacy-core;
+  @include mat.core;
+
+  /*
+ TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated
+ */
+  @include mat.all-legacy-component-themes(legacy-theme-variable.$mat-legacy-theme);
   @include mat.all-component-themes(theme-variable.$mat-theme);
 
+  @if $legacy {
+    @include mat.legacy-typography-hierarchy(legacy-theme-variable.$mat-legacy-typography);
+  } @else {
+    @include mat.typography-hierarchy(theme-variable.$mat-typography);
+  }
+
+  @include mat.form-field-density(-1);
+
   // Gio overrides
   @include override.mat-h5;
   @include override.mat-form-field;

package/src/scss/index.scss

@@ -22,6 +22,7 @@
 @forward './theme/typography/gio-typography' show subtitle-typography, code-typography, link-typography, caption-2;
 
 @forward './gio-mat-theme-variable' show $mat-theme, $mat-typography, $mat-theme-dark;
+@forward './gio-mat-legacy-theme-variable' show $mat-legacy-theme, $mat-legacy-typography, $mat-legacy-theme-dark;
 
 @forward './gio-fonts' show import-fonts;
 

package/src/scss/mat-override/mat-button.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 @mixin mat-button() {
+  // Legacy mat-button
   .mat-button.mat-button-base,
   .mat-stroked-button.mat-button-base,
   .mat-raised-button.mat-button-base,
@@ -82,4 +83,16 @@
       line-height: 18px;
     }
   }
+
+  // MDC mat-button
+  .mdc-button {
+    &:has(.mdc-button__label:empty) {
+      min-width: 36px;
+
+      .mat-icon {
+        margin-right: -6px;
+        margin-left: -6px;
+      }
+    }
+  }
 }

package/src/scss/mat-override/mat-card.scss

@@ -16,7 +16,13 @@
 @use '@angular/material' as mat;
 
 @mixin mat-card() {
+  // Legacy mat-card
   .mat-card:not(.mat-card .mat-card, [class*='mat-elevation-z']) {
     @include mat.elevation(3);
   }
+
+  // Mat card MDC
+  .mat-mdc-card:not(.mat-mdc-card .mat-mdc-card, [class*='mat-mdc-elevation-z'], [class*='mat-elevation-z']) {
+    @include mat.elevation(3);
+  }
 }

package/src/scss/mat-override/mat-form-field.scss

@@ -20,6 +20,7 @@
 @use '../gio-mat-palettes' as palettes;
 
 @mixin mat-form-field() {
+  // Legacy mat-form-field
   .mat-form-field:not([class*='mat-paginator']) {
     // Increase default padding to have space for two lines of hint & error bellow the input
     padding-bottom: 16px;
@@ -48,4 +49,14 @@
   .mat-form-field-appearance-outline .mat-form-field-infix {
     padding-top: 0.8em;
   }
+
+  // MDC mat-form-field
+
+  .mat-mdc-form-field {
+    margin: 0.45em 0;
+  }
+
+  .mat-mdc-form-field.mat-form-field-disabled {
+    cursor: not-allowed !important;
+  }
 }

package/src/scss/mat-override/mat-list.scss

@@ -21,6 +21,8 @@
 $background: map.get(theme.$mat-theme, background);
 
 @mixin mat-list() {
+  // Legacy mat-list
+
   /**
    * When a Mat List is inside a Mat Card then set a negative to balance default padding of the Mat Card
    */
@@ -36,4 +38,15 @@ $background: map.get(theme.$mat-theme, background);
       background-color: mat.get-color-from-palette($background, hover);
     }
   }
+
+  // MDC mat-list
+
+  /**
+     * Change background color of each list item on hover
+     */
+  .mat-mdc-list-item {
+    &:hover {
+      background-color: mat.get-color-from-palette($background, hover);
+    }
+  }
 }

package/src/scss/mat-override/mat-option.scss

@@ -16,13 +16,21 @@
 
 @use '@angular/material' as mat;
 
+@use '../gio-mat-legacy-theme-variable' as theme-legacy;
 @use '../gio-mat-theme-variable' as theme;
 
 @mixin mat-option() {
+  // Legacy mat-option
   .mat-option,
   .mat-typography .mat-option {
     height: 40px;
-    font-size: mat.font-size(theme.$mat-typography, input);
-    line-height: mat.line-height(theme.$mat-typography, input);
+    font-size: mat.font-size(theme-legacy.$mat-legacy-typography, input);
+    line-height: mat.line-height(theme-legacy.$mat-legacy-typography, input);
+  }
+
+  // MDC mat-option
+  .mat-typography .mat-mdc-option {
+    min-height: 40px;
+    @include mat.typography-level(theme.$mat-typography, 'body-2');
   }
 }

package/src/scss/mat-override/mat-table.scss

@@ -21,6 +21,7 @@
 $background: map.get(theme.$mat-theme, background);
 
 @mixin mat-table() {
+  // Legacy mat-table
   .mat-table {
     tbody tr:hover {
       background-color: mat.get-color-from-palette($background, hover);
@@ -49,4 +50,11 @@ $background: map.get(theme.$mat-theme, background);
       }
     }
   }
+
+  // MDC mat-table
+  .mat-mdc-table {
+    tbody tr.mat-mdc-row:hover {
+      background-color: mat.get-color-from-palette($background, hover);
+    }
+  }
 }

package/src/scss/mat-override/mat-tabs.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 @mixin mat-tabs() {
+  // Legacy mat-tabs
   .mat-tab-group {
     .mat-tab-label {
       min-width: unset;

package/src/scss/theme/color/gio-palettes.stories.scss

@@ -27,12 +27,15 @@ $palettes: (
 );
 
 /* stylelint-disable selector-pseudo-class-no-unknown */
-:export {
+:root {
   @each $paletteName, $palette in $palettes {
     @each $colorName in $colorNames {
       @if map.has-key($palette, $colorName) {
-        #{$paletteName}__#{$colorName}: mat.get-color-from-palette($palette, $colorName);
-        #{$paletteName}__#{$colorName}-contrast: mat.get-color-from-palette($palette, #{$colorName}-contrast);
+        $color: mat.get-color-from-palette($palette, $colorName);
+        $color-contrast: mat.get-color-from-palette($palette, #{$colorName}-contrast);
+
+        --gp--#{$paletteName}__#{$colorName}: #{$color};
+        --gp--#{$paletteName}__#{$colorName}-contrast: #{$color-contrast};
       }
     }
   }
@@ -40,32 +43,50 @@ $palettes: (
   // Special palettes
 
   @each $colorName in (patch, post, put, get, delete, option, trace, head) {
-    method__#{$colorName}: mat.get-color-from-palette(gio.$mat-method-palette, $colorName);
-    method__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-method-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-method-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-method-palette, #{$colorName}-contrast);
+
+    --gp--method__#{$colorName}: #{$color};
+    --gp--method__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (white, black, disabled) {
-    basic__#{$colorName}: mat.get-color-from-palette(gio.$mat-basic-palette, $colorName);
-    basic__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-basic-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-basic-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-basic-palette, #{$colorName}-contrast);
+
+    --gp--basic__#{$colorName}: #{$color};
+    --gp--basic__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter70, lighter60, lighter50, lighter40, lighter30, lighter20, lighter10, default) {
-    space__#{$colorName}: mat.get-color-from-palette(gio.$mat-space-palette, $colorName);
-    space__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-space-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-space-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-space-palette, #{$colorName}-contrast);
+
+    --gp--space__#{$colorName}: #{$color};
+    --gp--space__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (darker80, darker70, darker60, darker50, darker40, darker30, darker20, darker10, default) {
-    dove__#{$colorName}: mat.get-color-from-palette(gio.$mat-dove-palette, $colorName);
-    dove__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-dove-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-dove-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-dove-palette, #{$colorName}-contrast);
+
+    --gp--dove__#{$colorName}: #{$color};
+    --gp--dove__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter60, lighter40, lighter20, default) {
-    cyan__#{$colorName}: mat.get-color-from-palette(gio.$mat-cyan-palette, $colorName);
-    cyan__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-cyan-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-cyan-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-cyan-palette, #{$colorName}-contrast);
+
+    --gp--cyan__#{$colorName}: #{$color};
+    --gp--cyan__#{$colorName}-contrast: #{$color-contrast};
   }
 
   @each $colorName in (lighter80, lighter60, lighter40, lighter20, default) {
-    blue__#{$colorName}: mat.get-color-from-palette(gio.$mat-blue-palette, $colorName);
-    blue__#{$colorName}-contrast: mat.get-color-from-palette(gio.$mat-blue-palette, #{$colorName}-contrast);
+    $color: mat.get-color-from-palette(gio.$mat-blue-palette, $colorName);
+    $color-contrast: mat.get-color-from-palette(gio.$mat-blue-palette, #{$colorName}-contrast);
+
+    --gp--blue__#{$colorName}: #{$color};
+    --gp--blue__#{$colorName}-contrast: #{$color-contrast};
   }
 }

package/testing/harnesses/div.harness.d.ts

@@ -1,5 +1,5 @@
 import { AsyncFactoryFn, BaseHarnessFilters, ComponentHarness, HarnessPredicate, HarnessQuery } from '@angular/cdk/testing';
-export declare type DivHarnessFilters = BaseHarnessFilters & {
+export type DivHarnessFilters = BaseHarnessFilters & {
     /** Filters based on the text */
     text?: string | RegExp;
 };

package/testing/harnesses/span.harness.d.ts

@@ -1,5 +1,5 @@
 import { AsyncFactoryFn, BaseHarnessFilters, ComponentHarness, HarnessPredicate, HarnessQuery } from '@angular/cdk/testing';
-export declare type SpanHarnessFilters = BaseHarnessFilters & {
+export type SpanHarnessFilters = BaseHarnessFilters & {
     /** Filters based on the text */
     text?: string | RegExp;
 };

package/testing/package.json

@@ -1,10 +0,0 @@
-{
-  "module": "../fesm2015/gravitee-ui-particles-angular-testing.mjs",
-  "es2020": "../fesm2020/gravitee-ui-particles-angular-testing.mjs",
-  "esm2020": "../esm2020/testing/gravitee-ui-particles-angular-testing.mjs",
-  "fesm2020": "../fesm2020/gravitee-ui-particles-angular-testing.mjs",
-  "fesm2015": "../fesm2015/gravitee-ui-particles-angular-testing.mjs",
-  "typings": "gravitee-ui-particles-angular-testing.d.ts",
-  "sideEffects": false,
-  "name": "@gravitee/ui-particles-angular/testing"
-}