@gravitee/ui-particles-angular 11.1.0 → 11.2.0-angular-17-5434786

package/lib/oem-theme/gio-top-bar/gio-top-bar-content/gio-top-bar-content.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-export type GioTopBarProductTypes = 'am' | 'apim' | 'cockpit';
+export type GioTopBarProductTypes = 'am' | 'apim' | 'cockpit' | 'cloud';
 export declare class GioTopBarContentComponent {
     type: GioTopBarProductTypes;
     productName: string;

package/package.json

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

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

@@ -62,20 +62,10 @@ $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');
   }
@@ -90,20 +80,10 @@ $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-theme.scss

@@ -15,55 +15,28 @@
  */
 @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($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);
+@mixin mat-theme {
   @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.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,7 +22,6 @@
 @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,6 +18,5 @@
 @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,77 +14,6 @@
  * 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,11 +16,6 @@
 @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,38 +20,6 @@
 @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,26 +21,6 @@
 $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,19 +16,9 @@
 
 @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,37 +21,6 @@
 $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/gio-mat-legacy-theme-variable.scss

@@ -1,100 +0,0 @@
-/*
- * 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/mat-override/mat-tabs.scss

@@ -1,23 +0,0 @@
-/*
- * 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;
-    }
-  }
-}