Fixed 6137

primefaces · Jul 23, 2018 · f3fc120 · dennyak47 · Jul 31, 2018 · f3fc120
1 parent ca2f8b0
commit f3fc120
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 36 deletions.
diff --git a/src/app/components/password/password.css b/src/app/components/password/password.css
@@ -1,7 +1,7 @@
 .ui-password-panel {
     padding: .25em .5em;
     width: 10em;
-    margin-top: 2px;
+    position: absolute; 
 }
 
 .ui-password-panel .ui-password-meter { 
@@ -16,5 +16,31 @@
 }
 
 .ui-password-panel-overlay { 
-    position: absolute; 
+
+}
+
+/* Overlay Animations */
+.ui-password-panel {
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    opacity: 0;
+    -webkit-transition: transform .3s, opacity .3s;
+    transition: transform .3s, opacity .3s;
+}
+
+.ui-password-panel-visible {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.ui-password-panel-hidden {
+    opacity: 0;
+    -webkit-transform: translateY(5%);
+    -ms-transform: translateY(5%);
+    transform: translateY(5%);
+    -webkit-transition: transform .3s, opacity .15s;
+    transition: transform .3s, opacity .15s;
 }
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
@@ -1,4 +1,4 @@
-import {NgModule,Directive,ElementRef,HostListener,Input,AfterViewInit,OnDestroy,DoCheck} from '@angular/core';
+import {NgModule,Directive,ElementRef,HostListener,Input,OnDestroy,DoCheck,NgZone} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 
@@ -13,7 +13,7 @@ import {DomHandler} from '../dom/domhandler';
     },
     providers: [DomHandler]
 })
-export class Password implements AfterViewInit,OnDestroy,DoCheck {
+export class Password implements OnDestroy,DoCheck {
 
     @Input() promptLabel: string = 'Please enter a password';
 
@@ -25,31 +25,15 @@ export class Password implements AfterViewInit,OnDestroy,DoCheck {
 
     @Input() feedback: boolean = true;
 
-    panel: any;
+    panel: HTMLDivElement;
 
     meter: any;
 
     info: any;
 
     filled: boolean;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler) {}
-
-    ngAfterViewInit() {
-        this.panel = document.createElement('div');
-        this.panel.className = 'ui-password-panel ui-widget ui-state-highlight ui-corner-all ui-helper-hidden ui-password-panel-overlay';
-        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;
-
-        if(this.feedback) {
-            this.panel.appendChild(this.meter);
-            this.panel.appendChild(this.info);
-            document.body.appendChild(this.panel);
-        }
-    }
+    constructor(public el: ElementRef, public domHandler: DomHandler, public zone: NgZone) {}
 
     ngDoCheck() {
         this.updateFilledState();
@@ -64,18 +48,48 @@ export class Password implements AfterViewInit,OnDestroy,DoCheck {
     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);
+        document.body.appendChild(this.panel);
+    }
 
     @HostListener('focus', ['$event']) 
     onFocus(e) {
+        if (!this.panel) {
+            this.createPanel();
+        }
+
         this.panel.style.zIndex = String(++DomHandler.zindex);
-        this.domHandler.removeClass(this.panel, 'ui-helper-hidden');
-        this.domHandler.absolutePosition(this.panel, this.el.nativeElement);
-        this.domHandler.fadeIn(this.panel, 250);
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this.domHandler.addClass(this.panel, 'ui-password-panel-visible');
+                this.domHandler.removeClass(this.panel, 'ui-password-panel-hidden');
+            }, 1);
+            this.domHandler.absolutePosition(this.panel, this.el.nativeElement);
+        });
     }
 
     @HostListener('blur', ['$event']) 
-    onBlur(e) {        
-        this.domHandler.addClass(this.panel, 'ui-helper-hidden');
+    onBlur(e) {   
+        if (this.feedback) {
+            this.domHandler.addClass(this.panel, 'ui-password-panel-hidden');
+            this.domHandler.removeClass(this.panel, 'ui-password-panel-visible');
+
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.ngOnDestroy();
+                }, 150);
+            });
+        }     
     }
 
     @HostListener('keyup', ['$event'])
@@ -144,15 +158,12 @@ export class Password implements AfterViewInit,OnDestroy,DoCheck {
     }
 
     ngOnDestroy() {
-        if (!this.feedback)
-            return;
-
-        this.panel.removeChild(this.meter);
-        this.panel.removeChild(this.info);
-        document.body.removeChild(this.panel);
-        this.panel = null;
-        this.meter = null;
-        this.info = null;
+        if (this.panel) {
+            document.body.removeChild(this.panel);
+            this.panel = null;
+            this.meter = null;
+            this.info = null;
+        }
     }
 }