{"version":3,"file":"PdsFormElement.chunk-Bk2LVulk.js","sources":["../../../../../packages/web-components/src/lib/components/pds-form-element/PdsFormElement.ts"],"sourcesContent":["import '@principal/design-system-icons-web/alert-circle';\nimport { html, isServer, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport 'element-internals-polyfill';\nimport { required } from '../../decorators/required';\nimport { PdsElement } from '../PdsElement';\n\n/**\n * The base class for form elements\n * All field properties are reflected due to this bug: https://github.com/lit/lit/issues/3912\n * @slot label-after Optional: Use this slot if markup should be inserted after the label text, e.g. a toolip.\n */\nexport abstract class PdsFormElement extends PdsElement {\n  // This adds an index signature for TypeScript so we can\n  // index into the Lit element object with a string key\n  // It allows us to do this[propertyName] checks\n  [key: string]: any;\n\n  /**\n   * @internal\n   *\n   * Tells the browser to treat the element like a form field\n   * Ties the element to the HTML form it is in\n   *\n   */\n  static formAssociated = true;\n\n  /**\n   * @internal\n   *\n   * An instance of element internals\n   * Contains properties and methods that allows the element\n   * to participate fully in the HTML form it's in\n   */\n  internals: Omit<\n    ElementInternals,\n    'ariaBrailleLabel' | 'ariaBrailleRoleDescription'\n  >;\n\n  /**\n   * @internal\n   *\n   * Stores the value for the `value` getter and setter\n   */\n  internalValue: string;\n\n  /**\n   * @internal\n   *\n   * Stores the intial value of the field so that it can be reset\n   */\n  defaultValue: string;\n\n  /**\n   * @internal\n   *\n   * Stores the value for the `errorMessage` getter and setter\n   */\n  internalErrorMessage: string;\n\n  /**\n   * @internal\n   *\n   * The underlying HTML form field\n   * This should be implemented with `@query`\n   * in the implementing class.\n   */\n  abstract field: HTMLElement;\n\n  constructor() {\n    super();\n\n    /**\n     * @internal\n     *\n     * Call the attachInternals() method on the element\n     * to get access to extra methods and properties\n     * for form fields, like setFormValue() and setValidity().\n     */\n    this.internals = this.attachInternals();\n  }\n\n  protected override firstUpdated() {\n    super.firstUpdated();\n    this.setInternalValidity();\n    this.randomId = this.getRandomId();\n\n    this.defaultValue = this.value || this.getAttribute('value') || '';\n\n    // TODOv4: [ValidationTimeout] - Check to see if this setTimeout is still needed\n    // This validation logic needs to happen late because it messes\n    // with the render content and leads to hydration issues (and issues with child elements)\n    // This may be something we can remove if we can find a better way to handle this\n    // The validation is only for development - so end users should never see the render content change\n    setTimeout(() => {\n      if (!this.verifyLabel()) {\n        this.hasLabel = false;\n      }\n    }, 1000);\n  }\n\n  protected customSetterSetAttribute(\n    attributeName: string,\n    newValue: boolean | string | number,\n  ): void {\n    if (\n      newValue &&\n      newValue !== 'undefined' &&\n      // Don't run this in tests\n      (!isServer || process.env.NODE_ENV !== 'test') &&\n      newValue.toString() !== this[attributeName]?.toString()\n    ) {\n      this.setAttribute(attributeName, newValue.toString());\n    } else {\n      this.removeAttribute(attributeName);\n    }\n  }\n\n  set value(newValue) {\n    const oldValue = this.value;\n\n    this.customSetterSetAttribute('value', newValue);\n\n    // store the value so it can be retrieved by the getter\n    this.internalValue = newValue;\n\n    // sets the current value of the control\n    this.internals.setFormValue(newValue);\n\n    // update the actual field\n    this.updateField();\n\n    // rerender the component\n    this.requestUpdate('value', oldValue);\n  }\n\n  /**\n   * The value of the form field.\n   */\n  @property()\n  get value() {\n    return this.internalValue;\n  }\n\n  /**\n   * The label of the form field.\n   * Must be plain text.\n   * If label requires additional markup (e.g., superscript),\n   * then use the label slot instead.\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Makes the label screen-reader-only and visually hidden.\n   * Hiding the label is **strongly discouraged** and should only\n   * be used when descriptive text exists elsewhere on the page.\n   */\n  @property({ type: Boolean })\n  hideLabel: boolean = false;\n\n  /**\n   * The name of the form field. This is a **required** property.\n   */\n  @required\n  @property({ reflect: true })\n  name: string;\n\n  /**\n   * The id of the form field\n   *\n   * Overrides the auto-generated id\n   */\n  @property()\n  fieldId?: string;\n\n  /**\n   *\n   * Explains why the form element is disabled\n   */\n  @property()\n  disabledContext?: string;\n\n  set required(newRequired: boolean) {\n    const oldRequiredValue = this.required;\n\n    this.customSetterSetAttribute('required', newRequired);\n\n    // ariaRequired needs to be a string\n    this.internals.ariaRequired = newRequired ? 'true' : 'false';\n\n    // needed to rerender the component\n    this.requestUpdate('required', oldRequiredValue);\n  }\n\n  /**\n   * Indicates that the form field is required.\n   */\n  @property({ type: Boolean })\n  get required(): boolean {\n    // default to false\n    if (typeof this.internals.ariaRequired === 'undefined') {\n      return false;\n    }\n\n    return this.internals.ariaRequired === 'true';\n  }\n\n  set disabled(newDisabled: boolean) {\n    const oldDisabledValue = this.disabled;\n\n    this.customSetterSetAttribute('disabled', newDisabled);\n\n    // ariaDisabled needs to be a string\n    this.internals.ariaDisabled = newDisabled ? 'true' : 'false';\n\n    // needed to rerender the component\n    this.requestUpdate('disabled', oldDisabledValue);\n  }\n\n  /**\n   * Indicates that the form field is disabled.\n   */\n  @property({ type: Boolean })\n  get disabled(): boolean {\n    // default to false\n    if (typeof this.internals.ariaDisabled === 'undefined') {\n      return false;\n    }\n    return this.internals.ariaDisabled === 'true';\n  }\n\n  set readonly(newReadonly: boolean) {\n    const oldReadonlyValue = this.readonly;\n\n    this.customSetterSetAttribute('readonly', newReadonly);\n\n    // ariaReadOnly needs to be a string\n    this.internals.ariaReadOnly = newReadonly ? 'true' : 'false';\n\n    // needed to rerender the component\n    this.requestUpdate('readonly', oldReadonlyValue);\n  }\n\n  /**\n   * Indicates that the form field is readonly.\n   */\n  @property({ type: Boolean })\n  get readonly(): boolean {\n    // default to false\n    if (typeof this.internals.ariaReadOnly === 'undefined') {\n      return false;\n    }\n\n    return this.internals.ariaReadOnly === 'true';\n  }\n\n  /**\n   * The additional context used to assist the\n   * user in filling out the form field.\n   */\n  @property()\n  helpText?: string;\n\n  set errorMessage(newErrorMessage) {\n    const oldErrorMessageValue = this.errorMessage;\n\n    this.customSetterSetAttribute('errormessage', newErrorMessage);\n\n    this.internalErrorMessage = newErrorMessage;\n\n    this.setInternalValidity();\n\n    // needed to rerender the component\n    this.requestUpdate('errorMessage', oldErrorMessageValue);\n  }\n\n  /**\n   * The error message to display when the form\n   * field is in an invalid state.\n   */\n  @property()\n  get errorMessage() {\n    return this.internalErrorMessage;\n  }\n\n  /**\n   * @internal\n   */\n  @state()\n  randomId: string;\n\n  /**\n   * Reset the field's value to it's value attribute.\n   * This gets called when `form.reset()` is invoked\n   * (typically by clicking a type=\"reset\" button).\n   */\n  formResetCallback() {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Calls `setValidity` on the element internals\n   * with the appropriate options depending on whether\n   * the element has an `errorMessage` or not.\n   */\n  setInternalValidity() {\n    if (this.field && this.internalErrorMessage) {\n      this.internals.setValidity(\n        { customError: true },\n        this.internalErrorMessage,\n        this.field,\n      );\n    } else {\n      // calling setValidity with an empty object\n      // indicates that the element meets contraint\n      // validation rules (i.e., is in a valid state)\n      this.internals.setValidity({});\n    }\n  }\n\n  /**\n   * update the actual field's value\n   */\n  protected updateField() {}\n\n  /**\n   * Determines whether the element includes `helpText`\n   */\n  hasHelpText() {\n    return !!this.helpText || !!this.slotNotEmpty('helpText');\n  }\n\n  /**\n   * Gets the appropriate `aria-describedby` value\n   * based on the existence of `helpText` and `errorMessage`.\n   *\n   * @returns space-seperated strings of ids\n   */\n  getAriaDescribedBy() {\n    return [\n      this.hasHelpText() ? `${this.name}-help-text` : '',\n      this.errorMessage ? `${this.name}-error-message` : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  /**\n   * Gets the \"fieldId\" value\n   *\n   * @returns the field id\n   */\n  getFieldId() {\n    return this.fieldId || `${this.name}-${this.randomId}-field`;\n  }\n\n  /**\n   * @internal\n   *\n   * This boolean is used to determine if the form element has a label\n   * It will be validated in the ValidationTimeout in firstUpdated\n   */\n  @state()\n  hasLabel: boolean = true;\n\n  /**\n   * Determines whether the element has a label as an attribute or slot\n   * Console logs an error if the element does not have a label\n   */\n  verifyLabel() {\n    const labelExists = !!this.label || !!this.slotNotEmpty('label');\n\n    if (!labelExists) {\n      console.error(\n        '\"label\" is required as a property or as a slot but is undefined',\n        this,\n      );\n    }\n\n    return labelExists;\n  }\n\n  /**\n   * Creates an HTML template for the label\n   * that is tied to the form field via the `for`\n   * attribute and adds the required indicator,\n   * if applicable.\n   *\n   * @returns an HTML template for the label\n   */\n  protected labelTemplate() {\n    return html`<label\n      for=\"${this.getFieldId()}\"\n      class=\"${this.classEl('label')}\"\n    >\n      <slot name=\"label\">${this.label}</slot>\n      ${this.required\n        ? html`<span\n            class=\"${this.classEl('required-indicator')}\"\n            aria-hidden=\"true\"\n          >\n            *\n          </span>`\n        : nothing}\n      <slot name=\"label-after\"></slot>\n    </label>`;\n  }\n\n  /**\n   * Creates an HTML template for help text,\n   * if the element has help text.\n   * Adds an `id` that is included in the form field's\n   * aria-describedby attribute.\n   *\n   * @returns an HTML template for help text\n   */\n  protected helpTextTemplate() {\n    return this.hasHelpText()\n      ? html`<div\n          class=\"${this.classEl('help-text')}\"\n          id=\"${this.name}-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>`\n      : nothing;\n  }\n\n  /**\n   * Creates an HTML template for error message,\n   * if the `errorMessage` prop is defined.\n   * Adds an `id` that is included in the form field's\n   * aria-describedby attribute.\n   *\n   * @returns an HTML template for help text\n   */\n  protected errorMessageTemplate() {\n    return this.errorMessage\n      ? html`<div\n          class=\"${this.classEl('error-message')}\"\n          id=\"${this.name}-error-message\"\n          aria-label=\"${this.translateText('error')} ${this.errorMessage}\"\n        >\n          <pds-icon-alert-circle></pds-icon-alert-circle>\n          ${this.errorMessage}\n        </div>`\n      : nothing;\n  }\n\n  /**\n   * Creates an HTML template for disabled context,\n   * if the `disabledContext` prop is defined.\n   *\n   * @returns an HTML template for disabled context\n   */\n  protected disabledContextTemplate() {\n    return this.disabledContext\n      ? html`<div\n          class=\"${this.classEl('disabled-context')}\"\n          id=\"${this.name}-disabled-context\"\n        >\n          ${this.disabledContext}\n        </div>`\n      : nothing;\n  }\n}\n"],"names":["_PdsFormElement","PdsElement","attributeName","newValue","_a","oldValue","newRequired","oldRequiredValue","newDisabled","oldDisabledValue","newReadonly","oldReadonlyValue","newErrorMessage","oldErrorMessageValue","labelExists","html","nothing","PdsFormElement","__decorateClass","property","required","state"],"mappings":"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"}