@patternfly/pfe-autocomplete - npm Package Compare versions

Comparing version 1.0.0-prerelease.20 to 1.0.0-prerelease.21

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.20",
+  "version": "1.0.0-prerelease.21",
   "description": "Autocomplete element for PatternFly Elements",
@@ -35,7 +35,7 @@ "keywords": [
   "dependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.20",
-    "@patternfly/pfelement": "^1.0.0-prerelease.20"
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.21",
+    "@patternfly/pfelement": "^1.0.0-prerelease.21"
   },
   "generator-pfelement-version": "0.5.5",
-  "gitHead": "582e7883d940727b53180e10a0ca05b0f90e10ac"
+  "gitHead": "29a6c2558d8aa3309d0d36e19242f79f2e871f3d"
 }

pfe-autocomplete.js

 import PFElement from '../pfelement/pfelement.js';
 
 /*!
- * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.20
+ * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.21
  * @license
@@ -40,3 +40,3 @@ * Copyright 2019 Red Hat, Inc.
   static get version() {
-    return "1.0.0-prerelease.20";
+    return "1.0.0-prerelease.21";
   }
@@ -340,3 +340,2 @@
   _reset() {
-    debugger;
     this._dropdown.activeIndex = null;
@@ -437,3 +436,3 @@ this._input.setAttribute("aria-activedescendant", "");
   static get version() {
-    return "1.0.0-prerelease.20";
+    return "1.0.0-prerelease.21";
   }
@@ -440,0 +439,0 @@

pfe-autocomplete.min.js

 import t from"../pfelement/pfelement.min.js";
 /*!
- * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.20
+ * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.21
  * @license
@@ -25,3 +25,3 @@ * Copyright 2019 Red Hat, Inc.
  * 
-*/const e={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class s extends t{static get version(){return"1.0.0-prerelease.20"}get html(){return'<style>:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}</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 tag(){return"pfe-autocomplete"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}constructor(){super(s)}connectedCallback(){super.connectedCallback(),this.loading=!1,this.debounce=this.debounce||300;let t=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE);this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),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._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("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}disconnectedCallback(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),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(t,e,i){super.attributeChangedCallback();let s=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE)[0],o=this.shadowRoot.querySelector(".clear-search"),n=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==s.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(s.value=i,""===i||this.isDisabled?(n.setAttribute("disabled",""),o.setAttribute("hidden","")):(n.removeAttribute("disabled"),o.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(o.setAttribute("disabled",""),n.setAttribute("disabled",""),s.setAttribute("disabled","")):(o.removeAttribute("disabled"),n.removeAttribute("disabled"),s.removeAttribute("disabled"))}}get selectedValue(){return this.getAttribute("selected-value")}set selectedValue(t){this.setAttribute("selected-value",t)}set isDisabled(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")}get isDisabled(){return this.hasAttribute("is-disabled")}set loading(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")}get loading(){return this.hasAttribute("loading")}get initValue(){return this.getAttribute("init-value")}set initValue(t){this.setAttribute("init-value",t)}get debounce(){return this.getAttribute("debounce")}set debounce(t){this.setAttribute("debounce",t)}_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)}_optionSelected(t){let e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}_doSearch(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}_sendAutocompleteRequest(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}_autocompleteCallback(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}_inputKeyUp(t){let i=t.keyCode;if(0===this._dropdown.data.length&&i!==e.DOWN&&i!==e.UP&&i!==e.ENTER&&i!==e.ESC)return;let s=this._dropdown.activeIndex,o=this._dropdown.data.length;if(i==e.ESC)this._closeDroplist();else if(i===e.UP){if(!this._dropdown.open)return;s=null===s||"null"===s?o:parseInt(s,10),(s-=1)<0&&(s=o-1),this._input.value=this._activeOption(s)}else if(i===e.DOWN){if(!this._dropdown.open)return;s=null===s||"null"===s?-1:parseInt(s,10),(s+=1)>o-1&&(s=0),this._input.value=this._activeOption(s)}else if(i===e.ENTER){let t=this._input.value;return void this._doSearch(t)}null!==s&&"null"!==s?this._input.setAttribute("aria-activedescendant","option-"+s):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=s,this._dropdown.activeIndex=s}}class o extends t{static get version(){return"1.0.0-prerelease.20"}get html(){return'<style>:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}: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:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);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:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)}</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(o)}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(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}_renderOptions(){this.reflow="";let t=this.data;this._ariaAnnounce.innerHTML=`There are ${t.length} suggestions. Use the up and down arrows to browse.`,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${t.map((t,e)=>`<li id="option-${e}" role="option" tabindex="-1" value="${t}">${t}</li>`).join("")}`}static get observedAttributes(){return["open","reflow","active-index"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback(),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&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 t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");let e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}get open(){return this.hasAttribute("open")}set open(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}get activeIndex(){return this.getAttribute("active-index")}set activeIndex(t){this.setAttribute("active-index",t)}get reflow(){return this.hasAttribute("reflow")}set reflow(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}t.create(o),t.create(s);export default s;
+*/const e={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class s extends t{static get version(){return"1.0.0-prerelease.21"}get html(){return'<style>:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}</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 tag(){return"pfe-autocomplete"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}constructor(){super(s)}connectedCallback(){super.connectedCallback(),this.loading=!1,this.debounce=this.debounce||300;let t=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE);this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),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._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("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}disconnectedCallback(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),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(t,e,i){super.attributeChangedCallback();let s=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE)[0],o=this.shadowRoot.querySelector(".clear-search"),n=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==s.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(s.value=i,""===i||this.isDisabled?(n.setAttribute("disabled",""),o.setAttribute("hidden","")):(n.removeAttribute("disabled"),o.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(o.setAttribute("disabled",""),n.setAttribute("disabled",""),s.setAttribute("disabled","")):(o.removeAttribute("disabled"),n.removeAttribute("disabled"),s.removeAttribute("disabled"))}}get selectedValue(){return this.getAttribute("selected-value")}set selectedValue(t){this.setAttribute("selected-value",t)}set isDisabled(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")}get isDisabled(){return this.hasAttribute("is-disabled")}set loading(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")}get loading(){return this.hasAttribute("loading")}get initValue(){return this.getAttribute("init-value")}set initValue(t){this.setAttribute("init-value",t)}get debounce(){return this.getAttribute("debounce")}set debounce(t){this.setAttribute("debounce",t)}_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)}_optionSelected(t){let e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}_doSearch(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}_sendAutocompleteRequest(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}_autocompleteCallback(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}_inputKeyUp(t){let i=t.keyCode;if(0===this._dropdown.data.length&&i!==e.DOWN&&i!==e.UP&&i!==e.ENTER&&i!==e.ESC)return;let s=this._dropdown.activeIndex,o=this._dropdown.data.length;if(i==e.ESC)this._closeDroplist();else if(i===e.UP){if(!this._dropdown.open)return;s=null===s||"null"===s?o:parseInt(s,10),(s-=1)<0&&(s=o-1),this._input.value=this._activeOption(s)}else if(i===e.DOWN){if(!this._dropdown.open)return;s=null===s||"null"===s?-1:parseInt(s,10),(s+=1)>o-1&&(s=0),this._input.value=this._activeOption(s)}else if(i===e.ENTER){let t=this._input.value;return void this._doSearch(t)}null!==s&&"null"!==s?this._input.setAttribute("aria-activedescendant","option-"+s):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=s,this._dropdown.activeIndex=s}}class o extends t{static get version(){return"1.0.0-prerelease.21"}get html(){return'<style>:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}: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:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);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:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)}</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(o)}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(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}_renderOptions(){this.reflow="";let t=this.data;this._ariaAnnounce.innerHTML=`There are ${t.length} suggestions. Use the up and down arrows to browse.`,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${t.map((t,e)=>`<li id="option-${e}" role="option" tabindex="-1" value="${t}">${t}</li>`).join("")}`}static get observedAttributes(){return["open","reflow","active-index"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback(),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&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 t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");let e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}get open(){return this.hasAttribute("open")}set open(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}get activeIndex(){return this.getAttribute("active-index")}set activeIndex(t){this.setAttribute("active-index",t)}get reflow(){return this.hasAttribute("reflow")}set reflow(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}t.create(o),t.create(s);export default s;
 //# sourceMappingURL=pfe-autocomplete.min.js.map

pfe-autocomplete.umd.js

@@ -83,3 +83,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.20
+   * PatternFly Elements: PfeAutocomplete 1.0.0-prerelease.21
    * @license
@@ -138,3 +138,3 @@ * Copyright 2019 Red Hat, Inc.
       get: function get$$1() {
-        return "1.0.0-prerelease.20";
+        return "1.0.0-prerelease.21";
       }
@@ -351,3 +351,2 @@ }, {
       value: function _reset() {
-        debugger;
         this._dropdown.activeIndex = null;
@@ -508,3 +507,3 @@ this._input.setAttribute("aria-activedescendant", "");
       get: function get$$1() {
-        return "1.0.0-prerelease.20";
+        return "1.0.0-prerelease.21";
       }
@@ -511,0 +510,0 @@ }, {

pfe-autocomplete.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAutocomplete=e(t.PFElement)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=function(t,e,i){return e&&o(t.prototype,e),i&&o(t,i),t};function o(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function s(t,e,i){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,e);if(void 0===o){var n=Object.getPrototypeOf(t);return null===n?void 0:s(n,e,i)}if("value"in o)return o.value;var r=o.get;return void 0!==r?r.call(i):void 0}function n(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}var a=13,l=40,u=38,c=27,d=!1,h=(n(p,t),i(p,[{key:"html",get:function(){return'<style>:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}</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:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.0.0-prerelease.20"}},{key:"tag",get:function(){return"pfe-autocomplete"}}]),i(p,[{key:"connectedCallback",value:function(){s(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.loading=!1,this.debounce=this.debounce||300;var t=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE});this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),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._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("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),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(t,e,i){s(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"attributeChangedCallback",this).call(this);var o=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE})[0],n=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");switch(t){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:"_inputChanged",value:function(){var t=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===d&&(d=!0,window.setTimeout(function(){t._sendAutocompleteRequest(t._input.value),d=!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)}},{key:"_optionSelected",value:function(t){var e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}},{key:"_sendAutocompleteRequest",value:function(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.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(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(t){var e=t.keyCode;if(0!==this._dropdown.data.length||e===l||e===u||e===a||e===c){var i=this._dropdown.activeIndex,o=this._dropdown.data.length;if(e==c)this._closeDroplist();else if(e===u){if(!this._dropdown.open)return;i=null===i||"null"===i?o:parseInt(i,10),(i-=1)<0&&(i=o-1),this._input.value=this._activeOption(i)}else if(e===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(e===a){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(t){this.setAttribute("selected-value",t)}},{key:"isDisabled",set:function(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")},get:function(){return this.hasAttribute("is-disabled")}},{key:"loading",set:function(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")},get:function(){return this.hasAttribute("loading")}},{key:"initValue",get:function(){return this.getAttribute("init-value")},set:function(t){this.setAttribute("init-value",t)}},{key:"debounce",get:function(){return this.getAttribute("debounce")},set:function(t){this.setAttribute("debounce",t)}}],[{key:"observedAttributes",get:function(){return["init-value","loading","is-disabled"]}}]),p);function p(){return e(this,p),r(this,(p.__proto__||Object.getPrototypeOf(p)).call(this,p))}var b=(n(f,t),i(f,[{key:"html",get:function(){return'<style>:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}: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:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);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:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)}</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.20"}},{key:"tag",get:function(){return"pfe-search-droplist"}}]),i(f,[{key:"connectedCallback",value:function(){s(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(){this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}},{key:"_renderOptions",value:function(){this.reflow="";var t=this.data;this._ariaAnnounce.innerHTML="There are "+t.length+" suggestions. Use the up and down arrows to browse.",this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+t.map(function(t,e){return'<li id="option-'+e+'" role="option" tabindex="-1" value="'+t+'">'+t+"</li>"}).join("")}},{key:"attributeChangedCallback",value:function(t,e,i){s(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"attributeChangedCallback",this).call(this),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");var t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");var e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}}},{key:"open",get:function(){return this.hasAttribute("open")},set:function(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}},{key:"activeIndex",get:function(){return this.getAttribute("active-index")},set:function(t){this.setAttribute("active-index",t)}},{key:"reflow",get:function(){return this.hasAttribute("reflow")},set:function(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}],[{key:"observedAttributes",get:function(){return["open","reflow","active-index"]}}]),f);function f(){return e(this,f),r(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return t.create(b),t.create(h),h});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAutocomplete=e(t.PFElement)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=function(t,e,i){return e&&o(t.prototype,e),i&&o(t,i),t};function o(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function s(t,e,i){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,e);if(void 0===o){var n=Object.getPrototypeOf(t);return null===n?void 0:s(n,e,i)}if("value"in o)return o.value;var r=o.get;return void 0!==r?r.call(i):void 0}function n(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}var a=13,l=40,u=38,c=27,d=!1,h=(n(p,t),i(p,[{key:"html",get:function(){return'<style>:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}</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:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.0.0-prerelease.21"}},{key:"tag",get:function(){return"pfe-autocomplete"}}]),i(p,[{key:"connectedCallback",value:function(){s(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.loading=!1,this.debounce=this.debounce||300;var t=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE});this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),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._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("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),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(t,e,i){s(p.prototype.__proto__||Object.getPrototypeOf(p.prototype),"attributeChangedCallback",this).call(this);var o=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE})[0],n=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");switch(t){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:"_inputChanged",value:function(){var t=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===d&&(d=!0,window.setTimeout(function(){t._sendAutocompleteRequest(t._input.value),d=!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)}},{key:"_optionSelected",value:function(t){var e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}},{key:"_sendAutocompleteRequest",value:function(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.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(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(t){var e=t.keyCode;if(0!==this._dropdown.data.length||e===l||e===u||e===a||e===c){var i=this._dropdown.activeIndex,o=this._dropdown.data.length;if(e==c)this._closeDroplist();else if(e===u){if(!this._dropdown.open)return;i=null===i||"null"===i?o:parseInt(i,10),(i-=1)<0&&(i=o-1),this._input.value=this._activeOption(i)}else if(e===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(e===a){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(t){this.setAttribute("selected-value",t)}},{key:"isDisabled",set:function(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")},get:function(){return this.hasAttribute("is-disabled")}},{key:"loading",set:function(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")},get:function(){return this.hasAttribute("loading")}},{key:"initValue",get:function(){return this.getAttribute("init-value")},set:function(t){this.setAttribute("init-value",t)}},{key:"debounce",get:function(){return this.getAttribute("debounce")},set:function(t){this.setAttribute("debounce",t)}}],[{key:"observedAttributes",get:function(){return["init-value","loading","is-disabled"]}}]),p);function p(){return e(this,p),r(this,(p.__proto__||Object.getPrototypeOf(p)).call(this,p))}var b=(n(f,t),i(f,[{key:"html",get:function(){return'<style>:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}: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:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);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:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)}</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.21"}},{key:"tag",get:function(){return"pfe-search-droplist"}}]),i(f,[{key:"connectedCallback",value:function(){s(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(){this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}},{key:"_renderOptions",value:function(){this.reflow="";var t=this.data;this._ariaAnnounce.innerHTML="There are "+t.length+" suggestions. Use the up and down arrows to browse.",this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+t.map(function(t,e){return'<li id="option-'+e+'" role="option" tabindex="-1" value="'+t+'">'+t+"</li>"}).join("")}},{key:"attributeChangedCallback",value:function(t,e,i){s(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"attributeChangedCallback",this).call(this),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");var t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");var e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}}},{key:"open",get:function(){return this.hasAttribute("open")},set:function(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}},{key:"activeIndex",get:function(){return this.getAttribute("active-index")},set:function(t){this.setAttribute("active-index",t)}},{key:"reflow",get:function(){return this.hasAttribute("reflow")},set:function(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}],[{key:"observedAttributes",get:function(){return["open","reflow","active-index"]}}]),f);function f(){return e(this,f),r(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return t.create(b),t.create(h),h});
 //# sourceMappingURL=pfe-autocomplete.umd.min.js.map

src/pfe-autocomplete.js

@@ -291,3 +291,2 @@ /*
   _reset() {
-    debugger;
     this._dropdown.activeIndex = null;
@@ -294,0 +293,0 @@ this._input.setAttribute("aria-activedescendant", "");

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Worsened metrics

Total package byte prevSize

327602

decreased by-0.04%

Lines of code

1918

decreased by-0.16%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@patternfly/pfe-sass@^1.0.0-prerelease.21

• Updated@patternfly/pfelement@^1.0.0-prerelease.21