@hashicorp/design-system-components/dist/components/hds/form/masked-input/base.js

Helios Design System Components

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { service } from '@ember/service';
import { modifier } from 'ember-modifier';
import { on } from '@ember/modifier';
import style from 'ember-style-modifier';
import { getElementId } from '../../../../utils/hds-get-element-id.js';
import HdsCopyButton from '../../copy/button/index.js';
import HdsFormTextInputBase from '../text-input/base.js';
import HdsFormTextareaBase from '../textarea/base.js';
import HdsFormVisibilityToggle from '../visibility-toggle/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
class HdsFormMaskedInputBase extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  static {
    g(this.prototype, "_isContentMasked", [tracked], function () {
      return true;
    });
  }
  #_isContentMasked = (i(this, "_isContentMasked"), void 0);
  static {
    g(this.prototype, "_isControlled", [tracked], function () {
      return this.args.isContentMasked !== undefined;
    });
  }
  #_isControlled = (i(this, "_isControlled"), void 0);
  get isContentMasked() {
    if (this._isControlled) {
      // if the state is controlled from outside, the argument overrides the internal state
      return this.args.isContentMasked ?? this._isContentMasked;
    } else {
      // if the state changes internally, the internal state overrides the argument
      return this._isContentMasked;
    }
  }
  set isContentMasked(value) {
    this._isContentMasked = value || false;
  }
  onClickToggleMasking = () => {
    this.isContentMasked = !this.isContentMasked;
    this._isControlled = false;
  };
  _manageState = modifier(() => {
    if (this.args.isContentMasked !== undefined) {
      this.isContentMasked = this.args.isContentMasked;
    }
    this._isControlled = true;
    return () => {};
  });
  get id() {
    return getElementId(this);
  }
  get visibilityToggleAriaLabel() {
    if (this.args.visibilityToggleAriaLabel) {
      return this.args.visibilityToggleAriaLabel;
    } else if (this.isContentMasked) {
      return this.hdsIntl.t('hds.components.form.masked-input.base.show-masked-content', {
        default: 'Show masked content'
      });
    } else {
      return this.hdsIntl.t('hds.components.form.masked-input.base.hide-masked-content', {
        default: 'Hide masked content'
      });
    }
  }
  get visibilityToggleAriaMessageText() {
    if (this.args.visibilityToggleAriaMessageText) {
      return this.args.visibilityToggleAriaMessageText;
    } else if (this.isContentMasked) {
      return this.hdsIntl.t('hds.components.form.masked-input.base.input-content-is-hidden', {
        default: 'Input content is hidden'
      });
    } else {
      return this.hdsIntl.t('hds.components.form.masked-input.base.input-content-is-visible', {
        default: 'Input content is visible'
      });
    }
  }
  get copyButtonText() {
    if (this.args.copyButtonText) {
      return this.args.copyButtonText;
    } else {
      return this.hdsIntl.t('hds.components.form.masked-input.base.copy-masked-content', {
        default: 'Copy masked content'
      });
    }
  }
  get classNames() {
    const classes = ['hds-form-masked-input'];
    if (this.isContentMasked) {
      classes.push(`hds-form-masked-input--is-masked`);
    } else {
      classes.push(`hds-form-masked-input--is-not-masked`);
    }
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("<div class={{this.classNames}} {{style width=@width}} {{this._manageState}}>\n  {{#if @isMultiline}}\n    <HdsFormTextareaBase class=\"hds-form-masked-input__control\" @value={{@value}} @isInvalid={{@isInvalid}} @height={{@height}} id={{this.id}} aria-describedby={{@ariaDescribedBy}} ...attributes />\n  {{else}}\n    <HdsFormTextInputBase class=\"hds-form-masked-input__control\" @value={{@value}} @isInvalid={{@isInvalid}} id={{this.id}} aria-describedby={{@ariaDescribedBy}} ...attributes />\n  {{/if}}\n  <HdsFormVisibilityToggle @isVisible={{this.isContentMasked}} @ariaLabel={{this.visibilityToggleAriaLabel}} @ariaMessageText={{this.visibilityToggleAriaMessageText}} aria-controls={{this.id}} class=\"hds-form-masked-input__toggle-button\" {{on \"click\" this.onClickToggleMasking}} />\n  {{#if @hasCopyButton}}\n    <HdsCopyButton class=\"hds-form-masked-input__copy-button\" @text={{this.copyButtonText}} @isIconOnly={{true}} @targetToCopy=\"#{{this.id}}\" />\n  {{/if}}\n</div>", {
      strictMode: true,
      scope: () => ({
        style,
        HdsFormTextareaBase,
        HdsFormTextInputBase,
        HdsFormVisibilityToggle,
        on,
        HdsCopyButton
      })
    }), this);
  }
}

export { HdsFormMaskedInputBase as default };
//# sourceMappingURL=base.js.map