From 227339cf2dd5eda89061eaab1679d799e0ccabd9 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Mon, 14 Mar 2022 19:03:19 -0300
Subject: [PATCH 1/3] feat: adding textarea disabled style

---
 projects/components/src/textarea/textarea.component.scss | 6 ++++++
 projects/components/src/textarea/textarea.component.ts   | 2 +-
 projects/components/src/textarea/textarea.module.ts      | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/textarea/textarea.component.scss b/projects/components/src/textarea/textarea.component.scss
index 8dc38805d..d6ad1f38b 100644
--- a/projects/components/src/textarea/textarea.component.scss
+++ b/projects/components/src/textarea/textarea.component.scss
@@ -2,6 +2,12 @@
 
 :host {
   ::ng-deep {
+    &.disabled {
+      background-color: $gray-2;
+      color: $gray-5;
+      cursor: not-allowed;
+    }
+
     &.mat-form-field {
       display: block;
       height: 100%;
diff --git a/projects/components/src/textarea/textarea.component.ts b/projects/components/src/textarea/textarea.component.ts
index c1ef6ca38..39708e8d6 100644
--- a/projects/components/src/textarea/textarea.component.ts
+++ b/projects/components/src/textarea/textarea.component.ts
@@ -22,7 +22,7 @@ import { LoggerService } from '@hypertrace/common';
     }
   ],
   template: `
-    <mat-form-field class="fill-container" floatLabel="never">
+    <mat-form-field class="fill-container" [ngClass]="{ disabled: this.disabled }" floatLabel="never">
       <textarea
         class="textarea"
         matInput
diff --git a/projects/components/src/textarea/textarea.module.ts b/projects/components/src/textarea/textarea.module.ts
index e3b44e55e..f1ca3386f 100644
--- a/projects/components/src/textarea/textarea.module.ts
+++ b/projects/components/src/textarea/textarea.module.ts
@@ -1,10 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { TextareaComponent } from './textarea.component';
 
 @NgModule({
-  imports: [FormsModule, MatInputModule],
+  imports: [CommonModule, FormsModule, MatInputModule],
   declarations: [TextareaComponent],
   exports: [TextareaComponent]
 })

From 4fdc264a8b42b5794e8d100c5ba9ecdace45f329 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 11:20:56 -0300
Subject: [PATCH 2/3] feat: fix comments

---
 .../components/src/textarea/textarea.component.scss  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/components/src/textarea/textarea.component.scss b/projects/components/src/textarea/textarea.component.scss
index d6ad1f38b..869d1a0c3 100644
--- a/projects/components/src/textarea/textarea.component.scss
+++ b/projects/components/src/textarea/textarea.component.scss
@@ -1,13 +1,13 @@
 @import 'mixins';
 
 :host {
-  ::ng-deep {
-    &.disabled {
-      background-color: $gray-2;
-      color: $gray-5;
-      cursor: not-allowed;
-    }
+  .disabled {
+    background-color: $gray-2;
+    color: $gray-5;
+    cursor: not-allowed;
+  }
 
+  ::ng-deep {
     &.mat-form-field {
       display: block;
       height: 100%;

From 9bbf4a44764017a8ed9e3313dbc2ba88ad4aa8d3 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 12:48:29 -0300
Subject: [PATCH 3/3] feat: fix comments

---
 .../components/src/textarea/textarea.component.scss  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/components/src/textarea/textarea.component.scss b/projects/components/src/textarea/textarea.component.scss
index 869d1a0c3..4111112a7 100644
--- a/projects/components/src/textarea/textarea.component.scss
+++ b/projects/components/src/textarea/textarea.component.scss
@@ -1,12 +1,6 @@
 @import 'mixins';
 
 :host {
-  .disabled {
-    background-color: $gray-2;
-    color: $gray-5;
-    cursor: not-allowed;
-  }
-
   ::ng-deep {
     &.mat-form-field {
       display: block;
@@ -76,3 +70,9 @@
   height: 100%;
   width: 100%;
 }
+
+.disabled {
+  background-color: $gray-2;
+  color: $gray-5;
+  cursor: not-allowed;
+}