feat: textarea/div component in nwui

nwaifu-ui/src/lib/components/button/button.component.scss

@@ -7,7 +7,7 @@ button {
   color: #f5f6fa;
   border-radius: 15px;
   transition: ease-in-out 0.2s;
-  margin: 2rem;
+  width: 100%;
   &:hover,
   &:active {
     transform: scale(1.2);

nwaifu-ui/src/lib/components/button/button.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ButtonComponent {
+export class NWUIButtonComponent {
   @Input() disabled = false;
-  @Input() type: string | undefined;
+  @Input() type = 'button';
 }

nwaifu-ui/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './textarea';

nwaifu-ui/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.component';

nwaifu-ui/src/lib/components/textarea/textarea.component.html

@@ -0,0 +1,5 @@
+<div [attr.contenteditable]="contenteditable" [className]="className" #ref (blur)="leaveFn()">
+  @if(!value) {
+  <ng-content></ng-content>
+  }
+</div>

nwaifu-ui/src/lib/components/textarea/textarea.component.scss

@@ -0,0 +1,20 @@
+.nwui-textarea {
+  border-radius: 8px;
+  height: auto;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  word-wrap: break-word;
+}

nwaifu-ui/src/lib/components/textarea/textarea.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'nwui-textarea',
+  imports: [CommonModule],
+  standalone: true,
+  styleUrls: ['./textarea.component.scss'],
+  templateUrl: './textarea.component.html',
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NWUITextAreaComponent implements AfterViewInit {
+  @Input() disabled = false;
+  @Input() value = '';
+  @Input() contenteditable = true;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  @Output() leave = new EventEmitter<string>();
+  @ViewChild('ref') ref: ElementRef<HTMLDivElement> | null = null;
+
+  get className(): string {
+    return `nwui-textarea ${this.disabled && !this.contenteditable ? 'disabled' : ''}`;
+  }
+
+  leaveFn() {
+    if (this.ref) {
+      const target = this.ref.nativeElement;
+      const text = target.textContent || '';
+      if (this.leave) this.leave.emit(text);
+      target.textContent = text;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.ref && this.value) this.ref.nativeElement.textContent = this.value;
+  }
+}