feat: enhance NewTicket component with Control component integration and update styles

Author: aimxnaim

06-cmp-deep-dive/01-starting-project/src/app/dashboard/shared/control/control.component.html

@@ -1 +1,4 @@
-<p>control works!</p>
+<p class="control">
+    <label for="request">{{label()}}</label>
+    <ng-content select="input, textarea"></ng-content>
+</p>

06-cmp-deep-dive/01-starting-project/src/app/dashboard/shared/control/control.component.ts

@@ -1,12 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, input, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-control',
   standalone: true,
   imports: [],
   templateUrl: './control.component.html',
-  styleUrl: './control.component.css'
+  styleUrl: './control.component.css',
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class ControlComponent {
+  label = input.required<string>();
+  for = input.required<string>();
 
 }

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/new-ticket/new-ticket.component.css

@@ -1,39 +1,3 @@
-#tickets {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-  
-  #tickets ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+#new-ticket {
     width: 15rem;
-  }
-  
-  #tickets li {
-    margin: 0.5rem 0;
-  }
-  
-  #tickets p {
-    margin: 0;
-    color: #4f4b53;
-  }
-  
-  #tickets h2 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #38343c;
-  }
-  
-  @media (min-width: 768px) {
-    #tickets {
-      flex-direction: row;
-    }
-  }
-
-  #new-ticket {
-    width: 15rem;
-  }
-  
-  
+  }

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/new-ticket/new-ticket.component.html

@@ -1,12 +1,10 @@
-<form id="ticket">
-    <p>
-        <label for="title">Title</label>
-        <input name="title" id="title" type="text">
-    </p>
-    <p>
-        <label for="request">Request</label>
-        <textarea name="request" id="request" rows="3"></textarea>
-    </p>
+<form>
+    <app-control label="Title" for="title">
+      <input name="title" id="title" type="text">
+    </app-control>
+    <app-control label="Request" for="request">
+      <textarea name="request" id="request" rows="3"></textarea>
+    </app-control>
     <p>
         <app-button buttonTitle="Submit"></app-button>
     </p>

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/new-ticket/new-ticket.component.ts

@@ -1,12 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ButtonComponent } from "../../shared/button/button.component";
+import { ControlComponent } from "../../shared/control/control.component";
 
 @Component({
   selector: 'app-new-ticket',
   standalone: true,
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, ControlComponent],
   templateUrl: './new-ticket.component.html',
-  styleUrl: './new-ticket.component.css'
+  styleUrl: './new-ticket.component.css',
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class NewTicketComponent {
 

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/tickets.component.css

@@ -0,0 +1,33 @@
+#tickets {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  #tickets ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 15rem;
+  }
+  
+  #tickets li {
+    margin: 0.5rem 0;
+  }
+  
+  #tickets p {
+    margin: 0;
+    color: #4f4b53;
+  }
+  
+  #tickets h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #38343c;
+  }
+  
+  @media (min-width: 768px) {
+    #tickets {
+      flex-direction: row;
+    }
+  }

06-cmp-deep-dive/01-starting-project/src/app/dashboard/tickets/tickets.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { DashboardItemComponent } from "../dashboard-item/dashboard-item.component";
 import { NewTicketComponent } from "./new-ticket/new-ticket.component";
 
@@ -7,7 +7,8 @@ import { NewTicketComponent } from "./new-ticket/new-ticket.component";
   standalone: true,
   imports: [DashboardItemComponent, NewTicketComponent],
   templateUrl: './tickets.component.html',
-  styleUrl: './tickets.component.css'
+  styleUrl: './tickets.component.css',
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class TicketsComponent {