1window.angular && (function(angular) {
2  'use strict';
3
4  /**
5   * Password visibility toggle
6   *
7   * This attribute directive will toggle an input type
8   * from password/text to show/hide the value of a password
9   * input field.
10   *
11   * To use:
12   * <input type="password" password-visibility-toggle />
13   */
14  angular.module('app.common.directives')
15      .directive('passwordVisibilityToggle', [
16        '$compile',
17        function($compile) {
18          return {
19            restrict: 'A',
20            link: function(scope, element) {
21              const instanceScope = scope.$new();
22              const buttonTemplate = `
23              <button type="button"
24                      aria-hidden="true"
25                      class="btn  btn-tertiary btn-password-toggle"
26                      ng-class="{
27                        'password-visible': visible,
28                        'password-hidden': !visible
29                      }"
30                ng-click="toggleField()">
31                <icon ng-if="!visible" file="icon-visibility-on.svg"></icon>
32                <icon ng-if="visible" file="icon-visibility-off.svg"></icon>
33              </button>`;
34
35              instanceScope.visible = false;
36              instanceScope.toggleField = () => {
37                instanceScope.visible = !instanceScope.visible;
38                const type = instanceScope.visible ? 'text' : 'password';
39                element.attr('type', type);
40              };
41              element.after($compile(buttonTemplate)(instanceScope));
42            }
43          };
44        }
45      ]);
46})(window.angular);
47