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';
21import i18n from '@/i18n';
22
23export default {
24  name: 'InputPasswordToggle',
25  components: { IconView, IconViewOff },
26  data() {
27    return {
28      isVisible: false,
29      togglePasswordLabel: i18n.global.t('global.ariaLabel.showPassword'),
30    };
31  },
32  methods: {
33    toggleVisibility() {
34      const firstChild = this.$children[0];
35      const inputEl = firstChild ? firstChild.$el : null;
36
37      this.isVisible = !this.isVisible;
38
39      if (inputEl && inputEl.nodeName === 'INPUT') {
40        inputEl.type = this.isVisible ? 'text' : 'password';
41      }
42
43      this.isVisible
44        ? (this.togglePasswordLabel = i18n.global.t(
45            'global.ariaLabel.hidePassword',
46          ))
47        : (this.togglePasswordLabel = i18n.global.t(
48            'global.ariaLabel.showPassword',
49          ));
50    },
51  },
52};
53</script>
54
55<style lang="scss" scoped>
56@import '@/assets/styles/bmc/helpers/_index.scss';
57@import '@/assets/styles/bootstrap/_helpers.scss';
58
59.input-password-toggle-container {
60  position: relative;
61}
62</style>
63