Merge pull request #2772 from maicongodinho/password-input

feat: add password input

Author: zvonimirfras

package-lock.json

@@ -67,7 +67,7 @@
     "@angular/common": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/forms": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-    "@carbon/styles": "^1.54.0",
+    "@carbon/styles": "^1.56.0",
     "rxjs": "^6.0.0 || ^7.0.0",
     "zone.js": "^0.11.0"
   },
@@ -85,7 +85,7 @@
     "@angular/platform-browser-dynamic": "14.3.0",
     "@angular/router": "14.3.0",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.54.0",
+    "@carbon/styles": "1.56.0",
     "@carbon/themes": "11.24.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",

package.json

@@ -58,6 +58,8 @@ import WarningFilled16 from "@carbon/icons/es/warning--filled/16";
 import WarningFilled20 from "@carbon/icons/es/warning--filled/20";
 import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16";
 import WarningAltFilled20 from "@carbon/icons/es/warning--alt--filled/20";
+import View16 from "@carbon/icons/es/view/16";
+import ViewOff16 from "@carbon/icons/es/view--off/16";
 
 // either provides a new instance of IconService, or returns the parent
 export function ICON_SERVICE_PROVIDER_FACTORY(parentService: IconService) {
@@ -134,6 +136,8 @@ export class IconModule {
 			SettingsAdjust16,
 			Subtract16,
 			TrashCan16,
+			View16,
+			ViewOff16,
 			Warning16,
 			WarningFilled16,
 			WarningFilled20,

src/icon/icon.module.ts

@@ -4,3 +4,5 @@ export * from "./label.component";
 export * from "./text-area.directive";
 export * from "./text-input-label.component";
 export * from "./textarea-label.component";
+export * from "./password-input-label.component";
+export * from "./password.directive";

src/input/index.ts

@@ -10,26 +10,36 @@ import { TextArea } from "./text-area.directive";
 import { TextareaLabelComponent } from "./textarea-label.component";
 import { TextInputLabelComponent } from "./text-input-label.component";
 import { IconModule } from "carbon-components-angular/icon";
+import { PasswordInput } from "./password.directive";
+import { PasswordInputLabelComponent } from "./password-input-label.component";
+import { TooltipModule } from "carbon-components-angular/tooltip";
+import { ButtonModule } from "carbon-components-angular/button";
 
 @NgModule({
 	declarations: [
 		Label,
 		TextInput,
 		TextArea,
+		PasswordInput,
 		TextareaLabelComponent,
-		TextInputLabelComponent
+		TextInputLabelComponent,
+		PasswordInputLabelComponent
 	],
 	exports: [
 		Label,
 		TextareaLabelComponent,
 		TextInputLabelComponent,
+		PasswordInputLabelComponent,
 		TextInput,
-		TextArea
+		TextArea,
+		PasswordInput
 	],
 	imports: [
 		CommonModule,
 		FormsModule,
-		IconModule
+		IconModule,
+		ButtonModule,
+		TooltipModule
 	]
 })
 export class InputModule { }

src/input/input.module.ts

@@ -13,6 +13,7 @@ import {
 
 import { TextArea } from "./text-area.directive";
 import { TextInput } from "./input.directive";
+import { PasswordInput } from "./password.directive";
 
 /**
  * Get started with importing the module:
@@ -74,6 +75,21 @@ import { TextInput } from "./input.directive";
 					[textInputTemplate]="inputContentTemplate">
 				</cds-text-label>
 			</ng-container>
+			<ng-container *ngSwitchCase="'PasswordInput'">
+				<cds-password-label
+					[labelInputID]="labelInputID"
+					[disabled]="disabled"
+					[skeleton]="skeleton"
+					[helperText]="helperText"
+					[invalid]="invalid"
+					[invalidText]="invalidText"
+					[warn]="warn"
+					[warnText]="warnText"
+					[ariaLabel]="ariaLabel"
+					[labelTemplate]="labelContentTemplate"
+					[passwordInputTemplate]="inputContentTemplate">
+				</cds-password-label>
+			</ng-container>
 			<ng-container *ngSwitchDefault>
 				<ng-template [ngTemplateOutlet]="default"></ng-template>
 			</ng-container>
@@ -137,7 +153,7 @@ export class Label implements AfterContentInit, AfterViewInit {
 	/**
 	 * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
 	 * its input counterpart through the 'for' attribute.
-	*/
+	 */
 	@Input() labelInputID = `cds-label-${Label.labelCounter++}`;
 	/**
 	 * Set to `true` for disabled state.
@@ -160,8 +176,8 @@ export class Label implements AfterContentInit, AfterViewInit {
 	 */
 	@Input() invalid = false;
 	/**
-	  * Set to `true` to show a warning (contents set by warningText)
-	  */
+	 * Set to `true` to show a warning (contents set by warningText)
+	 */
 	@Input() warn = false;
 	/**
 	 * Sets the warning text
@@ -179,11 +195,14 @@ export class Label implements AfterContentInit, AfterViewInit {
 	// @ts-ignore
 	@ContentChild(TextInput, { static: false }) textInput: TextInput;
 
+	@ContentChild(PasswordInput, { static: false })
+	passwordInput: PasswordInput;
+
 	@HostBinding("class.cds--form-item") get labelClass() {
 		return this.type === undefined;
 	}
 
-	type: "TextArea" | "TextInput";
+	type: "TextArea" | "TextInput" | "PasswordInput";
 
 	/**
 	 * Creates an instance of Label.
@@ -198,6 +217,8 @@ export class Label implements AfterContentInit, AfterViewInit {
 			this.type = "TextArea";
 		} else if (this.textInput) {
 			this.type = "TextInput";
+		} else if (this.passwordInput) {
+			this.type = "PasswordInput";
 		}
 	}