@gov-design-system-ce/components 0.0.14 → 0.0.15

package/dist/collection/components/gov-form/input/gov-form-input.js

@@ -1,801 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { FormInputSizes } from './constants';
-import { createID } from '../../../utils/string.utils';
-import { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from '../../../helpers/Dom/template';
-import { FormInputClass, FormInputVariants } from './constants';
-import { validateProp } from '../../../helpers/Validate/props';
-import { canValidateWcagOnRender } from '../../../helpers/Dom/win';
-import { delay } from '../../../utils/utils';
-import { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag';
-import { govForm } from '../../../helpers/Dom/form';
-var Tags;
-(function (Tags) {
-  Tags["INPUT"] = "input";
-  Tags["TEXTAREA"] = "textarea";
-})(Tags || (Tags = {}));
-export class GovFormInput {
-  constructor() {
-    this.value = undefined;
-    this.identifier = undefined;
-    this.variant = undefined;
-    this.success = undefined;
-    this.size = 'm';
-    this.name = undefined;
-    this.multiline = undefined;
-    this.rows = undefined;
-    this.cols = undefined;
-    this.required = false;
-    this.disabled = undefined;
-    this.placeholder = undefined;
-    this.readonly = undefined;
-    this.minlength = undefined;
-    this.maxlength = undefined;
-    this.autocomplete = undefined;
-    this.autocorrect = undefined;
-    this.type = undefined;
-    this.inputType = 'text';
-    this.role = undefined;
-    this.invalid = undefined;
-    this.wcagDescribedBy = undefined;
-    this.wcagLabelledBy = undefined;
-    this.wcagOwns = undefined;
-    this.wcagAutocomplete = undefined;
-    this.wcagExpanded = undefined;
-    this.focused = undefined;
-    this.h = govHost(this.host);
-    this.inputId = createID('GovInput');
-    this.f = govForm(govHost(this.host));
-  }
-  validateVariant(newValue) {
-    validateProp(FormInputVariants, newValue, FormInputClass.root);
-  }
-  validateSize(newValue) {
-    validateProp(FormInputSizes, newValue, FormInputClass.root);
-  }
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.validateSize(this.size);
-    this.f.passAttrToControl('type', this.multiline ? Tags.TEXTAREA : Tags.INPUT);
-    this.f.passAttrToLabel('required', String(this.required));
-  }
-  async componentDidRender() {
-    if (canValidateWcagOnRender()) {
-      await delay(500);
-      await this.validateWcag();
-    }
-  }
-  render() {
-    const Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT;
-    return (h(Host, { class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot('prefix') && h("slot", { name: "prefix" }), h("span", { class: "element" }, this.h.hasSlot('left-icon') && h("slot", { name: "left-icon" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { name: "right-icon" }), this.success && !this.multiline && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h(Tag, { type: this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, value: this.value, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, required: this.required, rows: this.rows, cols: this.cols, role: this.role, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot('sufix') && h("slot", { name: "sufix" })));
-  }
-  onFocusHandler(e) {
-    e.stopPropagation();
-    this.focused = true;
-    this.govFocus.emit(e);
-  }
-  onBlurHandler(e) {
-    e.stopPropagation();
-    this.focused = false;
-    this.govBlur.emit(e);
-  }
-  onKeyUpHandler(e) {
-    e.stopPropagation();
-    this.govKeyUp.emit(e);
-  }
-  onInputHandler(e) {
-    this.value = e.target.value;
-    e.stopPropagation();
-    this.govInput.emit(e);
-  }
-  /**
-   * Returns the current state of the component
-   */
-  async setFocus(options) {
-    return this.inputRef.focus(options);
-  }
-  /**
-   * Sets the ordered value of the element
-   */
-  async setValue(value) {
-    this.value = value;
-  }
-  /**
-   * Clears input value
-   */
-  async clearValue() {
-    this.value = '';
-    this.inputRef.value = '';
-  }
-  /**
-   * Returns an instance of the native html input element
-   */
-  async getInstance() {
-    return this.inputRef;
-  }
-  /**
-   * Validate the WCAG attributes of the component
-   */
-  async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormInputClass.root);
-    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormInputClass.root);
-    validateWcagRef(this.wcagOwns, 'wcag-owns', FormInputClass.root);
-    validateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root);
-  }
-  static get is() { return "gov-form-input"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gov-form-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gov-form-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of input"
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom input identifier."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "FormInputVariantType",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {
-            "FormInputVariantType": {
-              "location": "import",
-              "path": "./constants"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Style variation of the form input."
-        },
-        "attribute": "variant",
-        "reflect": false
-      },
-      "success": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the entered value of child form element does conform to the format expected by the application."
-        },
-        "attribute": "success",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "FormInputSizesType",
-          "resolved": "\"l\" | \"m\" | \"xl\"",
-          "references": {
-            "FormInputSizesType": {
-              "location": "import",
-              "path": "./constants"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Input\u2019s size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'m'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the input."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "multiline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Generates a texarea for the possibility of multiple lines"
-        },
-        "attribute": "multiline",
-        "reflect": false
-      },
-      "rows": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows"
-        },
-        "attribute": "rows",
-        "reflect": false
-      },
-      "cols": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols"
-        },
-        "attribute": "cols",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\nWhen using this property you need to also set \u201Cnovalidate\u201D attribute to your form element to prevent browser from displaying its own validation errors."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the input component disabled.\nThis prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text that appears in the form control when it has no value set"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value is not editable"
-        },
-        "attribute": "readonly",
-        "reflect": false
-      },
-      "minlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum length (number of characters) of value"
-        },
-        "attribute": "minlength",
-        "reflect": false
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum length (number of characters) of value"
-        },
-        "attribute": "maxlength",
-        "reflect": false
-      },
-      "autocomplete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete"
-        },
-        "attribute": "autocomplete",
-        "reflect": false
-      },
-      "autocorrect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocorrect"
-        },
-        "attribute": "autocorrect",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Type",
-          "resolved": "Type",
-          "references": {
-            "Type": {
-              "location": "import",
-              "path": "./constants"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defineds the visual style of input"
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "inputType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "InputType",
-          "resolved": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
-          "references": {
-            "InputType": {
-              "location": "import",
-              "path": "./constants"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "link",
-              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types"
-            }],
-          "text": "Same as original parameter"
-        },
-        "attribute": "input-type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "link",
-              "text": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role"
-            }],
-          "text": "Same as original parameter"
-        },
-        "attribute": "role",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the entered value does not conform to the format expected by the application."
-        },
-        "attribute": "invalid",
-        "reflect": false
-      },
-      "wcagDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the input."
-        },
-        "attribute": "wcag-described-by",
-        "reflect": false
-      },
-      "wcagLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that labels the input."
-        },
-        "attribute": "wcag-labelled-by",
-        "reflect": false
-      },
-      "wcagOwns": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the input."
-        },
-        "attribute": "wcag-owns",
-        "reflect": false
-      },
-      "wcagAutocomplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value."
-        },
-        "attribute": "wcag-autocomplete",
-        "reflect": false
-      },
-      "wcagExpanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Attribute is set on an element to indicate if a control is expanded or collapsed"
-        },
-        "attribute": "wcag-expanded",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focused": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "govFocus",
-        "name": "gov-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input has focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "govBlur",
-        "name": "gov-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input loses focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "govInput",
-        "name": "gov-input",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input change value."
-        },
-        "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "govKeyUp",
-        "name": "gov-keyup",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input change value."
-        },
-        "complexType": {
-          "original": "KeyboardEvent",
-          "resolved": "KeyboardEvent",
-          "references": {
-            "KeyboardEvent": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "FocusOptions": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Returns the current state of the component",
-          "tags": []
-        }
-      },
-      "setValue": {
-        "complexType": {
-          "signature": "(value: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the ordered value of the element",
-          "tags": []
-        }
-      },
-      "clearValue": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Clears input value",
-          "tags": []
-        }
-      },
-      "getInstance": {
-        "complexType": {
-          "signature": "() => Promise<HTMLInputElement>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<HTMLInputElement>"
-        },
-        "docs": {
-          "text": "Returns an instance of the native html input element",
-          "tags": []
-        }
-      },
-      "validateWcag": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Validate the WCAG attributes of the component",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "variant",
-        "methodName": "validateVariant"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }];
-  }
-}
-//# sourceMappingURL=gov-form-input.js.map