2022-11-28 14:04:41 +01:00
import { FormsModule , ReactiveFormsModule } from "@angular/forms" ;
import { Meta , module Metadata , Story } from "@storybook/angular" ;
2022-12-19 23:14:29 +01:00
import { I18nService } from "@bitwarden/common/abstractions/i18n.service" ;
import { IconButtonModule } from "../icon-button" ;
2022-11-28 14:04:41 +01:00
import { InputModule } from "../input/input.module" ;
2022-12-19 23:14:29 +01:00
import { I18nMockService } from "../utils/i18n-mock.service" ;
2022-11-28 14:04:41 +01:00
import { FormFieldModule } from "./form-field.module" ;
import { BitPasswordInputToggleDirective } from "./password-input-toggle.directive" ;
export default {
title : "Component Library/Form/Password Toggle" ,
component : BitPasswordInputToggleDirective ,
decorators : [
module Metadata ( {
2022-12-19 23:14:29 +01:00
imports : [ FormsModule , ReactiveFormsModule , FormFieldModule , InputModule , IconButtonModule ] ,
providers : [
{
provide : I18nService ,
useValue : new I18nMockService ( { toggleVisibility : "Toggle visibility" } ) ,
} ,
] ,
2022-11-28 14:04:41 +01:00
} ) ,
] ,
parameters : {
design : {
type : "figma" ,
url : "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17689" ,
} ,
docs : {
description : {
component :
"Directive for toggling the visibility of a password input. Works by either having living inside a `bit-form-field` or by using the `toggled` two-way binding." ,
} ,
} ,
} ,
} as Meta ;
const Template : Story < BitPasswordInputToggleDirective > = (
args : BitPasswordInputToggleDirective
) = > ( {
props : {
. . . args ,
} ,
template : `
< form >
< bit - form - field >
< bit - label > Password < / b i t - l a b e l >
< input bitInput type = "password" / >
2022-12-19 23:14:29 +01:00
< button type = "button" bitIconButton bitSuffix bitPasswordInputToggle > < / button >
2022-11-28 14:04:41 +01:00
< / b i t - f o r m - f i e l d >
< / form >
` ,
} ) ;
export const Default = Template . bind ( { } ) ;
Default . props = { } ;
const TemplateBinding : Story < BitPasswordInputToggleDirective > = (
args : BitPasswordInputToggleDirective
) = > ( {
props : {
. . . args ,
} ,
template : `
< form >
< bit - form - field >
< bit - label > Password < / b i t - l a b e l >
< input bitInput type = "password" / >
2022-12-19 23:14:29 +01:00
< button type = "button" bitIconButton bitSuffix bitPasswordInputToggle [ ( toggled ) ] = " toggled " > < / button >
2022-11-28 14:04:41 +01:00
< / b i t - f o r m - f i e l d >
< label class = "tw-text-main" >
Checked :
< input type = "checkbox" [ ( ngModel ) ] = " toggled " [ ngModelOptions ] = " { standalone : true } " / >
< / label >
< / form >
` ,
} ) ;
export const Binding = TemplateBinding . bind ( { } ) ;
Binding . props = {
toggled : false ,
} ;