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