1 | import * as i0 from '@angular/core';
|
---|
2 | import { Directive, Input, HostListener, forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
|
---|
3 | import * as i2 from '@angular/common';
|
---|
4 | import { CommonModule } from '@angular/common';
|
---|
5 | import { trigger, transition, style, animate } from '@angular/animations';
|
---|
6 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
---|
7 | import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
---|
8 | import * as i1 from 'primeng/api';
|
---|
9 | import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
|
---|
10 | import { ZIndexUtils } from 'primeng/utils';
|
---|
11 | import * as i3 from 'primeng/inputtext';
|
---|
12 | import { InputTextModule } from 'primeng/inputtext';
|
---|
13 |
|
---|
14 | class PasswordDirective {
|
---|
15 | constructor(el, zone) {
|
---|
16 | this.el = el;
|
---|
17 | this.zone = zone;
|
---|
18 | this.promptLabel = 'Enter a password';
|
---|
19 | this.weakLabel = 'Weak';
|
---|
20 | this.mediumLabel = 'Medium';
|
---|
21 | this.strongLabel = 'Strong';
|
---|
22 | this.feedback = true;
|
---|
23 | }
|
---|
24 | set showPassword(show) {
|
---|
25 | this.el.nativeElement.type = show ? 'text' : 'password';
|
---|
26 | }
|
---|
27 | ngDoCheck() {
|
---|
28 | this.updateFilledState();
|
---|
29 | }
|
---|
30 | onInput(e) {
|
---|
31 | this.updateFilledState();
|
---|
32 | }
|
---|
33 | updateFilledState() {
|
---|
34 | this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;
|
---|
35 | }
|
---|
36 | createPanel() {
|
---|
37 | this.panel = document.createElement('div');
|
---|
38 | this.panel.className = 'p-password-panel p-component p-password-panel-overlay p-connected-overlay';
|
---|
39 | this.meter = document.createElement('div');
|
---|
40 | this.meter.className = 'p-password-meter';
|
---|
41 | this.info = document.createElement('div');
|
---|
42 | this.info.className = 'p-password-info';
|
---|
43 | this.info.textContent = this.promptLabel;
|
---|
44 | this.panel.appendChild(this.meter);
|
---|
45 | this.panel.appendChild(this.info);
|
---|
46 | this.panel.style.minWidth = DomHandler.getOuterWidth(this.el.nativeElement) + 'px';
|
---|
47 | document.body.appendChild(this.panel);
|
---|
48 | }
|
---|
49 | showOverlay() {
|
---|
50 | if (this.feedback) {
|
---|
51 | if (!this.panel) {
|
---|
52 | this.createPanel();
|
---|
53 | }
|
---|
54 | this.panel.style.zIndex = String(++DomHandler.zindex);
|
---|
55 | this.panel.style.display = 'block';
|
---|
56 | this.zone.runOutsideAngular(() => {
|
---|
57 | setTimeout(() => {
|
---|
58 | DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
|
---|
59 | this.bindScrollListener();
|
---|
60 | this.bindDocumentResizeListener();
|
---|
61 | }, 1);
|
---|
62 | });
|
---|
63 | DomHandler.absolutePosition(this.panel, this.el.nativeElement);
|
---|
64 | }
|
---|
65 | }
|
---|
66 | hideOverlay() {
|
---|
67 | if (this.feedback && this.panel) {
|
---|
68 | DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
|
---|
69 | DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
|
---|
70 | this.unbindScrollListener();
|
---|
71 | this.unbindDocumentResizeListener();
|
---|
72 | this.zone.runOutsideAngular(() => {
|
---|
73 | setTimeout(() => {
|
---|
74 | this.ngOnDestroy();
|
---|
75 | }, 150);
|
---|
76 | });
|
---|
77 | }
|
---|
78 | }
|
---|
79 | onFocus() {
|
---|
80 | this.showOverlay();
|
---|
81 | }
|
---|
82 | onBlur() {
|
---|
83 | this.hideOverlay();
|
---|
84 | }
|
---|
85 | onKeyup(e) {
|
---|
86 | if (this.feedback) {
|
---|
87 | let value = e.target.value, label = null, meterPos = null;
|
---|
88 | if (value.length === 0) {
|
---|
89 | label = this.promptLabel;
|
---|
90 | meterPos = '0px 0px';
|
---|
91 | }
|
---|
92 | else {
|
---|
93 | var score = this.testStrength(value);
|
---|
94 | if (score < 30) {
|
---|
95 | label = this.weakLabel;
|
---|
96 | meterPos = '0px -10px';
|
---|
97 | }
|
---|
98 | else if (score >= 30 && score < 80) {
|
---|
99 | label = this.mediumLabel;
|
---|
100 | meterPos = '0px -20px';
|
---|
101 | }
|
---|
102 | else if (score >= 80) {
|
---|
103 | label = this.strongLabel;
|
---|
104 | meterPos = '0px -30px';
|
---|
105 | }
|
---|
106 | }
|
---|
107 | if (!this.panel || !DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
|
---|
108 | this.showOverlay();
|
---|
109 | }
|
---|
110 | this.meter.style.backgroundPosition = meterPos;
|
---|
111 | this.info.textContent = label;
|
---|
112 | }
|
---|
113 | }
|
---|
114 | testStrength(str) {
|
---|
115 | let grade = 0;
|
---|
116 | let val;
|
---|
117 | val = str.match('[0-9]');
|
---|
118 | grade += this.normalize(val ? val.length : 1 / 4, 1) * 25;
|
---|
119 | val = str.match('[a-zA-Z]');
|
---|
120 | grade += this.normalize(val ? val.length : 1 / 2, 3) * 10;
|
---|
121 | val = str.match('[!@#$%^&*?_~.,;=]');
|
---|
122 | grade += this.normalize(val ? val.length : 1 / 6, 1) * 35;
|
---|
123 | val = str.match('[A-Z]');
|
---|
124 | grade += this.normalize(val ? val.length : 1 / 6, 1) * 30;
|
---|
125 | grade *= str.length / 8;
|
---|
126 | return grade > 100 ? 100 : grade;
|
---|
127 | }
|
---|
128 | normalize(x, y) {
|
---|
129 | let diff = x - y;
|
---|
130 | if (diff <= 0)
|
---|
131 | return x / y;
|
---|
132 | else
|
---|
133 | return 1 + 0.5 * (x / (x + y / 4));
|
---|
134 | }
|
---|
135 | get disabled() {
|
---|
136 | return this.el.nativeElement.disabled;
|
---|
137 | }
|
---|
138 | bindScrollListener() {
|
---|
139 | if (!this.scrollHandler) {
|
---|
140 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {
|
---|
141 | if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
|
---|
142 | this.hideOverlay();
|
---|
143 | }
|
---|
144 | });
|
---|
145 | }
|
---|
146 | this.scrollHandler.bindScrollListener();
|
---|
147 | }
|
---|
148 | unbindScrollListener() {
|
---|
149 | if (this.scrollHandler) {
|
---|
150 | this.scrollHandler.unbindScrollListener();
|
---|
151 | }
|
---|
152 | }
|
---|
153 | bindDocumentResizeListener() {
|
---|
154 | this.documentResizeListener = this.onWindowResize.bind(this);
|
---|
155 | window.addEventListener('resize', this.documentResizeListener);
|
---|
156 | }
|
---|
157 | unbindDocumentResizeListener() {
|
---|
158 | if (this.documentResizeListener) {
|
---|
159 | window.removeEventListener('resize', this.documentResizeListener);
|
---|
160 | this.documentResizeListener = null;
|
---|
161 | }
|
---|
162 | }
|
---|
163 | onWindowResize() {
|
---|
164 | this.hideOverlay();
|
---|
165 | }
|
---|
166 | ngOnDestroy() {
|
---|
167 | if (this.panel) {
|
---|
168 | if (this.scrollHandler) {
|
---|
169 | this.scrollHandler.destroy();
|
---|
170 | this.scrollHandler = null;
|
---|
171 | }
|
---|
172 | this.unbindDocumentResizeListener();
|
---|
173 | document.body.removeChild(this.panel);
|
---|
174 | this.panel = null;
|
---|
175 | this.meter = null;
|
---|
176 | this.info = null;
|
---|
177 | }
|
---|
178 | }
|
---|
179 | }
|
---|
180 | PasswordDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
---|
181 | PasswordDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: PasswordDirective, selector: "[pPassword]", inputs: { promptLabel: "promptLabel", weakLabel: "weakLabel", mediumLabel: "mediumLabel", strongLabel: "strongLabel", feedback: "feedback", showPassword: "showPassword" }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()", "keyup": "onKeyup($event)" }, properties: { "class.p-filled": "filled" }, classAttribute: "p-inputtext p-component p-element" }, ngImport: i0 });
|
---|
182 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordDirective, decorators: [{
|
---|
183 | type: Directive,
|
---|
184 | args: [{
|
---|
185 | selector: '[pPassword]',
|
---|
186 | host: {
|
---|
187 | 'class': 'p-inputtext p-component p-element',
|
---|
188 | '[class.p-filled]': 'filled'
|
---|
189 | }
|
---|
190 | }]
|
---|
191 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { promptLabel: [{
|
---|
192 | type: Input
|
---|
193 | }], weakLabel: [{
|
---|
194 | type: Input
|
---|
195 | }], mediumLabel: [{
|
---|
196 | type: Input
|
---|
197 | }], strongLabel: [{
|
---|
198 | type: Input
|
---|
199 | }], feedback: [{
|
---|
200 | type: Input
|
---|
201 | }], showPassword: [{
|
---|
202 | type: Input
|
---|
203 | }], onInput: [{
|
---|
204 | type: HostListener,
|
---|
205 | args: ['input', ['$event']]
|
---|
206 | }], onFocus: [{
|
---|
207 | type: HostListener,
|
---|
208 | args: ['focus']
|
---|
209 | }], onBlur: [{
|
---|
210 | type: HostListener,
|
---|
211 | args: ['blur']
|
---|
212 | }], onKeyup: [{
|
---|
213 | type: HostListener,
|
---|
214 | args: ['keyup', ['$event']]
|
---|
215 | }] } });
|
---|
216 | const Password_VALUE_ACCESSOR = {
|
---|
217 | provide: NG_VALUE_ACCESSOR,
|
---|
218 | useExisting: forwardRef(() => Password),
|
---|
219 | multi: true
|
---|
220 | };
|
---|
221 | class Password {
|
---|
222 | constructor(cd, config, el, overlayService) {
|
---|
223 | this.cd = cd;
|
---|
224 | this.config = config;
|
---|
225 | this.el = el;
|
---|
226 | this.overlayService = overlayService;
|
---|
227 | this.mediumRegex = '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})';
|
---|
228 | this.strongRegex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})';
|
---|
229 | this.feedback = true;
|
---|
230 | this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
---|
231 | this.hideTransitionOptions = '.1s linear';
|
---|
232 | this.onFocus = new EventEmitter();
|
---|
233 | this.onBlur = new EventEmitter();
|
---|
234 | this.overlayVisible = false;
|
---|
235 | this.focused = false;
|
---|
236 | this.unmasked = false;
|
---|
237 | this.value = null;
|
---|
238 | this.onModelChange = () => { };
|
---|
239 | this.onModelTouched = () => { };
|
---|
240 | }
|
---|
241 | ngAfterContentInit() {
|
---|
242 | this.templates.forEach((item) => {
|
---|
243 | switch (item.getType()) {
|
---|
244 | case 'content':
|
---|
245 | this.contentTemplate = item.template;
|
---|
246 | break;
|
---|
247 | case 'header':
|
---|
248 | this.headerTemplate = item.template;
|
---|
249 | break;
|
---|
250 | case 'footer':
|
---|
251 | this.footerTemplate = item.template;
|
---|
252 | break;
|
---|
253 | default:
|
---|
254 | this.contentTemplate = item.template;
|
---|
255 | break;
|
---|
256 | }
|
---|
257 | });
|
---|
258 | }
|
---|
259 | ngOnInit() {
|
---|
260 | this.infoText = this.promptText();
|
---|
261 | this.mediumCheckRegExp = new RegExp(this.mediumRegex);
|
---|
262 | this.strongCheckRegExp = new RegExp(this.strongRegex);
|
---|
263 | this.translationSubscription = this.config.translationObserver.subscribe(() => {
|
---|
264 | this.updateUI(this.value || "");
|
---|
265 | });
|
---|
266 | }
|
---|
267 | onAnimationStart(event) {
|
---|
268 | switch (event.toState) {
|
---|
269 | case 'visible':
|
---|
270 | this.overlay = event.element;
|
---|
271 | ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
|
---|
272 | this.appendContainer();
|
---|
273 | this.alignOverlay();
|
---|
274 | this.bindScrollListener();
|
---|
275 | this.bindResizeListener();
|
---|
276 | break;
|
---|
277 | case 'void':
|
---|
278 | this.unbindScrollListener();
|
---|
279 | this.unbindResizeListener();
|
---|
280 | this.overlay = null;
|
---|
281 | break;
|
---|
282 | }
|
---|
283 | }
|
---|
284 | onAnimationEnd(event) {
|
---|
285 | switch (event.toState) {
|
---|
286 | case 'void':
|
---|
287 | ZIndexUtils.clear(event.element);
|
---|
288 | break;
|
---|
289 | }
|
---|
290 | }
|
---|
291 | appendContainer() {
|
---|
292 | if (this.appendTo) {
|
---|
293 | if (this.appendTo === 'body')
|
---|
294 | document.body.appendChild(this.overlay);
|
---|
295 | else
|
---|
296 | document.getElementById(this.appendTo).appendChild(this.overlay);
|
---|
297 | }
|
---|
298 | }
|
---|
299 | alignOverlay() {
|
---|
300 | if (this.appendTo) {
|
---|
301 | this.overlay.style.minWidth = DomHandler.getOuterWidth(this.input.nativeElement) + 'px';
|
---|
302 | DomHandler.absolutePosition(this.overlay, this.input.nativeElement);
|
---|
303 | }
|
---|
304 | else {
|
---|
305 | DomHandler.relativePosition(this.overlay, this.input.nativeElement);
|
---|
306 | }
|
---|
307 | }
|
---|
308 | onInput(event) {
|
---|
309 | this.value = event.target.value;
|
---|
310 | this.onModelChange(this.value);
|
---|
311 | this.onModelTouched();
|
---|
312 | }
|
---|
313 | onInputFocus(event) {
|
---|
314 | this.focused = true;
|
---|
315 | if (this.feedback) {
|
---|
316 | this.overlayVisible = true;
|
---|
317 | }
|
---|
318 | this.onFocus.emit(event);
|
---|
319 | }
|
---|
320 | onInputBlur(event) {
|
---|
321 | this.focused = false;
|
---|
322 | if (this.feedback) {
|
---|
323 | this.overlayVisible = false;
|
---|
324 | }
|
---|
325 | this.onBlur.emit(event);
|
---|
326 | }
|
---|
327 | onKeyUp(event) {
|
---|
328 | if (this.feedback) {
|
---|
329 | let value = event.target.value;
|
---|
330 | this.updateUI(value);
|
---|
331 | if (!this.overlayVisible) {
|
---|
332 | this.overlayVisible = true;
|
---|
333 | }
|
---|
334 | }
|
---|
335 | }
|
---|
336 | updateUI(value) {
|
---|
337 | let label = null;
|
---|
338 | let meter = null;
|
---|
339 | switch (this.testStrength(value)) {
|
---|
340 | case 1:
|
---|
341 | label = this.weakText();
|
---|
342 | meter = {
|
---|
343 | strength: 'weak',
|
---|
344 | width: '33.33%'
|
---|
345 | };
|
---|
346 | break;
|
---|
347 | case 2:
|
---|
348 | label = this.mediumText();
|
---|
349 | meter = {
|
---|
350 | strength: 'medium',
|
---|
351 | width: '66.66%'
|
---|
352 | };
|
---|
353 | break;
|
---|
354 | case 3:
|
---|
355 | label = this.strongText();
|
---|
356 | meter = {
|
---|
357 | strength: 'strong',
|
---|
358 | width: '100%'
|
---|
359 | };
|
---|
360 | break;
|
---|
361 | default:
|
---|
362 | label = this.promptText();
|
---|
363 | meter = null;
|
---|
364 | break;
|
---|
365 | }
|
---|
366 | this.meter = meter;
|
---|
367 | this.infoText = label;
|
---|
368 | }
|
---|
369 | onMaskToggle() {
|
---|
370 | this.unmasked = !this.unmasked;
|
---|
371 | }
|
---|
372 | onOverlayClick(event) {
|
---|
373 | this.overlayService.add({
|
---|
374 | originalEvent: event,
|
---|
375 | target: this.el.nativeElement
|
---|
376 | });
|
---|
377 | }
|
---|
378 | testStrength(str) {
|
---|
379 | let level = 0;
|
---|
380 | if (this.strongCheckRegExp.test(str))
|
---|
381 | level = 3;
|
---|
382 | else if (this.mediumCheckRegExp.test(str))
|
---|
383 | level = 2;
|
---|
384 | else if (str.length)
|
---|
385 | level = 1;
|
---|
386 | return level;
|
---|
387 | }
|
---|
388 | writeValue(value) {
|
---|
389 | if (value === undefined)
|
---|
390 | this.value = null;
|
---|
391 | else
|
---|
392 | this.value = value;
|
---|
393 | if (this.feedback)
|
---|
394 | this.updateUI(this.value || "");
|
---|
395 | this.cd.markForCheck();
|
---|
396 | }
|
---|
397 | registerOnChange(fn) {
|
---|
398 | this.onModelChange = fn;
|
---|
399 | }
|
---|
400 | registerOnTouched(fn) {
|
---|
401 | this.onModelTouched = fn;
|
---|
402 | }
|
---|
403 | setDisabledState(val) {
|
---|
404 | this.disabled = val;
|
---|
405 | }
|
---|
406 | bindScrollListener() {
|
---|
407 | if (!this.scrollHandler) {
|
---|
408 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.input.nativeElement, () => {
|
---|
409 | if (this.overlayVisible) {
|
---|
410 | this.overlayVisible = false;
|
---|
411 | }
|
---|
412 | });
|
---|
413 | }
|
---|
414 | this.scrollHandler.bindScrollListener();
|
---|
415 | }
|
---|
416 | bindResizeListener() {
|
---|
417 | if (!this.resizeListener) {
|
---|
418 | this.resizeListener = () => {
|
---|
419 | if (this.overlayVisible) {
|
---|
420 | this.overlayVisible = false;
|
---|
421 | }
|
---|
422 | };
|
---|
423 | window.addEventListener('resize', this.resizeListener);
|
---|
424 | }
|
---|
425 | }
|
---|
426 | unbindScrollListener() {
|
---|
427 | if (this.scrollHandler) {
|
---|
428 | this.scrollHandler.unbindScrollListener();
|
---|
429 | }
|
---|
430 | }
|
---|
431 | unbindResizeListener() {
|
---|
432 | if (this.resizeListener) {
|
---|
433 | window.removeEventListener('resize', this.resizeListener);
|
---|
434 | this.resizeListener = null;
|
---|
435 | }
|
---|
436 | }
|
---|
437 | unbindOutsideClickListener() {
|
---|
438 | if (this.outsideClickListener) {
|
---|
439 | document.removeEventListener('click', this.outsideClickListener);
|
---|
440 | this.outsideClickListener = null;
|
---|
441 | }
|
---|
442 | }
|
---|
443 | containerClass() {
|
---|
444 | return { 'p-password p-component p-inputwrapper': true,
|
---|
445 | 'p-input-icon-right': this.toggleMask
|
---|
446 | };
|
---|
447 | }
|
---|
448 | inputFieldClass() {
|
---|
449 | return { 'p-password-input': true,
|
---|
450 | 'p-disabled': this.disabled
|
---|
451 | };
|
---|
452 | }
|
---|
453 | toggleIconClass() {
|
---|
454 | return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
|
---|
455 | }
|
---|
456 | strengthClass() {
|
---|
457 | return `p-password-strength ${this.meter ? this.meter.strength : ''}`;
|
---|
458 | }
|
---|
459 | filled() {
|
---|
460 | return (this.value != null && this.value.toString().length > 0);
|
---|
461 | }
|
---|
462 | promptText() {
|
---|
463 | return this.promptLabel || this.getTranslation(TranslationKeys.PASSWORD_PROMPT);
|
---|
464 | }
|
---|
465 | weakText() {
|
---|
466 | return this.weakLabel || this.getTranslation(TranslationKeys.WEAK);
|
---|
467 | }
|
---|
468 | mediumText() {
|
---|
469 | return this.mediumLabel || this.getTranslation(TranslationKeys.MEDIUM);
|
---|
470 | }
|
---|
471 | strongText() {
|
---|
472 | return this.strongLabel || this.getTranslation(TranslationKeys.STRONG);
|
---|
473 | }
|
---|
474 | restoreAppend() {
|
---|
475 | if (this.overlay && this.appendTo) {
|
---|
476 | if (this.appendTo === 'body')
|
---|
477 | document.body.removeChild(this.overlay);
|
---|
478 | else
|
---|
479 | document.getElementById(this.appendTo).removeChild(this.overlay);
|
---|
480 | }
|
---|
481 | }
|
---|
482 | inputType() {
|
---|
483 | return this.unmasked ? 'text' : 'password';
|
---|
484 | }
|
---|
485 | getTranslation(option) {
|
---|
486 | return this.config.getTranslation(option);
|
---|
487 | }
|
---|
488 | ngOnDestroy() {
|
---|
489 | if (this.overlay) {
|
---|
490 | ZIndexUtils.clear(this.overlay);
|
---|
491 | this.overlay = null;
|
---|
492 | }
|
---|
493 | this.restoreAppend();
|
---|
494 | this.unbindResizeListener();
|
---|
495 | if (this.scrollHandler) {
|
---|
496 | this.scrollHandler.destroy();
|
---|
497 | this.scrollHandler = null;
|
---|
498 | }
|
---|
499 | if (this.translationSubscription) {
|
---|
500 | this.translationSubscription.unsubscribe();
|
---|
501 | }
|
---|
502 | }
|
---|
503 | }
|
---|
504 | Password.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Password, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }, { token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
---|
505 | Password.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Password, selector: "p-password", inputs: { disabled: "disabled", promptLabel: "promptLabel", mediumRegex: "mediumRegex", strongRegex: "strongRegex", weakLabel: "weakLabel", mediumLabel: "mediumLabel", strongLabel: "strongLabel", inputId: "inputId", feedback: "feedback", appendTo: "appendTo", toggleMask: "toggleMask", inputStyleClass: "inputStyleClass", styleClass: "styleClass", style: "style", inputStyle: "inputStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", placeholder: "placeholder" }, outputs: { onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.p-inputwrapper-filled": "filled()", "class.p-inputwrapper-focus": "focused" }, classAttribute: "p-element p-inputwrapper" }, providers: [Password_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
|
---|
506 | <div [ngClass]="containerClass()" [ngStyle]="style" [class]="styleClass">
|
---|
507 | <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onInputFocus($event)"
|
---|
508 | (blur)="onInputBlur($event)" (keyup)="onKeyUp($event)" />
|
---|
509 | <i *ngIf="toggleMask" [ngClass]="toggleIconClass()" (click)="onMaskToggle()"></i>
|
---|
510 | <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'" (click)="onOverlayClick($event)"
|
---|
511 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)" (@overlayAnimation.done)="onAnimationEnd($event)">
|
---|
512 | <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
---|
513 | <ng-container *ngIf="contentTemplate; else content">
|
---|
514 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
---|
515 | </ng-container>
|
---|
516 | <ng-template #content>
|
---|
517 | <div class="p-password-meter">
|
---|
518 | <div [ngClass]="strengthClass()" [ngStyle]="{'width': meter ? meter.width : ''}"></div>
|
---|
519 | </div>
|
---|
520 | <div className="p-password-info">{{infoText}}</div>
|
---|
521 | </ng-template>
|
---|
522 | <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
---|
523 | </div>
|
---|
524 | </div>
|
---|
525 | `, isInline: true, styles: [".p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0%;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.InputText, selector: "[pInputText]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
|
---|
526 | trigger('overlayAnimation', [
|
---|
527 | transition(':enter', [
|
---|
528 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
529 | animate('{{showTransitionParams}}')
|
---|
530 | ]),
|
---|
531 | transition(':leave', [
|
---|
532 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
533 | ])
|
---|
534 | ])
|
---|
535 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
---|
536 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Password, decorators: [{
|
---|
537 | type: Component,
|
---|
538 | args: [{ selector: 'p-password', template: `
|
---|
539 | <div [ngClass]="containerClass()" [ngStyle]="style" [class]="styleClass">
|
---|
540 | <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onInputFocus($event)"
|
---|
541 | (blur)="onInputBlur($event)" (keyup)="onKeyUp($event)" />
|
---|
542 | <i *ngIf="toggleMask" [ngClass]="toggleIconClass()" (click)="onMaskToggle()"></i>
|
---|
543 | <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'" (click)="onOverlayClick($event)"
|
---|
544 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)" (@overlayAnimation.done)="onAnimationEnd($event)">
|
---|
545 | <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
---|
546 | <ng-container *ngIf="contentTemplate; else content">
|
---|
547 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
---|
548 | </ng-container>
|
---|
549 | <ng-template #content>
|
---|
550 | <div class="p-password-meter">
|
---|
551 | <div [ngClass]="strengthClass()" [ngStyle]="{'width': meter ? meter.width : ''}"></div>
|
---|
552 | </div>
|
---|
553 | <div className="p-password-info">{{infoText}}</div>
|
---|
554 | </ng-template>
|
---|
555 | <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
---|
556 | </div>
|
---|
557 | </div>
|
---|
558 | `, animations: [
|
---|
559 | trigger('overlayAnimation', [
|
---|
560 | transition(':enter', [
|
---|
561 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
562 | animate('{{showTransitionParams}}')
|
---|
563 | ]),
|
---|
564 | transition(':leave', [
|
---|
565 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
566 | ])
|
---|
567 | ])
|
---|
568 | ], host: {
|
---|
569 | 'class': 'p-element p-inputwrapper',
|
---|
570 | '[class.p-inputwrapper-filled]': 'filled()',
|
---|
571 | '[class.p-inputwrapper-focus]': 'focused'
|
---|
572 | }, providers: [Password_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0%;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}\n"] }]
|
---|
573 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i0.ElementRef }, { type: i1.OverlayService }]; }, propDecorators: { disabled: [{
|
---|
574 | type: Input
|
---|
575 | }], promptLabel: [{
|
---|
576 | type: Input
|
---|
577 | }], mediumRegex: [{
|
---|
578 | type: Input
|
---|
579 | }], strongRegex: [{
|
---|
580 | type: Input
|
---|
581 | }], weakLabel: [{
|
---|
582 | type: Input
|
---|
583 | }], mediumLabel: [{
|
---|
584 | type: Input
|
---|
585 | }], strongLabel: [{
|
---|
586 | type: Input
|
---|
587 | }], inputId: [{
|
---|
588 | type: Input
|
---|
589 | }], feedback: [{
|
---|
590 | type: Input
|
---|
591 | }], appendTo: [{
|
---|
592 | type: Input
|
---|
593 | }], toggleMask: [{
|
---|
594 | type: Input
|
---|
595 | }], inputStyleClass: [{
|
---|
596 | type: Input
|
---|
597 | }], styleClass: [{
|
---|
598 | type: Input
|
---|
599 | }], style: [{
|
---|
600 | type: Input
|
---|
601 | }], inputStyle: [{
|
---|
602 | type: Input
|
---|
603 | }], showTransitionOptions: [{
|
---|
604 | type: Input
|
---|
605 | }], hideTransitionOptions: [{
|
---|
606 | type: Input
|
---|
607 | }], placeholder: [{
|
---|
608 | type: Input
|
---|
609 | }], input: [{
|
---|
610 | type: ViewChild,
|
---|
611 | args: ['input']
|
---|
612 | }], onFocus: [{
|
---|
613 | type: Output
|
---|
614 | }], onBlur: [{
|
---|
615 | type: Output
|
---|
616 | }], templates: [{
|
---|
617 | type: ContentChildren,
|
---|
618 | args: [PrimeTemplate]
|
---|
619 | }] } });
|
---|
620 | class PasswordModule {
|
---|
621 | }
|
---|
622 | PasswordModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
623 | PasswordModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordModule, declarations: [PasswordDirective, Password], imports: [CommonModule, InputTextModule], exports: [PasswordDirective, Password, SharedModule] });
|
---|
624 | PasswordModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordModule, imports: [[CommonModule, InputTextModule], SharedModule] });
|
---|
625 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PasswordModule, decorators: [{
|
---|
626 | type: NgModule,
|
---|
627 | args: [{
|
---|
628 | imports: [CommonModule, InputTextModule],
|
---|
629 | exports: [PasswordDirective, Password, SharedModule],
|
---|
630 | declarations: [PasswordDirective, Password]
|
---|
631 | }]
|
---|
632 | }] });
|
---|
633 |
|
---|
634 | /**
|
---|
635 | * Generated bundle index. Do not edit.
|
---|
636 | */
|
---|
637 |
|
---|
638 | export { Password, PasswordDirective, PasswordModule, Password_VALUE_ACCESSOR };
|
---|