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

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

@@ -0,0 +1,660 @@
+import { Host, h } from '@stencil/core';
+import { createID } from '../../../utils/string.utils';
+import { FormAutocompleteClass, FormAutocompleteVariants, FormAutocompleteSizes } from './constants';
+import { validateProp } from '../../../helpers/Validate/props';
+import { has, throttle } from '../../../utils/utils';
+import { toBoolAttr } from '../../../helpers/Dom/template';
+export class GovFormAutocomplete {
+  constructor() {
+    this.templateResolver = item => item[this.nameKey];
+    this.value = '';
+    this.identifier = undefined;
+    this.variant = undefined;
+    this.success = undefined;
+    this.size = 'm';
+    this.nameKey = 'name';
+    this.name = undefined;
+    this.required = false;
+    this.disabled = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.invalid = undefined;
+    this.minlength = 2;
+    this.maxlength = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagLabelledBy = undefined;
+    this.wcagOwns = undefined;
+    this.focused = undefined;
+    this.processing = false;
+    this.arrowCounter = -1;
+    this.list = [];
+    this.listBoxId = createID('GovListBox');
+  }
+  validateVariant(newValue) {
+    validateProp(FormAutocompleteVariants, newValue, FormAutocompleteClass.root);
+  }
+  validateSize(newValue) {
+    validateProp(FormAutocompleteSizes, newValue, FormAutocompleteClass.root);
+  }
+  onArrowUp() {
+    if (this.arrowCounter > 0) {
+      this.arrowCounter = this.arrowCounter - 1;
+    }
+  }
+  onArrowDown() {
+    if (this.arrowCounter < this.list.length - 1) {
+      this.arrowCounter = this.arrowCounter + 1;
+    }
+  }
+  doSearch() {
+    if (Number.isInteger(this.minlength) && String(this.value).length <= this.minlength && this.minlength) {
+      this.list = [];
+      this.arrowCounter = -1;
+      this.processing = false;
+      return;
+    }
+    if (this.searchCallback) {
+      this.processing = true;
+      this.searchCallback(this.value)
+        .then(response => (this.list = response))
+        .catch(() => (this.list = []))
+        .finally(() => {
+        this.arrowCounter = -1;
+        this.processing = false;
+      });
+    }
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateSize(this.size);
+  }
+  render() {
+    return (h(Host, { class: FormAutocompleteClass.root, size: this.size, variant: this.variant }, h("gov-form-input", { placeholder: this.placeholder, name: this.name, disabled: this.disabled, readonly: this.readonly, autocomplete: false, size: this.size, variant: this.variant, required: this.required, invalid: this.invalid, role: 'searchbox', value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": throttle(this.onInputHandler.bind(this), 200), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-focus": this.onFocusHandler.bind(this), "on-gov-blur": this.onBlurHandler.bind(this), wcagAutocomplete: 'list', wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: [this.listBoxId, this.wcagOwns].join(' '), wcagExpanded: this.list.length && this.focused, ref: el => (this.inputRef = el) }, h("slot", { slot: "right-icon", name: "right-icon" })), h("ul", { class: FormAutocompleteClass.list, role: 'listbox', id: this.listBoxId }, this.list.map((item, index) => {
+      const isSelected = this.arrowCounter === index;
+      return (h("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: 'option', "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onClick: () => this.onSelectHandler(index), "aria-selected": toBoolAttr(isSelected) }));
+    }))));
+  }
+  onFocusHandler(e) {
+    this.focused = true;
+    this.arrowCounter = -1;
+    if ((this.value || this.minlength === 0) && this.searchCallback) {
+      this.doSearch();
+    }
+    e.stopPropagation();
+    this.govFocus.emit(e);
+  }
+  onBlurHandler(e) {
+    this.focused = false;
+    setTimeout(() => (this.list = []), 200);
+    this.arrowCounter = -1;
+    e.stopPropagation();
+    this.govBlur.emit(e);
+  }
+  onInputHandler(e) {
+    this.value = e.target.value;
+    e.stopPropagation();
+    this.govInput.emit(e);
+    this.doSearch();
+  }
+  onSelectHandler(index = -1) {
+    let selected = null;
+    if (index > -1) {
+      selected = this.list[index];
+    }
+    else if (has(this.arrowCounter, this.list)) {
+      selected = this.list[this.arrowCounter];
+    }
+    if (selected) {
+      this.govSelect.emit(selected);
+      this.list = [];
+      if (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {
+        this.value = selected[this.nameKey];
+      }
+    }
+  }
+  onKeyUpHandler(e) {
+    const event = e.detail;
+    e.stopPropagation();
+    if (event.keyCode === 38)
+      this.onArrowUp();
+    else if (event.keyCode === 40)
+      this.onArrowDown();
+    else if (event.keyCode === 13)
+      this.onSelectHandler();
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async setFocus(options) {
+    return this.inputRef.focus(options);
+  }
+  /**
+   * Clears whisperer value
+   */
+  async clearValue() {
+    this.value = '';
+    this.inputRef.value = '';
+    await this.inputRef.clearValue();
+  }
+  /**
+   * Set a custom asynchronous function for the whisperer
+   */
+  async setSearchCallback(callback) {
+    this.searchCallback = callback;
+  }
+  /**
+   * Setting a custom whisper result template
+   * @param callback
+   */
+  async setTemplateResolver(callback) {
+    this.templateResolver = callback;
+  }
+  static get is() { return "gov-form-autocomplete"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-autocomplete.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-autocomplete.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,
+        "defaultValue": "''"
+      },
+      "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": "VariantType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "VariantType": {
+              "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": "SizesType",
+          "resolved": "\"l\" | \"m\" | \"xl\"",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input\u2019s size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
+      },
+      "nameKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Main key name in the object"
+        },
+        "attribute": "name-key",
+        "reflect": false,
+        "defaultValue": "'name'"
+      },
+      "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
+      },
+      "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
+      },
+      "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
+      },
+      "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,
+        "defaultValue": "2"
+      },
+      "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
+      },
+      "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": "Same as original parameter\nhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns"
+        },
+        "attribute": "wcag-owns",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focused": {},
+      "processing": {},
+      "arrowCounter": {},
+      "list": {}
+    };
+  }
+  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": "govSelect",
+        "name": "gov-select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input change value."
+        },
+        "complexType": {
+          "original": "GovFormAutocompleteItem",
+          "resolved": "GovFormAutocompleteItem",
+          "references": {
+            "GovFormAutocompleteItem": {
+              "location": "import",
+              "path": "./gov-form-autocomplete.types"
+            }
+          }
+        }
+      }];
+  }
+  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": []
+        }
+      },
+      "clearValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clears whisperer value",
+          "tags": []
+        }
+      },
+      "setSearchCallback": {
+        "complexType": {
+          "signature": "(callback: (value: string) => Promise<any>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set a custom asynchronous function for the whisperer",
+          "tags": []
+        }
+      },
+      "setTemplateResolver": {
+        "complexType": {
+          "signature": "(callback: (item: GovFormAutocompleteItem) => string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "callback"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GovFormAutocompleteItem": {
+              "location": "import",
+              "path": "./gov-form-autocomplete.types"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Setting a custom whisper result template",
+          "tags": [{
+              "name": "param",
+              "text": "callback"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-autocomplete.js.map

package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-autocomplete.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { SizesType } from './constants'\nimport { createID } from '../../../utils/string.utils'\nimport { FormAutocompleteClass, FormAutocompleteVariants, VariantType, FormAutocompleteSizes } from './constants'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { has, throttle } from '../../../utils/utils'\nimport { GovFormAutocompleteItem } from './gov-form-autocomplete.types'\nimport { toBoolAttr } from '../../../helpers/Dom/template'\nimport { Nullable } from '../../../types/interfaces'\n\n@Component({\n\ttag: 'gov-form-autocomplete',\n\tstyleUrl: 'gov-form-autocomplete.scss',\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean) => string = item => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID('GovListBox')\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value = ''\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant?: VariantType\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size?: SizesType = 'm'\n\t/**\n\t * Main key name in the object\n\t */\n\t@Prop() readonly nameKey: string = 'name'\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * 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.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the input component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Text that appears in the form control when it has no value set\n\t */\n\t@Prop() readonly placeholder: string\n\t/**\n\t * The value is not editable\n\t */\n\t@Prop() readonly readonly: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number = 2\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: 'wcag-described-by' }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns\n\t */\n\t@Prop({ attribute: 'wcag-owns' }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-input' }) govInput: EventEmitter<InputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-select' }) govSelect: EventEmitter<GovFormAutocompleteItem>\n\t@State() focused: boolean\n\t@State() processing = false\n\t@State() arrowCounter = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormAutocompleteVariants, newValue, FormAutocompleteClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormAutocompleteSizes, newValue, FormAutocompleteClass.root)\n\t}\n\n\tprivate onArrowUp() {\n\t\tif (this.arrowCounter > 0) {\n\t\t\tthis.arrowCounter = this.arrowCounter - 1\n\t\t}\n\t}\n\n\tprivate onArrowDown() {\n\t\tif (this.arrowCounter < this.list.length - 1) {\n\t\t\tthis.arrowCounter = this.arrowCounter + 1\n\t\t}\n\t}\n\n\tprivate doSearch() {\n\t\tif (Number.isInteger(this.minlength) && String(this.value).length <= this.minlength && this.minlength) {\n\t\t\tthis.list = []\n\t\t\tthis.arrowCounter = -1\n\t\t\tthis.processing = false\n\t\t\treturn\n\t\t}\n\t\tif (this.searchCallback) {\n\t\t\tthis.processing = true\n\t\t\tthis.searchCallback(this.value)\n\t\t\t\t.then(response => (this.list = response))\n\t\t\t\t.catch(() => (this.list = []))\n\t\t\t\t.finally(() => {\n\t\t\t\t\tthis.arrowCounter = -1\n\t\t\t\t\tthis.processing = false\n\t\t\t\t})\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormAutocompleteClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<gov-form-input\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tautocomplete={false}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\trequired={this.required}\n\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\trole={'searchbox'}\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\ton-gov-input={throttle(this.onInputHandler.bind(this), 200)}\n\t\t\t\t\ton-gov-keyup={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\ton-gov-focus={this.onFocusHandler.bind(this)}\n\t\t\t\t\ton-gov-blur={this.onBlurHandler.bind(this)}\n\t\t\t\t\twcagAutocomplete={'list'}\n\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\twcagOwns={[this.listBoxId, this.wcagOwns].join(' ')}\n\t\t\t\t\twcagExpanded={this.list.length && this.focused}\n\t\t\t\t\tref={el => (this.inputRef = el as HTMLGovFormInputElement)}\n\t\t\t\t>\n\t\t\t\t\t<slot slot=\"right-icon\" name=\"right-icon\" />\n\t\t\t\t</gov-form-input>\n\t\t\t\t<ul class={FormAutocompleteClass.list} role={'listbox'} id={this.listBoxId}>\n\t\t\t\t\t{this.list.map((item, index) => {\n\t\t\t\t\t\tconst isSelected = this.arrowCounter === index\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tclass={FormAutocompleteClass.item}\n\t\t\t\t\t\t\t\tinnerHTML={this.templateResolver(item, isSelected)}\n\t\t\t\t\t\t\t\trole={'option'}\n\t\t\t\t\t\t\t\taria-posinset={index}\n\t\t\t\t\t\t\t\ttabindex={isSelected ? 0 : -1}\n\t\t\t\t\t\t\t\taria-setsize={this.list.length}\n\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(index)}\n\t\t\t\t\t\t\t\taria-selected={toBoolAttr(isSelected)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.arrowCounter = -1\n\t\tif ((this.value || this.minlength === 0) && this.searchCallback) {\n\t\t\tthis.doSearch()\n\t\t}\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => (this.list = []), 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index = -1) {\n\t\tlet selected: Nullable<GovFormAutocompleteItem> = null\n\t\tif (index > -1) {\n\t\t\tselected = this.list[index]\n\t\t} else if (has(this.arrowCounter, this.list)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif (selected) {\n\t\t\tthis.govSelect.emit(selected)\n\t\t\tthis.list = []\n\t\t\tif (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = e.detail as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) this.onSelectHandler()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"]}