WEB-492: Material Design 3 implementation: Login

src/app/shared/language-selector/language-selector.component.html

@@ -1,6 +1,13 @@
-<mat-form-field id="language-selector" class="m-l-10">
-  <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
-  <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
+<mat-form-field id="language-selector" [appearance]="appearance" [class.outlined-variant]="appearance === 'outline'">
+  @if (showLabel) {
+    <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
+  }
+  <mat-select
+    [formControl]="languageSelector"
+    (selectionChange)="setLanguage()"
+    class="languageselector"
+    [placeholder]="!showLabel ? ('labels.inputs.Language' | translate) : ''"
+  >
     @for (language of languages; track language) {
       <mat-option [value]="language">
         {{ 'languages.' + language | translate }}

src/app/shared/language-selector/language-selector.component.scss

@@ -1,19 +1,131 @@
-::ng-deep .mat-mdc-form-field-bottom-align::before {
-  border-bottom-color: white;
+// ===== Base Language Selector Styles =====
+#language-selector {
+  &.mat-mdc-form-field {
+    // Default styles (fill variant)
+    &:not(.outlined-variant) {
+      margin-left: 10px;
+
+      .mat-mdc-text-field-wrapper {
+        padding-bottom: 0;
+      }
+    }
+
+    // Outlined variant styles (used in login)
+    &.outlined-variant {
+      .mat-mdc-text-field-wrapper {
+        padding: 0;
+      }
+
+      .mat-mdc-form-field-flex {
+        align-items: center;
+      }
+
+      .mat-mdc-form-field-infix {
+        padding: 12px 0;
+        min-height: 48px;
+      }
+
+      // Outlined border styles with Material Design 3
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-outline, #79747e);
+          border-width: 1px;
+        }
+      }
+
+      // Hover state
+      &:hover:not(.mat-form-field-disabled) {
+        .mdc-notched-outline {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
+            border-color: var(--md-sys-color-on-surface, #1a1c1e);
+          }
+        }
+      }
+
+      // Focused state
+      &.mat-focused {
+        .mdc-notched-outline {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
+            border-color: var(--md-sys-color-primary, #1074b9);
+            border-width: 2px;
+          }
+        }
+
+        .mat-mdc-floating-label {
+          color: var(--md-sys-color-primary, #1074b9);
+        }
+      }
+
+      // Select styling
+      .mat-mdc-select {
+        font-size: 0.875rem;
+        color: var(--md-sys-color-on-surface, #1a1c1e);
+      }
+
+      .mat-mdc-select-arrow {
+        color: var(--md-sys-color-on-surface-variant, #44474e);
+      }
+
+      // Label styling
+      .mat-mdc-floating-label {
+        font-size: 0.875rem;
+        color: var(--md-sys-color-on-surface-variant, #44474e);
+      }
+    }
+  }
 }
 
-::ng-deep .mdc-line-ripple::before {
-  border-bottom-color: white;
-}
+// Dark theme support for outlined variant
+.dark-theme {
+  #language-selector.outlined-variant {
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: var(--md-sys-color-outline, #938f99);
+      }
+    }
 
-::ng-deep .mdc-line-ripple::after {
-  border-bottom-color: white;
-}
+    &:hover:not(.mat-form-field-disabled) {
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-on-surface, #e2e2e5);
+        }
+      }
+    }
 
-::ng-deep .mat-mdc-form-field .mdc-line-ripple::before {
-  border-bottom-color: white !important;
-}
+    &.mat-focused {
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-primary, #5ba2ec);
+        }
+      }
 
-::ng-deep .mat-mdc-form-field .mdc-line-ripple::after {
-  border-bottom-color: white !important;
+      .mat-mdc-floating-label {
+        color: var(--md-sys-color-primary, #5ba2ec);
+      }
+    }
+
+    .mat-mdc-select {
+      color: var(--md-sys-color-on-surface, #e2e2e5);
+    }
+
+    .mat-mdc-select-arrow {
+      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
+    }
+
+    .mat-mdc-floating-label {
+      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
+    }
+  }
 }

src/app/shared/language-selector/language-selector.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, inject } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
@@ -25,6 +25,12 @@ export class LanguageSelectorComponent {
   private translateService = inject(TranslateService);
   private settingsService = inject(SettingsService);
 
+  /** Appearance of the form field (fill, outline). Defaults to 'fill'. */
+  @Input() appearance: 'fill' | 'outline' = 'fill';
+
+  /** Show label in the form field. Defaults to true. */
+  @Input() showLabel: boolean = true;
+
   /** Language selector form control. */
   languageSelector = new UntypedFormControl();