Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@patternfly/pfe-autocomplete

Package Overview
Dependencies
Maintainers
15
Versions
74
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternfly/pfe-autocomplete - npm Package Compare versions

Comparing version 1.10.1 to 1.11.0

60

dist/pfe-autocomplete.js

@@ -5,3 +5,3 @@ import PFElement from '../../pfelement/dist/pfelement.js';

/*!
* PatternFly Elements: PfeAutocomplete 1.10.1
* PatternFly Elements: PfeAutocomplete 1.11.0
* @license

@@ -44,3 +44,3 @@ * Copyright 2021 Red Hat, Inc.

static get version() {
return "1.10.1";
return "1.11.0";
}

@@ -235,4 +235,7 @@

this._input.setAttribute("aria-autocomplete", "both");
this._input.setAttribute("aria-autocomplete", "list");
this._input.setAttribute("aria-haspopup", "true");
this._input.setAttribute("aria-owns", "droplist-items");
this._input.setAttribute("aria-controls", "droplist-items");
this._input.setAttribute("aria-expanded", "false");
this._input.setAttribute("type", "search");

@@ -360,2 +363,3 @@ this._input.setAttribute("autocomplete", "off");

this._dropdown.removeAttribute("active-index");
this._input.setAttribute("aria-expanded", "false");
}

@@ -370,2 +374,3 @@

});
this._input.setAttribute("aria-expanded", "true");
}

@@ -411,2 +416,7 @@

/**
* Returns the HTML of the active element
* @param {number} activeIndex Index of an element in the droplist
* @return {string} The HTML inside of the given index as a string
*/
_activeOption(activeIndex) {

@@ -417,5 +427,10 @@ if (activeIndex === null || activeIndex === "null") return;

/**
* Handle keyboard input, we care about arrow keys, enter, and escape
* @param {object} e - keypress event
*/
_inputKeyUp(e) {
let key = e.keyCode;
// Check to see if it's a key we care about
if (

@@ -444,2 +459,3 @@ this._dropdown.data.length === 0 &&

// Go to the last item if we're at -1 index
if (activeIndex < 0) {

@@ -449,3 +465,5 @@ activeIndex = optionsLength - 1;

// Get the HTML of the active element
this._input.value = this._activeOption(activeIndex);
} else if (key === KEYCODE.DOWN) {

@@ -463,3 +481,5 @@ if (!this._dropdown.open) {

// Go to the last item if we're at -1 index
this._input.value = this._activeOption(activeIndex);
} else if (key === KEYCODE.ENTER) {

@@ -505,3 +525,3 @@ if (this._activeOption(activeIndex)) {

static get version() {
return "1.10.1";
return "1.11.0";
}

@@ -512,6 +532,6 @@

return `
<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>
<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{-webkit-box-shadow:inset 0 0 0 2px #a30000;box-shadow:inset 0 0 0 2px #a30000;-webkit-box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000);box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000)}.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:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>
<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>
<div class="droplist">
<ul role="listbox" tabindex="-1">
<ul role="listbox" id="droplist-items" tabindex="-1">
</ul>

@@ -564,2 +584,3 @@ </div>`;

this._ul.addEventListener("mousedown", this._optionSelected.bind(this));
}

@@ -599,14 +620,26 @@

/**
* Handle state changes when active droplist item has been changed
*/
_activeIndexChanged() {
// Make a quick exit if necessary
if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return;
// remove active class
if (this._ul.querySelector(".active")) {
this._ul.querySelector(".active").classList.remove("active");
// Previous element may not exist
const previouslyActiveElement = this._ul.querySelector(".active");
const activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
// Handle any element that should no longer be selected
if (previouslyActiveElement) {
previouslyActiveElement.classList.remove("active");
previouslyActiveElement.removeAttribute("aria-selected");
}
// add active class to selected option
let activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
// Update newly selected element to have proper attributes and settings
activeOption.classList.add("active");
// @note Set aria-selected on the active list item, should only occur on the list item that is being referenced
// by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete
// component. It helps ensure that the screen reader user knows what element is active when moving through the
// list of items with the arrow keys
activeOption.setAttribute("aria-selected", "true");

@@ -618,3 +651,6 @@ // scroll to selected element when selected item with keyboard is out of view

ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
return activeOption;
}
}

@@ -621,0 +657,0 @@

4

dist/pfe-autocomplete.min.js
import e from"../../pfelement/dist/pfelement.min.js";import"../../pfe-button/dist/pfe-button.min.js";
/*!
* PatternFly Elements: PfeAutocomplete 1.10.1
* PatternFly Elements: PfeAutocomplete 1.11.0
* @license

@@ -25,3 +25,3 @@ * Copyright 2021 Red Hat, Inc.

*
*/const t=13,i=40,o=38,r=27;let s=!1;class a extends e{static get version(){return"1.10.1"}get html(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);--pfe-autocomplete--BoxShadow:var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);--pfe-autocomplete--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-autocomplete--Border:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([button-text]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([button-text]) #wrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{right:10px}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:#06c;border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;color:#ccc}#input-box-wrapper ::slotted(input:disabled){padding-right:10px}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}pfe-button.search-button--textual{margin-left:16px}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="wrapper">\n <div id="input-box-wrapper">\n \x3c!-- Input box --\x3e\n <slot></slot>\n\n \x3c!-- loading icon --\x3e\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"\n 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" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"\n dur="0.5s" repeatCount="indefinite" />\n </path>\n </svg>\n </span>\n\n \x3c!-- clear search button --\x3e\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 \x3c!-- Search button --\x3e\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>\n</div>\n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n<pfe-button class="search-button--textual" hidden>\n <button class="search-button__text" disabled></button>\n</pfe-button>'}static get schemaProperties(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}static get slots(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}static get tag(){return"pfe-autocomplete"}get schemaUrl(){return"pfe-autocomplete.json"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}static get properties(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}static get events(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}constructor(){super(a),this._inputInit(),this._slotchangeHandler=this._slotchangeHandler.bind(this),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener(a.events.slotchange,this._slotchangeHandler),this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._searchBtnTextual=this.shadowRoot.querySelector(".search-button--textual"),this._searchBtnText=this.shadowRoot.querySelector(".search-button__text"),this._searchBtnTextual.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(a.events.search,this._closeDroplist.bind(this)),this.addEventListener(a.events.select,this._optionSelected.bind(this))}_inputInit(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE);0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false")):console.error(a.tag+": The only child in the light DOM must be an input tag")):console.error(a.tag+": There must be a input tag in the light DOM")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(a.events.search,this._closeDroplist),this.removeEventListener(a.events.select,this._optionSelected),this._slot.removeEventListener(a.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}_initValueChanged(e,t){t&&(this._input.value=t,""===t||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}_loadingChanged(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}_isDisabledChanged(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}_buttonTextChanged(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}_slotchangeHandler(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===s&&(s=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),s=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.focus()}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}_openDroplist(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(a.events.optionsShown,{composed:!0})}_optionSelected(e){let t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}_doSearch(e){this.emitEvent(a.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}_sendAutocompleteRequest(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}_autocompleteCallback(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}_inputKeyUp(e){let s=e.keyCode;if(0===this._dropdown.data.length&&s!==i&&s!==o&&s!==t&&s!==r)return;let n=this._dropdown.activeIndex,l=this._dropdown.data.length;if(s==r)this._closeDroplist();else if(s===o){if(!this._dropdown.open)return;n=null===n||"null"===n?l:parseInt(n,10),n-=1,n<0&&(n=l-1),this._input.value=this._activeOption(n)}else if(s===i){if(!this._dropdown.open)return;n=null===n||"null"===n?-1:parseInt(n,10),n+=1,n>l-1&&(n=0),this._input.value=this._activeOption(n)}else if(s===t){if(this._activeOption(n))return void this.emitEvent(a.events.select,{detail:{optionValue:this._activeOption(n)},composed:!0});let e=this._input.value;return void this._doSearch(e)}null!==n&&"null"!==n?this._input.setAttribute("aria-activedescendant","option-"+n):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=n,this._dropdown.activeIndex=n}}class n extends e{static get version(){return"1.10.1"}get html(){return'\n<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n <ul role="listbox" tabindex="-1">\n </ul>\n</div>'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}static get properties(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}constructor(){super(n)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(a.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map((e,t)=>`<li id="option-${t}" role="option" tabindex="-1" value="${e}">${e}</li>`).join("")}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");let e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e.classList.add("active");let t=this.shadowRoot.querySelector(".droplist"),i=e.offsetHeight;i+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+i}}e.create(n),e.create(a);export default a;
*/const t=13,i=40,o=38,r=27;let a=!1;class s extends e{static get version(){return"1.11.0"}get html(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);--pfe-autocomplete--BoxShadow:var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);--pfe-autocomplete--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-autocomplete--Border:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([button-text]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([button-text]) #wrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{right:10px}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:#06c;border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;color:#ccc}#input-box-wrapper ::slotted(input:disabled){padding-right:10px}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}pfe-button.search-button--textual{margin-left:16px}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="wrapper">\n <div id="input-box-wrapper">\n \x3c!-- Input box --\x3e\n <slot></slot>\n\n \x3c!-- loading icon --\x3e\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"\n 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" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"\n dur="0.5s" repeatCount="indefinite" />\n </path>\n </svg>\n </span>\n\n \x3c!-- clear search button --\x3e\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 \x3c!-- Search button --\x3e\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>\n</div>\n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n<pfe-button class="search-button--textual" hidden>\n <button class="search-button__text" disabled></button>\n</pfe-button>'}static get schemaProperties(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}static get slots(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}static get tag(){return"pfe-autocomplete"}get schemaUrl(){return"pfe-autocomplete.json"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}static get properties(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}static get events(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}constructor(){super(s),this._inputInit(),this._slotchangeHandler=this._slotchangeHandler.bind(this),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener(s.events.slotchange,this._slotchangeHandler),this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._searchBtnTextual=this.shadowRoot.querySelector(".search-button--textual"),this._searchBtnText=this.shadowRoot.querySelector(".search-button__text"),this._searchBtnTextual.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(s.events.search,this._closeDroplist.bind(this)),this.addEventListener(s.events.select,this._optionSelected.bind(this))}_inputInit(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE);0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("aria-owns","droplist-items"),this._input.setAttribute("aria-controls","droplist-items"),this._input.setAttribute("aria-expanded","false"),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")):console.error(s.tag+": The only child in the light DOM must be an input tag")):console.error(s.tag+": There must be a input tag in the light DOM")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(s.events.search,this._closeDroplist),this.removeEventListener(s.events.select,this._optionSelected),this._slot.removeEventListener(s.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}_initValueChanged(e,t){t&&(this._input.value=t,""===t||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}_loadingChanged(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}_isDisabledChanged(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}_buttonTextChanged(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}_slotchangeHandler(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===a&&(a=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),a=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.focus()}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index"),this._input.setAttribute("aria-expanded","false")}_openDroplist(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(s.events.optionsShown,{composed:!0}),this._input.setAttribute("aria-expanded","true")}_optionSelected(e){let t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}_doSearch(e){this.emitEvent(s.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}_sendAutocompleteRequest(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}_autocompleteCallback(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}_inputKeyUp(e){let a=e.keyCode;if(0===this._dropdown.data.length&&a!==i&&a!==o&&a!==t&&a!==r)return;let n=this._dropdown.activeIndex,d=this._dropdown.data.length;if(a==r)this._closeDroplist();else if(a===o){if(!this._dropdown.open)return;n=null===n||"null"===n?d:parseInt(n,10),n-=1,n<0&&(n=d-1),this._input.value=this._activeOption(n)}else if(a===i){if(!this._dropdown.open)return;n=null===n||"null"===n?-1:parseInt(n,10),n+=1,n>d-1&&(n=0),this._input.value=this._activeOption(n)}else if(a===t){if(this._activeOption(n))return void this.emitEvent(s.events.select,{detail:{optionValue:this._activeOption(n)},composed:!0});let e=this._input.value;return void this._doSearch(e)}null!==n&&"null"!==n?this._input.setAttribute("aria-activedescendant","option-"+n):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=n,this._dropdown.activeIndex=n}}class n extends e{static get version(){return"1.11.0"}get html(){return'\n<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{-webkit-box-shadow:inset 0 0 0 2px #a30000;box-shadow:inset 0 0 0 2px #a30000;-webkit-box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000);box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000)}.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:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n <ul role="listbox" id="droplist-items" tabindex="-1">\n </ul>\n</div>'}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}static get properties(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}constructor(){super(n)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(s.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map((e,t)=>`<li id="option-${t}" role="option" tabindex="-1" value="${e}">${e}</li>`).join("")}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;const e=this._ul.querySelector(".active"),t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e&&(e.classList.remove("active"),e.removeAttribute("aria-selected")),t.classList.add("active"),t.setAttribute("aria-selected","true");let i=this.shadowRoot.querySelector(".droplist"),o=t.offsetHeight;return o+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),i.scrollTop=t.offsetTop-i.offsetHeight+o,t}}e.create(n),e.create(s);export default s;
//# sourceMappingURL=pfe-autocomplete.min.js.map

60

dist/pfe-autocomplete.umd.js

@@ -83,3 +83,3 @@ (function (global, factory) {

/*!
* PatternFly Elements: PfeAutocomplete 1.10.1
* PatternFly Elements: PfeAutocomplete 1.11.0
* @license

@@ -153,3 +153,3 @@ * Copyright 2021 Red Hat, Inc.

get: function get() {
return "1.10.1";
return "1.11.0";
}

@@ -293,4 +293,7 @@ }, {

this._input.setAttribute("aria-autocomplete", "both");
this._input.setAttribute("aria-autocomplete", "list");
this._input.setAttribute("aria-haspopup", "true");
this._input.setAttribute("aria-owns", "droplist-items");
this._input.setAttribute("aria-controls", "droplist-items");
this._input.setAttribute("aria-expanded", "false");
this._input.setAttribute("type", "search");

@@ -430,2 +433,3 @@ this._input.setAttribute("autocomplete", "off");

this._dropdown.removeAttribute("active-index");
this._input.setAttribute("aria-expanded", "false");
}

@@ -441,2 +445,3 @@ }, {

});
this._input.setAttribute("aria-expanded", "true");
}

@@ -486,2 +491,9 @@ }, {

}
/**
* Returns the HTML of the active element
* @param {number} activeIndex Index of an element in the droplist
* @return {string} The HTML inside of the given index as a string
*/
}, {

@@ -493,2 +505,8 @@ key: "_activeOption",

}
/**
* Handle keyboard input, we care about arrow keys, enter, and escape
* @param {object} e - keypress event
*/
}, {

@@ -499,2 +517,3 @@ key: "_inputKeyUp",

// Check to see if it's a key we care about
if (this._dropdown.data.length === 0 && key !== KEYCODE.DOWN && key !== KEYCODE.UP && key !== KEYCODE.ENTER && key !== KEYCODE.ESC) return;

@@ -516,2 +535,3 @@

// Go to the last item if we're at -1 index
if (activeIndex < 0) {

@@ -521,2 +541,3 @@ activeIndex = optionsLength - 1;

// Get the HTML of the active element
this._input.value = this._activeOption(activeIndex);

@@ -535,2 +556,3 @@ } else if (key === KEYCODE.DOWN) {

// Go to the last item if we're at -1 index
this._input.value = this._activeOption(activeIndex);

@@ -585,3 +607,3 @@ } else if (key === KEYCODE.ENTER) {

get: function get() {
return "\n<style>:host{position:relative;display:none;font-family:\"Red Hat Text\",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:\"Red Hat Text\",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class=\"suggestions-aria-help sr-only\" aria-hidden=\"false\" role=\"status\"></div>\n<div class=\"droplist\">\n <ul role=\"listbox\" tabindex=\"-1\">\n </ul>\n</div>";
return "\n<style>:host{position:relative;display:none;font-family:\"Red Hat Text\",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{-webkit-box-shadow:inset 0 0 0 2px #a30000;box-shadow:inset 0 0 0 2px #a30000;-webkit-box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000);box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000)}.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:\"Red Hat Text\",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class=\"suggestions-aria-help sr-only\" aria-hidden=\"false\" role=\"status\"></div>\n<div class=\"droplist\">\n <ul role=\"listbox\" id=\"droplist-items\" tabindex=\"-1\">\n </ul>\n</div>";
}

@@ -604,3 +626,3 @@ }, {

get: function get() {
return "1.10.1";
return "1.11.0";
}

@@ -683,16 +705,30 @@ }, {

}
/**
* Handle state changes when active droplist item has been changed
*/
}, {
key: "_activeIndexChanged",
value: function _activeIndexChanged() {
// Make a quick exit if necessary
if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return;
// remove active class
if (this._ul.querySelector(".active")) {
this._ul.querySelector(".active").classList.remove("active");
// Previous element may not exist
var previouslyActiveElement = this._ul.querySelector(".active");
var activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
// Handle any element that should no longer be selected
if (previouslyActiveElement) {
previouslyActiveElement.classList.remove("active");
previouslyActiveElement.removeAttribute("aria-selected");
}
// add active class to selected option
var activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
// Update newly selected element to have proper attributes and settings
activeOption.classList.add("active");
// @note Set aria-selected on the active list item, should only occur on the list item that is being referenced
// by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete
// component. It helps ensure that the screen reader user knows what element is active when moving through the
// list of items with the arrow keys
activeOption.setAttribute("aria-selected", "true");

@@ -704,2 +740,4 @@ // scroll to selected element when selected item with keyboard is out of view

ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
return activeOption;
}

@@ -706,0 +744,0 @@ }]);

2

dist/pfe-autocomplete.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min"),require("../../pfe-button/dist/pfe-button.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min","../../pfe-button/dist/pfe-button.umd.min"],t):(e=e||self).PfeAutocomplete=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(e,t,o){return t&&i(e.prototype,t),o&&i(e,o),e};function i(e,t){for(var o=0;o<t.length;o++){var i=t[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function n(e,t,o){null===e&&(e=Function.prototype);var i=Object.getOwnPropertyDescriptor(e,t);if(void 0!==i){if("value"in i)return i.value;i=i.get;return void 0!==i?i.call(o):void 0}if(null!==(e=Object.getPrototypeOf(e)))return n(e,t,o)}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=13,l=40,d=38,c=27,u=!1,p=(r(h,e),o(h,[{key:"html",get:function(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);--pfe-autocomplete--BoxShadow:var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);--pfe-autocomplete--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-autocomplete--Border:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([button-text]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([button-text]) #wrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{right:10px}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:#06c;border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;color:#ccc}#input-box-wrapper ::slotted(input:disabled){padding-right:10px}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}pfe-button.search-button--textual{margin-left:16px}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="wrapper">\n <div id="input-box-wrapper">\n \x3c!-- Input box --\x3e\n <slot></slot>\n\n \x3c!-- loading icon --\x3e\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"\n 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" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"\n dur="0.5s" repeatCount="indefinite" />\n </path>\n </svg>\n </span>\n\n \x3c!-- clear search button --\x3e\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 \x3c!-- Search button --\x3e\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>\n</div>\n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n<pfe-button class="search-button--textual" hidden>\n <button class="search-button__text" disabled></button>\n</pfe-button>'}},{key:"schemaUrl",get:function(){return"pfe-autocomplete.json"}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.10.1"}},{key:"schemaProperties",get:function(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}},{key:"slots",get:function(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}},{key:"tag",get:function(){return"pfe-autocomplete"}},{key:"properties",get:function(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}},{key:"events",get:function(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}}]),o(h,[{key:"_inputInit",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE});0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false")):console.error(h.tag+": The only child in the light DOM must be an input tag")):console.error(h.tag+": There must be a input tag in the light DOM")}},{key:"disconnectedCallback",value:function(){n(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(h.events.search,this._closeDroplist),this.removeEventListener(h.events.select,this._optionSelected),this._slot.removeEventListener(h.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}},{key:"_initValueChanged",value:function(e,t){t&&(""===(this._input.value=t)||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}},{key:"_loadingChanged",value:function(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}},{key:"_isDisabledChanged",value:function(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}},{key:"_buttonTextChanged",value:function(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}},{key:"_slotchangeHandler",value:function(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}},{key:"_inputChanged",value:function(){var e=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===u&&(u=!0,window.setTimeout(function(){e._sendAutocompleteRequest(e._input.value),u=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.focus()}},{key:"_search",value:function(){this._doSearch(this._input.value)}},{key:"_closeDroplist",value:function(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(h.events.optionsShown,{composed:!0})}},{key:"_optionSelected",value:function(e){e=e.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(e){this.emitEvent(h.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}},{key:"_sendAutocompleteRequest",value:function(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}},{key:"_reset",value:function(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}},{key:"_activeOption",value:function(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(e){var t=e.keyCode;if(0!==this._dropdown.data.length||t===l||t===d||t===s||t===c){var o=this._dropdown.activeIndex,e=this._dropdown.data.length;if(t==c)this._closeDroplist();else if(t===d){if(!this._dropdown.open)return;o=null===o||"null"===o?e:parseInt(o,10),this._input.value=this._activeOption(o=--o<0?e-1:o)}else if(t===l){if(!this._dropdown.open)return;o=null===o||"null"===o?-1:parseInt(o,10),this._input.value=this._activeOption(o=e-1<(o+=1)?0:o)}else if(t===s){if(this._activeOption(o))return void this.emitEvent(h.events.select,{detail:{optionValue:this._activeOption(o)},composed:!0});t=this._input.value;return void this._doSearch(t)}null!==o&&"null"!==o?this._input.setAttribute("aria-activedescendant","option-"+o):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=o,this._dropdown.activeIndex=o}}}]),h);function h(){t(this,h);var e=a(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,h));return e._inputInit(),e._slotchangeHandler=e._slotchangeHandler.bind(e),e._slot=e.shadowRoot.querySelector("slot"),e._slot.addEventListener(h.events.slotchange,e._slotchangeHandler),e._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",e._clearBtn=e.shadowRoot.querySelector(".clear-search"),e._clearBtn.addEventListener("click",e._clear.bind(e)),e._searchBtn=e.shadowRoot.querySelector(".search-button"),e._searchBtn.addEventListener("click",e._search.bind(e)),e._searchBtnTextual=e.shadowRoot.querySelector(".search-button--textual"),e._searchBtnText=e.shadowRoot.querySelector(".search-button__text"),e._searchBtnTextual.addEventListener("click",e._search.bind(e)),e._dropdown=e.shadowRoot.querySelector("#dropdown"),e._dropdown.data=[],e.activeIndex=null,e.addEventListener("keyup",e._inputKeyUp.bind(e)),e.addEventListener(h.events.search,e._closeDroplist.bind(e)),e.addEventListener(h.events.select,e._optionSelected.bind(e)),e}r(f,e),o(f,[{key:"html",get:function(){return'\n<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n <ul role="listbox" tabindex="-1">\n </ul>\n</div>'}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"version",get:function(){return"1.10.1"}},{key:"tag",get:function(){return"pfe-search-droplist"}},{key:"properties",get:function(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}}]),o(f,[{key:"connectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(p.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'<li id="option-'+t+'" role="option" tabindex="-1" value="'+e+'">'+e+"</li>"}).join("")}},{key:"_activeIndexChanged",value:function(){var e,t,o;this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex&&(this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active"),(e=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")")).classList.add("active"),t=this.shadowRoot.querySelector(".droplist"),o=e.offsetHeight,o+=parseInt(window.getComputedStyle(e).getPropertyValue("margin-bottom"),10),t.scrollTop=e.offsetTop-t.offsetHeight+o)}}]),o=f;function f(){return t(this,f),a(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return e.create(o),e.create(p),p});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min"),require("../../pfe-button/dist/pfe-button.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min","../../pfe-button/dist/pfe-button.umd.min"],t):(e=e||self).PfeAutocomplete=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(e,t,i){return t&&o(e.prototype,t),i&&o(e,i),e};function o(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function n(e,t,i){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,t);if(void 0!==o){if("value"in o)return o.value;o=o.get;return void 0!==o?o.call(i):void 0}if(null!==(e=Object.getPrototypeOf(e)))return n(e,t,i)}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=13,l=40,d=38,c=27,u=!1,p=(r(h,e),i(h,[{key:"html",get:function(){return'\n<style>.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);--pfe-autocomplete--BoxShadow:var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);--pfe-autocomplete--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-autocomplete--Border:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([button-text]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([button-text]) #wrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{right:10px}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:#06c;border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:30px;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;color:#ccc}#input-box-wrapper ::slotted(input:disabled){padding-right:10px}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:12px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}pfe-button.search-button--textual{margin-left:16px}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */</style>\n<div id="wrapper">\n <div id="input-box-wrapper">\n \x3c!-- Input box --\x3e\n <slot></slot>\n\n \x3c!-- loading icon --\x3e\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"\n 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" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"\n dur="0.5s" repeatCount="indefinite" />\n </path>\n </svg>\n </span>\n\n \x3c!-- clear search button --\x3e\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 \x3c!-- Search button --\x3e\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>\n</div>\n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n<pfe-button class="search-button--textual" hidden>\n <button class="search-button__text" disabled></button>\n</pfe-button>'}},{key:"schemaUrl",get:function(){return"pfe-autocomplete.json"}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.11.0"}},{key:"schemaProperties",get:function(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}},{key:"slots",get:function(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}},{key:"tag",get:function(){return"pfe-autocomplete"}},{key:"properties",get:function(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}},{key:"events",get:function(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",slotchange:"slotchange"}}}]),i(h,[{key:"_inputInit",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE});0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("aria-owns","droplist-items"),this._input.setAttribute("aria-controls","droplist-items"),this._input.setAttribute("aria-expanded","false"),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")):console.error(h.tag+": The only child in the light DOM must be an input tag")):console.error(h.tag+": There must be a input tag in the light DOM")}},{key:"disconnectedCallback",value:function(){n(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(h.events.search,this._closeDroplist),this.removeEventListener(h.events.select,this._optionSelected),this._slot.removeEventListener(h.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}},{key:"_initValueChanged",value:function(e,t){t&&(""===(this._input.value=t)||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}},{key:"_loadingChanged",value:function(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}},{key:"_isDisabledChanged",value:function(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}},{key:"_buttonTextChanged",value:function(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}},{key:"_slotchangeHandler",value:function(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}},{key:"_inputChanged",value:function(){var e=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===u&&(u=!0,window.setTimeout(function(){e._sendAutocompleteRequest(e._input.value),u=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.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"),this._input.setAttribute("aria-expanded","false")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(h.events.optionsShown,{composed:!0}),this._input.setAttribute("aria-expanded","true")}},{key:"_optionSelected",value:function(e){e=e.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(e){this.emitEvent(h.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}},{key:"_sendAutocompleteRequest",value:function(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}},{key:"_reset",value:function(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}},{key:"_activeOption",value:function(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(e){var t=e.keyCode;if(0!==this._dropdown.data.length||t===l||t===d||t===s||t===c){var i=this._dropdown.activeIndex,e=this._dropdown.data.length;if(t==c)this._closeDroplist();else if(t===d){if(!this._dropdown.open)return;i=null===i||"null"===i?e:parseInt(i,10),this._input.value=this._activeOption(i=--i<0?e-1:i)}else if(t===l){if(!this._dropdown.open)return;i=null===i||"null"===i?-1:parseInt(i,10),this._input.value=this._activeOption(i=e-1<(i+=1)?0:i)}else if(t===s){if(this._activeOption(i))return void this.emitEvent(h.events.select,{detail:{optionValue:this._activeOption(i)},composed:!0});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}}}]),h);function h(){t(this,h);var e=a(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,h));return e._inputInit(),e._slotchangeHandler=e._slotchangeHandler.bind(e),e._slot=e.shadowRoot.querySelector("slot"),e._slot.addEventListener(h.events.slotchange,e._slotchangeHandler),e._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",e._clearBtn=e.shadowRoot.querySelector(".clear-search"),e._clearBtn.addEventListener("click",e._clear.bind(e)),e._searchBtn=e.shadowRoot.querySelector(".search-button"),e._searchBtn.addEventListener("click",e._search.bind(e)),e._searchBtnTextual=e.shadowRoot.querySelector(".search-button--textual"),e._searchBtnText=e.shadowRoot.querySelector(".search-button__text"),e._searchBtnTextual.addEventListener("click",e._search.bind(e)),e._dropdown=e.shadowRoot.querySelector("#dropdown"),e._dropdown.data=[],e.activeIndex=null,e.addEventListener("keyup",e._inputKeyUp.bind(e)),e.addEventListener(h.events.search,e._closeDroplist.bind(e)),e.addEventListener(h.events.select,e._optionSelected.bind(e)),e}r(f,e),i(f,[{key:"html",get:function(){return'\n<style>:host{position:relative;display:none;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{-webkit-box-shadow:inset 0 0 0 2px #a30000;box-shadow:inset 0 0 0 2px #a30000;-webkit-box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000);box-shadow:inset 0 0 0 var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--color--feedback--critical,#a30000)}.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:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#f0f0f0;background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)} /*# sourceMappingURL=pfe-search-droplist.min.css.map */</style>\n<div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>\n<div class="droplist">\n <ul role="listbox" id="droplist-items" 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.11.0"}},{key:"tag",get:function(){return"pfe-search-droplist"}},{key:"properties",get:function(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}}]),i(f,[{key:"connectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(p.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'<li id="option-'+t+'" role="option" tabindex="-1" value="'+e+'">'+e+"</li>"}).join("")}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){var e=this._ul.querySelector(".active"),t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e&&(e.classList.remove("active"),e.removeAttribute("aria-selected")),t.classList.add("active"),t.setAttribute("aria-selected","true");var i=this.shadowRoot.querySelector(".droplist"),e=t.offsetHeight;return e+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),i.scrollTop=t.offsetTop-i.offsetHeight+e,t}}}]),i=f;function f(){return t(this,f),a(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return e.create(i),e.create(p),p});
//# sourceMappingURL=pfe-autocomplete.umd.min.js.map

8

package.json

@@ -8,3 +8,3 @@ {

},
"version": "1.10.1",
"version": "1.11.0",
"description": "Autocomplete element for PatternFly Elements",

@@ -51,6 +51,6 @@ "keywords": [

"devDependencies": {
"@patternfly/pfe-sass": "^1.10.1"
"@patternfly/pfe-sass": "^1.11.0"
},
"dependencies": {
"@patternfly/pfelement": "^1.10.1"
"@patternfly/pfelement": "^1.11.0"
},

@@ -61,3 +61,3 @@ "generator-pfelement-version": "0.5.5",

},
"gitHead": "179e4a0bc3f5f9ab439cf1c3963836651d0fcd37"
"gitHead": "13e9f52cfae77daf897856fbe865896a73707703"
}
dist/pfe-autocomplete.css.map

Sorry, the diff of this file is not supported yet

dist/pfe-autocomplete.js.map

Sorry, the diff of this file is not supported yet

dist/pfe-autocomplete.min.js.map

Sorry, the diff of this file is not supported yet

dist/pfe-autocomplete.umd.js.map

Sorry, the diff of this file is not supported yet

dist/pfe-autocomplete.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc