From 9508f80af5f0363b3e9623690c0eeeee97319bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20KILI=C3=87?= <fsk202@gmail.com>
Date: Mon, 12 Dec 2022 17:24:21 +0300
Subject: [PATCH] password component create

---
 .../password/password.component.html          | 20 +++++++++++++++++++
 .../components/password/password.component.ts | 18 +++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
 create mode 100644 npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
new file mode 100644
index 0000000000..8f4247155c
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.html
@@ -0,0 +1,20 @@
+<div class="input-group">
+  <div class="col-9 col-md-10 p-0">
+    <input
+      [type]="fieldTextType ? 'text' : 'password'"
+      class="form-control"
+      [id]="prop.id"
+      [formControlName]="prop.name"
+    />
+  </div>
+  <span class="input-group-text">
+    <i
+      class="fa"
+      [ngClass]="{
+        'fa-eye-slash': !fieldTextType,
+        'fa-eye': fieldTextType
+      }"
+      (click)="toggleFieldTextType()"
+    ></i>
+  </span>
+</div>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
new file mode 100644
index 0000000000..ca93a1d121
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/password/password.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { EXTENSIBLE_FORM_VIEW_PROVIDER } from '../../tokens/extensible-form-view-provider.token';
+import { FormProp } from '../../models/form-props';
+
+@Component({
+  selector: 'abp-password',
+  templateUrl: `password.component.html`,
+  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER],
+})
+export class PasswordComponent {
+  @Input() prop!: FormProp;
+
+  fieldTextType: boolean;
+
+  toggleFieldTextType() {
+    this.fieldTextType = !this.fieldTextType;
+  }
+}