@gravitee/ui-particles-angular 11.0.1-fix-pre-angular-17-547a20e → 11.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-particles-angular",
-  "version": "11.0.1-fix-pre-angular-17-547a20e",
+  "version": "11.1.0",
   "description": "Gravitee.io - UI Particles Angular",
   "repository": {
     "type": "git",

package/src/lib/gio-radio-button/gio-radio-button.scss

@@ -62,10 +62,20 @@ $typography: map.get(theme.$mat-theme, typography);
     }
   }
 
+  // TODO(mdc-migration): remove when legacy theme is removed
+  .gio-radio-button.mat-radio-checked {
+    border: 2px solid mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
+  }
+
   .gio-radio-button.mat-mdc-radio-checked {
     border: 2px solid mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
   }
 
+  // TODO(mdc-migration): remove when legacy theme is removed
+  .mat-radio-checked .mat-icon {
+    color: mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
+  }
+
   .mat-mdc-radio-checked .mat-icon {
     color: mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
   }
@@ -80,10 +90,20 @@ $typography: map.get(theme.$mat-theme, typography);
     @include gio-radio-button;
   }
 
+  // TODO(mdc-migration): remove when legacy theme is removed
+  .gio-radio-button.mat-radio-checked {
+    border: 2px solid mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
+  }
+
   .gio-radio-button.mat-mdc-radio-checked {
     border: 2px solid mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
   }
 
+  // TODO(mdc-migration): remove when legacy theme is removed
+  .gio-radio-button.mat-radio-checked .mat-icon {
+    color: mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
+  }
+
   .gio-radio-button.mat-mdc-radio-checked .mat-icon {
     color: mat.get-color-from-palette(palettes.$mat-accent-palette, 'default');
   }

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

@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use './gio-mat-palettes' as palettes;
+
+// Config mat Typography
+$mat-legacy-typography: mat.define-legacy-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),
+  $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),
+);
+
+// Mat default light theme
+$mat-theme-default: mat.define-light-theme(
+  (
+    color: (
+      primary: palettes.$mat-primary-palette,
+      accent: palettes.$mat-accent-palette,
+      warn: palettes.$mat-error-palette,
+    ),
+    typography: $mat-legacy-typography,
+  )
+);
+
+// Mat default dark theme
+$mat-legacy-theme-dark: mat.define-dark-theme(
+  (
+    color: (
+      primary: palettes.$mat-primary-palette,
+      accent: palettes.$mat-accent-palette,
+      warn: palettes.$mat-error-palette,
+    ),
+    typography: $mat-legacy-typography,
+  )
+);
+
+// Custom mat background & foreground color
+$mat-background: map.get($mat-theme-default, background);
+$mat-foreground: map.get($mat-theme-default, foreground);
+
+// Override $light-theme-background-palette config from node_modules/@angular/material/core/theming/_palette.scss
+$gio-background: map.merge(
+  $mat-background,
+  (
+    background: mat.get-color-from-palette(palettes.$mat-dove-palette, default),
+    tooltip: mat.get-color-from-palette(palettes.$mat-space-palette, default),
+  )
+);
+
+// Override $light-theme-foreground-palette config from node_modules/@angular/material/core/theming/_palette.scss
+$gio-foreground: map.merge(
+  $mat-foreground,
+  (
+    text: mat.get-color-from-palette(palettes.$mat-space-palette, default),
+    slider-min: mat.get-color-from-palette(palettes.$mat-space-palette, default),
+  )
+);
+$gio-background-foreground: (
+  background: $gio-background,
+  foreground: $gio-foreground,
+);
+
+// For backward compatibility with Material Design merge $gio-background-foreground into $mat-theme-default and into $mat-theme-default.color.
+// Otherwise the colors of bg and fg seton partially applied
+$mat-legacy-color: map.merge(map.get($mat-theme-default, color), $gio-background-foreground);
+$mat-legacy-theme: map.merge(
+  $mat-theme-default,
+  map.merge(
+    $gio-background-foreground,
+    (
+      color: $mat-legacy-color,
+    )
+  )
+);

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

@@ -15,28 +15,55 @@
  */
 @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 {
+@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);
 
-  @include mat.typography-hierarchy(theme-variable.$mat-typography);
+  @if $legacy {
+    @include mat.legacy-typography-hierarchy(legacy-theme-variable.$mat-legacy-typography);
+  } @else {
+    @include mat.typography-hierarchy(theme-variable.$mat-typography);
+  }
 
-  // Gio overrides
   @include mat.form-field-density(-1);
 
