Add node_modules/babel-polyfill/dist/polyfill.min.js to the prepend list in aurelia.json. Do not forgot to add babel-polyfill to the dependencies in package.json.
JSPM
jspm install aurelia-plugins-password-viewer
Bower
bower install aurelia-plugins-password-viewer
Configuration
Inside of your main.js or main.ts file simply load the plugin inside of the configure method using .plugin().
exportasyncfunctionconfigure(aurelia){
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.use
.plugin('aurelia-plugins-password-viewer');
awaitaurelia.start();
aurelia.setRoot('app');
}
Usage
Once the password viewer plugin is configured, to use it simply add the custom element <aup-password-viewer></aup-password-viewer> in your view.
There are 4 bindable properties:
class: the CSS class placed on the input element
$id: id of the input element so you can link with a label
placeholder: the placeholder of the input element
value: the value of the input element
Styling
The dropdown doesn't come with styling. If you use the CSS Framework Faceman, styling is provided automatically. Otherwise copy and paste the below styling to your SCSS stylesheet. Use the variables to change the look-and-feel.