Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@patternfly/pfe-autocomplete
Advanced tools
@patternfly/pfe-autocomplete - npm Package Compare versions
Comparing version 1.0.0-prerelease.10 to 1.0.0-prerelease.11
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "1.0.0-prerelease.10", | ||
| "version": "1.0.0-prerelease.11", | ||
| "description": "Autocomplete element for PFElements", | ||
@@ -28,7 +28,7 @@ "repository": { | ||
| "dependencies": { | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.10", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.10" | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.11", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.11" | ||
| }, | ||
| "generator-pfelement-version": "0.5.5", | ||
| "gitHead": "b49b74a24aebabbf0987be9e694f119d63e1246e" | ||
| "gitHead": "95d307853357cfffe6afb7970d707a005f924f23" | ||
| } |
| import PFElement from '../pfelement/pfelement.js'; | ||
| /* | ||
| * @license | ||
| * Copyright 2019 Red Hat, Inc. | ||
@@ -37,119 +38,5 @@ * | ||
| class PfeAutocomplete extends PFElement { | ||
| get html() { | ||
| return `<style>:host { | ||
| display: block; | ||
| position: relative; } | ||
| .input-box-wrapper { | ||
| position: relative; | ||
| 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%; | ||
| flex: 1; | ||
| box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important; | ||
| padding-left: 10px; | ||
| padding-right: 30px; | ||
| border-radius: 0; | ||
| background-color: #fff; | ||
| border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf); | ||
| font-size: 16px; | ||
| height: 40px; | ||
| transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s; | ||
| opacity: 1; | ||
| outline: 0; } | ||
| #input-box-wrapper ::slotted(input:disabled), | ||
| button:disabled { | ||
| cursor: not-allowed; | ||
| background-color: transparent; | ||
| color: #ccc; | ||
| opacity: 0.5; } | ||
| #input-box-wrapper button:focus, | ||
| #input-box-wrapper ::slotted(input: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: #cccccc; | ||
| background-color: transparent; | ||
| border: none; | ||
| position: absolute; | ||
| top: 0px; | ||
| bottom: 0px; | ||
| padding: 0px; | ||
| margin: 0px; | ||
| 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:hover svg, | ||
| button.clear-search:focus svg { | ||
| opacity: 1; | ||
| stroke: #06c; } | ||
| button[disabled].clear-search:hover svg, | ||
| button[disabled].clear-search:focus svg { | ||
| stroke: #ccc; } | ||
| button.search-button { | ||
| right: 1px; | ||
| width: 30px; } | ||
| button.search-button svg { | ||
| fill: #06c; | ||
| width: 16px; } | ||
| button.search-button:hover svg, | ||
| button.search-button:focus svg { | ||
| fill: #004080; } | ||
| button.clear-search:hover { | ||
| color: #ccc; } | ||
| button.search-button:disabled svg { | ||
| fill: #ccc; } | ||
| .loading { | ||
| position: absolute; | ||
| width: 30px; | ||
| right: 52px; | ||
| top: 0px; | ||
| bottom: 0px; } | ||
| .loading svg { | ||
| width: 26px; | ||
| padding-top: 7px; }</style> | ||
| <div id="input-box-wrapper"> | ||
| 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"> | ||
| <slot></slot> | ||
@@ -194,3 +81,2 @@ | ||
| } | ||
| static get tag() { | ||
@@ -546,53 +432,5 @@ return "pfe-autocomplete"; | ||
| class PfeSearchDroplist extends PFElement { | ||
| 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: 0px; | ||
| right: 0px; | ||
| 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: 0px; | ||
| padding: 0px; | ||
| list-style: none; | ||
| cursor: pointer; } | ||
| ul li { | ||
| display: list-item; | ||
| cursor: pointer; | ||
| padding: 10px; | ||
| margin: 0px; | ||
| } | ||
| ul li.active { | ||
| background-color: var(--pfe-theme--color--surface--lighter, #ececec); }</style> | ||
| <div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div> | ||
| 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> | ||
| <div class="droplist"> | ||
@@ -603,3 +441,2 @@ <ul role="listbox" tabindex="-1"> | ||
| } | ||
| static get tag() { | ||
@@ -606,0 +443,0 @@ return "pfe-search-droplist"; |
@@ -1,2 +0,25 @@ | ||
| import t from"../pfelement/pfelement.min.js";const e={ENTER:13,DOWN:40,UP:38,ESC:27};let n=!1;class i extends t{get html(){return'<style>:host {\n display: block;\n position: relative; }\n\n.input-box-wrapper {\n position: relative;\n display: flex; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n font-size: 16px;\n \n height: 40px;\n transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input:disabled),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5; }\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input),\nbutton {\n -webkit-appearance: none; }\n\n#input-box-wrapper ::slotted([type="search"]::-ms-clear) {\n display: none; }\n\n#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-decoration) {\n -webkit-appearance: none; }\n\nbutton {\n color: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer; }\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff; }\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc; }\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c; }\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc; }\n\nbutton.search-button {\n right: 1px;\n width: 30px; }\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px; }\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080; }\n\nbutton.clear-search:hover {\n color: #ccc; }\n\nbutton.search-button:disabled svg {\n fill: #ccc; }\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px; }\n\n.loading svg {\n width: 26px;\n padding-top: 7px; }</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 tag(){return"pfe-autocomplete"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}constructor(){super(i)}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,n){super.attributeChangedCallback();let i=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE)[0],s=this.shadowRoot.querySelector(".clear-search"),o=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==i.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==n&&(i.value=n,""===n||this.isDisabled?(o.setAttribute("disabled",""),s.setAttribute("hidden","")):(o.removeAttribute("disabled"),s.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(s.setAttribute("disabled",""),o.setAttribute("disabled",""),i.setAttribute("disabled","")):(s.removeAttribute("disabled"),o.removeAttribute("disabled"),i.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===n&&(n=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),n=!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 n=t.keyCode;if(0===this._dropdown.data.length&&n!==e.DOWN&&n!==e.UP&&n!==e.ENTER&&n!==e.ESC)return;let i=this._dropdown.activeIndex,s=this._dropdown.data.length;if(n==e.ESC)this._closeDroplist();else if(n===e.UP){if(!this._dropdown.open)return;i=null===i||"null"===i?s:parseInt(i,10),(i-=1)<0&&(i=s-1),this._input.value=this._activeOption(i)}else if(n===e.DOWN){if(!this._dropdown.open)return;i=null===i||"null"===i?-1:parseInt(i,10),(i+=1)>s-1&&(i=0),this._input.value=this._activeOption(i)}else if(n===e.ENTER){let t=this._input.value;return void this._doSearch(t)}null!==i&&"null"!==i?this._input.setAttribute("aria-activedescendant","option-"+i):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=i,this._dropdown.activeIndex=i}}class s extends t{get html(){return'<style>:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height); }\n\n:host([open]) {\n display: block; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff; }\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer; }\n ul li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px;\n }\n ul li.active {\n background-color: var(--pfe-theme--color--surface--lighter, #ececec); }</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"}constructor(){super(s)}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,n){super.attributeChangedCallback(),this[name]!==n&&(this[name]=n),"active-index"===t&&e!==n&&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"),n=t.offsetHeight;n+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+n}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(s),t.create(i);export default i; | ||
| import t from"../pfelement/pfelement.min.js"; | ||
| /* | ||
| * @license | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */const e={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class s extends t{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{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 |
@@ -83,2 +83,3 @@ (function (global, factory) { | ||
| /* | ||
| * @license | ||
| * Copyright 2019 Red Hat, Inc. | ||
@@ -121,3 +122,3 @@ * | ||
| get: function get$$1() { | ||
| return "<style>:host {\n display: block;\n position: relative; }\n\n.input-box-wrapper {\n position: relative;\n display: flex; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n font-size: 16px;\n \n height: 40px;\n transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input:disabled),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5; }\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input),\nbutton {\n -webkit-appearance: none; }\n\n#input-box-wrapper ::slotted([type=\"search\"]::-ms-clear) {\n display: none; }\n\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none; }\n\nbutton {\n color: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer; }\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff; }\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc; }\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c; }\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc; }\n\nbutton.search-button {\n right: 1px;\n width: 30px; }\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px; }\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080; }\n\nbutton.clear-search:hover {\n color: #ccc; }\n\nbutton.search-button:disabled svg {\n fill: #ccc; }\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px; }\n\n.loading svg {\n width: 26px;\n padding-top: 7px; }</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>"; | ||
| 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>"; | ||
| } | ||
@@ -485,3 +486,3 @@ }, { | ||
| get: function get$$1() { | ||
| return "<style>:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height); }\n\n:host([open]) {\n display: block; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff; }\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer; }\n ul li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px;\n }\n ul li.active {\n background-color: var(--pfe-theme--color--surface--lighter, #ececec); }</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>"; | ||
| 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>"; | ||
| } | ||
@@ -488,0 +489,0 @@ }, { |
@@ -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(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var n=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}}(),a=function t(e,n,i){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,n);if(void 0===o){var r=Object.getPrototypeOf(e);return null===r?void 0:t(r,n,i)}if("value"in o)return o.value;var s=o.get;return void 0!==s?s.call(i):void 0},r=function(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)},l=function(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},u=13,c=40,d=38,p=27,i=!1,t=function(t){function s(){return n(this,s),l(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,s))}return r(s,e),o(s,[{key:"html",get:function(){return'<style>:host {\n display: block;\n position: relative; }\n\n.input-box-wrapper {\n position: relative;\n display: flex; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n font-size: 16px;\n \n height: 40px;\n transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input:disabled),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5; }\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0; }\n\n#input-box-wrapper ::slotted(input),\nbutton {\n -webkit-appearance: none; }\n\n#input-box-wrapper ::slotted([type="search"]::-ms-clear) {\n display: none; }\n\n#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type="search"]::-webkit-search-decoration) {\n -webkit-appearance: none; }\n\nbutton {\n color: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer; }\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff; }\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc; }\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c; }\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc; }\n\nbutton.search-button {\n right: 1px;\n width: 30px; }\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px; }\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080; }\n\nbutton.clear-search:hover {\n color: #ccc; }\n\nbutton.search-button:disabled svg {\n fill: #ccc; }\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px; }\n\n.loading svg {\n width: 26px;\n padding-top: 7px; }</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:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"tag",get:function(){return"pfe-autocomplete"}}]),o(s,[{key:"connectedCallback",value:function(){a(s.prototype.__proto__||Object.getPrototypeOf(s.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,n){a(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"attributeChangedCallback",this).call(this);var i=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE})[0],o=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==i.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==n&&(""===(i.value=n)||this.isDisabled?(r.setAttribute("disabled",""),o.setAttribute("hidden","")):(r.removeAttribute("disabled"),o.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(o.setAttribute("disabled",""),r.setAttribute("disabled",""),i.setAttribute("disabled","")):(o.removeAttribute("disabled"),r.removeAttribute("disabled"),i.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===i&&(i=!0,window.setTimeout(function(){t._sendAutocompleteRequest(t._input.value),i=!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===c||e===d||e===u||e===p){var n=this._dropdown.activeIndex,i=this._dropdown.data.length;if(e==p)this._closeDroplist();else if(e===d){if(!this._dropdown.open)return;n=null===n||"null"===n?i:parseInt(n,10),(n-=1)<0&&(n=i-1),this._input.value=this._activeOption(n)}else if(e===c){if(!this._dropdown.open)return;n=null===n||"null"===n?-1:parseInt(n,10),i-1<(n+=1)&&(n=0),this._input.value=this._activeOption(n)}else if(e===u){var o=this._input.value;return void this._doSearch(o)}null!==n&&"null"!==n?this._input.setAttribute("aria-activedescendant","option-"+n):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=n,this._dropdown.activeIndex=n}}},{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"]}}]),s}(),s=function(t){function i(){return n(this,i),l(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,i))}return r(i,e),o(i,[{key:"html",get:function(){return'<style>:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height); }\n\n:host([open]) {\n display: block; }\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0; }\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff; }\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer; }\n ul li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px;\n }\n ul li.active {\n background-color: var(--pfe-theme--color--surface--lighter, #ececec); }</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:"tag",get:function(){return"pfe-search-droplist"}}]),o(i,[{key:"connectedCallback",value:function(){a(i.prototype.__proto__||Object.getPrototypeOf(i.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,n){a(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).call(this),this[name]!==n&&(this[name]=n),"active-index"===t&&e!==n&&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"),n=t.offsetHeight;n+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+n}}},{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"]}}]),i}();return e.create(s),e.create(t),t}); | ||
| !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(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},n=function(){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)}}return function(t,e,i){return e&&o(t.prototype,e),i&&o(t,i),t}}(),a=function t(e,i,o){null===e&&(e=Function.prototype);var n=Object.getOwnPropertyDescriptor(e,i);if(void 0===n){var r=Object.getPrototypeOf(e);return null===r?void 0:t(r,i,o)}if("value"in n)return n.value;var s=n.get;return void 0!==s?s.call(o):void 0},r=function(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)},l=function(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},u=13,c=40,d=38,h=27,o=!1,t=function(t){function s(){return i(this,s),l(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,s))}return r(s,e),n(s,[{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:"tag",get:function(){return"pfe-autocomplete"}}]),n(s,[{key:"connectedCallback",value:function(){a(s.prototype.__proto__||Object.getPrototypeOf(s.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){a(s.prototype.__proto__||Object.getPrototypeOf(s.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===o&&(o=!0,window.setTimeout(function(){t._sendAutocompleteRequest(t._input.value),o=!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===c||e===d||e===u||e===h){var i=this._dropdown.activeIndex,o=this._dropdown.data.length;if(e==h)this._closeDroplist();else if(e===d){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===c){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===u){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"]}}]),s}(),s=function(t){function o(){return i(this,o),l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o))}return r(o,e),n(o,[{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:"tag",get:function(){return"pfe-search-droplist"}}]),n(o,[{key:"connectedCallback",value:function(){a(o.prototype.__proto__||Object.getPrototypeOf(o.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){a(o.prototype.__proto__||Object.getPrototypeOf(o.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"]}}]),o}();return e.create(s),e.create(t),t}); | ||
| //# sourceMappingURL=pfe-autocomplete.umd.min.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-42.86%
4
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.31%
323209
- Lines of code
- decreased by-5.14%
1900