+  // Gio overrides
   @include override.mat-h5;
   @include override.mat-form-field;
   @include override.mat-table;
   @include override.mat-card;
   @include override.mat-list;
+  @include override.mat-tabs;
   @include override.mat-option;
   @include override.mat-button;
 }

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/index.scss

@@ -18,5 +18,6 @@
 @forward 'mat-card';
 @forward 'mat-list' show mat-list;
 @forward 'mat-h5';
+@forward 'mat-tabs';
 @forward 'mat-option';
 @forward 'mat-button';

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

@@ -14,6 +14,77 @@
  * 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,
+  .mat-flat-button.mat-button-base {
+    border-radius: 8px;
+
+    &:hover {
+      filter: brightness(115%);
+      transition: all 0.3s linear;
+    }
+  }
+
+  .mat-icon-button.mat-button-base:hover {
+    filter: brightness(115%);
+    transition: all 0.3s linear;
+  }
+
+  .mat-button,
+  .mat-raised-button,
+  .mat-flat-button,
+  .mat-stroked-button {
+    .mat-icon {
+      width: 18px;
+      height: 18px;
+      margin-top: -2px; // Center horizontally icon with text. 18 for icon 14 for text so up with -2px
+      margin-right: 8px;
+      line-height: 18px;
+    }
+
+    .mat-icon.mat-icon-right {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+  }
+
+  .mat-icon-button {
+    .mat-icon:has(svg) {
+      margin-top: -2px; // Center horizontally icon
+    }
+  }
+
+  .mat-button.mat-icon-button {
+    width: 36px;
+    height: 36px;
+    line-height: 24px;
+
+    .mat-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 0;
+      line-height: 24px;
+    }
+  }
+
+  .mat-flat-button.mat-icon-button,
+  .mat-stroked-button.mat-icon-button {
+    width: 36px;
+    height: 36px;
+    line-height: 18px;
+
+    .mat-icon {
+      width: 18px;
+      height: 18px;
+      margin-right: 0;
+      margin-left: 0;
+      line-height: 18px;
+    }
+  }
+
+  // MDC mat-button
   .mdc-button {
     &:has(.mdc-button__label:empty) {
       min-width: 36px;

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

@@ -16,6 +16,11 @@
 @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'], [appearance='outlined']) {
     @include mat.elevation(3);

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

@@ -20,6 +20,38 @@
 @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;
+
+    .mat-hint,
+    .mat-error {
+      font-size: mat.font-size(theme.$mat-typography, caption);
+    }
+  }
+
+  .mat-form-field-disabled * {
+    cursor: not-allowed !important;
+  }
+
+  .mat-form-field-prefix {
+    // Apply same margin as the one on the left of the prefix
+    margin-right: 0.75em;
+    color: mat.get-color-from-palette(palettes.$mat-space-palette, 'lighter30');
+  }
+
+  .mat-form-field-appearance-outline .mat-form-field-prefix,
+  .mat-form-field-appearance-outline .mat-form-field-suffix {
+    place-self: center;
+  }
+
+  .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;
   }

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

@@ -21,6 +21,26 @@
 $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
+   */
+  .mat-card > .mat-list {
+    margin: -16px;
+  }
+
+  /**
+   * Change background color of each list item on hover
+   */
+  .mat-list-item {
+    &:hover {
+      background-color: mat.get-color-from-palette($background, hover);
+    }
+  }
+
+  // MDC mat-list
+
   /**
      * Change background color of each list item on hover
      */

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

@@ -16,9 +16,19 @@
 
 @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-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,37 @@
 $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);
+    }
+
+    // Remove bottom padding on mat-form-field inside mat-cell
+    // Note: In Angular 15, we should be able to use SubscriptSizing option for that
+    .mat-cell {
+      // appearance=outline
+      .mat-form-field.mat-form-field-appearance-outline:not(:has(mat-hint), :has(mat-error)) {
+        padding-bottom: 0;
+
+        .mat-form-field-wrapper {
+          padding-bottom: 0;
+        }
+      }
+
+      // appearance=standard
+      .mat-form-field.mat-form-field-appearance-standard:not(:has(mat-hint), :has(mat-error)) {
+        padding-bottom: 0;
+
+        .mat-form-field-wrapper {
+          // stylelint-disable-next-line number-max-precision
+          margin-bottom: -1.34375em;
+        }
+      }
+    }
+  }
+
+  // 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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2022 The Gravitee team (http://gravitee.io)
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@mixin mat-tabs() {
+  // Legacy mat-tabs
+  .mat-tab-group {
+    .mat-tab-label {
+      min-width: unset;
+    }
+  }
+}