feat(mat-option): override theme with gravitee design

ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-theme.scss

@@ -31,4 +31,5 @@
   @include override.mat-card;
   @include override.mat-list;
   @include override.mat-tabs;
+  @include override.mat-option;
 }

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/index.scss

@@ -19,3 +19,4 @@
 @forward 'mat-list' show mat-list;
 @forward 'mat-h5';
 @forward 'mat-tabs';
+@forward 'mat-option';

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-option.scss

@@ -0,0 +1,28 @@
+/*
+ * 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 '@angular/material' as mat;
+
+@use '../gio-mat-theme-variable' as theme;
+
+@mixin 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);
+  }
+}

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-option.stories.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2015 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.
+ */
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
+import { MatOptionModule } from '@angular/material/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+export default {
+  title: 'Material Override',
+  decorators: [
+    moduleMetadata({
+      imports: [NoopAnimationsModule, MatInputModule, MatAutocompleteModule, MatOptionModule],
+    }),
+  ],
+  render: () => ({}),
+} as Meta;
+
+export const MatOption: Story = {
+  render: () => ({
+    template: `
+        <mat-form-field [floatLabel]="'never'">
+            <input id="input" matInput placeholder="Name..." [matAutocomplete]="names" />
+        </mat-form-field>
+        <mat-autocomplete #names="matAutocomplete">
+          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+        </mat-autocomplete>`,
+    props: {
+      options: ['Abel', 'Constance', 'Léon', 'Jeanne', 'Noame'],
+    },
+    styles: [
+      `
+        :host {
+          display: block;
+          min-height: 500px;
+        }
+        `,
+    ],
+  }),
+  play: ({ canvasElement }) => {
+    const matInput = canvasElement.querySelector('#input') as HTMLInputElement;
+    matInput.focus();
+  },
+};