@gov-design-system-ce/components 4.0.8-rc10 → 4.0.8-rc11

package/dist/cjs/gov-error-code.cjs.entry.js

@@ -2,29 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b6bba34.js');
-const template = require('./template-9534c584.js');
+const index = require('./index-d7a6145d.js');
+const template = require('./template-431f0737.js');
 
 const ErrorCodeClass = {
-  root: 'gov-error-code',
-  icon: 'gov-error-code__icon',
-  holder: 'gov-error-code__holder',
-  content: 'gov-error-code__content',
+    root: 'gov-error-code',
+    icon: 'gov-error-code__icon',
+    holder: 'gov-error-code__holder',
+    content: 'gov-error-code__content',
 };
 
 const govErrorCodeCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-error-code{position:relative;display:block;width:100%}.gov-error-code__holder{margin:0 auto;text-align:center}.gov-error-code__content>*:last-child{margin-bottom:0}.gov-error-code__icon{display:flex;justify-content:center;align-items:center;width:9.375rem;height:9.375rem;margin:0 auto 1.5rem;border-radius:50%;background:var(--gov-error-icon-circle-bg, linear-gradient(to bottom, var(--gov-color-primary-200), var(--gov-color-neutral-white)));color:var(--gov-error-icon-color, var(--gov-color-primary))}.gov-error-code__icon>*{width:6.5625rem;height:6.5625rem}@media (min-width: 48em){.gov-error-code__icon{width:12.5rem;height:12.5rem;margin:0 auto 2rem}.gov-error-code__icon>*{width:8.75rem;height:8.75rem}}";
+const GovErrorCodeStyle0 = govErrorCodeCss;
 
 const GovErrorCode = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.h = template.govHost(this.host);
