UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Build Status](https://travis-ci.org/primefaces/primeng.

194 lines (190 loc) 6.59 kB
import { ElementRef, NgZone, Input, HostListener, Directive, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; let Password = class Password { constructor(el, zone) { this.el = el; this.zone = zone; this.promptLabel = 'Enter a password'; this.weakLabel = 'Weak'; this.mediumLabel = 'Medium'; this.strongLabel = 'Strong'; this.feedback = true; } set showPassword(show) { this.el.nativeElement.type = show ? 'text' : 'password'; } ngDoCheck() { this.updateFilledState(); } //To trigger change detection to manage ui-state-filled for material labels when there is no value binding onInput(e) { this.updateFilledState(); } updateFilledState() { this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length; } createPanel() { this.panel = document.createElement('div'); this.panel.className = 'ui-password-panel ui-widget ui-state-highlight ui-corner-all'; this.meter = document.createElement('div'); this.meter.className = 'ui-password-meter'; this.info = document.createElement('div'); this.info.className = 'ui-password-info'; this.info.textContent = this.promptLabel; this.panel.appendChild(this.meter); this.panel.appendChild(this.info); this.panel.style.minWidth = DomHandler.getOuterWidth(this.el.nativeElement) + 'px'; document.body.appendChild(this.panel); } onFocus(e) { if (this.feedback) { if (!this.panel) { this.createPanel(); } this.panel.style.zIndex = String(++DomHandler.zindex); this.zone.runOutsideAngular(() => { setTimeout(() => { DomHandler.addClass(this.panel, 'ui-password-panel-visible'); DomHandler.removeClass(this.panel, 'ui-password-panel-hidden'); }, 1); DomHandler.absolutePosition(this.panel, this.el.nativeElement); }); } } onBlur(e) { if (this.feedback) { DomHandler.addClass(this.panel, 'ui-password-panel-hidden'); DomHandler.removeClass(this.panel, 'ui-password-panel-visible'); this.zone.runOutsideAngular(() => { setTimeout(() => { this.ngOnDestroy(); }, 150); }); } } onKeyup(e) { if (this.feedback) { let value = e.target.value, label = null, meterPos = null; if (value.length === 0) { label = this.promptLabel; meterPos = '0px 0px'; } else { var score = this.testStrength(value); if (score < 30) { label = this.weakLabel; meterPos = '0px -10px'; } else if (score >= 30 && score < 80) { label = this.mediumLabel; meterPos = '0px -20px'; } else if (score >= 80) { label = this.strongLabel; meterPos = '0px -30px'; } } this.meter.style.backgroundPosition = meterPos; this.info.textContent = label; } } testStrength(str) { let grade = 0; let val; val = str.match('[0-9]'); grade += this.normalize(val ? val.length : 1 / 4, 1) * 25; val = str.match('[a-zA-Z]'); grade += this.normalize(val ? val.length : 1 / 2, 3) * 10; val = str.match('[!@#$%^&*?_~.,;=]'); grade += this.normalize(val ? val.length : 1 / 6, 1) * 35; val = str.match('[A-Z]'); grade += this.normalize(val ? val.length : 1 / 6, 1) * 30; grade *= str.length / 8; return grade > 100 ? 100 : grade; } normalize(x, y) { let diff = x - y; if (diff <= 0) return x / y; else return 1 + 0.5 * (x / (x + y / 4)); } get disabled() { return this.el.nativeElement.disabled; } ngOnDestroy() { if (this.panel) { document.body.removeChild(this.panel); this.panel = null; this.meter = null; this.info = null; } } }; Password.ctorParameters = () => [ { type: ElementRef }, { type: NgZone } ]; __decorate([ Input() ], Password.prototype, "promptLabel", void 0); __decorate([ Input() ], Password.prototype, "weakLabel", void 0); __decorate([ Input() ], Password.prototype, "mediumLabel", void 0); __decorate([ Input() ], Password.prototype, "strongLabel", void 0); __decorate([ Input() ], Password.prototype, "feedback", void 0); __decorate([ Input() ], Password.prototype, "showPassword", null); __decorate([ HostListener('input', ['$event']) ], Password.prototype, "onInput", null); __decorate([ HostListener('focus', ['$event']) ], Password.prototype, "onFocus", null); __decorate([ HostListener('blur', ['$event']) ], Password.prototype, "onBlur", null); __decorate([ HostListener('keyup', ['$event']) ], Password.prototype, "onKeyup", null); Password = __decorate([ Directive({ selector: '[pPassword]', host: { '[class.ui-inputtext]': 'true', '[class.ui-corner-all]': 'true', '[class.ui-state-default]': 'true', '[class.ui-widget]': 'true', '[class.ui-state-filled]': 'filled' } }) ], Password); let PasswordModule = class PasswordModule { }; PasswordModule = __decorate([ NgModule({ imports: [CommonModule], exports: [Password], declarations: [Password] }) ], PasswordModule); /** * Generated bundle index. Do not edit. */ export { Password, PasswordModule }; //# sourceMappingURL=primeng-password.js.map