@hashicorp/design-system-components/dist/components/hds/form/text-input/field.js

Helios Design System Components

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import { hash } from '@ember/helper';
import style from 'ember-style-modifier';
import HdsFormField from '../field/index.js';
import HdsFormTextInputBase from './base.js';
import HdsFormVisibilityToggle from '../visibility-toggle/index.js';
import '../character-count/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 HdsFormTextInputField extends Component {
  static {
    g(this.prototype, "_isPasswordMasked", [tracked], function () {
      return true;
    });
  }
  #_isPasswordMasked = (i(this, "_isPasswordMasked"), void 0);
  static {
    g(this.prototype, "type", [tracked]);
  }
  #type = (i(this, "type"), void 0);
  constructor(owner, args) {
    super(owner, args);
    this.type = this.args.type ?? 'text';
  }
  get hasVisibilityToggle() {
    return this.args.hasVisibilityToggle ?? true;
  }
  get showVisibilityToggle() {
    return this.args.type === 'password' && this.hasVisibilityToggle;
  }
  get visibilityToggleAriaLabel() {
    if (this.args.visibilityToggleAriaLabel) {
      return this.args.visibilityToggleAriaLabel;
    } else if (this._isPasswordMasked) {
      return 'Show password';
    } else {
      return 'Hide password';
    }
  }
  get visibilityToggleAriaMessageText() {
    if (this.args.visibilityToggleAriaMessageText) {
      return this.args.visibilityToggleAriaMessageText;
    } else if (this._isPasswordMasked) {
      return 'Password is hidden';
    } else {
      return 'Password is visible';
    }
  }
  onClickTogglePasswordReadability = () => {
    this._isPasswordMasked = !this._isPasswordMasked;
    this.type = this._isPasswordMasked ? 'password' : 'text';
  };
  static {
    setComponentTemplate(precompileTemplate("<HdsFormField @layout=\"vertical\" @extraAriaDescribedBy={{@extraAriaDescribedBy}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} @id={{@id}} as |F|>\n  {{!-- Notice: the order of the elements is not relevant here, because is controlled at \"HdsFormField\" component level --}}\n  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}\n  {{#if F.CharacterCount}}\n    {{yield (hash CharacterCount=(component F.CharacterCount value=@value))}}\n  {{/if}}\n  <F.Control>\n    <div class=\"hds-form-text-input__wrapper\" {{style width=@width}}>\n      <HdsFormTextInputBase @type={{this.type}} @value={{@value}} @isInvalid={{@isInvalid}} @isLoading={{@isLoading}} @hasVisibilityToggle={{this.showVisibilityToggle}} required={{@isRequired}} ...attributes id={{F.id}} aria-describedby={{F.ariaDescribedBy}} />\n      {{#if this.showVisibilityToggle}}\n        <HdsFormVisibilityToggle @isVisible={{this._isPasswordMasked}} @ariaLabel={{this.visibilityToggleAriaLabel}} @ariaMessageText={{this.visibilityToggleAriaMessageText}} aria-controls={{F.id}} class=\"hds-form-text-input__visibility-toggle\" {{on \"click\" this.onClickTogglePasswordReadability}} />\n      {{/if}}\n    </div>\n  </F.Control>\n</HdsFormField>", {
      strictMode: true,
      scope: () => ({
        HdsFormField,
        hash,
        style,
        HdsFormTextInputBase,
        HdsFormVisibilityToggle,
        on
      })
    }), this);
  }
}

export { HdsFormTextInputField as default };
//# sourceMappingURL=field.js.map