@patternfly/pfe-autocomplete - npm Package Compare versions

Comparing version 1.0.0-prerelease.56 to 1.0.0

dist/pfe-autocomplete.js

 import PFElement from '../../pfelement/dist/pfelement.js';
 
 /*!
- * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.55
+ * PatternFly Elements: PfeAutocomplete 1.0.0
  * @license
@@ -39,10 +39,13 @@ * Copyright 2020 Red Hat, Inc.
 class PfeAutocomplete extends PFElement {
+
+  // Injected at build-time
   static get version() {
-    return "1.0.0-prerelease.55";
+    return "1.0.0";
   }
 
+  // Injected at build-time
   get html() {
-    return `<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}
-/*# sourceMappingURL=pfe-autocomplete.min.css.map */
-</style><div id="input-box-wrapper">
+    return `
+<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>
+<div id="input-box-wrapper">
     <slot></slot>
@@ -88,9 +91,13 @@
 
-  static get properties() {
+  // @TODO: Deprecating in 1.0 release
+  // Injected at build-time
+  static get schemaProperties() {
     return {"debounce_timer":{"title":"Debounce","description":"The amount of time that should pass before the next API call is made","type":"string","prefixed":false},"init_value":{"title":"Initial value","description":"An initial value to show in the input field","type":"string","prefixed":false},"is_disabled":{"title":"Is disabled","description":"Disable the input","type":"boolean","prefixed":false}};
   }
 
+  // Injected at build-time
   static get slots() {
     return {"content":{"title":"Content","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"input"}]},"required":true}};
   }
+
   static get tag() {
@@ -112,2 +119,33 @@ return "pfe-autocomplete";
 
+  static get properties() {
+    return {
+      initValue: {
+        title: "Initial Value",
+        type: String,
+        observer: "_initValueChanged"
+      },
+      loading: {
+        title: "Loading",
+        type: Boolean,
+        default: false,
+        observer: "_loadingChanged"
+      },
+      isDisabled: {
+        title: "Is disabled",
+        type: Boolean,
+        default: false,
+        observer: "_isDisabledChanged"
+      },
+      debounce: {
+        title: "Debounce",
+        type: Number,
+        default: 300
+      },
+      selectedValue: {
+        title: "Selected value",
+        type: String
+      }
+    };
+  }
+
   static get events() {
@@ -128,6 +166,3 @@ return {
     this._slot = this.shadowRoot.querySelector("slot");
-    this._slot.addEventListener(
-      PfeAutocomplete.events.slotchange,
-      this._slotchangeHandler
-    );
+    this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);
   }
@@ -138,6 +173,4 @@
 
-    this.loading = false;
-    this.debounce = this.debounce || 300;
-    this._ariaAnnounceTemplate =
-      "There are ${numOptions} suggestions. Use the up and down arrows to browse.";
+    // @TODO: Confirm this is translatable
+    this._ariaAnnounceTemplate = "There are ${numOptions} suggestions. Use the up and down arrows to browse.";
 
@@ -160,27 +193,14 @@ // clear button
     // these two events, fire search
-    this.addEventListener(
-      PfeAutocomplete.events.search,
-      this._closeDroplist.bind(this)
-    );
-    this.addEventListener(
-      PfeAutocomplete.events.select,
-      this._optionSelected.bind(this)
-    );
+    this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this));
+    this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this));
   }
 
   disconnectedCallback() {
+    super.disconnectedCallback();
+
     this.removeEventListener("keyup", this._inputKeyUp);
 
-    this.removeEventListener(
-      PfeAutocomplete.events.search,
-      this._closeDroplist
-    );
-    this.removeEventListener(
-      PfeAutocomplete.events.select,
-      this._optionSelected
-    );
-    this._slot.removeEventListener(
-      PfeAutocomplete.events.slotchange,
-      this._slotchangeHandler
-    );
+    this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist);
+    this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected);
+    this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);
     if (this._input) {
@@ -195,9 +215,3 @@ this._input.removeEventListener("input", this._inputChanged);
 
-  static get observedAttributes() {
-    return ["init-value", "loading", "is-disabled"];
-  }
-
-  attributeChangedCallback(attr, oldVal, newVal) {
-    super.attributeChangedCallback();
-
+  _initValueChanged(oldVal, newVal) {
     let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
@@ -210,88 +224,46 @@ let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);
 
-    switch (attr) {
-      case "loading":
-        if (!this.loading || _input.value === "") {
-          this.shadowRoot.querySelector(".loading").setAttribute("hidden", "");
-        } else {
-          this.shadowRoot.querySelector(".loading").removeAttribute("hidden");
-        }
-        break;
-
-      case "init-value":
-        if (this["init-value"] !== newVal) {
-          // set inputbox and buttons in the inner component
-          _input.value = newVal;
-          if (newVal !== "" && !this.isDisabled) {
-            _searchBtn.removeAttribute("disabled");
-            _clearBtn.removeAttribute("hidden");
-          } else {
-            _searchBtn.setAttribute("disabled", "");
-            _clearBtn.setAttribute("hidden", "");
-          }
-        }
-        break;
-
-      case "is-disabled":
-        if (this.isDisabled) {
-          _clearBtn.setAttribute("disabled", "");
-          _searchBtn.setAttribute("disabled", "");
-          _input.setAttribute("disabled", "");
-        } else {
-          _clearBtn.removeAttribute("disabled");
-          _searchBtn.removeAttribute("disabled");
-          _input.removeAttribute("disabled");
-        }
-        break;
+    if (this["init-value"] !== newVal) {
+      // set inputbox and buttons in the inner component
+      _input.value = newVal;
+      if (newVal !== "" && !this.isDisabled) {
+        _searchBtn.removeAttribute("disabled");
+        _clearBtn.removeAttribute("hidden");
+      } else {
+        _searchBtn.setAttribute("disabled", "");
+        _clearBtn.setAttribute("hidden", "");
+      }
     }
   }
 
-  get selectedValue() {
-    return this.getAttribute("selected-value");
-  }
+  _loadingChanged() {
+    let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
+    let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);
+    let _input = slotElems[0];
 
-  set selectedValue(val) {
-    this.setAttribute("selected-value", val);
-  }
-
-  set isDisabled(value) {
-    if (value) {
-      this.setAttribute("is-disabled", "");
+    if (!this.loading || _input.value === "") {
+      this.shadowRoot.querySelector(".loading").setAttribute("hidden", "");
     } else {
-      this.removeAttribute("is-disabled");
+      this.shadowRoot.querySelector(".loading").removeAttribute("hidden");
     }
   }
 
-  get isDisabled() {
-    return this.hasAttribute("is-disabled");
-  }
+  _isDisabledChanged() {
+    let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
+    let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);
+    let _input = slotElems[0];
 
-  set loading(value) {
-    const loading = Boolean(value);
-    if (loading) {
-      this.setAttribute("loading", "");
+    let _clearBtn = this.shadowRoot.querySelector(".clear-search");
+    let _searchBtn = this.shadowRoot.querySelector(".search-button");
+
+    if (this.isDisabled) {
+      _clearBtn.setAttribute("disabled", "");
+      _searchBtn.setAttribute("disabled", "");
+      _input.setAttribute("disabled", "");
     } else {
-      this.removeAttribute("loading");
+      _clearBtn.removeAttribute("disabled");
+      _searchBtn.removeAttribute("disabled");
+      _input.removeAttribute("disabled");
     }
   }
 
-  get loading() {
-    return this.hasAttribute("loading");
-  }
-
-  get initValue() {
-    return this.getAttribute("init-value");
-  }
-
-  set initValue(val) {
-    this.setAttribute("init-value", val);
-  }
-
-  get debounce() {
-    return this.getAttribute("debounce");
-  }
-
-  set debounce(val) {
-    this.setAttribute("debounce", val);
-  }
-
   _slotchangeHandler() {
@@ -303,5 +275,3 @@ // input box
     if (slotElems.length === 0) {
-      console.error(
-        `${PfeAutocomplete.tag}: There must be a input tag in the light DOM`
-      );
+      console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`);
 
