Merge pull request #177 from gctools-outilsgc/input-theme

themes for input component
gctools-outilsgc · Nov 7, 2023 · f279983 · f279983
2 parents 94b8d90 + e88dadc
commit f279983
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 24 deletions.
diff --git a/src/app/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
@@ -1,4 +1,4 @@
-<div class="gcc-input-wrapper">
+<div class="gcc-input-wrapper" [class]="theme">
     <mat-label *ngIf="label" [ngClass]="{'disabled': disabled}">
         {{ label }} 
         <div *ngIf="required" class="required-star">*</div>

diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss
@@ -18,7 +18,6 @@ mat-label {
     i {
         margin-left: 5px;
         cursor: pointer;
-        color: $primary-1;
     }
 }
 
@@ -52,16 +51,6 @@ mat-form-field {
 
     app-button {
         display: inline-flex;
-
-        ::ng-deep button:focus {
-            color: $primary-1;
-        }
-    }
-}
-
-mat-form-field.mat-focused {
-    .gcc-input-icon {
-        color: $primary-1;
     }
 }
 
@@ -72,15 +61,9 @@ mat-form-field.mat-form-field-invalid {
 }
 
 .hint-button {
-    //margin-left: -20px;
-
     ::ng-deep button {
         margin-top: -4px;
     }
-
-    ::ng-deep button:focus {
-        color: $primary-1;
-    }
 }
 
 mat-hint {
@@ -114,12 +97,6 @@ mat-hint {
         padding-right: 0 !important;
     }
 
-    .mat-focused {
-        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
-            border-color: $primary-1 !important;
-        }
-    }
-
     .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
         padding-top: 0;
         padding-bottom: 0;
@@ -148,4 +125,116 @@ mat-hint {
         -webkit-text-fill-color: #000;
         box-shadow: inset 0 0 20px 20px white;
     }
+}
+
+// THEMES
+.gcc-input-wrapper.primary-1 {
+    mat-label i {
+        color: $primary-1;
+    }
+    mat-form-field {
+        app-button ::ng-deep button:focus {
+            color: $primary-1;
+        }
+    }
+    mat-form-field.mat-focused .gcc-input-icon {
+        color: $primary-1;
+    }
+    .hint-button ::ng-deep button:focus {
+        color: $primary-1;
+    }
+
+    ::ng-deep .mat-focused {
+        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+            border-color: $primary-1 !important;
+        }
+    }
+}
+.gcc-input-wrapper.primary-2 {
+    mat-label i {
+        color: $primary-2;
+    }
+    mat-form-field {
+        app-button ::ng-deep button:focus {
+            color: $primary-2;
+        }
+    }
+    mat-form-field.mat-focused .gcc-input-icon {
+        color: $primary-2;
+    }
+    .hint-button ::ng-deep button:focus {
+        color: $primary-2;
+    }
+
+    ::ng-deep .mat-focused {
+        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+            border-color: $primary-2 !important;
+        }
+    }
+}
+.gcc-input-wrapper.secondary-1 {
+    mat-label i {
+        color: $secondary-1;
+    }
+    mat-form-field {
+        app-button ::ng-deep button:focus {
+            color: $secondary-1;
+        }
+    }
+    mat-form-field.mat-focused .gcc-input-icon {
+        color: $secondary-1;
+    }
+    .hint-button ::ng-deep button:focus {
+        color: $secondary-1;
+    }
+
+    ::ng-deep .mat-focused {
+        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+            border-color: $secondary-1 !important;
+        }
+    }
+}
+.gcc-input-wrapper.secondary-2 {
+    mat-label i {
+        color: $secondary-2;
+    }
+    mat-form-field {
+        app-button ::ng-deep button:focus {
+            color: $secondary-2;
+        }
+    }
+    mat-form-field.mat-focused .gcc-input-icon {
+        color: $secondary-2;
+    }
+    .hint-button ::ng-deep button:focus {
+        color: $secondary-2;
+    }
+
+    ::ng-deep .mat-focused {
+        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+            border-color: $secondary-2 !important;
+        }
+    }
+}
+.gcc-input-wrapper.secondary-2 {
+    mat-label i {
+        color: $secondary-2;
+    }
+    mat-form-field {
+        app-button ::ng-deep button:focus {
+            color: $secondary-2;
+        }
+    }
+    mat-form-field.mat-focused .gcc-input-icon {
+        color: $secondary-2;
+    }
+    .hint-button ::ng-deep button:focus {
+        color: $secondary-2;
+    }
+
+    ::ng-deep .mat-focused {
+        .mdc-notched-outline__leading, .mdc-notched-outline__trailing {
+            border-color: $secondary-2 !important;
+        }
+    }
 }
diff --git a/src/app/shared/components/input/input.component.ts b/src/app/shared/components/input/input.component.ts
@@ -6,6 +6,7 @@ import { Translations } from 'src/app/core/services/translations.service';
 import { TranslateService } from '@ngx-translate/core';
 import { TooltipDirection } from '../../models/tooltip-direction';
 import { ErrorStateMatcher } from '@angular/material/core';
+import { Theme } from '../../models/theme';
 
 @Component({
   selector: 'app-input',
@@ -33,6 +34,7 @@ export class InputComponent implements ControlValueAccessor {
   @Input({required:true}) label!: string;
   @Input() placeholder!: string;
   @Input() hint!: string;
+  @Input() theme: Theme | string = Theme.Primary1;
   @Input() icon!: string;
 
   @Input() required: boolean = false;