@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../components/field/field.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './field.styles.js';\n\n/**\n * The Field component renders a form group with label, control, help text and validation styling. There are\n * convenience variants of Field to support HTML5 input types and static content.\n */\nexport class Cre8Field extends Cre8FormElement {\n    static styles = [styles];\n    \n\n  /**\n   * Autocomplete attribute that allows input to expect certain types of information. Note: autocomplete is supported\n   * by most browsers, but the suggested 'completions' are also sourced from those browsers. Values come\n   * from past user stored data from past interactions in that browser, such as:\n   *\n   *  1. From past values entered by the user, but they may also come from pre-configured values. For\n   *  instance, a browser might let the user save their name, address, phone number, and email addresses for\n   *  autocomplete purposes.\n   *\n   *  2. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion\n   *  following a an authentication procedure.\n   *  See: [MDN web docs_](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n   *\n   *  NOTE:: In order to provide autocompletion, user-agents might require input, select, textarea\n   *  elements to:\n   *\n   *  1. Have a {{name}} and/or {{id}} attribute\n   *  2. Be descendants of a form element\n   *  3. The form to have a [submit button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)\n   *\n   * @attr {string}\n   */\n  @property()\n      autocomplete?: 'on' | 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'url' | 'address-line1' | 'address-line2' | 'country' | 'postal-code';\n\n  /**\n   * Pattern attribute defines a regular expression to validate against input\n   *\n   * @attr {string}\n   */\n  @property()\n      pattern?: string;\n\n  /**\n   * Type variants\n   * - **text** renders a standard text input\n   * - **email** renders a text input for an email format\n   * - **number** renders an input for number values only\n   * - **url** renders an input for urls only\n   * - **tel** renders an input for telephone number values only\n   *\n   * @attr {string}\n   */\n  @property()\n      type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'text';\n\n  /**\n   * The placeholder text that appears inside the input\n   *\n   * @attr {string}\n   */\n  @property()\n      placeholder?: string;\n\n  /**\n   * The required label that appears above the input\n   *\n   * @attr {string}\n   */\n  @property()\n      label: string = 'Label';\n\n  /**\n   * The name property on the input\n   *\n   * @attr {string}\n   */\n\n\n  /**\n   * The unique id of the field\n   * <br/><br/> _*This property is dynamically set_\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * The text that displays below in text field input\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Controls how the voiceover will experience the new information when field note changes,\n   * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n   * pause in their navigation using `polite`.\n   */\n  @property()\n      ariaLive: 'polite' | 'assertive' = 'polite';\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   *\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * The required attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      required?: boolean;\n\n  /**\n   * The disabled attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is an error for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      errorText: string = 'Error';\n\n  /**\n   * The error field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      errorNote?: string;\n\n   /**\n    * The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      max?: string;\n\n    /**\n    * The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      min?: string;\n\n  /**\n   * The maxlength is an integer above 0 that indicates the maximum allowed characters to be entered. When using the\n   * maxlength prop, you must also use the \"required\" prop to provide Constraint Validation on the input field.\n   * This allows users to know why the input they attempted didn't render in the input field. see\n   * [MDN maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength#constraint_validation)\n   *\n   * @attr {string}\n   */\n  @property({ type: Number })\n      maxlength?: number;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   *\n   * @attr {string}\n   */\n  @property()\n      validationAriaDescribedBy?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is successful for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      successText: string = 'Success';\n\n  /**\n   * Readonly attribute\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      readonly?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      successNote?: string;\n\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * First update lifecycle hook\n   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n   */\n  firstUpdated() {\n      this.initializeAria();\n      return super.firstUpdated();\n  }\n\n  /**\n   * Initialize aria attributes\n   */\n  initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n      if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n          this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;\n      }\n      if (this.successNote || this.errorNote) {\n          this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${nanoid()}`;\n      }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  fieldNoteAria() {\n      if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n          return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n      }\n      if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n          return this.validationAriaDescribedBy; /* 2 */\n      }\n      return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Handle On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private _handleOnInput(e: Event) {\n    /* 1 */\n      const inputValue = (e.target as HTMLInputElement).value;\n      this.value = inputValue;\n\n    /* 2 */\n      this._internals.setFormValue(this.value);\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  renderSuccessErrorFieldNote() {\n      if (this.successNote) {\n      /* 1 */\n          return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        class=\"cre8-c-field__field-note-success\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n      }\n      if (this.errorNote) {\n      /* 2 */\n          return html` <cre8-field-note\n        ?isError=${this.isError}\n        class=\"cre8-c-field__field-note-error\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-field', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-field__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-field__body\">\n          <input\n            class=\"cre8-c-field__input\"\n            autocomplete=${ifDefined(this.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.fieldId}\"\n            max=${(this.type === 'date') && ifDefined(this.max).toString()}\n            min=${(this.type === 'date') && ifDefined(this.max).toString()}\n            maxlength=${ifDefined(this.maxlength)}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            aria-invalid=${this.isError ? 'true' : 'false'}\n            ?disabled=\"${this.disabled}\"\n            pattern=${ifDefined(this.pattern)}\n            aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            .value=\"${this.value}\"\n            @input=${this._handleOnInput}\n          />\n        </div>\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-field__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field') === undefined) {\n    customElements.define('cre8-field', Cre8Field);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field': Cre8Field;\n  }\n}\n\nexport default Cre8Field;\n"]}

package/lib/components/field/field.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=field.styles.d.ts.map

package/lib/components/field/field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAksBV,CAAC;AACH,eAAe,MAAM,CAAC"}