inline edit is added

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -349,6 +349,10 @@ $daesang-grey: (
     }
   }
 
+  .mat-form-field-appearance-legacy[inlineEdit] .mat-form-field-underline {
+    background-color: transparent;
+  }
+
   .messages .container {
     background: mat-color($accent, 50);
   }

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html

@@ -40,7 +40,7 @@
         "
         (click)="profileImageFileInput.click()"
       >
-        <span class="mdi mdi-upload mdi-24px"></span>
+        <span class="mdi mdi-upload mdi-18px"></span>
       </button>
       <input
         type="file"
@@ -115,7 +115,7 @@
       </span>
     </div>
 
-    <ul>
+    <ul style="padding-top: 20px;">
       <li>
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -132,6 +132,10 @@
             d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
           ></path>
         </svg>
+        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
+          <input matInput [formControl]="userIntroFormControl" />
+        </mat-form-field> -->
+        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
         {{ userInfo.intro }}
       </li>
       <li>

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts

@@ -11,6 +11,7 @@ import {
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { UserInfoF } from '@ucap-webmessenger/protocol-query';
 import { FileUploadItem } from '@ucap-webmessenger/api-common';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'ucap-profile-profile',
@@ -48,6 +49,8 @@ export class ProfileComponent implements OnInit {
   @ViewChild('profileImageFileInput', { static: false })
   profileImageFileInput: ElementRef<HTMLInputElement>;
 
+  userIntroFormControl = new FormControl('');
+
   profileImageFileUploadItem: FileUploadItem;
 
   constructor() {}

projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts

@@ -3,12 +3,15 @@ import { MatCardModule } from '@angular/material/card';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MatRippleModule, MatCheckboxModule } from '@angular/material';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 
@@ -29,9 +32,12 @@ const SERVICES = [];
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FlexLayoutModule,
     MatButtonModule,
+    MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatRippleModule,
     MatCheckboxModule,
     MatCardModule,

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts

@@ -2,8 +2,6 @@ import {
   Component,
   OnInit,
   Input,
-  Output,
-  EventEmitter,
   ElementRef,
   AfterViewInit
 } from '@angular/core';

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -2,6 +2,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { ReactiveFormsModule } from '@angular/forms';
+
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MatButtonModule } from '@angular/material/button';
@@ -12,6 +14,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
@@ -91,17 +95,20 @@ const SERVICES = [
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
     MatIconModule,
+    MatInputModule,
     MatProgressBarModule,
     MatSliderModule,
     MatSnackBarModule,
     MatToolbarModule,
     MatTooltipModule,
     MatTabsModule,
+    MatFormFieldModule,
     DragDropModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],