@patternfly/pfe-autocomplete - npm Package Compare versions

Comparing version 2.0.0-next.1 to 2.0.0-next.2

package.json

 {
   "name": "@patternfly/pfe-autocomplete",
   "license": "MIT",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "description": "Autocomplete for PatternFly Elements",
@@ -12,14 +12,5 @@ "customElements": "custom-elements.json",
   "exports": {
-    ".": {
-      "esbuild": "./pfe-autocomplete.ts",
-      "default": "./pfe-autocomplete.js"
-    },
-    "./*": {
-      "esbuild": "./*.ts",
-      "default": "./*.js"
-    },
-    "./*.js": {
-      "esbuild": "./*.ts",
-      "default": "./*.js"
-    }
+    ".": "./pfe-autocomplete.js",
+    "./*": "./*.js",
+    "./*.js": "./*.js"
   },
@@ -80,3 +71,3 @@ "publishConfig": {
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.0",
+    "@patternfly/pfe-core": "^2.0.0-next.3",
     "@patternfly/pfe-sass": "^2.0.0-next.0",
@@ -83,0 +74,0 @@ "lit": "^2.1.2"

pfe-autocomplete.js

@@ -1,356 +0,2 @@
-var O=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var e=(n,t,i,r)=>{for(var s=r>1?void 0:r?S(t,i):t,d=n.length-1,f;d>=0;d--)(f=n[d])&&(s=(r?f(t,i,s):f(s))||s);return r&&s&&O(t,i,s),s};import{LitElement as T,html as G}from"lit";import{customElement as J,property as p,state as C,query as $}from"lit/decorators.js";import{ComposedEvent as b}from"@patternfly/pfe-core";import{pfelement as Q,bound as l,observed as u}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as h}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{LitElement as q,html as _}from"lit";import{customElement as z,property as c,state as A,query as w}from"lit/decorators.js";import{classMap as U}from"lit/directives/class-map.js";import{repeat as D}from"lit/directives/repeat.js";import{ComposedEvent as N}from"@patternfly/pfe-core";import{pfelement as K,bound as v,observed as m}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as V}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as R}from"lit";var B=R`:host {
-  position: relative;
-  display: none;
-  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
-  font-size: var(--pfe-theme--font-size, 1rem);
-  line-height: var(--pfe-theme--line-height, 1.5);
-}
-
-:host([open]) {
-  display: block;
-}
-
-:host([debug]) [aria-selected] {
-  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: 0px;
-  right: 0px;
-  max-height: 250px;
-  z-index: 9999;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  border: 1px solid #ccc;
-}
-
-.droplist,
-:host([on=light]) .droplist,
-:host(:not([on])) .droplist {
-  background-color: var(--pfe-theme--color--surface--lighter, #f0f0f0);
-  color: var(--pfe-broadcasted--text, #3c3f42);
-}
-.droplist li.active,
-:host([on=light]) .droplist li.active,
-:host(:not([on])) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--lighter, #f0f0f0);
-}
-
-:host([on=dark]) .droplist {
-  background-color: var(--pfe-theme--color--surface--darker, #3c3f42);
-}
-:host([on=dark]) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--darkest, #151515);
-}
-
-:host([on=saturated]) .droplist {
-  background-color: var(--pfe-theme--color--surface--accent, #004080);
-}
-:host([on=saturated]) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--complement, #002952);
-}
-
-ul {
-  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
-  font-size: var(--pfe-theme--font-size, 1rem);
-  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;
-}
-
-:host([on=dark]) {
-  --pfe-clipboard--icon--Color: var(--pfe---icon--Color--dark);
-  --pfe-clipboard--icon--Color--hover: var(--pfe---icon--Color--hover--dark);
-}
-
-:host([on=saturated]) {
-  --pfe-clipboard--icon--Color: var(--pfe---icon--Color--saturated);
-  --pfe-clipboard--icon--Color--hover: var(--pfe---icon--Color--hover--saturated);
-}`,g=B;function y(n){return n?.tagName==="LI"}var k=class extends N{constructor(t){super("select");this.value=t}},a=class extends q{constructor(){super(...arguments);this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let t=this.data??[];return _`
-      <div class="suggestions-aria-help sr-only"
-          role="status"
-          aria-hidden="false"
-          aria-live="polite"
-      >${this.ariaAnnounceText}</div>
-      <div class="droplist">
-        <ul id="droplist-items"
-            part="listbox"
-            role="listbox"
-            @click="${this._optionSelected}"
-            @keyup="${this._onKeyup}"
-            tabindex="-1">
-        ${D(t,i=>i,(i,r)=>_`
-          <li id="option-${r}"
-            part="option item-index-${r}"
-            class="${U({active:r===this.activeIndex})}"
-            aria-selected="${String(r===this.activeIndex)}"
-            role="option"
-            tabindex="-1"
-            value="${i}"
-          >${i}</li>
-        `)}
-        </ul>
-      </div>
-    `}_onKeyup(t){switch(t.key){case"Enter":case" ":y(t.target)&&this._select(t.target)}}_optionSelected(t){y(t.target)&&this._select(t.target)}_select(t){let i=t.innerText;this.dispatchEvent(V("pfe-autocomplete:option-selected",{optionValue:i})),this.dispatchEvent(new k(i))}_renderOptions(){this.ariaAnnounceText=this.announceTemplate?this.announceTemplate.replace("${numOptions}",this.data.length.toString()):""}_activeIndexChanged(){if(!this.data||this.data.length===0||this.activeIndex===null)return;let{activeElement:t,droplist:i}=this;if(!t||!i)return;let r=t.offsetHeight,s=window.getComputedStyle(t).getPropertyValue("margin-bottom");r+=parseInt(s,10),i.scrollTop=t.offsetTop-i.offsetHeight+r}};a.version="2.0.0-next.1",a.styles=[g],e([c({type:Boolean,reflect:!0})],a.prototype,"open",2),e([m("_renderOptions"),c({type:Boolean,reflect:!0})],a.prototype,"reflow",2),e([c({attribute:"announce-template",reflect:!0})],a.prototype,"announceTemplate",2),e([m,c({type:Number,reflect:!0,attribute:"active-index"})],a.prototype,"activeIndex",2),e([m("_renderOptions"),c({attribute:!1})],a.prototype,"data",2),e([A()],a.prototype,"ariaAnnounceText",2),e([w(".active")],a.prototype,"activeElement",2),e([w(".droplist")],a.prototype,"droplist",2),e([v],a.prototype,"_onKeyup",1),e([v],a.prototype,"_optionSelected",1),e([v],a.prototype,"_renderOptions",1),a=e([z("pfe-search-droplist"),K()],a);import{css as F}from"lit";var j=F`.sr-only {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-:host {
-  display: block;
-  position: relative;
-  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: flex;
-}
-:host([button-text]) #wrapper {
-  flex: 1;
-}
-:host([button-text]) #input-box-wrapper {
-  position: relative;
-}
-:host([button-text]) button.clear-search {
-  width: 40px;
-}
-
-:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button) {
-  -webkit-appearance: none;
-}
-
-#input-box-wrapper {
-  border-color: var(--pfe-theme--color--feedback--info, #06c);
-}
-#input-box-wrapper ::slotted(input) {
-  width: 100%;
-  flex: 1;
-  box-shadow: var(--pfe-autocomplete--BoxShadow, var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa)) !important;
-  padding-left: 10px;
-  padding-right: 0;
-  border-radius: var(--pfe-theme--ui--border-radius, 2px);
-  background-color: var(--pfe-autocomplete--BackgroundColor, var(--pfe-theme--color--surface--lightest, #fff));
-  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: var(--pfe-theme--font-size, 1rem);
-  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
-  height: calc(var(--pfe-theme--ui--element--size, 20px) * 2);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  opacity: 1;
-  outline: 0;
-}
-#input-box-wrapper ::slotted(input:disabled),
-#input-box-wrapper button:disabled {
-  cursor: not-allowed;
-  color: #ccc;
-}
-#input-box-wrapper ::slotted(input:disabled) {
-  padding-right: 10px;
-}
-#input-box-wrapper button:focus,
-#input-box-wrapper ::slotted(input: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: 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: var(--pfe-theme--color--surface--lightest, #fff);
-}
-button.clear-search:hover {
-  color: var(--pfe-theme--color--ui-base, #6a6e73);
-}
-button.clear-search svg {
-  width: 14px;
-  position: relative;
-  top: 2px;
-  stroke: var(--pfe-theme--color--surface--border, #d2d2d2);
-}
-button.clear-search:hover svg, button.clear-search:focus svg {
-  opacity: 1;
-  stroke: var(--pfe-theme--color--link, #06c);
-}
-button[disabled].clear-search:hover svg, button[disabled].clear-search:focus svg {
-  stroke: var(--pfe-theme--color--surface--border, #d2d2d2);
-}
-button.search-button {
-  margin-top: 1px;
-  margin-bottom: 1px;
-  right: 1px;
-  width: 30px;
-  background-color: var(--pfe-theme--color--surface--lightest, #fff);
-}
-button.search-button svg {
-  fill: var(--pfe-theme--color--link, #06c);
-  width: 18px;
-  position: relative;
-  top: 2px;
-  stroke: var(--pfe-theme--color--surface--border, #d2d2d2);
-}
-button.search-button:hover svg, button.search-button:focus svg {
-  fill: var(--pfe-theme--color--link--hover, #004080);
-}
-button.search-button:disabled svg {
-  fill: var(--pfe-theme--color--ui-disabled, #d2d2d2);
-}
-
-pfe-button.search-button--textual {
-  margin-left: 16px;
-}
-
-.loading {
-  position: absolute;
-  width: 30px;
-  right: 52px;
-  top: 0px;
-  bottom: 0px;
-}
-.loading svg {
-  width: 26px;
-  padding-top: 7px;
-}`,E=j;var L=class extends b{constructor(){super("clear")}},H=class extends b{constructor(){super("show")}},I=class extends b{constructor(t){super("search");this.value=t}},M=class extends b{constructor(t){super("select");this.value=t}};function W(n){return n?.tagName?.toLowerCase?.()==="input"}var x=!1,o=class extends T{constructor(){super();this.initValue="";this.loading=!1;this.disabled=!1;this.debounce=300;this.data=[];this.announceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.";this.activeIndex=null;this.showTextualSearch=!1;this.addEventListener("keyup",this._inputKeyUp),this.addEventListener("pfe-autocomplete:search-event",this._closeDroplist)}get ariaAnnounceTemplate(){return this.announceTemplate}set ariaAnnounceTemplate(t){this.announceTemplate=t}connectedCallback(){this._inputInit(),super.connectedCallback()}render(){let t=this.disabled||!(this._input?.value!==""&&!this._input?.hasAttribute?.("disabled")),i=!this.loading||this._input?.value==="";return G`
-      <div id="wrapper" part="container">
-        <div id="input-box-wrapper">
-          <!-- Input box -->
-          <slot @slotchange="${this._inputInit}"></slot>
-
-          <!-- loading icon -->
-          <span class="loading" aria-hidden="${String(i)}" ?hidden="${i}">
-            <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40" part="icon">
-              <path opacity="0.2" fill="#000"
-                d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-                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
-                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" />
-              <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-                C22.32,8.481,24.301,9.057,26.013,10.047z">
-                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
-                  dur="0.5s" repeatCount="indefinite" />
-              </path>
-            </svg>
-          </span>
-
-          <!-- clear search button -->
-          <button class="clear-search"
-              type="button"
-              part="clear-button"
-              aria-label="clear search query"
-              ?disabled="${this.disabled}"
-              ?hidden="${!this._input?.value}"
-              @click="${this._clear}">
-            <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">
-              <line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>
-              <line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line>
-            </svg>
-          </button>
-
-          <!-- Search button -->
-          <button class="search-button"
-              type="button"
-              part="search-button"
-              aria-label="Search"
-              ?disabled="${!this._input?.value||this.disabled}"
-              ?hidden="${this.showTextualSearch}"
-              @click="${this._search}">
-            <svg viewBox="0 0 512 512">
-              <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
-            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
-            c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934
-            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
-            S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z" />
-            </svg>
-          </button>
-        </div>
-        <pfe-search-droplist id="dropdown"
-            part="droplist"
-            exportparts="listbox,option,${this.data.map((r,s)=>`item-index-${s}`).join(",")}"
-            @select="${this._optionSelected}"
-            .announceTemplate="${this.announceTemplate}"
-            .activeIndex="${this.activeIndex}"
-            .data="${this.data}"
-        ></pfe-search-droplist>
-      </div>
-
-      <!-- Search button (when [button-text] attr provided) -->
-      <pfe-button class="search-button--textual"
-          part="text-search-button"
-          ?hidden="${!this.showTextualSearch||t}"
-          @click="${this._search}">
-        <button class="search-button__text"
-            ?disabled="${t}"
-        >${this.buttonText||"Search"}</button>
-      </pfe-button>
-    `}disconnectedCallback(){super.disconnectedCallback(),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist))}async _inputInit(){await this.updateComplete;let t=this._slot?.assignedElements()??[];if(t.length===0)return console.error("pfe-autocomplete: There must be a input tag in the light DOM");if(t.length>1||t.some(i=>!W(i)))return console.error("pfe-autocomplete: The only child in the light DOM must be an input tag");[this._input]=t,this._input.addEventListener("input",this._inputChanged),this._input.addEventListener("blur",this._closeDroplist),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"),this._isDisabledChanged(),this._disabledChanged()}_initValueChanged(t,i){i&&this._input&&(this._input.value=i)}_isDisabledChanged(){let t=this.isDisabled;t!=null&&this.disabled!==t&&(this.disabled=!!t)}_disabledChanged(){this._input?.toggleAttribute?.("disabled",this.disabled)}_buttonTextChanged(t,i){t===null?this.showTextualSearch=!1:(i===null||i==="")&&(this.showTextualSearch=!1)}_inputChanged(){if(this._input?.value==="")return this._reset();x===!1&&(x=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input?.value??""),x=!1},this.debounce)),this.requestUpdate()}async _clear(){this._input&&(this._closeDroplist(),this._input.value="",this.requestUpdate(),await this.updateComplete,this._input.focus()),this.dispatchEvent(h("pfe-autocomplete:option-cleared",{searchValue:""})),this.dispatchEvent(new L)}_search(){this._doSearch(this._input?.value)}async _closeDroplist(){this._dropdown&&(this._dropdown.open=!1),this.activeIndex=null,this._input?.setAttribute("aria-expanded","false")}_openDroplist(){this.activeIndex=null,this._dropdown&&(this._dropdown.open=!0),this.dispatchEvent(h("pfe-autocomplete:options-shown")),this.dispatchEvent(new H),this._input?.setAttribute?.("aria-expanded","true")}_optionSelected(t){let{value:i}=t;this._input&&(this._input.value=i),this._doSearch(i)}async _doSearch(t=""){this.dispatchEvent(h("pfe-autocomplete:search-event",{searchValue:t})),this.dispatchEvent(new I(t)),await this._reset(),this.selectedValue=t}_sendAutocompleteRequest(t){this.autocompleteRequest?.({query:t},this._autocompleteCallback)}async _autocompleteCallback(t){this.data=t,this._dropdown&&(this._dropdown.reflow=!0),await this.updateComplete,t.length?this._openDroplist():this._closeDroplist()}async _reset(){if(await this.updateComplete,!this._dropdown||!this._input)throw new Error("Unexpected Error");this.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this.data=[],this._closeDroplist(),this.requestUpdate(),await this.updateComplete}_activeOption(t){if(typeof t=="number")return this._dropdown?.shadowRoot?.querySelector?.(`li:nth-child(${t+1})`)?.textContent??""}async _inputKeyUp(t){let{key:i}=t;if(!this._input||!this._dropdown)throw new Error("Unexpected error");if(this.data.length===0&&i!=="ArrowDown"&&i!=="ArrowUp"&&i!=="Enter"&&i!=="Escape")return;let{activeIndex:r}=this,s=this.data.length;switch(i){case"Escape":this._closeDroplist();break;case"ArrowUp":if(!this._dropdown.open)return;r=r===null?s:r,r-=1,r<0&&(r=s-1),this._input.value=this._activeOption(r)??"";break;case"ArrowDown":if(!this._dropdown.open)return;r=r===null?-1:r,r+=1,r>s-1&&(r=0),this._input.value=this._activeOption(r)??"";break;case"Enter":{let d=this._activeOption(r);d?(this.dispatchEvent(h("pfe-autocomplete:option-selected",{optionValue:d})),this.dispatchEvent(new M(d))):this._doSearch(this._input.value);return}}r!==null?this._input.setAttribute("aria-activedescendant",`option-${r}`):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=r}async clear(){await this._clear()}search(){this._search()}};o.version="2.0.0-next.1",o.styles=[E],o.shadowRootOptions={...T.shadowRootOptions,delegatesFocus:!0},e([u,p({attribute:"init-value",reflect:!0})],o.prototype,"initValue",2),e([p({type:Boolean,reflect:!0})],o.prototype,"loading",2),e([u,p({type:Boolean,reflect:!0})],o.prototype,"disabled",2),e([u,p({attribute:"is-disabled",type:Boolean})],o.prototype,"isDisabled",2),e([p({type:Number,reflect:!0})],o.prototype,"debounce",2),e([p({reflect:!0,attribute:"selected-value"})],o.prototype,"selectedValue",2),e([u,p({attribute:"button-text",reflect:!0})],o.prototype,"buttonText",2),e([p({attribute:!1})],o.prototype,"data",2),e([p({attribute:"announce-template",reflect:!0})],o.prototype,"announceTemplate",2),e([p({attribute:"aria-announce-template"})],o.prototype,"ariaAnnounceTemplate",1),e([C()],o.prototype,"activeIndex",2),e([C()],o.prototype,"showTextualSearch",2),e([$("slot")],o.prototype,"_slot",2),e([$("#dropdown")],o.prototype,"_dropdown",2),e([l],o.prototype,"_inputChanged",1),e([l],o.prototype,"_clear",1),e([l],o.prototype,"_search",1),e([l],o.prototype,"_closeDroplist",1),e([l],o.prototype,"_openDroplist",1),e([l],o.prototype,"_doSearch",1),e([l],o.prototype,"_autocompleteCallback",1),e([l],o.prototype,"_inputKeyUp",1),o=e([J("pfe-autocomplete"),Q()],o);export{L as AutocompleteClearEvent,I as AutocompleteSearchEvent,M as AutocompleteSelectEvent,H as AutocompleteShowEvent,o as PfeAutocomplete};
+var O=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var e=(n,t,i,r)=>{for(var s=r>1?void 0:r?R(t,i):t,d=n.length-1,f;d>=0;d--)(f=n[d])&&(s=(r?f(t,i,s):f(s))||s);return r&&s&&O(t,i,s),s};import{LitElement as T,html as G}from"lit";import{customElement as J,property as l,state as C,query as $}from"lit/decorators.js";import{ComposedEvent as b}from"@patternfly/pfe-core";import{pfelement as Q,bound as p,observed as u}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as h}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{LitElement as q,html as _}from"lit";import{customElement as z,property as c,state as A,query as w}from"lit/decorators.js";import{classMap as U}from"lit/directives/class-map.js";import{repeat as D}from"lit/directives/repeat.js";import{ComposedEvent as N}from"@patternfly/pfe-core";import{pfelement as K,bound as v,observed as m}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as V}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as S}from"lit";var B=S`:host{position:relative;display:none;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-theme--font-size, 1rem);line-height:var(--pfe-theme--line-height, 1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{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}.droplist,:host(:not([on])) .droplist,:host([on=light]) .droplist{background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0);color:var(--pfe-broadcasted--text,#3c3f42)}.droplist li.active,:host(:not([on])) .droplist li.active,:host([on=light]) .droplist li.active{background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}:host([on=dark]) .droplist{background-color:var(--pfe-theme--color--surface--darker,#3c3f42)}:host([on=dark]) .droplist li.active{background-color:var(--pfe-theme--color--surface--darkest,#151515)}:host([on=saturated]) .droplist{background-color:var(--pfe-theme--color--surface--accent,#004080)}:host([on=saturated]) .droplist li.active{background-color:var(--pfe-theme--color--surface--complement,#002952)}ul{font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-theme--font-size, 1rem);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}:host([on=dark]){--pfe-clipboard--icon--Color:var(--pfe---icon--Color--dark);--pfe-clipboard--icon--Color--hover:var(--pfe---icon--Color--hover--dark)}:host([on=saturated]){--pfe-clipboard--icon--Color:var(--pfe---icon--Color--saturated);--pfe-clipboard--icon--Color--hover:var(--pfe---icon--Color--hover--saturated)}`,x=B;function y(n){return n?.tagName==="LI"}var k=class extends N{constructor(t){super("select");this.value=t}},a=class extends q{constructor(){super(...arguments);this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let t=this.data??[];return _`<div class="suggestions-aria-help sr-only" role="status" aria-hidden="false" aria-live="polite">${this.ariaAnnounceText}</div><div class="droplist"><ul id="droplist-items" part="listbox" role="listbox" @click="${this._optionSelected}" @keyup="${this._onKeyup}" tabindex="-1">${D(t,i=>i,(i,r)=>_`<li id="option-${r}" part="option item-index-${r}" class="${U({active:r===this.activeIndex})}" aria-selected="${String(r===this.activeIndex)}" role="option" tabindex="-1" value="${i}">${i}</li>`)}</ul></div>`}_onKeyup(t){switch(t.key){case"Enter":case" ":y(t.target)&&this._select(t.target)}}_optionSelected(t){y(t.target)&&this._select(t.target)}_select(t){let i=t.innerText;this.dispatchEvent(V("pfe-autocomplete:option-selected",{optionValue:i})),this.dispatchEvent(new k(i))}_renderOptions(){this.ariaAnnounceText=this.announceTemplate?this.announceTemplate.replace("${numOptions}",this.data.length.toString()):""}_activeIndexChanged(){if(!this.data||this.data.length===0||this.activeIndex===null)return;let{activeElement:t,droplist:i}=this;if(!t||!i)return;let r=t.offsetHeight,s=window.getComputedStyle(t).getPropertyValue("margin-bottom");r+=parseInt(s,10),i.scrollTop=t.offsetTop-i.offsetHeight+r}};a.version="{{version}}",a.styles=[x],e([c({type:Boolean,reflect:!0})],a.prototype,"open",2),e([m("_renderOptions"),c({type:Boolean,reflect:!0})],a.prototype,"reflow",2),e([c({attribute:"announce-template",reflect:!0})],a.prototype,"announceTemplate",2),e([m,c({type:Number,reflect:!0,attribute:"active-index"})],a.prototype,"activeIndex",2),e([m("_renderOptions"),c({attribute:!1})],a.prototype,"data",2),e([A()],a.prototype,"ariaAnnounceText",2),e([w(".active")],a.prototype,"activeElement",2),e([w(".droplist")],a.prototype,"droplist",2),e([v],a.prototype,"_onKeyup",1),e([v],a.prototype,"_optionSelected",1),e([v],a.prototype,"_renderOptions",1),a=e([z("pfe-search-droplist"),K()],a);import{css as F}from"lit";var j=F`.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}:host{display:block;position:relative;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:flex}:host([button-text]) #wrapper{flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{width:40px}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;flex:1;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:0;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));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:var(--pfe-theme--font-size, 1rem);font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);transition:border-color ease-in-out .15s,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: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:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:14px;position:relative;top:2px;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{margin-top:1px;margin-bottom:1px;right:1px;width:30px;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.search-button svg{fill:var(--pfe-theme--color--link,#06c);width:18px;position:relative;top:2px;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button:focus svg,button.search-button:hover svg{fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{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}`,E=j;var L=class extends b{constructor(){super("clear")}},H=class extends b{constructor(){super("show")}},I=class extends b{constructor(t){super("search");this.value=t}},M=class extends b{constructor(t){super("select");this.value=t}};function W(n){return n?.tagName?.toLowerCase?.()==="input"}var g=!1,o=class extends T{constructor(){super();this.initValue="";this.loading=!1;this.disabled=!1;this.debounce=300;this.data=[];this.announceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.";this.activeIndex=null;this.showTextualSearch=!1;this.addEventListener("keyup",this._inputKeyUp),this.addEventListener("pfe-autocomplete:search-event",this._closeDroplist)}get ariaAnnounceTemplate(){return this.announceTemplate}set ariaAnnounceTemplate(t){this.announceTemplate=t}connectedCallback(){this._inputInit(),super.connectedCallback()}render(){let t=this.disabled||!(this._input?.value!==""&&!this._input?.hasAttribute?.("disabled")),i=!this.loading||this._input?.value==="";return G`<div id="wrapper" part="container"><div id="input-box-wrapper"><slot @slotchange="${this._inputInit}"></slot><span class="loading" aria-hidden="${String(i)}" ?hidden="${i}"><svg viewBox="0 0 40 40" enable-background="new 0 0 40 40" part="icon"><path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946                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                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"/><path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0                C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/></path></svg> </span><button class="clear-search" type="button" part="clear-button" aria-label="clear search query" ?disabled="${this.disabled}" ?hidden="${!this._input?.value}" @click="${this._clear}"><svg viewBox="0 0 40 40" enable-background="new 0 0 40 40"><line x1="5" y1="5" x2="35" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line><line x1="35" y1="5" x2="5" y2="35" stroke-width="10" stroke-linecap="round" stroke-miterlimit="10"></line></svg></button> <button class="search-button" type="button" part="search-button" aria-label="Search" ?disabled="${!this._input?.value||this.disabled}" ?hidden="${this.showTextualSearch}" @click="${this._search}"><svg viewBox="0 0 512 512"><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            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            c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934            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            S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/></svg></button></div><pfe-search-droplist id="dropdown" part="droplist" exportparts="listbox,option,${this.data.map((r,s)=>`item-index-${s}`).join(",")}" @select="${this._optionSelected}" .announceTemplate="${this.announceTemplate}" .activeIndex="${this.activeIndex}" .data="${this.data}"></pfe-search-droplist></div><pfe-button class="search-button--textual" part="text-search-button" ?hidden="${!this.showTextualSearch||t}" @click="${this._search}"><button class="search-button__text" ?disabled="${t}">${this.buttonText||"Search"}</button></pfe-button>`}disconnectedCallback(){super.disconnectedCallback(),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist))}async _inputInit(){await this.updateComplete;let t=this._slot?.assignedElements()??[];if(t.length===0)return console.error("pfe-autocomplete: There must be a input tag in the light DOM");if(t.length>1||t.some(i=>!W(i)))return console.error("pfe-autocomplete: The only child in the light DOM must be an input tag");[this._input]=t,this._input.addEventListener("input",this._inputChanged),this._input.addEventListener("blur",this._closeDroplist),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"),this._isDisabledChanged(),this._disabledChanged()}_initValueChanged(t,i){i&&this._input&&(this._input.value=i)}_isDisabledChanged(){let t=this.isDisabled;t!=null&&this.disabled!==t&&(this.disabled=!!t)}_disabledChanged(){this._input?.toggleAttribute?.("disabled",this.disabled)}_buttonTextChanged(t,i){t===null?this.showTextualSearch=!1:(i===null||i==="")&&(this.showTextualSearch=!1)}_inputChanged(){if(this._input?.value==="")return this._reset();g===!1&&(g=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input?.value??""),g=!1},this.debounce)),this.requestUpdate()}async _clear(){this._input&&(this._closeDroplist(),this._input.value="",this.requestUpdate(),await this.updateComplete,this._input.focus()),this.dispatchEvent(h("pfe-autocomplete:option-cleared",{searchValue:""})),this.dispatchEvent(new L)}_search(){this._doSearch(this._input?.value)}async _closeDroplist(){this._dropdown&&(this._dropdown.open=!1),this.activeIndex=null,this._input?.setAttribute("aria-expanded","false")}_openDroplist(){this.activeIndex=null,this._dropdown&&(this._dropdown.open=!0),this.dispatchEvent(h("pfe-autocomplete:options-shown")),this.dispatchEvent(new H),this._input?.setAttribute?.("aria-expanded","true")}_optionSelected(t){let{value:i}=t;this._input&&(this._input.value=i),this._doSearch(i)}async _doSearch(t=""){this.dispatchEvent(h("pfe-autocomplete:search-event",{searchValue:t})),this.dispatchEvent(new I(t)),await this._reset(),this.selectedValue=t}_sendAutocompleteRequest(t){this.autocompleteRequest?.({query:t},this._autocompleteCallback)}async _autocompleteCallback(t){this.data=t,this._dropdown&&(this._dropdown.reflow=!0),await this.updateComplete,t.length?this._openDroplist():this._closeDroplist()}async _reset(){if(await this.updateComplete,!this._dropdown||!this._input)throw new Error("Unexpected Error");this.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this.data=[],this._closeDroplist(),this.requestUpdate(),await this.updateComplete}_activeOption(t){if(typeof t=="number")return this._dropdown?.shadowRoot?.querySelector?.(`li:nth-child(${t+1})`)?.textContent??""}async _inputKeyUp(t){let{key:i}=t;if(!this._input||!this._dropdown)throw new Error("Unexpected error");if(this.data.length===0&&i!=="ArrowDown"&&i!=="ArrowUp"&&i!=="Enter"&&i!=="Escape")return;let{activeIndex:r}=this,s=this.data.length;switch(i){case"Escape":this._closeDroplist();break;case"ArrowUp":if(!this._dropdown.open)return;r=r===null?s:r,r-=1,r<0&&(r=s-1),this._input.value=this._activeOption(r)??"";break;case"ArrowDown":if(!this._dropdown.open)return;r=r===null?-1:r,r+=1,r>s-1&&(r=0),this._input.value=this._activeOption(r)??"";break;case"Enter":{let d=this._activeOption(r);d?(this.dispatchEvent(h("pfe-autocomplete:option-selected",{optionValue:d})),this.dispatchEvent(new M(d))):this._doSearch(this._input.value);return}}r!==null?this._input.setAttribute("aria-activedescendant",`option-${r}`):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=r}async clear(){await this._clear()}search(){this._search()}};o.version="{{version}}",o.styles=[E],o.shadowRootOptions={...T.shadowRootOptions,delegatesFocus:!0},e([u,l({attribute:"init-value",reflect:!0})],o.prototype,"initValue",2),e([l({type:Boolean,reflect:!0})],o.prototype,"loading",2),e([u,l({type:Boolean,reflect:!0})],o.prototype,"disabled",2),e([u,l({attribute:"is-disabled",type:Boolean})],o.prototype,"isDisabled",2),e([l({type:Number,reflect:!0})],o.prototype,"debounce",2),e([l({reflect:!0,attribute:"selected-value"})],o.prototype,"selectedValue",2),e([u,l({attribute:"button-text",reflect:!0})],o.prototype,"buttonText",2),e([l({attribute:!1})],o.prototype,"data",2),e([l({attribute:"announce-template",reflect:!0})],o.prototype,"announceTemplate",2),e([l({attribute:"aria-announce-template"})],o.prototype,"ariaAnnounceTemplate",1),e([C()],o.prototype,"activeIndex",2),e([C()],o.prototype,"showTextualSearch",2),e([$("slot")],o.prototype,"_slot",2),e([$("#dropdown")],o.prototype,"_dropdown",2),e([p],o.prototype,"_inputChanged",1),e([p],o.prototype,"_clear",1),e([p],o.prototype,"_search",1),e([p],o.prototype,"_closeDroplist",1),e([p],o.prototype,"_openDroplist",1),e([p],o.prototype,"_doSearch",1),e([p],o.prototype,"_autocompleteCallback",1),e([p],o.prototype,"_inputKeyUp",1),o=e([J("pfe-autocomplete"),Q()],o);export{L as AutocompleteClearEvent,I as AutocompleteSearchEvent,M as AutocompleteSelectEvent,H as AutocompleteShowEvent,o as PfeAutocomplete};
 //# sourceMappingURL=pfe-autocomplete.js.map

pfe-search-droplist.js

@@ -1,117 +0,2 @@
-var g=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var r=(n,e,o,i)=>{for(var a=i>1?void 0:i?x(e,o):e,s=n.length-1,p;s>=0;s--)(p=n[s])&&(a=(i?p(e,o,a):p(a))||a);return i&&a&&g(e,o,a),a};import{LitElement as T,html as f}from"lit";import{customElement as E,property as l,state as k,query as u}from"lit/decorators.js";import{classMap as H}from"lit/directives/class-map.js";import{repeat as L}from"lit/directives/repeat.js";import{ComposedEvent as C}from"@patternfly/pfe-core";import{pfelement as w,bound as d,observed as c}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as b}from"lit";var y=b`:host {
-  position: relative;
-  display: none;
-  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
-  font-size: var(--pfe-theme--font-size, 1rem);
-  line-height: var(--pfe-theme--line-height, 1.5);
-}
-
-:host([open]) {
-  display: block;
-}
-
-:host([debug]) [aria-selected] {
-  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: 0px;
-  right: 0px;
-  max-height: 250px;
-  z-index: 9999;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  border: 1px solid #ccc;
-}
-
-.droplist,
-:host([on=light]) .droplist,
-:host(:not([on])) .droplist {
-  background-color: var(--pfe-theme--color--surface--lighter, #f0f0f0);
-  color: var(--pfe-broadcasted--text, #3c3f42);
-}
-.droplist li.active,
-:host([on=light]) .droplist li.active,
-:host(:not([on])) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--lighter, #f0f0f0);
-}
-
-:host([on=dark]) .droplist {
-  background-color: var(--pfe-theme--color--surface--darker, #3c3f42);
-}
-:host([on=dark]) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--darkest, #151515);
-}
-
-:host([on=saturated]) .droplist {
-  background-color: var(--pfe-theme--color--surface--accent, #004080);
-}
-:host([on=saturated]) .droplist li.active {
-  background-color: var(--pfe-theme--color--surface--complement, #002952);
-}
-
-ul {
-  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
-  font-size: var(--pfe-theme--font-size, 1rem);
-  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;
-}
-
-:host([on=dark]) {
-  --pfe-clipboard--icon--Color: var(--pfe---icon--Color--dark);
-  --pfe-clipboard--icon--Color--hover: var(--pfe---icon--Color--hover--dark);
-}
-
-:host([on=saturated]) {
-  --pfe-clipboard--icon--Color: var(--pfe---icon--Color--saturated);
-  --pfe-clipboard--icon--Color--hover: var(--pfe---icon--Color--hover--saturated);
-}`,m=y;function h(n){return n?.tagName==="LI"}var v=class extends C{constructor(e){super("select");this.value=e}},t=class extends T{constructor(){super(...arguments);this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let e=this.data??[];return f`
-      <div class="suggestions-aria-help sr-only"
-          role="status"
-          aria-hidden="false"
-          aria-live="polite"
-      >${this.ariaAnnounceText}</div>
-      <div class="droplist">
-        <ul id="droplist-items"
-            part="listbox"
-            role="listbox"
-            @click="${this._optionSelected}"
-            @keyup="${this._onKeyup}"
-            tabindex="-1">
-        ${L(e,o=>o,(o,i)=>f`
-          <li id="option-${i}"
-            part="option item-index-${i}"
-            class="${H({active:i===this.activeIndex})}"
-            aria-selected="${String(i===this.activeIndex)}"
-            role="option"
-            tabindex="-1"
-            value="${o}"
-          >${o}</li>
-        `)}
-        </ul>
-      </div>
-    `}_onKeyup(e){switch(e.key){case"Enter":case" ":h(e.target)&&this._select(e.target)}}_optionSelected(e){h(e.target)&&this._select(e.target)}_select(e){let o=e.innerText;this.dispatchEvent(_("pfe-autocomplete:option-selected",{optionValue:o})),this.dispatchEvent(new v(o))}_renderOptions(){this.ariaAnnounceText=this.announceTemplate?this.announceTemplate.replace("${numOptions}",this.data.length.toString()):""}_activeIndexChanged(){if(!this.data||this.data.length===0||this.activeIndex===null)return;let{activeElement:e,droplist:o}=this;if(!e||!o)return;let i=e.offsetHeight,a=window.getComputedStyle(e).getPropertyValue("margin-bottom");i+=parseInt(a,10),o.scrollTop=e.offsetTop-o.offsetHeight+i}};t.version="2.0.0-next.1",t.styles=[m],r([l({type:Boolean,reflect:!0})],t.prototype,"open",2),r([c("_renderOptions"),l({type:Boolean,reflect:!0})],t.prototype,"reflow",2),r([l({attribute:"announce-template",reflect:!0})],t.prototype,"announceTemplate",2),r([c,l({type:Number,reflect:!0,attribute:"active-index"})],t.prototype,"activeIndex",2),r([c("_renderOptions"),l({attribute:!1})],t.prototype,"data",2),r([k()],t.prototype,"ariaAnnounceText",2),r([u(".active")],t.prototype,"activeElement",2),r([u(".droplist")],t.prototype,"droplist",2),r([d],t.prototype,"_onKeyup",1),r([d],t.prototype,"_optionSelected",1),r([d],t.prototype,"_renderOptions",1),t=r([E("pfe-search-droplist"),w()],t);export{v as DroplistSelectEvent,t as PfeSearchDroplist};
+var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=(n,e,o,i)=>{for(var a=i>1?void 0:i?b(e,o):e,s=n.length-1,p;s>=0;s--)(p=n[s])&&(a=(i?p(e,o,a):p(a))||a);return i&&a&&g(e,o,a),a};import{LitElement as T,html as f}from"lit";import{customElement as E,property as l,state as k,query as u}from"lit/decorators.js";import{classMap as H}from"lit/directives/class-map.js";import{repeat as L}from"lit/directives/repeat.js";import{ComposedEvent as C}from"@patternfly/pfe-core";import{pfelement as w,bound as d,observed as c}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as x}from"lit";var y=x`:host{position:relative;display:none;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-theme--font-size, 1rem);line-height:var(--pfe-theme--line-height, 1.5)}:host([open]){display:block}:host([debug]) [aria-selected]{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}.droplist,:host(:not([on])) .droplist,:host([on=light]) .droplist{background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0);color:var(--pfe-broadcasted--text,#3c3f42)}.droplist li.active,:host(:not([on])) .droplist li.active,:host([on=light]) .droplist li.active{background-color:var(--pfe-theme--color--surface--lighter,#f0f0f0)}:host([on=dark]) .droplist{background-color:var(--pfe-theme--color--surface--darker,#3c3f42)}:host([on=dark]) .droplist li.active{background-color:var(--pfe-theme--color--surface--darkest,#151515)}:host([on=saturated]) .droplist{background-color:var(--pfe-theme--color--surface--accent,#004080)}:host([on=saturated]) .droplist li.active{background-color:var(--pfe-theme--color--surface--complement,#002952)}ul{font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-theme--font-size, 1rem);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}:host([on=dark]){--pfe-clipboard--icon--Color:var(--pfe---icon--Color--dark);--pfe-clipboard--icon--Color--hover:var(--pfe---icon--Color--hover--dark)}:host([on=saturated]){--pfe-clipboard--icon--Color:var(--pfe---icon--Color--saturated);--pfe-clipboard--icon--Color--hover:var(--pfe---icon--Color--hover--saturated)}`,m=y;function h(n){return n?.tagName==="LI"}var v=class extends C{constructor(e){super("select");this.value=e}},t=class extends T{constructor(){super(...arguments);this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let e=this.data??[];return f`<div class="suggestions-aria-help sr-only" role="status" aria-hidden="false" aria-live="polite">${this.ariaAnnounceText}</div><div class="droplist"><ul id="droplist-items" part="listbox" role="listbox" @click="${this._optionSelected}" @keyup="${this._onKeyup}" tabindex="-1">${L(e,o=>o,(o,i)=>f`<li id="option-${i}" part="option item-index-${i}" class="${H({active:i===this.activeIndex})}" aria-selected="${String(i===this.activeIndex)}" role="option" tabindex="-1" value="${o}">${o}</li>`)}</ul></div>`}_onKeyup(e){switch(e.key){case"Enter":case" ":h(e.target)&&this._select(e.target)}}_optionSelected(e){h(e.target)&&this._select(e.target)}_select(e){let o=e.innerText;this.dispatchEvent(_("pfe-autocomplete:option-selected",{optionValue:o})),this.dispatchEvent(new v(o))}_renderOptions(){this.ariaAnnounceText=this.announceTemplate?this.announceTemplate.replace("${numOptions}",this.data.length.toString()):""}_activeIndexChanged(){if(!this.data||this.data.length===0||this.activeIndex===null)return;let{activeElement:e,droplist:o}=this;if(!e||!o)return;let i=e.offsetHeight,a=window.getComputedStyle(e).getPropertyValue("margin-bottom");i+=parseInt(a,10),o.scrollTop=e.offsetTop-o.offsetHeight+i}};t.version="{{version}}",t.styles=[m],r([l({type:Boolean,reflect:!0})],t.prototype,"open",2),r([c("_renderOptions"),l({type:Boolean,reflect:!0})],t.prototype,"reflow",2),r([l({attribute:"announce-template",reflect:!0})],t.prototype,"announceTemplate",2),r([c,l({type:Number,reflect:!0,attribute:"active-index"})],t.prototype,"activeIndex",2),r([c("_renderOptions"),l({attribute:!1})],t.prototype,"data",2),r([k()],t.prototype,"ariaAnnounceText",2),r([u(".active")],t.prototype,"activeElement",2),r([u(".droplist")],t.prototype,"droplist",2),r([d],t.prototype,"_onKeyup",1),r([d],t.prototype,"_optionSelected",1),r([d],t.prototype,"_renderOptions",1),t=r([E("pfe-search-droplist"),w()],t);export{v as DroplistSelectEvent,t as PfeSearchDroplist};
 //# sourceMappingURL=pfe-search-droplist.js.map

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

86651

decreased by-29.82%

Lines of code

1280

decreased by-23.26%

Dependency changes

• Updated@patternfly/pfe-core@^2.0.0-next.3