{"version":3,"file":"primeng-password.mjs","sources":["../../src/app/components/password/password.ts","../../src/app/components/password/primeng-password.ts"],"sourcesContent":["import {NgModule,Directive,ElementRef,HostListener,Input,OnDestroy,DoCheck,NgZone, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, TemplateRef, Component, AfterContentInit, ViewChild, ChangeDetectorRef, forwardRef, Output, EventEmitter} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {animate, style, transition, trigger} from '@angular/animations';\nimport {NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';\nimport {OverlayService, PrimeNGConfig, PrimeTemplate, TranslationKeys, SharedModule} from 'primeng/api';\nimport {ZIndexUtils} from 'primeng/utils';\nimport {InputTextModule} from 'primeng/inputtext';\nimport { Subscription } from 'rxjs';\n\n@Directive({\n selector: '[pPassword]',\n host: {\n 'class': 'p-inputtext p-component p-element',\n '[class.p-filled]': 'filled'\n }\n})\nexport class PasswordDirective implements OnDestroy,DoCheck {\n\n @Input() promptLabel: string = 'Enter a password';\n\n @Input() weakLabel: string = 'Weak';\n\n @Input() mediumLabel: string = 'Medium';\n\n @Input() strongLabel: string = 'Strong';\n\n @Input() feedback: boolean = true;\n\n @Input() set showPassword(show: boolean) {\n this.el.nativeElement.type = show ? 'text' : 'password';\n }\n\n panel: HTMLDivElement;\n\n meter: any;\n\n info: any;\n\n filled: boolean;\n\n scrollHandler: any;\n\n documentResizeListener: any;\n\n constructor(public el: ElementRef, public zone: NgZone) {}\n\n ngDoCheck() {\n this.updateFilledState();\n }\n\n @HostListener('input', ['$event'])\n onInput(e) {\n this.updateFilledState();\n }\n\n updateFilledState() {\n this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;\n }\n\n createPanel() {\n this.panel = document.createElement('div');\n this.panel.className = 'p-password-panel p-component p-password-panel-overlay p-connected-overlay';\n this.meter = document.createElement('div');\n this.meter.className = 'p-password-meter';\n this.info = document.createElement('div');\n this.info.className = 'p-password-info';\n this.info.textContent = this.promptLabel;\n this.panel.appendChild(this.meter);\n this.panel.appendChild(this.info);\n this.panel.style.minWidth = DomHandler.getOuterWidth(this.el.nativeElement) + 'px';\n document.body.appendChild(this.panel);\n }\n\n showOverlay() {\n if (this.feedback) {\n if (!this.panel) {\n this.createPanel();\n }\n\n this.panel.style.zIndex = String(++DomHandler.zindex);\n this.panel.style.display = 'block';\n this.zone.runOutsideAngular(() => {\n\n setTimeout(() => {\n DomHandler.addClass(this.panel, 'p-connected-overlay-visible');\n this.bindScrollListener();\n this.bindDocumentResizeListener();\n }, 1);\n });\n DomHandler.absolutePosition(this.panel, this.el.nativeElement);\n }\n }\n\n hideOverlay() {\n if (this.feedback && this.panel) {\n DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');\n DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');\n this.unbindScrollListener();\n this.unbindDocumentResizeListener();\n\n this.zone.runOutsideAngular(() => {\n setTimeout(() => {\n this.ngOnDestroy();\n }, 150);\n });\n }\n }\n\n @HostListener('focus')\n onFocus() {\n this.showOverlay();\n }\n\n @HostListener('blur')\n onBlur() {\n this.hideOverlay();\n }\n\n @HostListener('keyup', ['$event'])\n onKeyup(e) {\n if (this.feedback) {\n let value = e.target.value,\n label = null,\n meterPos = null;\n\n if (value.length === 0) {\n label = this.promptLabel;\n meterPos = '0px 0px';\n }\n else {\n var score = this.testStrength(value);\n\n if (score < 30) {\n label = this.weakLabel;\n meterPos = '0px -10px';\n }\n else if (score >= 30 && score < 80) {\n label = this.mediumLabel;\n meterPos = '0px -20px';\n }\n else if (score >= 80) {\n label = this.strongLabel;\n meterPos = '0px -30px';\n }\n }\n\n if (!this.panel || !DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {\n this.showOverlay();\n }\n\n this.meter.style.backgroundPosition = meterPos;\n this.info.textContent = label;\n }\n }\n\n testStrength(str: string) {\n let grade: number = 0;\n let val: RegExpMatchArray;\n\n val = str.match('[0-9]');\n grade += this.normalize(val ? val.length : 1/4, 1) * 25;\n\n val = str.match('[a-zA-Z]');\n grade += this.normalize(val ? val.length : 1/2, 3) * 10;\n\n val = str.match('[!@#$%^&*?_~.,;=]');\n grade += this.normalize(val ? val.length : 1/6, 1) * 35;\n\n val = str.match('[A-Z]');\n grade += this.normalize(val ? val.length : 1/6, 1) * 30;\n\n grade *= str.length / 8;\n\n return grade > 100 ? 100 : grade;\n }\n\n normalize(x, y) {\n let diff = x - y;\n\n if (diff <= 0)\n return x / y;\n else\n return 1 + 0.5 * (x / (x + y/4));\n }\n\n get disabled(): boolean {\n return this.el.nativeElement.disabled;\n }\n\n bindScrollListener() {\n if (!this.scrollHandler) {\n this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {\n if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {\n this.hideOverlay();\n }\n });\n }\n\n this.scrollHandler.bindScrollListener();\n }\n\n unbindScrollListener() {\n if (this.scrollHandler) {\n this.scrollHandler.unbindScrollListener();\n }\n }\n\n bindDocumentResizeListener() {\n this.documentResizeListener = this.onWindowResize.bind(this);\n window.addEventListener('resize', this.documentResizeListener);\n }\n\n unbindDocumentResizeListener() {\n if (this.documentResizeListener) {\n window.removeEventListener('resize', this.documentResizeListener);\n this.documentResizeListener = null;\n }\n }\n\n onWindowResize() {\n this.hideOverlay();\n }\n\n ngOnDestroy() {\n if (this.panel) {\n if (this.scrollHandler) {\n this.scrollHandler.destroy();\n this.scrollHandler = null;\n }\n\n this.unbindDocumentResizeListener();\n\n document.body.removeChild(this.panel);\n this.panel = null;\n this.meter = null;\n this.info = null;\n }\n }\n}\n\n\nexport const Password_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => Password),\n multi: true\n};\n@Component({\n selector: 'p-password',\n template: `\n \n
\n
\n
\n
\n
\n \n \n
\n \n {{infoText}}
\n \n
\n
\n