@bmat/angular/fesm2015/bmat-angular-forms-bm-password.js

import { EventEmitter, Component, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, Input, Output, ViewChild, ElementRef, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Password input with an icon to toggle view/hide
 */
class PasswordInputComponent {
    /**
     * @param {?} _cdr
     */
    constructor(_cdr) {
        this._cdr = _cdr;
        this.value = null;
        this.displayButton = true;
        this.hide = true;
        this.toggleHide = new EventEmitter();
        this.passwordChange = new EventEmitter();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
        this._cdr.markForCheck();
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this._onChangeCb = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this._onTouchCb = fn;
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onInputChange(e) {
        const { value } = (/** @type {?} */ (e.target));
        if (this._onChangeCb) {
            this._onChangeCb(value);
        }
        this.passwordChange.emit(value);
    }
    /**
     * @return {?}
     */
    onInputBlur() {
        if (this._onTouchCb) {
            this._onTouchCb();
        }
    }
    /**
     * @return {?}
     */
    focus() {
        if (this._input && this._input.nativeElement) {
            this._input.nativeElement.focus();
        }
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onToggleClick(e) {
        e.preventDefault();
        this.hide = !this.hide;
        this.toggleHide.emit(this.hide);
    }
    /**
     * @return {?}
     */
    getInputType() {
        return this.hide ? 'password' : 'text';
    }
}
PasswordInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-password',
                template: "<ng-template #shownPassword>\n  <svg\n    aria-hidden=\"true\"\n    data-prefix=\"far\"\n    data-icon=\"eye\"\n    class=\"bm-password__svg\"\n    role=\"img\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 576 512\"\n  >\n    <path\n      fill=\"currentColor\"\n      d=\"M569.354 231.631C512.97 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-102.556 0-192.091-54.701-240-136 44.157-74.933 123.677-127.27 216.162-135.007C273.958 131.078 280 144.83 280 160c0 30.928-25.072 56-56 56s-56-25.072-56-56l.001-.042C157.794 179.043 152 200.844 152 224c0 75.111 60.889 136 136 136s136-60.889 136-136c0-31.031-10.4-59.629-27.895-82.515C451.704 164.638 498.009 205.106 528 256c-47.908 81.299-137.444 136-240 136z\"\n    ></path>\n  </svg>\n</ng-template>\n<input\n  #input\n  class=\"bm-password__input bm-input\"\n  [disabled]=\"disabled\"\n  [value]=\"value\"\n  [type]=\"getInputType()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onInputBlur()\"\n/>\n<button\n  *ngIf=\"displayButton\"\n  class=\"bm-password__toggle\"\n  type=\"button\"\n  i18n-title\n  title=\"Toggle hidden password\"\n  (click)=\"onToggleClick($event)\"\n>\n  <i aria-hidden=\"true\">\n    <svg\n      *ngIf=\"hide; else shownPassword\"\n      aria-hidden=\"true\"\n      data-prefix=\"far\"\n      data-icon=\"eye-slash\"\n      class=\"bm-password__svg\"\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 576 512\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M272.702 359.139c-80.483-9.011-136.212-86.886-116.93-167.042l116.93 167.042zM288 392c-102.556 0-192.092-54.701-240-136 21.755-36.917 52.1-68.342 88.344-91.658l-27.541-39.343C67.001 152.234 31.921 188.741 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.004 376.006 168.14 440 288 440a332.89 332.89 0 0 0 39.648-2.367l-32.021-45.744A284.16 284.16 0 0 1 288 392zm281.354-111.631c-33.232 56.394-83.421 101.742-143.554 129.492l48.116 68.74c3.801 5.429 2.48 12.912-2.949 16.712L450.23 509.83c-5.429 3.801-12.912 2.48-16.712-2.949L102.084 33.399c-3.801-5.429-2.48-12.912 2.949-16.712L125.77 2.17c5.429-3.801 12.912-2.48 16.712 2.949l55.526 79.325C226.612 76.343 256.808 72 288 72c119.86 0 224.996 63.994 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM528 256c-44.157-74.933-123.677-127.27-216.162-135.007C302.042 131.078 296 144.83 296 160c0 30.928 25.072 56 56 56s56-25.072 56-56l-.001-.042c30.632 57.277 16.739 130.26-36.928 171.719l26.695 38.135C452.626 346.551 498.308 306.386 528 256z\"\n      ></path>\n    </svg>\n  </i>\n</button>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        // tslint:disable-next-line:no-forward-ref
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => PasswordInputComponent)),
                        multi: true,
                    },
                ],
                styles: [":host{display:inline-block;position:relative}.bm-password__input{box-sizing:border-box;padding-right:2em;width:100%}.bm-password__toggle{background:0 0;border:0;display:block;position:absolute;right:.25em;top:calc(50% - .7em)}.bm-password__svg{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1.125em}"]
            }] }
];
/** @nocollapse */
PasswordInputComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
PasswordInputComponent.propDecorators = {
    value: [{ type: Input }],
    disabled: [{ type: Input }],
    displayButton: [{ type: Input }],
    hide: [{ type: Input }],
    toggleHide: [{ type: Output }],
    passwordChange: [{ type: Output }],
    _input: [{ type: ViewChild, args: ['input', { read: ElementRef, static: true },] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PasswordInputComponentModule {
}
PasswordInputComponentModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                declarations: [PasswordInputComponent],
                exports: [PasswordInputComponent],
            },] }
];

export { PasswordInputComponent, PasswordInputComponentModule };
//# sourceMappingURL=bmat-angular-forms-bm-password.js.map