Custom element - Password Toggle

Attach toogle password behavior with this custom element.

Installation

With npm

npm i @fredxd/passwordtoggle

Or yarn

yarn add @fredxd/passwordtoggle

Usage

To attach toggle behavior to input, add is="toggle-password" to your password input

<input type="password" is="toggle-password" />

Attributes

You can pass some parameters via data attributes

Attribute	Type	Description
data-show-text	string	Text rendered in input to show password
data-hide-text	string	Text rendered in input to hide password
data-display-icon	string or bool	You can display icon instead of text
data-icon-show	string	Path of your "show" icon (local path or url)
data-icon-hide	string	Path of your "hide" icon (local path or url)

Styles

Input is encapsulate in shadow dom container. You can override some css var in order to apply your style. You can change css variable for .toggle-password-container

Css var	Type	Default value	Description
--toggle-password-background-color	color	transparent	Change color of background for toggle element
--toggle-password-color	color	#000	Change color of text or icon
--toggle-password-width	unit	40px	Set width of toggle element
--toggle-password-padding	unit	5px	Set horizontal padding of toggle element
--toggle-password-icon-width	unit	24px	Height of toggle icon
--toggle-password-icon-height	unit	24px	Width of toggle icon
--toggle-password-focused-color	color	#000	Change color of text or icon when input is focused
--toggle-password-disabled-color	color	#000	Change color of text or icon when input is disabled
--toggle-password-invalid-color	color	#000	Change color of text or icon when input has class "is-invalid"
--toggle-password-filled-color	color	#000	Change color of text or icon when input is filled