@carbon/web-components 2.0.0-alpha.0 → 2.0.0-beta.1

package/es/components/text-input/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/text-input/text-input.ts"],"names":[],"mappings":"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","file":"text-input.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport View16 from '@carbon/icons/lib/view/16';\nimport ViewOff16 from '@carbon/icons/lib/view--off/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';\nimport styles from './text-input.scss';\n\nexport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };\n\n/**\n * Text Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-text-input\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-text-input`)\nclass CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  /**\n   * The internal value.\n   */\n  protected _value = '';\n\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).value;\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the input to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * Controls the disabled state of the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify whether to display the character counter\n   */\n  @property({ type: Boolean, attribute: 'enable-counter', reflect: true })\n  enableCounter = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify if the currently value is invalid.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Max character count allowed for input. This is needed in order for enableCounter to display\n   */\n  @property({ type: Number, attribute: 'max-count', reflect: true })\n  maxCount;\n\n  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Specify whether you want the underlying label to be visually hidden\n   */\n  @property({ attribute: 'hide-label', type: Boolean, reflect: true })\n  hideLabel = false;\n\n  /**\n   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\n\n  /**\n   * Name for the input in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the input against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the input has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Specify if the component should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * \"Hide password\" tooltip text on password visibility toggle\n   */\n  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\n   */\n  @property({\n    type: Boolean,\n    attribute: 'show-password-visibility-toggle',\n    reflect: true,\n  })\n  showPasswordVisibilityToggle = false;\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  /**\n   * true to use the inline version.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Specify the alignment of the tooltip to the icon-only button.\n   * Can be one of: start, center, or end.\n   */\n  @property()\n  tooltipAlignment = FLOATING_MENU_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the direction of the tooltip for icon-only buttons.\n   * Can be either top, right, bottom, or left.\n   */\n  @property()\n  tooltipDirection = FLOATING_MENU_DIRECTION.BOTTOM;\n\n  /**\n   * The type of the input. Can be one of the types listed in the INPUT_TYPE enum\n   */\n  @property({ reflect: true })\n  type = INPUT_TYPE.TEXT;\n\n  /**\n   * The validity message. If present and non-empty, this input shows the UI of its invalid state.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the input.\n   */\n  @property({ reflect: true })\n  get value() {\n    // FIXME: Figure out how to deal with TS2611\n    // once we have the input we can directly query for the value\n    if (this._input) {\n      return this._input.value;\n    }\n    // but before then _value will work fine\n    return this._value;\n  }\n\n  set value(value) {\n    const oldValue = this._value;\n    this._value = value;\n    // make sure that lit-element updates the right properties\n    this.requestUpdate('value', oldValue);\n    // we set the value directly on the input (when available)\n    // so that programatic manipulation updates the UI correctly\n    if (this._input) {\n      this._input.value = value;\n    }\n  }\n\n  /**\n   * Handles password visibility toggle button click\n   */\n  private handleTogglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const {\n      disabled,\n      enableCounter,\n      helperText,\n      hideLabel,\n      inline,\n      invalid,\n      invalidText,\n      label,\n      maxCount,\n      readonly,\n      required,\n      size,\n      type,\n      warn,\n      warnText,\n      value,\n      _handleInput: handleInput,\n    } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const warnIcon = WarningAltFilled16({\n      class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,\n    });\n\n    let normalizedProps = {\n      disabled: !readonly && disabled,\n      invalid: !readonly && invalid,\n      warn: !readonly && !invalid && warn,\n      'slot-name': '',\n      'slot-text': '',\n      icon: null,\n    };\n\n    if (normalizedProps.invalid) {\n      normalizedProps.icon = invalidIcon;\n      normalizedProps['slot-name'] = 'invalid-text';\n      normalizedProps['slot-text'] = invalidText;\n    } else if (normalizedProps.warn) {\n      normalizedProps.icon = warnIcon;\n      normalizedProps['slot-name'] = 'warn-text';\n      normalizedProps['slot-text'] = warnText;\n    }\n\n    const counterClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--text-input__label-counter`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n\n    const inputWrapperClasses = classMap({\n      [`${prefix}--form-item`]: true,\n      [`${prefix}--text-input-wrapper`]: true,\n      [`${prefix}--text-input-wrapper--inline`]: inline,\n      [`${prefix}--text-input-wrapper--readonly`]: readonly,\n      [`${prefix}--text-input-wrapper--inline--invalid`]:\n        inline && normalizedProps.invalid,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,\n      [`${prefix}--text-input--warning`]: normalizedProps.warn,\n      [`${prefix}--text-input--${size}`]: size,\n      [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD,\n    });\n\n    const fieldOuterWrapperClasses = classMap({\n      [`${prefix}--text-input__field-outer-wrapper`]: true,\n      [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,\n    });\n\n    const fieldWrapperClasses = classMap({\n      [`${prefix}--text-input__field-wrapper`]: true,\n      [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: hideLabel,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })\n      : View16({ class: `${prefix}--icon-visibility-on` });\n\n    const passwordVisibilityToggleClasses = classMap({\n      [`${prefix}--text-input--password__visibility__toggle`]: true,\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--icon-only`]: true,\n      [`${prefix}--tooltip__trigger`]: true,\n      [`${prefix}--tooltip--a11y`]: true,\n      [`${prefix}--btn--disabled`]: normalizedProps.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${normalizedProps.disabled}\"\n        @click=\"${this.handleTogglePasswordVisibility}\">\n        ${!normalizedProps.disabled ? passwordButtonLabel : null}\n        ${passwordVisibilityIcon}\n      </button>\n    `;\n\n    const textCount = value?.length;\n\n    const counter =\n      enableCounter && maxCount\n        ? html` <label class=\"${counterClasses}\">\n            <slot name=\"label-text\">${textCount}/${maxCount}</slot>\n          </label>`\n        : null;\n\n    const labelText =\n      label && !hideLabel\n        ? html`<label class=\"${labelClasses}\"> ${label} </label>`\n        : null;\n\n    const labelWrapper = html`<div class=\"${prefix}--text-input__label-wrapper\">\n      ${labelText} ${counter}\n    </div>`;\n\n    const helper = helperText\n      ? html`<div\n          class=\"${helperTextClasses}\"\n          id=\"helper-text\"\n          ?hidden=\"${normalizedProps.invalid || normalizedProps.warn}\">\n          <slot name=\"helper-text\"> ${helperText} </slot>\n        </div>`\n      : null;\n\n    return html`\n      <div class=\"${inputWrapperClasses}\">\n        ${!inline\n          ? labelWrapper\n          : html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n              ${labelWrapper} ${helper}\n            </div>`}\n        <div class=\"${fieldOuterWrapperClasses}\">\n          <div class=\"${fieldWrapperClasses}\" ?data-invalid=\"${invalid}\">\n            ${normalizedProps.icon}\n            <input\n              ?autocomplete=\"${this.autocomplete}\"\n              ?autofocus=\"${this.autofocus}\"\n              class=\"${inputClasses}\"\n              ?data-invalid=\"${invalid}\"\n              ?disabled=\"${disabled}\"\n              aria-describedby=\"helper-text\"\n              id=\"input\"\n              name=\"${ifNonEmpty(this.name)}\"\n              pattern=\"${ifNonEmpty(this.pattern)}\"\n              placeholder=\"${ifNonEmpty(this.placeholder)}\"\n              ?readonly=\"${readonly}\"\n              ?required=\"${required}\"\n              type=\"${ifNonEmpty(type)}\"\n              .value=\"${this._value}\"\n              maxlength=\"${ifNonEmpty(maxCount)}\"\n              @input=\"${handleInput}\" />\n            ${this.showPasswordVisibilityToggle &&\n            (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT)\n              ? passwordVisibilityButton()\n              : null}\n          </div>\n          ${!inline ? helper : null}\n          <div\n            class=\"${prefix}--form-requirement\"\n            ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n            <slot name=\"${normalizedProps['slot-name']}\">\n              ${normalizedProps['slot-text']}\n            </slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTextInput;\n"]}

package/es/components/text-input/text-input.js

@@ -0,0 +1,657 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8;
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../globals/settings';
+import View16 from "../../icons/view/16";
+import ViewOff16 from "../../icons/view--off/16";
+import WarningFilled16 from "../../icons/warning--filled/16";
+import WarningAltFilled16 from "../../icons/warning--alt--filled/16";
+import { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
+import FormMixin from '../../globals/mixins/form';
+import ValidityMixin from '../../globals/mixins/validity';
+import { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';
+import styles from "././text-input.css.js";
+export { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };
+
+/**
+ * Text Input element. Supports all the usual attributes for textual input types
+ *
+ * @element cds-text-input
+ * @slot helper-text - The helper text.
+ * @slot label-text - The label text.
+ * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
+ */
+let CDSTextInput = _decorate([customElement(`${prefix}-text-input`)], function (_initialize, _ValidityMixin) {
+  class CDSTextInput extends _ValidityMixin {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: CDSTextInput,
+    d: [{
+      kind: "field",
+      decorators: [query('input')],
+      key: "_input",
+      value: void 0
+    }, {
+      kind: "field",
+      key: "_value",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "method",
+      key: "_handleInput",
+      value:
+      /**
+       * The underlying input element
+       */
+
+      /**
+       * The internal value.
+       */
+
+      /**
+       * Handles `oninput` event on the `<input>`.
+       *
+       * @param event The event.
+       */
+      function _handleInput({
+        target
+      }) {
+        this.value = target.value;
+      }
+    }, {
+      kind: "method",
+      key: "_handleFormdata",
+      value: function _handleFormdata(event) {
+        const {
+          formData
+        } = event; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+        const {
+          disabled,
+          name,
+          value
+        } = this;
+        if (!disabled) {
+          formData.append(name, value);
+        }
+      }
+
+      /**
+       * May be any of the standard HTML autocomplete options
+       */
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "autocomplete",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "autofocus",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "disabled",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'enable-counter',
+        reflect: true
+      })],
+      key: "enableCounter",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'helper-text'
+      })],
+      key: "helperText",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "invalid",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number,
+        attribute: 'max-count',
+        reflect: true
+      })],
+      key: "maxCount",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "warn",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'warn-text'
+      })],
+      key: "warnText",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'invalid-text'
+      })],
+      key: "invalidText",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'hide-label',
+        type: Boolean,
+        reflect: true
+      })],
+      key: "hideLabel",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'label'
+      })],
+      key: "label",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "name",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "pattern",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "placeholder",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "readonly",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "required",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'required-validity-message'
+      })],
+      key: "requiredValidityMessage",
+      value() {
+        return 'Please fill out this field.';
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "hidePasswordLabel",
+      value() {
+        return 'Hide password';
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "showPasswordLabel",
+      value() {
+        return 'Show password';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'show-password-visibility-toggle',
+        reflect: true
+      })],
+      key: "showPasswordVisibilityToggle",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "size",
+      value() {
+        return INPUT_SIZE.MEDIUM;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "inline",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "tooltipAlignment",
+      value() {
+        return FLOATING_MENU_ALIGNMENT.CENTER;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "tooltipDirection",
+      value() {
+        return FLOATING_MENU_DIRECTION.BOTTOM;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "type",
+      value() {
+        return INPUT_TYPE.TEXT;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'validity-message'
+      })],
+      key: "validityMessage",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "get",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "value",
+      value:
+      /**
+       * Sets the input to be focussed automatically on page load. Defaults to false
+       */
+      /**
+       * Controls the disabled state of the input
+       */
+      /**
+       * Specify whether to display the character counter
+       */
+      /**
+       * The helper text.
+       */
+      /**
+       * Specify if the currently value is invalid.
+       */
+      /**
+       * Max character count allowed for input. This is needed in order for enableCounter to display
+       */
+      /**
+       * Specify whether the control is currently in warning state
+       */
+      /**
+       * Provide the text that is displayed when the control is in warning state
+       */
+      /**
+       * Message which is displayed if the value is invalid.
+       */
+      /**
+       * Specify whether you want the underlying label to be visually hidden
+       */
+      /**
+       * Generic label that will be used as the textual representation of what this field is for
+       */
+      /**
+       * Name for the input in the `FormData`
+       */
+      /**
+       * Pattern to validate the input against for HTML validity checking
+       */
+      /**
+       * Value to display when the input has an empty `value`
+       */
+      /**
+       * Specify if the component should be read-only
+       */
+      /**
+       * Boolean property to set the required status
+       */
+      /**
+       * The special validity message for `required`.
+       */
+      /**
+       * "Hide password" tooltip text on password visibility toggle
+       */
+      /**
+       * "Show password" tooltip text on password visibility toggle
+       */
+      /**
+       * Boolean property to render password visibility toggle
+       */
+      /**
+       * The input box size.
+       */
+      /**
+       * true to use the inline version.
+       */
+      /**
+       * Specify the alignment of the tooltip to the icon-only button.
+       * Can be one of: start, center, or end.
+       */
+      /**
+       * Specify the direction of the tooltip for icon-only buttons.
+       * Can be either top, right, bottom, or left.
+       */
+      /**
+       * The type of the input. Can be one of the types listed in the INPUT_TYPE enum
+       */
+      /**
+       * The validity message. If present and non-empty, this input shows the UI of its invalid state.
+       */
+      /**
+       * The value of the input.
+       */
+      function value() {
+        // FIXME: Figure out how to deal with TS2611
+        // once we have the input we can directly query for the value
+        if (this._input) {
+          return this._input.value;
+        }
+        // but before then _value will work fine
+        return this._value;
+      }
+    }, {
+      kind: "set",
+      key: "value",
+      value: function value(_value) {
+        const oldValue = this._value;
+        this._value = _value;
+        // make sure that lit-element updates the right properties
+        this.requestUpdate('value', oldValue);
+        // we set the value directly on the input (when available)
+        // so that programatic manipulation updates the UI correctly
+        if (this._input) {
+          this._input.value = _value;
+        }
+      }
+
+      /**
+       * Handles password visibility toggle button click
+       */
+    }, {
+      kind: "method",
+      key: "handleTogglePasswordVisibility",
+      value: function handleTogglePasswordVisibility() {
+        this.type = this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        const {
+          disabled,
+          enableCounter,
+          helperText,
+          hideLabel,
+          inline,
+          invalid,
+          invalidText,
+          label,
+          maxCount,
+          readonly,
+          required,
+          size,
+          type,
+          warn,
+          warnText,
+          value,
+          _handleInput: handleInput
+        } = this;
+        const invalidIcon = WarningFilled16({
+          class: `${prefix}--text-input__invalid-icon`
+        });
+        const warnIcon = WarningAltFilled16({
+          class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`
+        });
+        let normalizedProps = {
+          disabled: !readonly && disabled,
+          invalid: !readonly && invalid,
+          warn: !readonly && !invalid && warn,
+          'slot-name': '',
+          'slot-text': '',
+          icon: null
+        };
+        if (normalizedProps.invalid) {
+          normalizedProps.icon = invalidIcon;
+          normalizedProps['slot-name'] = 'invalid-text';
+          normalizedProps['slot-text'] = invalidText;
+        } else if (normalizedProps.warn) {
+          normalizedProps.icon = warnIcon;
+          normalizedProps['slot-name'] = 'warn-text';
+          normalizedProps['slot-text'] = warnText;
+        }
+        const counterClasses = classMap({
+          [`${prefix}--label`]: true,
+          [`${prefix}--text-input__label-counter`]: true,
+          [`${prefix}--label--disabled`]: disabled
+        });
+        const inputWrapperClasses = classMap({
+          [`${prefix}--form-item`]: true,
+          [`${prefix}--text-input-wrapper`]: true,
+          [`${prefix}--text-input-wrapper--inline`]: inline,
+          [`${prefix}--text-input-wrapper--readonly`]: readonly,
+          [`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
+        });
+        const inputClasses = classMap({
+          [`${prefix}--text-input`]: true,
+          [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+          [`${prefix}--text-input--warning`]: normalizedProps.warn,
+          [`${prefix}--text-input--${size}`]: size,
+          [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD
+        });
+        const fieldOuterWrapperClasses = classMap({
+          [`${prefix}--text-input__field-outer-wrapper`]: true,
+          [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+        });
+        const fieldWrapperClasses = classMap({
+          [`${prefix}--text-input__field-wrapper`]: true,
+          [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+        });
+        const labelClasses = classMap({
+          [`${prefix}--label`]: true,
+          [`${prefix}--visually-hidden`]: hideLabel,
+          [`${prefix}--label--disabled`]: normalizedProps.disabled
+        });
+        const helperTextClasses = classMap({
+          [`${prefix}--form__helper-text`]: true,
+          [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
+        });
+        const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;
+        const passwordVisibilityIcon = passwordIsVisible ? ViewOff16({
+          class: `${prefix}--icon-visibility-off`
+        }) : View16({
+          class: `${prefix}--icon-visibility-on`
+        });
+        const passwordVisibilityToggleClasses = classMap({
+          [`${prefix}--text-input--password__visibility__toggle`]: true,
+          [`${prefix}--btn`]: true,
+          [`${prefix}--btn--icon-only`]: true,
+          [`${prefix}--tooltip__trigger`]: true,
+          [`${prefix}--tooltip--a11y`]: true,
+          [`${prefix}--btn--disabled`]: normalizedProps.disabled,
+          [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
+          [`${prefix}--tooltip--align-${this.tooltipAlignment}`]: this.tooltipAlignment
+        });
+        const passwordButtonLabel = html(_t || (_t = _`
+      <span class="${0}--assistive-text">
+        ${0}
+      </span>
+    `), prefix, passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel);
+        const passwordVisibilityButton = () => html(_t2 || (_t2 = _`
+      <button
+        type="button"
+        class="${0}"
+        ?disabled="${0}"
+        @click="${0}">
+        ${0}
+        ${0}
+      </button>
+    `), passwordVisibilityToggleClasses, normalizedProps.disabled, this.handleTogglePasswordVisibility, !normalizedProps.disabled ? passwordButtonLabel : null, passwordVisibilityIcon);
+        const textCount = value === null || value === void 0 ? void 0 : value.length;
+        const counter = enableCounter && maxCount ? html(_t3 || (_t3 = _` <label class="${0}">
+            <slot name="label-text">${0}/${0}</slot>
+          </label>`), counterClasses, textCount, maxCount) : null;
+        const labelText = label && !hideLabel ? html(_t4 || (_t4 = _`<label class="${0}"> ${0} </label>`), labelClasses, label) : null;
+        const labelWrapper = html(_t5 || (_t5 = _`<div class="${0}--text-input__label-wrapper">
+      ${0} ${0}
+    </div>`), prefix, labelText, counter);
+        const helper = helperText ? html(_t6 || (_t6 = _`<div
+          class="${0}"
+          id="helper-text"
+          ?hidden="${0}">
+          <slot name="helper-text"> ${0} </slot>
+        </div>`), helperTextClasses, normalizedProps.invalid || normalizedProps.warn, helperText) : null;
+        return html(_t7 || (_t7 = _`
+      <div class="${0}">
+        ${0}
+        <div class="${0}">
+          <div class="${0}" ?data-invalid="${0}">
+            ${0}
+            <input
+              ?autocomplete="${0}"
+              ?autofocus="${0}"
+              class="${0}"
+              ?data-invalid="${0}"
+              ?disabled="${0}"
+              aria-describedby="helper-text"
+              id="input"
+              name="${0}"
+              pattern="${0}"
+              placeholder="${0}"
+              ?readonly="${0}"
+              ?required="${0}"
+              type="${0}"
+              .value="${0}"
+              maxlength="${0}"
+              @input="${0}" />
+            ${0}
+          </div>
+          ${0}
+          <div
+            class="${0}--form-requirement"
+            ?hidden="${0}">
+            <slot name="${0}">
+              ${0}
+            </slot>
+          </div>
+        </div>
+      </div>
+    `), inputWrapperClasses, !inline ? labelWrapper : html(_t8 || (_t8 = _`<div class="${0}--text-input__label-helper-wrapper">
+              ${0} ${0}
+            </div>`), prefix, labelWrapper, helper), fieldOuterWrapperClasses, fieldWrapperClasses, invalid, normalizedProps.icon, this.autocomplete, this.autofocus, inputClasses, invalid, disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), readonly, required, ifNonEmpty(type), this._value, ifNonEmpty(maxCount), handleInput, this.showPasswordVisibilityToggle && (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT) ? passwordVisibilityButton() : null, !inline ? helper : null, prefix, !normalizedProps.invalid && !normalizedProps.warn, normalizedProps['slot-name'], normalizedProps['slot-text']);
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "shadowRootOptions",
+      value() {
+        return _objectSpread(_objectSpread({}, LitElement.shadowRootOptions), {}, {
+          delegatesFocus: true
+        });
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, ValidityMixin(FormMixin(LitElement)));
+export default CDSTextInput;
+//# sourceMappingURL=text-input.js.map