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