@@ -314,5 +284,3 @@ return;
     if (this._input.tagName.toLowerCase() !== "input") {
-      console.error(
-        `${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`
-      );
+      console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`);
 
@@ -339,4 +307,3 @@ return;
 
-    this._dropdown._ariaAnnounceTemplate =
-      this.getAttribute("aria-announce-template") || this._ariaAnnounceTemplate;
+    this._dropdown._ariaAnnounceTemplate = this.getAttribute("aria-announce-template") || this._ariaAnnounceTemplate;
   }
@@ -386,3 +353,3 @@
     this.activeIndex = null;
-    this._dropdown.setAttribute("open", true);
+    this._dropdown.open = true;
     this._dropdown.setAttribute("active-index", null);
@@ -416,6 +383,3 @@ this.emitEvent(PfeAutocomplete.events.optionsShown, {
 
-    this.autocompleteRequest(
-      { query: input },
-      this._autocompleteCallback.bind(this)
-    );
+    this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this));
   }
@@ -438,5 +402,3 @@
     if (activeIndex === null || activeIndex === "null") return;
-    return this._dropdown.shadowRoot.querySelector(
-      "li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")"
-    ).innerHTML;
+    return this._dropdown.shadowRoot.querySelector("li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")").innerHTML;
   }
@@ -466,6 +428,3 @@
 
-      activeIndex =
-        activeIndex === null || activeIndex === "null"
-          ? optionsLength
-          : parseInt(activeIndex, 10);
+      activeIndex = activeIndex === null || activeIndex === "null" ? optionsLength : parseInt(activeIndex, 10);
 
@@ -484,6 +443,3 @@ activeIndex -= 1;
 
-      activeIndex =
-        activeIndex === null || activeIndex === "null"
-          ? -1
-          : parseInt(activeIndex, 10);
+      activeIndex = activeIndex === null || activeIndex === "null" ? -1 : parseInt(activeIndex, 10);
       activeIndex += 1;
@@ -512,6 +468,3 @@
     if (activeIndex !== null && activeIndex !== "null") {
-      this._input.setAttribute(
-        "aria-activedescendant",
-        "option-" + activeIndex
-      );
+      this._input.setAttribute("aria-activedescendant", "option-" + activeIndex);
     } else {
@@ -537,10 +490,13 @@ this._input.setAttribute("aria-activedescendant", "");
 class PfeSearchDroplist extends PFElement {
+
+  // Injected at build-time
   static get version() {
-    return "1.0.0-prerelease.55";
+    return "1.0.0";
   }
 
+  // Injected at build-time
   get html() {
-    return `<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}
-/*# sourceMappingURL=pfe-search-droplist.min.css.map */
-</style><div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>
+    return `
+<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>
+<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>
 <div class="droplist">
@@ -551,2 +507,3 @@ <ul role="listbox" tabindex="-1">
   }
+
   static get tag() {
@@ -564,2 +521,21 @@ return "pfe-search-droplist";
 
+  static get properties() {
+    return {
+      open: {
+        title: "Open",
+        type: Boolean
+      },
+      reflow: {
+        title: "Reflow",
+        type: Boolean,
+        observer: "_renderOptions"
+      },
+      activeIndex: {
+        title: "Active index",
+        type: Number,
+        observer: "_activeIndexChanged"
+      }
+    };
+  }
+
   constructor() {
@@ -572,5 +548,3 @@ super(PfeSearchDroplist);
 
-    this._ariaAnnounce = this.shadowRoot.querySelector(
-      ".suggestions-aria-help"
-    );
+    this._ariaAnnounce = this.shadowRoot.querySelector(".suggestions-aria-help");
 
@@ -583,2 +557,3 @@ this.activeIndex = null;
   disconnectedCallback() {
+    super.disconnectedCallback();
     this._ul.removeEventListener("mousedown", this._optionSelected);
@@ -597,4 +572,2 @@ }
   _renderOptions() {
-    this.reflow = "";
-
     let options = this.data;
@@ -604,6 +577,3 @@ let ariaAnnounceText = "";
     if (this._ariaAnnounceTemplate) {
-      ariaAnnounceText = this._ariaAnnounceTemplate.replace(
-        "${numOptions}",
-        options.length
-      );
+      ariaAnnounceText = this._ariaAnnounceTemplate.replace("${numOptions}", options.length);
     }
@@ -621,30 +591,4 @@
 
-  static get observedAttributes() {
-    return ["open", "reflow", "active-index"];
-  }
-
-  attributeChangedCallback(attr, oldVal, newVal) {
-    super.attributeChangedCallback();
-
-    if (this[name] !== newVal) {
-      this[name] = newVal;
-    }
-
-    if (attr === "active-index" && oldVal !== newVal) {
-      this._activeIndexChanged();
-    }
-
-    if (attr === "reflow") {
-      this._renderOptions();
-    }
-  }
-
   _activeIndexChanged() {
-    if (
-      !this.data ||
-      this.data.length === 0 ||
-      this.activeIndex === null ||
-      this.activeIndex === "null"
-    )
-      return;
+    if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return;
 
@@ -657,5 +601,3 @@ // remove active class
     // add active class to selected option
-    let activeOption = this._ul.querySelector(
-      "li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")"
-    );
+    let activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
 
@@ -667,45 +609,5 @@ activeOption.classList.add("active");
     let activeOptionHeight = activeOption.offsetHeight;
-    activeOptionHeight += parseInt(
-      window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"),
-      10
-    );
-    ulWrapper.scrollTop =
-      activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
+    activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"), 10);
+    ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
   }
-
-  get open() {
-    return this.hasAttribute("open");
-  }
-
-  set open(val) {
-    val = Boolean(val);
-
-    if (val) {
-      this.setAttribute("open", "");
-    } else {
-      this.removeAttribute("open");
-    }
-  }
-
-  get activeIndex() {
-    return this.getAttribute("active-index");
-  }
-
-  set activeIndex(val) {
-    this.setAttribute("active-index", val);
-  }
-
-  get reflow() {
-    return this.hasAttribute("reflow");
-  }
-
-  set reflow(val) {
-    val = Boolean(val);
-
-    if (val) {
-      this.setAttribute("reflow", "");
-    } else {
-      this.removeAttribute("reflow");
-    }
-  }
 }
@@ -712,0 +614,0 @@

dist/pfe-autocomplete.min.js

 import e from"../../pfelement/dist/pfelement.min.js";
 /*!
- * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.55
+ * PatternFly Elements: PfeAutocomplete 1.0.0
  * @license
@@ -25,3 +25,3 @@ * Copyright 2020 Red Hat, Inc.
  * 
-*/const t={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class o extends e{static get version(){return"1.0.0-prerelease.55"}get html(){return'<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}\n/*# sourceMappingURL=pfe-autocomplete.min.css.map */\n</style><div id="input-box-wrapper">\n    <slot></slot>\n\n    <span class="loading" aria-hidden="true" hidden>\n        <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n          <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>\n          <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z">\n          <animateTransform attributeType="xml"\n            attributeName="transform"\n            type="rotate"\n            from="0 20 20"\n            to="360 20 20"\n            dur="0.5s"\n            repeatCount="indefinite"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class="clear-search" type="button" aria-label="clear search query" hidden>\n      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n        <line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n        <line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n      </svg>\n    </button>\n\n    <button class="search-button" type="button" aria-label="Search" disabled>\n      <svg viewBox="0 0 512 512">\n        <path d="M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id="dropdown"></pfe-search-droplist>'}static get properties(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1}}}static get slots(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}static get tag(){return"pfe-autocomplete"}get schemaUrl(){return"pfe-autocomplete.json"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}static get events(){return{search:`${this.tag}:search-event`,select:`${this.tag}:option-selected`,optionsShown:`${this.tag}:options-shown`,slotchange:"slotchange"}}constructor(){super(o),this._slotchangeHandler=this._slotchangeHandler.bind(this),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener(o.events.slotchange,this._slotchangeHandler)}connectedCallback(){super.connectedCallback(),this.loading=!1,this.debounce=this.debounce||300,this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener(o.events.search,this._closeDroplist.bind(this)),this.addEventListener(o.events.select,this._optionSelected.bind(this))}disconnectedCallback(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(o.events.search,this._closeDroplist),this.removeEventListener(o.events.select,this._optionSelected),this._slot.removeEventListener(o.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}static get observedAttributes(){return["init-value","loading","is-disabled"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback();let o=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE)[0],r=this.shadowRoot.querySelector(".clear-search"),s=this.shadowRoot.querySelector(".search-button");switch(e){case"loading":this.loading&&""!==o.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(o.value=i,""===i||this.isDisabled?(s.setAttribute("disabled",""),r.setAttribute("hidden","")):(s.removeAttribute("disabled"),r.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(r.setAttribute("disabled",""),s.setAttribute("disabled",""),o.setAttribute("disabled","")):(r.removeAttribute("disabled"),s.removeAttribute("disabled"),o.removeAttribute("disabled"))}}get selectedValue(){return this.getAttribute("selected-value")}set selectedValue(e){this.setAttribute("selected-value",e)}set isDisabled(e){e?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")}get isDisabled(){return this.hasAttribute("is-disabled")}set loading(e){Boolean(e)?this.setAttribute("loading",""):this.removeAttribute("loading")}get loading(){return this.hasAttribute("loading")}get initValue(){return this.getAttribute("init-value")}set initValue(e){this.setAttribute("init-value",e)}get debounce(){return this.getAttribute("debounce")}set debounce(e){this.setAttribute("debounce",e)}_slotchangeHandler(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE);0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate):console.error(`${o.tag}: The only child in the light DOM must be an input tag`)):console.error(`${o.tag}: There must be a input tag in the light DOM`)}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===i&&(i=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),i=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}_openDroplist(){this.activeIndex=null,this._dropdown.setAttribute("open",!0),this._dropdown.setAttribute("active-index",null),this.emitEvent(o.events.optionsShown,{composed:!0})}_optionSelected(e){let t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}_doSearch(e){this.emitEvent(o.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}_sendAutocompleteRequest(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}_autocompleteCallback(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}_inputKeyUp(e){let i=e.keyCode;if(0===this._dropdown.data.length&&i!==t.DOWN&&i!==t.UP&&i!==t.ENTER&&i!==t.ESC)return;let r=this._dropdown.activeIndex,s=this._dropdown.data.length;if(i==t.ESC)this._closeDroplist();else if(i===t.UP){if(!this._dropdown.open)return;r=null===r||"null"===r?s:parseInt(r,10),(r-=1)<0&&(r=s-1),this._input.value=this._activeOption(r)}else if(i===t.DOWN){if(!this._dropdown.open)return;r=null===r||"null"===r?-1:parseInt(r,10),(r+=1)>s-1&&(r=0),this._input.value=this._activeOption(r)}else if(i===t.ENTER){if(this._activeOption(r))return void this.emitEvent(o.events.select,{detail:{optionValue:this._activeOption(r)},composed:!0});let e=this._input.value;return void this._doSearch(e)}null!==r&&"null"!==r?this._input.setAttribute("aria-activedescendant","option-"+r):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=r,this._dropdown.activeIndex=r}}class r extends e{static get version(){return"1.0.0-prerelease.55"}get html(){return'<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}\n/*# sourceMappingURL=pfe-search-droplist.min.css.map */\n</style><div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n  <ul role="listbox" tabindex="-1">\n  </ul>\n</div>'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(o.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){this.reflow="";let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${e.map((e,t)=>`<li id="option-${t}" role="option" tabindex="-1" value="${e}">${e}</li>`).join("")}`}static get observedAttributes(){return["open","reflow","active-index"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback(),this[name]!==i&&(this[name]=i),"active-index"===e&&t!==i&&this._activeIndexChanged(),"reflow"===e&&this._renderOptions()}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");let e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e.classList.add("active");let t=this.shadowRoot.querySelector(".droplist"),i=e.offsetHeight;i+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+i}get open(){return this.hasAttribute("open")}set open(e){(e=Boolean(e))?this.setAttribute("open",""):this.removeAttribute("open")}get activeIndex(){return this.getAttribute("active-index")}set activeIndex(e){this.setAttribute("active-index",e)}get reflow(){return this.hasAttribute("reflow")}set reflow(e){(e=Boolean(e))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}e.create(r),e.create(o);export default o;
+*/const t={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class o extends e{static get version(){return"1.0.0"}get html(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="input-box-wrapper">\n    <slot></slot>\n\n    <span class="loading" aria-hidden="true" hidden>\n        <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n          <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>\n          <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z">\n          <animateTransform attributeType="xml"\n            attributeName="transform"\n            type="rotate"\n            from="0 20 20"\n            to="360 20 20"\n            dur="0.5s"\n            repeatCount="indefinite"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class="clear-search" type="button" aria-label="clear search query" hidden>\n      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n        <line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n        <line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n      </svg>\n    </button>\n\n    <button class="search-button" type="button" aria-label="Search" disabled>\n      <svg viewBox="0 0 512 512">\n        <path d="M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id="dropdown"></pfe-search-droplist>'}static get schemaProperties(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1}}}static get slots(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}static get tag(){return"pfe-autocomplete"}get schemaUrl(){return"pfe-autocomplete.json"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}static get properties(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String}}}static get events(){return{search:`${this.tag}:search-event`,select:`${this.tag}:option-selected`,optionsShown:`${this.tag}:options-shown`,slotchange:"slotchange"}}constructor(){super(o),this._slotchangeHandler=this._slotchangeHandler.bind(this),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener(o.events.slotchange,this._slotchangeHandler)}connectedCallback(){super.connectedCallback(),this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener(o.events.search,this._closeDroplist.bind(this)),this.addEventListener(o.events.select,this._optionSelected.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(o.events.search,this._closeDroplist),this.removeEventListener(o.events.select,this._optionSelected),this._slot.removeEventListener(o.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}_initValueChanged(e,t){let i=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE)[0],o=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");this["init-value"]!==t&&(i.value=t,""===t||this.isDisabled?(r.setAttribute("disabled",""),o.setAttribute("hidden","")):(r.removeAttribute("disabled"),o.removeAttribute("hidden")))}_loadingChanged(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE)[0];this.loading&&""!==e.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}_isDisabledChanged(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE)[0],t=this.shadowRoot.querySelector(".clear-search"),i=this.shadowRoot.querySelector(".search-button");this.isDisabled?(t.setAttribute("disabled",""),i.setAttribute("disabled",""),e.setAttribute("disabled","")):(t.removeAttribute("disabled"),i.removeAttribute("disabled"),e.removeAttribute("disabled"))}_slotchangeHandler(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE);0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate):console.error(`${o.tag}: The only child in the light DOM must be an input tag`)):console.error(`${o.tag}: There must be a input tag in the light DOM`)}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===i&&(i=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),i=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}_openDroplist(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(o.events.optionsShown,{composed:!0})}_optionSelected(e){let t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}_doSearch(e){this.emitEvent(o.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}_sendAutocompleteRequest(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}_autocompleteCallback(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}_inputKeyUp(e){let i=e.keyCode;if(0===this._dropdown.data.length&&i!==t.DOWN&&i!==t.UP&&i!==t.ENTER&&i!==t.ESC)return;let r=this._dropdown.activeIndex,a=this._dropdown.data.length;if(i==t.ESC)this._closeDroplist();else if(i===t.UP){if(!this._dropdown.open)return;r=null===r||"null"===r?a:parseInt(r,10),(r-=1)<0&&(r=a-1),this._input.value=this._activeOption(r)}else if(i===t.DOWN){if(!this._dropdown.open)return;r=null===r||"null"===r?-1:parseInt(r,10),(r+=1)>a-1&&(r=0),this._input.value=this._activeOption(r)}else if(i===t.ENTER){if(this._activeOption(r))return void this.emitEvent(o.events.select,{detail:{optionValue:this._activeOption(r)},composed:!0});let e=this._input.value;return void this._doSearch(e)}null!==r&&"null"!==r?this._input.setAttribute("aria-activedescendant","option-"+r):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=r,this._dropdown.activeIndex=r}}class r extends e{static get version(){return"1.0.0"}get html(){return'\n<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n  <ul role="listbox" tabindex="-1">\n  </ul>\n</div>'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}static get properties(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(o.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${e.map((e,t)=>`<li id="option-${t}" role="option" tabindex="-1" value="${e}">${e}</li>`).join("")}`}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");let e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e.classList.add("active");let t=this.shadowRoot.querySelector(".droplist"),i=e.offsetHeight;i+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+i}}e.create(r),e.create(o);export default o;
 //# sourceMappingURL=pfe-autocomplete.min.js.map

dist/pfe-autocomplete.umd.js

@@ -83,3 +83,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.55
+   * PatternFly Elements: PfeAutocomplete 1.0.0
    * @license
@@ -122,5 +122,12 @@ * Copyright 2020 Red Hat, Inc.
       key: "html",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}\n/*# sourceMappingURL=pfe-autocomplete.min.css.map */\n</style><div id=\"input-box-wrapper\">\n    <slot></slot>\n\n    <span class=\"loading\" aria-hidden=\"true\" hidden>\n        <svg viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\">\n          <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\"/>\n          <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z\">\n          <animateTransform attributeType=\"xml\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 20 20\"\n            to=\"360 20 20\"\n            dur=\"0.5s\"\n            repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class=\"clear-search\" type=\"button\" aria-label=\"clear search query\" hidden>\n      <svg viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\">\n        <line x1=\"5\" y1=\"5\" x2=\"35\" y2=\"35\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-miterlimit=\"10\"></line>\n        <line x1=\"35\" y1=\"5\" x2=\"5\" y2=\"35\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-miterlimit=\"10\"></line>\n      </svg>\n    </button>\n\n    <button class=\"search-button\" type=\"button\" aria-label=\"Search\" disabled>\n      <svg viewBox=\"0 0 512 512\">\n        <path d=\"M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z\"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id=\"dropdown\"></pfe-search-droplist>";
+        return "\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id=\"input-box-wrapper\">\n    <slot></slot>\n\n    <span class=\"loading\" aria-hidden=\"true\" hidden>\n        <svg viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\">\n          <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\"/>\n          <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z\">\n          <animateTransform attributeType=\"xml\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from=\"0 20 20\"\n            to=\"360 20 20\"\n            dur=\"0.5s\"\n            repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class=\"clear-search\" type=\"button\" aria-label=\"clear search query\" hidden>\n      <svg viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\">\n        <line x1=\"5\" y1=\"5\" x2=\"35\" y2=\"35\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-miterlimit=\"10\"></line>\n        <line x1=\"35\" y1=\"5\" x2=\"5\" y2=\"35\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-miterlimit=\"10\"></line>\n      </svg>\n    </button>\n\n    <button class=\"search-button\" type=\"button\" aria-label=\"Search\" disabled>\n      <svg viewBox=\"0 0 512 512\">\n        <path d=\"M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z\"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id=\"dropdown\"></pfe-search-droplist>";
       }
+
+      // @TODO: Deprecating in 1.0 release
+      // Injected at build-time
+
     }, {
@@ -143,10 +150,16 @@ key: "schemaUrl",
       key: "version",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "1.0.0-prerelease.55";
+        return "1.0.0";
       }
     }, {
-      key: "properties",
+      key: "schemaProperties",
       get: function get$$1() {
         return { "debounce_timer": { "title": "Debounce", "description": "The amount of time that should pass before the next API call is made", "type": "string", "prefixed": false }, "init_value": { "title": "Initial value", "description": "An initial value to show in the input field", "type": "string", "prefixed": false }, "is_disabled": { "title": "Is disabled", "description": "Disable the input", "type": "boolean", "prefixed": false } };
       }
+
+      // Injected at build-time
+
     }, {
@@ -163,2 +176,34 @@ key: "slots",
     }, {
+      key: "properties",
+      get: function get$$1() {
+        return {
+          initValue: {
+            title: "Initial Value",
+            type: String,
+            observer: "_initValueChanged"
+          },
+          loading: {
+            title: "Loading",
+            type: Boolean,
+            default: false,
+            observer: "_loadingChanged"
+          },
+          isDisabled: {
+            title: "Is disabled",
+            type: Boolean,
+            default: false,
+            observer: "_isDisabledChanged"
+          },
+          debounce: {
+            title: "Debounce",
+            type: Number,
+            default: 300
+          },
+          selectedValue: {
+            title: "Selected value",
+            type: String
+          }
+        };
+      }
+    }, {
       key: "events",
@@ -192,4 +237,3 @@ get: function get$$1() {
 
-        this.loading = false;
-        this.debounce = this.debounce || 300;
+        // @TODO: Confirm this is translatable
         this._ariaAnnounceTemplate = "There are ${numOptions} suggestions. Use the up and down arrows to browse.";
@@ -219,2 +263,4 @@
       value: function disconnectedCallback() {
+        get(PfeAutocomplete.prototype.__proto__ || Object.getPrototypeOf(PfeAutocomplete.prototype), "disconnectedCallback", this).call(this);
+
         this.removeEventListener("keyup", this._inputKeyUp);
@@ -234,6 +280,4 @@
     }, {
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback(attr, oldVal, newVal) {
-        get(PfeAutocomplete.prototype.__proto__ || Object.getPrototypeOf(PfeAutocomplete.prototype), "attributeChangedCallback", this).call(this);
-
+      key: "_initValueChanged",
+      value: function _initValueChanged(oldVal, newVal) {
         var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
@@ -248,36 +292,49 @@ var slotElems = slotNodes.filter(function (n) {
 
-        switch (attr) {
-          case "loading":
-            if (!this.loading || _input.value === "") {
-              this.shadowRoot.querySelector(".loading").setAttribute("hidden", "");
-            } else {
-              this.shadowRoot.querySelector(".loading").removeAttribute("hidden");
-            }
-            break;
+        if (this["init-value"] !== newVal) {
+          // set inputbox and buttons in the inner component
+          _input.value = newVal;
+          if (newVal !== "" && !this.isDisabled) {
+            _searchBtn.removeAttribute("disabled");
+            _clearBtn.removeAttribute("hidden");
+          } else {
+            _searchBtn.setAttribute("disabled", "");
+            _clearBtn.setAttribute("hidden", "");
+          }
+        }
+      }
+    }, {
+      key: "_loadingChanged",
+      value: function _loadingChanged() {
+        var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
+        var slotElems = slotNodes.filter(function (n) {
+          return n.nodeType === Node.ELEMENT_NODE;
+        });
+        var _input = slotElems[0];
 
-          case "init-value":
-            if (this["init-value"] !== newVal) {
-              // set inputbox and buttons in the inner component
-              _input.value = newVal;
-              if (newVal !== "" && !this.isDisabled) {
-                _searchBtn.removeAttribute("disabled");
-                _clearBtn.removeAttribute("hidden");
-              } else {
-                _searchBtn.setAttribute("disabled", "");
-                _clearBtn.setAttribute("hidden", "");
-              }
-            }
-            break;
+        if (!this.loading || _input.value === "") {
+          this.shadowRoot.querySelector(".loading").setAttribute("hidden", "");
+        } else {
+          this.shadowRoot.querySelector(".loading").removeAttribute("hidden");
+        }
+      }
+    }, {
+      key: "_isDisabledChanged",
+      value: function _isDisabledChanged() {
+        var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes();
+        var slotElems = slotNodes.filter(function (n) {
+          return n.nodeType === Node.ELEMENT_NODE;
+        });
+        var _input = slotElems[0];
 
-          case "is-disabled":
-            if (this.isDisabled) {
-              _clearBtn.setAttribute("disabled", "");
-              _searchBtn.setAttribute("disabled", "");
-              _input.setAttribute("disabled", "");
-            } else {
-              _clearBtn.removeAttribute("disabled");
-              _searchBtn.removeAttribute("disabled");
-              _input.removeAttribute("disabled");
-            }
-            break;
+        var _clearBtn = this.shadowRoot.querySelector(".clear-search");
+        var _searchBtn = this.shadowRoot.querySelector(".search-button");
+
+        if (this.isDisabled) {
+          _clearBtn.setAttribute("disabled", "");
+          _searchBtn.setAttribute("disabled", "");
+          _input.setAttribute("disabled", "");
+        } else {
+          _clearBtn.removeAttribute("disabled");
+          _searchBtn.removeAttribute("disabled");
+          _input.removeAttribute("disabled");
         }
@@ -377,3 +434,3 @@ }
         this.activeIndex = null;
-        this._dropdown.setAttribute("open", true);
+        this._dropdown.open = true;
         this._dropdown.setAttribute("active-index", null);
@@ -496,56 +553,2 @@ this.emitEvent(PfeAutocomplete.events.optionsShown, {
       }
-    }, {
-      key: "selectedValue",
-      get: function get$$1() {
-        return this.getAttribute("selected-value");
-      },
-      set: function set$$1(val) {
-        this.setAttribute("selected-value", val);
-      }
-    }, {
-      key: "isDisabled",
-      set: function set$$1(value) {
-        if (value) {
-          this.setAttribute("is-disabled", "");
-        } else {
-          this.removeAttribute("is-disabled");
-        }
-      },
-      get: function get$$1() {
-        return this.hasAttribute("is-disabled");
-      }
-    }, {
-      key: "loading",
-      set: function set$$1(value) {
-        var loading = Boolean(value);
-        if (loading) {
-          this.setAttribute("loading", "");
-        } else {
-          this.removeAttribute("loading");
-        }
-      },
-      get: function get$$1() {
-        return this.hasAttribute("loading");
-      }
-    }, {
-      key: "initValue",
-      get: function get$$1() {
-        return this.getAttribute("init-value");
-      },
-      set: function set$$1(val) {
-        this.setAttribute("init-value", val);
-      }
-    }, {
-      key: "debounce",
-      get: function get$$1() {
-        return this.getAttribute("debounce");
-      },
-      set: function set$$1(val) {
-        this.setAttribute("debounce", val);
-      }
-    }], [{
-      key: "observedAttributes",
-      get: function get$$1() {
-        return ["init-value", "loading", "is-disabled"];
-      }
     }]);
@@ -571,4 +574,7 @@ return PfeAutocomplete;
       key: "html",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}\n/*# sourceMappingURL=pfe-search-droplist.min.css.map */\n</style><div class=\"suggestions-aria-help sr-only\" aria-hidden=\"false\" role=\"status\"></div>\n<div class=\"droplist\">\n  <ul role=\"listbox\" tabindex=\"-1\">\n  </ul>\n</div>";
+        return "\n<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class=\"suggestions-aria-help sr-only\" aria-hidden=\"false\" role=\"status\"></div>\n<div class=\"droplist\">\n  <ul role=\"listbox\" tabindex=\"-1\">\n  </ul>\n</div>";
       }
@@ -587,4 +593,7 @@ }, {
       key: "version",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "1.0.0-prerelease.55";
+        return "1.0.0";
       }
@@ -596,2 +605,22 @@ }, {
       }
+    }, {
+      key: "properties",
+      get: function get$$1() {
+        return {
+          open: {
+            title: "Open",
+            type: Boolean
+          },
+          reflow: {
+            title: "Reflow",
+            type: Boolean,
+            observer: "_renderOptions"
+          },
+          activeIndex: {
+            title: "Active index",
+            type: Number,
+            observer: "_activeIndexChanged"
+          }
+        };
+      }
     }]);