-  }
-  render() {
-    return (index.h(index.Host, { class: this.h.classes(ErrorCodeClass.root) }, index.h("div", { class: ErrorCodeClass.holder }, this.h.hasSlot('icon') && (index.h("div", { class: ErrorCodeClass.icon }, index.h("slot", { name: "icon" }))), index.h("div", { class: ErrorCodeClass.content }, index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.h = template.govHost(this.host);
+    }
+    render() {
+        return (index.h(index.Host, { key: '1e634f7ebf2fc9ca6d2ccd620fd38b35b788843a', class: this.h.classes(ErrorCodeClass.root) }, index.h("div", { key: '3d531a4bdc60e66e02975b6fa6b10c374a772455', class: ErrorCodeClass.holder }, this.h.hasSlot('icon') && (index.h("div", { key: '96cf7a9046710206c587ad35c69084bda9b3d8dd', class: ErrorCodeClass.icon }, index.h("slot", { key: '2b532b0c490ff77a25a740cf675e7ff9013edbfb', name: "icon" }))), index.h("div", { key: 'a22c2bf3ee35e4ba1bf5840a15b3032c52ad8dd1', class: ErrorCodeClass.content }, index.h("slot", { key: '32ba276ba27e1fc83edfbc4260b3f1a68b0de7eb' })))));
+    }
+    get host() { return index.getElement(this); }
 };
-GovErrorCode.style = govErrorCodeCss;
+GovErrorCode.style = GovErrorCodeStyle0;
 
 exports.gov_error_code = GovErrorCode;
 

package/dist/cjs/gov-error-code.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-error-code.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,sBAAsB;EAC5B,MAAM,EAAE,wBAAwB;EAChC,OAAO,EAAE,yBAAyB;CAClC;;ACLD,MAAM,eAAe,GAAG,miCAAmiC;;MCS9iC,YAAY;EAGxB;;IACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/CD,iBAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAC/B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,iBAAK,KAAK,EAAE,cAAc,CAAC,IAAI,IAC9BA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACDA,iBAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjCA,qBAAQ,CACH,CACD,CACA,EACP;GACD;;;;;;;","names":["govHost","h","Host"],"sources":["../../../packages/core/src/components/gov-error-code/constants.ts","../../../packages/core/src/components/gov-error-code/gov-error-code.scss?tag=gov-error-code","../../../packages/core/src/components/gov-error-code/gov-error-code.tsx"],"sourcesContent":["export const ErrorCodeClass = {\n\troot: 'gov-error-code',\n\ticon: 'gov-error-code__icon',\n\tholder: 'gov-error-code__holder',\n\tcontent: 'gov-error-code__content',\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-error-code\";\n\n#{$class} {\n\t@include base();\n\t&__holder {\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(150);\n\t\theight: rem-calc(150);\n\t\tmargin: 0 auto rem-calc(24);\n\t\tborder-radius: 50%;\n\t\tbackground: $error-icon-circle-bg;\n\t\tcolor: $error-icon-color;\n\t\t& > * {\n\t\t\twidth: rem-calc(105);\n\t\t\theight: rem-calc(105);\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__icon {\n\t\t\twidth: rem-calc(200);\n\t\t\theight: rem-calc(200);\n\t\t\tmargin: 0 auto rem-calc(32);\n\t\t\t& > * {\n\t\t\t\twidth: rem-calc(140);\n\t\t\t\theight: rem-calc(140);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { ErrorCodeClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-error-code',\n\tstyleUrl: 'gov-error-code.scss',\n})\nexport class GovErrorCode {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovErrorCodeElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ErrorCodeClass.root)}>\n\t\t\t\t<div class={ErrorCodeClass.holder}>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={ErrorCodeClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class={ErrorCodeClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-error-code.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,wBAAwB;IAChC,OAAO,EAAE,yBAAyB;CAClC;;ACLD,MAAM,eAAe,GAAG,miCAAmiC,CAAC;AAC5jC,2BAAe,eAAe;;MCQjB,YAAY;IAGxB;;QACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAID,MAAM;QACL,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/CD,kEAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAC/B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,kEAAK,KAAK,EAAE,cAAc,CAAC,IAAI,IAC9BA,mEAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACDA,kEAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjCA,oEAAQ,CACH,CACD,CACA,EACP;KACD;;;;;;;","names":["govHost","h","Host"],"sources":["../../../packages/core/src/components/gov-error-code/constants.ts","../../../packages/core/src/components/gov-error-code/gov-error-code.scss?tag=gov-error-code","../../../packages/core/src/components/gov-error-code/gov-error-code.tsx"],"sourcesContent":["export const ErrorCodeClass = {\n\troot: 'gov-error-code',\n\ticon: 'gov-error-code__icon',\n\tholder: 'gov-error-code__holder',\n\tcontent: 'gov-error-code__content',\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-error-code\";\n\n#{$class} {\n\t@include base();\n\t&__holder {\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(150);\n\t\theight: rem-calc(150);\n\t\tmargin: 0 auto rem-calc(24);\n\t\tborder-radius: 50%;\n\t\tbackground: $error-icon-circle-bg;\n\t\tcolor: $error-icon-color;\n\t\t& > * {\n\t\t\twidth: rem-calc(105);\n\t\t\theight: rem-calc(105);\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__icon {\n\t\t\twidth: rem-calc(200);\n\t\t\theight: rem-calc(200);\n\t\t\tmargin: 0 auto rem-calc(32);\n\t\t\t& > * {\n\t\t\t\twidth: rem-calc(140);\n\t\t\t\theight: rem-calc(140);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { ErrorCodeClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-error-code',\n\tstyleUrl: 'gov-error-code.scss',\n})\nexport class GovErrorCode {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovErrorCodeElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ErrorCodeClass.root)}>\n\t\t\t\t<div class={ErrorCodeClass.holder}>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={ErrorCodeClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class={ErrorCodeClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-form-autocomplete.cjs.entry.js

@@ -2,262 +2,263 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b6bba34.js');
-const template = require('./template-9534c584.js');
-const props = require('./props-d6146e54.js');
-const string_utils = require('./string.utils-0f08c48c.js');
-const utils = require('./utils-c9b1bba3.js');
-const constants = require('./constants-6df82618.js');
-const array_utils = require('./array.utils-5a024b3a.js');
-require('./gov.log-b842920d.js');
-require('./win-5521073d.js');
-require('./sizes-79872c2a.js');
-require('./variants-f5ffeef3.js');
+const index = require('./index-d7a6145d.js');
+const template = require('./template-431f0737.js');
+const props = require('./props-edd0d46f.js');
+const string_utils = require('./string.utils-2335838f.js');
+const utils = require('./utils-d263c5c6.js');
+const constants = require('./constants-fb915aae.js');
+const array_utils = require('./array.utils-fcdab10c.js');
+require('./gov.log-8887c6bc.js');
+require('./win-03714165.js');
+require('./sizes-89f8d3b2.js');
+require('./variants-85b514ea.js');
 
 const govFormAutocompleteCss = ".gov-form-autocomplete__list{margin:0;padding:0}.gov-form-autocomplete__list>.gov-form-autocomplete__item{margin:0;padding:0;background:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-autocomplete{position:relative;display:block;width:100%}.gov-form-autocomplete__list{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);position:absolute;top:100%;right:0;left:0;z-index:5;max-height:14.0625rem;margin-top:0.5rem;border:var(--gov-autocomplete-item-hover, 0.0625rem solid var(--gov-color-secondary-500));border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-autocomplete-bg, var(--gov-color-neutral-white));overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item{padding:0.75rem 0.5rem;cursor:pointer}.gov-form-autocomplete__item--empty,.gov-form-autocomplete__item--loading{padding:0.75rem 0.5rem;color:var(--gov-autocomplete-item-disable-color, var(--gov-color-secondary-600))}.gov-form-autocomplete__item--empty .gov-icon,.gov-form-autocomplete__item--empty .gov-spin-animation,.gov-form-autocomplete__item--loading .gov-icon,.gov-form-autocomplete__item--loading .gov-spin-animation{width:12px;height:12px}.gov-form-autocomplete__list:empty{display:none}.gov-form-autocomplete__item[aria-selected=\"\"],.gov-form-autocomplete__item[aria-selected=true i],.gov-form-autocomplete__item[aria-selected=\"1\"]{background:var(--gov-autocomplete-item-select, var(--gov-color-secondary-400))}@media not all and (pointer: coarse){.gov-form-autocomplete__item:hover{background:var(--gov-autocomplete-item-hover, var(--gov-color-primary-100))}}";
+const GovFormAutocompleteStyle0 = govFormAutocompleteCss;
 
 const GovFormAutocomplete = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.govFocus = index.createEvent(this, "gov-focus", 7);
-    this.govBlur = index.createEvent(this, "gov-blur", 7);
-    this.govInput = index.createEvent(this, "gov-input", 7);
-    this.govSelect = index.createEvent(this, "gov-select", 7);
-    this.templateResolver = item => item[this.nameKey];
-    this.value = '';
-    this.options = undefined;
-    this.identifier = undefined;
-    this.variant = undefined;
-    this.success = undefined;
-    this.size = 'm';
-    this.nameKey = 'name';
-    this.name = undefined;
-    this.required = false;
-    this.disabled = false;
-    this.placeholder = undefined;
-    this.readonly = undefined;
-    this.invalid = undefined;
-    this.minlength = 3;
-    this.maxlength = undefined;
-    this.throttleTime = 200;
-    this.messageEmpty = 'Nebyly nalezeny žádné výsledky';
-    this.messageLoading = 'Načítám...';
-    this.wcagDescribedBy = undefined;
-    this.wcagLabelledBy = undefined;
-    this.wcagOwns = undefined;
-    this.focused = undefined;
-    this.processing = false;
-    this.arrowCounter = -1;
-    this.list = [];
-    this.listBoxId = string_utils.createID('GovListBox');
-  }
-  validateVariant(newValue) {
-    props.validateProp(constants.FormAutocompleteVariants, newValue, constants.FormAutocompleteClass.root);
-  }
-  validateSize(newValue) {
-    props.validateProp(constants.FormAutocompleteSizes, newValue, constants.FormAutocompleteClass.root);
-  }
-  watchOptions(newValue) {
-    this.setOptions(array_utils.propsValueToArray(newValue)).catch();
-  }
-  onArrowUp() {
-    if (this.arrowCounter > 0) {
-      this.arrowCounter = this.arrowCounter - 1;
-      this.moveToView().finally();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.govFocus = index.createEvent(this, "gov-focus", 7);
+        this.govBlur = index.createEvent(this, "gov-blur", 7);
+        this.govInput = index.createEvent(this, "gov-input", 7);
+        this.govSelect = index.createEvent(this, "gov-select", 7);
+        this.templateResolver = item => item[this.nameKey];
+        this.value = '';
+        this.options = undefined;
+        this.identifier = undefined;
+        this.variant = undefined;
+        this.success = undefined;
+        this.size = 'm';
+        this.nameKey = 'name';
+        this.name = undefined;
+        this.required = false;
+        this.disabled = false;
+        this.placeholder = undefined;
+        this.readonly = undefined;
+        this.invalid = undefined;
+        this.minlength = 3;
+        this.maxlength = undefined;
+        this.throttleTime = 200;
+        this.messageEmpty = 'Nebyly nalezeny žádné výsledky';
+        this.messageLoading = 'Načítám...';
+        this.wcagDescribedBy = undefined;
+        this.wcagLabelledBy = undefined;
+        this.wcagOwns = undefined;
+        this.focused = undefined;
+        this.processing = false;
+        this.arrowCounter = -1;
+        this.list = [];
+        this.listBoxId = string_utils.createID('GovListBox');
+    }
+    validateVariant(newValue) {
+        props.validateProp(constants.FormAutocompleteVariants, newValue, constants.FormAutocompleteClass.root);
+    }
+    validateSize(newValue) {
+        props.validateProp(constants.FormAutocompleteSizes, newValue, constants.FormAutocompleteClass.root);
+    }
+    watchOptions(newValue) {
+        this.setOptions(array_utils.propsValueToArray(newValue)).catch();
+    }
+    onArrowUp() {
+        if (this.arrowCounter > 0) {
+            this.arrowCounter = this.arrowCounter - 1;
+            this.moveToView().finally();
+        }
+    }
+    onArrowDown() {
+        if (this.arrowCounter < this.list.length - 1) {
+            this.arrowCounter = this.arrowCounter + 1;
+            this.moveToView().finally();
+        }
+    }
+    async moveToView() {
+        await utils.delay(200);
+        const heightOfList = this.listRef.offsetHeight;
+        const selected = this.listRef.querySelector('li[aria-selected="true"]');
+        if (selected && heightOfList) {
+            const offsetTop = selected.offsetTop;
+            this.listRef.scrollTo({ top: offsetTop, behavior: 'smooth' });
+        }
     }
-  }
-  onArrowDown() {
-    if (this.arrowCounter < this.list.length - 1) {
-      this.arrowCounter = this.arrowCounter + 1;
-      this.moveToView().finally();
+    doSearch() {
+        if (Number.isInteger(this.minlength) && this.isValueAccepted === false && 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;
+            });
+        }
     }
-  }
-  async moveToView() {
-    await utils.delay(200);
-    const heightOfList = this.listRef.offsetHeight;
-    const selected = this.listRef.querySelector('li[aria-selected="true"]');
-    if (selected && heightOfList) {
-      const offsetTop = selected.offsetTop;
-      this.listRef.scrollTo({ top: offsetTop, behavior: 'smooth' });
+    clearList() {
+        const areOptions = array_utils.propsValueToArray(this.options);
+        if (areOptions.length === 0) {
+            this.list = [];
+        }
     }
-  }
-  doSearch() {
-    if (Number.isInteger(this.minlength) && this.isValueAccepted === false && this.minlength) {
-      this.list = [];
-      this.arrowCounter = -1;
-      this.processing = false;
-      return;
+    get isValueAccepted() {
+        if (typeof this.value === 'string') {
+            return this.value.length >= this.minlength;
+        }
+        else {
+            return false;
+        }
     }
-    if (this.searchCallback) {
-      this.processing = true;
-      this.searchCallback(this.value)
-        .then(response => (this.list = response))
-        .catch(() => (this.list = []))
-        .finally(() => {
+    componentWillLoad() {
+        this.validateVariant(this.variant);
+        this.validateSize(this.size);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3ade1a0f94261a8530ce85af0a67f0ce5ed067d3', class: constants.FormAutocompleteClass.root, size: this.size, variant: this.variant }, index.h("gov-form-input", { key: 'ac6392ffdb77783b45b774dbb00edca83de7370e', 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, success: this.success, role: 'searchbox', value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": utils.throttle(this.onInputHandler.bind(this), this.throttleTime), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.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) }, index.h("slot", { key: 'adb1c0a349ac9f12e0fb7d2790516a1e7a4cf437', slot: "right-icon", name: "right-icon" })), index.h("ul", { key: '9d11566e2fda522c662d8af6973cd5f4d155c1ad', class: constants.FormAutocompleteClass.list, role: 'listbox', "aria-hidden": template.toBoolAttr(!this.focused), hidden: !this.focused, id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (index.h("li", { class: constants.FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (index.h("li", { class: constants.FormAutocompleteClass.loading }, index.h("gov-icon", { name: "loader", class: "gov-spin-animation" }), "\u00A0", this.messageLoading)) : null, this.focused ? this.list.map((item, index$1) => {
+            const isSelected = this.arrowCounter === index$1;
+            return (index.h("li", { class: constants.FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: 'option', "aria-posinset": index$1, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onTouchStart: (e) => this.onSelectHandler(e, index$1), onMouseDown: (e) => this.onSelectHandler(e, index$1), "aria-selected": template.toBoolAttr(isSelected) }));
+        }) : null)));
+    }
+    onFocusHandler(e) {
+        this.focused = true;
         this.arrowCounter = -1;
-        this.processing = false;
-      });
+        if (this.isValueAccepted && this.searchCallback) {
+            this.doSearch();
+        }
+        e.stopPropagation();
+        this.govFocus.emit({
+            originalEvent: e,
+            component: constants.FormAutocompleteClass.root,
+            value: this.value,
+            selected: null,
+        });
+    }
+    onBlurHandler(e) {
+        this.focused = false;
+        this.clearList();
+        this.arrowCounter = -1;
+        e.stopPropagation();
+        this.govBlur.emit({
+            originalEvent: e,
+            component: constants.FormAutocompleteClass.root,
+            value: this.value,
+            selected: null,
+        });
+    }
+    onInputHandler(e) {
+        this.value = e.target.value;
+        e.stopPropagation();
+        this.govInput.emit({
+            originalEvent: e,
+            component: constants.FormAutocompleteClass.root,
+            value: this.value,
+            selected: null,
+        });
+        this.doSearch();
     }
-  }
-  clearList() {
-    const areOptions = array_utils.propsValueToArray(this.options);
-    if (areOptions.length === 0) {
-      this.list = [];
+    onSelectHandler(e, index = -1) {
+        let selected = null;
+        if (index > -1) {
+            selected = this.list[index];
+        }
+        else if (utils.has(this.arrowCounter, this.list)) {
+            selected = this.list[this.arrowCounter];
+        }
+        if (selected) {
+            this.govSelect.emit({
+                component: constants.FormAutocompleteClass.root,
+                value: this.value,
+                selected: selected,
+                originalEvent: e,
+            });
+            this.clearList();
+            if (utils.has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {
+                this.value = selected[this.nameKey];
+            }
+        }
     }
-  }
-  get isValueAccepted() {
-    if (typeof this.value === 'string') {
-      return this.value.length >= this.minlength;
+    onKeyUpHandler(e) {
+        const event = e.detail.originalEvent;
+        e.stopPropagation();
+        event.stopPropagation();
+        if (event.keyCode === 38)
+            this.onArrowUp();
+        else if (event.keyCode === 40)
+            this.onArrowDown();
+        else if (event.keyCode === 13) {
+            e.preventDefault();
+            event.preventDefault();
+            this.onSelectHandler(e);
+        }
     }
-    else {
-      return false;
+    onKeyDownHandler(e) {
+        const event = e.detail.originalEvent;
+        e.stopPropagation();
+        event.stopPropagation();
+        if (event.keyCode === 13) {
+            e.preventDefault();
+            event.preventDefault();
+        }
     }
-  }
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.validateSize(this.size);
-  }
-  render() {
-    return (index.h(index.Host, { class: constants.FormAutocompleteClass.root, size: this.size, variant: this.variant }, index.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, success: this.success, role: 'searchbox', value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": utils.throttle(this.onInputHandler.bind(this), this.throttleTime), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.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) }, index.h("slot", { slot: "right-icon", name: "right-icon" })), index.h("ul", { class: constants.FormAutocompleteClass.list, role: 'listbox', "aria-hidden": template.toBoolAttr(!this.focused), hidden: !this.focused, id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (index.h("li", { class: constants.FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (index.h("li", { class: constants.FormAutocompleteClass.loading }, index.h("gov-icon", { name: "loader", class: "gov-spin-animation" }), "\u00A0", this.messageLoading)) : null, this.focused ? this.list.map((item, index$1) => {
-      const isSelected = this.arrowCounter === index$1;
-      return (index.h("li", { class: constants.FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: 'option', "aria-posinset": index$1, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onTouchStart: (e) => this.onSelectHandler(e, index$1), onMouseDown: (e) => this.onSelectHandler(e, index$1), "aria-selected": template.toBoolAttr(isSelected) }));
-    }) : null)));
-  }
-  onFocusHandler(e) {
-    this.focused = true;
-    this.arrowCounter = -1;
-    if (this.isValueAccepted && this.searchCallback) {
-      this.doSearch();
+    /**
+     * Focus main input element
+     */
+    async setFocus(options) {
+        return this.inputRef.focus(options);
     }
-    e.stopPropagation();
-    this.govFocus.emit({
-      originalEvent: e,
-      component: constants.FormAutocompleteClass.root,
-      value: this.value,
-      selected: null,
-    });
-  }
-  onBlurHandler(e) {
-    this.focused = false;
-    this.clearList();
-    this.arrowCounter = -1;
-    e.stopPropagation();
-    this.govBlur.emit({
-      originalEvent: e,
-      component: constants.FormAutocompleteClass.root,
-      value: this.value,
-      selected: null,
-    });
-  }
-  onInputHandler(e) {
-    this.value = e.target.value;
-    e.stopPropagation();
-    this.govInput.emit({
-      originalEvent: e,
-      component: constants.FormAutocompleteClass.root,
-      value: this.value,
-      selected: null,
-    });
-    this.doSearch();
-  }
-  onSelectHandler(e, index = -1) {
-    let selected = null;
-    if (index > -1) {
-      selected = this.list[index];
+    /**
+     * Blur main input element
+     */
+    async setBlur() {
+        return this.inputRef.blur();
+    }
+    /**
+     * Set options for list
+     */
+    async setOptions(options) {
+        this.list = Array.isArray(options) ? options : [];
+        this.arrowCounter = -1;
     }
-    else if (utils.has(this.arrowCounter, this.list)) {
-      selected = this.list[this.arrowCounter];
+    /**
+     * Clears whisperer value
+     */
+    async clearValue() {
+        this.value = '';
+        this.inputRef.value = '';
+        await this.inputRef.clearValue();
     }
-    if (selected) {
-      this.govSelect.emit({
-        component: constants.FormAutocompleteClass.root,
-        value: this.value,
-        selected: selected,
-        originalEvent: e,
-      });
-      this.clearList();
-      if (utils.has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {
-        this.value = selected[this.nameKey];
-      }
+    /**
+     * Clears whisperer value
+     */
+    async setProcessing(status) {
+        this.processing = status;
     }
-  }
-  onKeyUpHandler(e) {
-    const event = e.detail.originalEvent;
-    e.stopPropagation();
-    event.stopPropagation();
-    if (event.keyCode === 38)
-      this.onArrowUp();
-    else if (event.keyCode === 40)
-      this.onArrowDown();
-    else if (event.keyCode === 13) {
-      e.preventDefault();
-      event.preventDefault();
-      this.onSelectHandler(e);
+    /**
+     * Set a custom asynchronous function for the whisperer
+     */
+    async setSearchCallback(callback) {
+        this.searchCallback = callback;
     }
-  }
-  onKeyDownHandler(e) {
-    const event = e.detail.originalEvent;
-    e.stopPropagation();
-    event.stopPropagation();
-    if (event.keyCode === 13) {
-      e.preventDefault();
-      event.preventDefault();
+    /**
+     * Setting a custom whisper result template
+     * @param callback
+     */
+    async setTemplateResolver(callback) {
+        this.templateResolver = callback;
     }
-  }
-  /**
-   * Focus main input element
-   */
-  async setFocus(options) {
-    return this.inputRef.focus(options);
-  }
-  /**
-   * Blur main input element
-   */
-  async setBlur() {
-    return this.inputRef.blur();
-  }
-  /**
-   * Set options for list
-   */
-  async setOptions(options) {
-    this.list = Array.isArray(options) ? options : [];
-    this.arrowCounter = -1;
-  }
-  /**
-   * Clears whisperer value
-   */
-  async clearValue() {
-    this.value = '';
-    this.inputRef.value = '';
-    await this.inputRef.clearValue();
-  }
-  /**
-   * Clears whisperer value
-   */
-  async setProcessing(status) {
-    this.processing = status;
-  }
-  /**
-   * 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;
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "variant": ["validateVariant"],
-    "size": ["validateSize"],
-    "options": ["watchOptions"]
-  }; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "variant": ["validateVariant"],
+        "size": ["validateSize"],
+        "options": ["watchOptions"]
+    }; }
 };
-GovFormAutocomplete.style = govFormAutocompleteCss;
+GovFormAutocomplete.style = GovFormAutocompleteStyle0;
 
 exports.gov_form_autocomplete = GovFormAutocomplete;