1<template>
2  <div class="input-password-toggle-container">
3    <slot></slot>
4    <b-button
5      :aria-label="$t('global.ariaLabel.showPassword')"
6      variant="link"
7      :class="{ isVisible: isVisible }"
8      @click="toggleVisibility"
9    >
10      <icon-view-off v-if="isVisible" aria-hidden="true" />
11      <icon-view v-else aria-hidden="true" />
12    </b-button>
13  </div>
14</template>
15
16<script>
17import IconView from '@carbon/icons-vue/es/view/20';
18import IconViewOff from '@carbon/icons-vue/es/view--off/20';
19
20export default {
21  name: 'InputPasswordToggle',
22  components: { IconView, IconViewOff },
23  data() {
24    return {
25      isVisible: false
26    };
27  },
28  methods: {
29    toggleVisibility() {
30      const firstChild = this.$children[0];
31      const inputEl = firstChild ? firstChild.$el : null;
32
33      this.isVisible = !this.isVisible;
34
35      if (inputEl.nodeName === 'INPUT') {
36        inputEl.type = this.isVisible ? 'text' : 'password';
37      }
38    }
39  }
40};
41</script>
42
43<style lang="scss" scoped>
44.input-password-toggle-container {
45  position: relative;
46}
47
48.btn {
49  position: absolute;
50  right: 0;
51  top: 0;
52  padding: 0.4rem 1rem;
53  svg {
54    margin-left: 0;
55    vertical-align: sub;
56  }
57}
58</style>
59