@@ -618,2 +647,3 @@
       value: function disconnectedCallback() {
+        get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "disconnectedCallback", this).call(this);
         this._ul.removeEventListener("mousedown", this._optionSelected);
@@ -634,4 +664,2 @@ }
       value: function _renderOptions() {
-        this.reflow = "";
-
         var options = this.data;
@@ -652,19 +680,2 @@ var ariaAnnounceText = "";
     }, {
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback(attr, oldVal, newVal) {
-        get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "attributeChangedCallback", this).call(this);
-
-        if (this[name] !== newVal) {
-          this[name] = newVal;
-        }
-
-        if (attr === "active-index" && oldVal !== newVal) {
-          this._activeIndexChanged();
-        }
-
-        if (attr === "reflow") {
-          this._renderOptions();
-        }
-      }
-    }, {
       key: "_activeIndexChanged",
@@ -690,43 +701,2 @@ value: function _activeIndexChanged() {
       }
-    }, {
-      key: "open",
-      get: function get$$1() {
-        return this.hasAttribute("open");
-      },
-      set: function set$$1(val) {
-        val = Boolean(val);
-
-        if (val) {
-          this.setAttribute("open", "");
-        } else {
-          this.removeAttribute("open");
-        }
-      }
-    }, {
-      key: "activeIndex",
-      get: function get$$1() {
-        return this.getAttribute("active-index");
-      },
-      set: function set$$1(val) {
-        this.setAttribute("active-index", val);
-      }
-    }, {
-      key: "reflow",
-      get: function get$$1() {
-        return this.hasAttribute("reflow");
-      },
-      set: function set$$1(val) {
-        val = Boolean(val);
-
-        if (val) {
-          this.setAttribute("reflow", "");
-        } else {
-          this.removeAttribute("reflow");
-        }
-      }
-    }], [{
-      key: "observedAttributes",
-      get: function get$$1() {
-        return ["open", "reflow", "active-index"];
-      }
     }]);
@@ -733,0 +703,0 @@ return PfeSearchDroplist;

dist/pfe-autocomplete.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],t):e.PfeAutocomplete=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(e,t,i){return t&&o(e.prototype,t),i&&o(e,i),e};function o(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function a(e,t,i){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,t);if(void 0===o){var n=Object.getPrototypeOf(e);return null===n?void 0:a(n,t,i)}if("value"in o)return o.value;var r=o.get;return void 0!==r?r.call(i):void 0}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=13,l=40,d=38,c=27,u=!1,h=(n(p,e),i(p,[{key:"html",get:function(){return'<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}\n/*# sourceMappingURL=pfe-autocomplete.min.css.map */\n</style><div id="input-box-wrapper">\n    <slot></slot>\n\n    <span class="loading" aria-hidden="true" hidden>\n        <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n          <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>\n          <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z">\n          <animateTransform attributeType="xml"\n            attributeName="transform"\n            type="rotate"\n            from="0 20 20"\n            to="360 20 20"\n            dur="0.5s"\n            repeatCount="indefinite"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class="clear-search" type="button" aria-label="clear search query" hidden>\n      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n        <line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n        <line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n      </svg>\n    </button>\n\n    <button class="search-button" type="button" aria-label="Search" disabled>\n      <svg viewBox="0 0 512 512">\n        <path d="M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id="dropdown"></pfe-search-droplist>'}},{key:"schemaUrl",get:function(){return"pfe-autocomplete.json"}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"properties",get:function(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1}}}},{key:"slots",get:function(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}},{key:"tag",get:function(){return"pfe-autocomplete"}},{key:"events",get:function(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}}]),i(p,[{key:"connectedCallback",value:function(){a(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.loading=!1,this.debounce=this.debounce||300,this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener(p.events.search,this._closeDroplist.bind(this)),this.addEventListener(p.events.select,this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(p.events.search,this._closeDroplist),this.removeEventListener(p.events.select,this._optionSelected),this._slot.removeEventListener(p.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}},{key:"attributeChangedCallback",value:function(e,t,i){a(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"attributeChangedCallback",this).call(this);var o=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE})[0],n=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");switch(e){case"loading":this.loading&&""!==o.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(""===(o.value=i)||this.isDisabled?(r.setAttribute("disabled",""),n.setAttribute("hidden","")):(r.removeAttribute("disabled"),n.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(n.setAttribute("disabled",""),r.setAttribute("disabled",""),o.setAttribute("disabled","")):(n.removeAttribute("disabled"),r.removeAttribute("disabled"),o.removeAttribute("disabled"))}}},{key:"_slotchangeHandler",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE});0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate):console.error(p.tag+": The only child in the light DOM must be an input tag")):console.error(p.tag+": There must be a input tag in the light DOM")}},{key:"_inputChanged",value:function(){var e=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===u&&(u=!0,window.setTimeout(function(){e._sendAutocompleteRequest(e._input.value),u=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}},{key:"_search",value:function(){this._doSearch(this._input.value)}},{key:"_closeDroplist",value:function(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.setAttribute("open",!0),this._dropdown.setAttribute("active-index",null),this.emitEvent(p.events.optionsShown,{composed:!0})}},{key:"_optionSelected",value:function(e){var t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}},{key:"_doSearch",value:function(e){this.emitEvent(p.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}},{key:"_sendAutocompleteRequest",value:function(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}},{key:"_reset",value:function(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}},{key:"_activeOption",value:function(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(e){var t=e.keyCode;if(0!==this._dropdown.data.length||t===l||t===d||t===s||t===c){var i=this._dropdown.activeIndex,o=this._dropdown.data.length;if(t==c)this._closeDroplist();else if(t===d){if(!this._dropdown.open)return;i=null===i||"null"===i?o:parseInt(i,10),--i<0&&(i=o-1),this._input.value=this._activeOption(i)}else if(t===l){if(!this._dropdown.open)return;i=null===i||"null"===i?-1:parseInt(i,10),o-1<(i+=1)&&(i=0),this._input.value=this._activeOption(i)}else if(t===s){if(this._activeOption(i))return void this.emitEvent(p.events.select,{detail:{optionValue:this._activeOption(i)},composed:!0});var n=this._input.value;return void this._doSearch(n)}null!==i&&"null"!==i?this._input.setAttribute("aria-activedescendant","option-"+i):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=i,this._dropdown.activeIndex=i}}},{key:"selectedValue",get:function(){return this.getAttribute("selected-value")},set:function(e){this.setAttribute("selected-value",e)}},{key:"isDisabled",set:function(e){e?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")},get:function(){return this.hasAttribute("is-disabled")}},{key:"loading",set:function(e){Boolean(e)?this.setAttribute("loading",""):this.removeAttribute("loading")},get:function(){return this.hasAttribute("loading")}},{key:"initValue",get:function(){return this.getAttribute("init-value")},set:function(e){this.setAttribute("init-value",e)}},{key:"debounce",get:function(){return this.getAttribute("debounce")},set:function(e){this.setAttribute("debounce",e)}}],[{key:"observedAttributes",get:function(){return["init-value","loading","is-disabled"]}}]),p);function p(){t(this,p);var e=r(this,(p.__proto__||Object.getPrototypeOf(p)).call(this,p));return e._slotchangeHandler=e._slotchangeHandler.bind(e),e._slot=e.shadowRoot.querySelector("slot"),e._slot.addEventListener(p.events.slotchange,e._slotchangeHandler),e}var f=(n(b,e),i(b,[{key:"html",get:function(){return'<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}\n/*# sourceMappingURL=pfe-search-droplist.min.css.map */\n</style><div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n  <ul role="listbox" tabindex="-1">\n  </ul>\n</div>'}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"tag",get:function(){return"pfe-search-droplist"}}]),i(b,[{key:"connectedCallback",value:function(){a(b.prototype.__proto__||Object.getPrototypeOf(b.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(h.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){this.reflow="";var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'<li id="option-'+t+'" role="option" tabindex="-1" value="'+e+'">'+e+"</li>"}).join("")}},{key:"attributeChangedCallback",value:function(e,t,i){a(b.prototype.__proto__||Object.getPrototypeOf(b.prototype),"attributeChangedCallback",this).call(this),this[name]!==i&&(this[name]=i),"active-index"===e&&t!==i&&this._activeIndexChanged(),"reflow"===e&&this._renderOptions()}},{key:"_activeIndexChanged",value:function(){var e,t,i;this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex&&(this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active"),(e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")")).classList.add("active"),t=this.shadowRoot.querySelector(".droplist"),i=e.offsetHeight,i+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+i)}},{key:"open",get:function(){return this.hasAttribute("open")},set:function(e){(e=Boolean(e))?this.setAttribute("open",""):this.removeAttribute("open")}},{key:"activeIndex",get:function(){return this.getAttribute("active-index")},set:function(e){this.setAttribute("active-index",e)}},{key:"reflow",get:function(){return this.hasAttribute("reflow")},set:function(e){(e=Boolean(e))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}],[{key:"observedAttributes",get:function(){return["open","reflow","active-index"]}}]),b);function b(){return t(this,b),r(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,b))}return e.create(f),e.create(h),h});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],t):e.PfeAutocomplete=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(e,t,o){return t&&i(e.prototype,t),o&&i(e,o),e};function i(e,t){for(var o=0;o<t.length;o++){var i=t[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,t,o){null===e&&(e=Function.prototype);var i=Object.getOwnPropertyDescriptor(e,t);if(void 0!==i){if("value"in i)return i.value;i=i.get;return void 0!==i?i.call(o):void 0}if(e=Object.getPrototypeOf(e),null!==e)return n(e,t,o)}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=13,l=40,d=38,c=27,p=!1,u=(r(h,e),o(h,[{key:"html",get:function(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif)}#input-box-wrapper{border-color:#0277bd;border-color:var(--pfe-theme--color--feedback--info,#0277bd)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:16px;font-size:var(--pfe-theme--font-size,16px);font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="input-box-wrapper">\n    <slot></slot>\n\n    <span class="loading" aria-hidden="true" hidden>\n        <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n          <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634\n          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>\n          <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0\n          C22.32,8.481,24.301,9.057,26.013,10.047z">\n          <animateTransform attributeType="xml"\n            attributeName="transform"\n            type="rotate"\n            from="0 20 20"\n            to="360 20 20"\n            dur="0.5s"\n            repeatCount="indefinite"/>\n          </path>\n        </svg>\n    </span>\n\n    <button class="clear-search" type="button" aria-label="clear search query" hidden>\n      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">\n        <line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n        <line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>\n      </svg>\n    </button>\n\n    <button class="search-button" type="button" aria-label="Search" disabled>\n      <svg viewBox="0 0 512 512">\n        <path d="M256.233,5.756c-71.07,15.793-141.44,87.863-155.834,159.233c-11.495,57.076,0.3,111.153,27.688,154.335L6.339,441.172\n      c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796\n      c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934\n      C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944\n      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/>\n      </svg>\n    </button>\n</div>\n<pfe-search-droplist id="dropdown"></pfe-search-droplist>'}},{key:"schemaUrl",get:function(){return"pfe-autocomplete.json"}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.0.0"}},{key:"schemaProperties",get:function(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1}}}},{key:"slots",get:function(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}},{key:"tag",get:function(){return"pfe-autocomplete"}},{key:"properties",get:function(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String}}}},{key:"events",get:function(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}}]),o(h,[{key:"connectedCallback",value:function(){n(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"connectedCallback",this).call(this),this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener(h.events.search,this._closeDroplist.bind(this)),this.addEventListener(h.events.select,this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){n(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(h.events.search,this._closeDroplist),this.removeEventListener(h.events.select,this._optionSelected),this._slot.removeEventListener(h.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}},{key:"_initValueChanged",value:function(e,t){var o=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE})[0],i=this.shadowRoot.querySelector(".clear-search"),n=this.shadowRoot.querySelector(".search-button");this["init-value"]!==t&&(""===(o.value=t)||this.isDisabled?(n.setAttribute("disabled",""),i.setAttribute("hidden","")):(n.removeAttribute("disabled"),i.removeAttribute("hidden")))}},{key:"_loadingChanged",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE})[0];this.loading&&""!==e.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}},{key:"_isDisabledChanged",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE})[0],t=this.shadowRoot.querySelector(".clear-search"),o=this.shadowRoot.querySelector(".search-button");this.isDisabled?(t.setAttribute("disabled",""),o.setAttribute("disabled",""),e.setAttribute("disabled","")):(t.removeAttribute("disabled"),o.removeAttribute("disabled"),e.removeAttribute("disabled"))}},{key:"_slotchangeHandler",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE});0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate):console.error(h.tag+": The only child in the light DOM must be an input tag")):console.error(h.tag+": There must be a input tag in the light DOM")}},{key:"_inputChanged",value:function(){var e=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===p&&(p=!0,window.setTimeout(function(){e._sendAutocompleteRequest(e._input.value),p=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}},{key:"_search",value:function(){this._doSearch(this._input.value)}},{key:"_closeDroplist",value:function(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(h.events.optionsShown,{composed:!0})}},{key:"_optionSelected",value:function(e){e=e.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(e){this.emitEvent(h.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}},{key:"_sendAutocompleteRequest",value:function(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}},{key:"_reset",value:function(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}},{key:"_activeOption",value:function(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(e){var t=e.keyCode;if(0!==this._dropdown.data.length||t===l||t===d||t===s||t===c){var o=this._dropdown.activeIndex,e=this._dropdown.data.length;if(t==c)this._closeDroplist();else if(t===d){if(!this._dropdown.open)return;o=null===o||"null"===o?e:parseInt(o,10),--o<0&&(o=e-1),this._input.value=this._activeOption(o)}else if(t===l){if(!this._dropdown.open)return;o=null===o||"null"===o?-1:parseInt(o,10),e-1<(o+=1)&&(o=0),this._input.value=this._activeOption(o)}else if(t===s){if(this._activeOption(o))return void this.emitEvent(h.events.select,{detail:{optionValue:this._activeOption(o)},composed:!0});t=this._input.value;return void this._doSearch(t)}null!==o&&"null"!==o?this._input.setAttribute("aria-activedescendant","option-"+o):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=o,this._dropdown.activeIndex=o}}}]),h);function h(){t(this,h);var e=a(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,h));return e._slotchangeHandler=e._slotchangeHandler.bind(e),e._slot=e.shadowRoot.querySelector("slot"),e._slot.addEventListener(h.events.slotchange,e._slotchangeHandler),e}r(f,e),o(f,[{key:"html",get:function(){return'\n<style>:host{position:relative;display:none;font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n  <ul role="listbox" tabindex="-1">\n  </ul>\n</div>'}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"version",get:function(){return"1.0.0"}},{key:"tag",get:function(){return"pfe-search-droplist"}},{key:"properties",get:function(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}}]),o(f,[{key:"connectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(u.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'<li id="option-'+t+'" role="option" tabindex="-1" value="'+e+'">'+e+"</li>"}).join("")}},{key:"_activeIndexChanged",value:function(){var e,t,o;this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex&&(this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active"),(e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")")).classList.add("active"),t=this.shadowRoot.querySelector(".droplist"),o=e.offsetHeight,o+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+o)}}]),o=f;function f(){return t(this,f),a(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return e.create(o),e.create(u),u});
 //# sourceMappingURL=pfe-autocomplete.umd.min.js.map

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.56",
+  "version": "1.0.0",
   "description": "Autocomplete element for PatternFly Elements",
@@ -41,6 +41,6 @@ "keywords": [
   "dependencies": {
-    "@patternfly/pfelement": "^1.0.0-prerelease.56"
+    "@patternfly/pfelement": "^1.0.0"
   },
   "devDependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.56"
+    "@patternfly/pfe-sass": "^1.0.0"
   },
@@ -51,3 +51,3 @@ "generator-pfelement-version": "0.5.5",
   },
-  "gitHead": "efed86135e85925182445801ab89570b3bcec5ca"
+  "gitHead": "e1e22f995b03e9134d1fd57a583d7a9b7f0350d9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

262943

decreased by-3.07%

Lines of code

1387

decreased by-8.02%

Dependency changes

• Updated@patternfly/pfelement@^1.0.0