@patternfly/pfe-autocomplete - npm Package Compare versions

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

custom-elements.json

@@ -131,3 +131,3 @@ {
               "static": true,
-              "default": "'{{version}}'",
+              "default": "2.0.0-next.3",
               "readonly": true
@@ -147,2 +147,31 @@ },
               "kind": "field",
+              "name": "colorPalette",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [Color](https://patternflyelements.org/theming/colors/) for default values",
+              "attribute": "color-palette",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "deprecated": "use `color-palette`"
+            },
+            {
+              "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "initValue",
@@ -547,2 +576,19 @@ "type": {
             {
+              "name": "color-palette",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [Color](https://patternflyelements.org/theming/colors/) for default values",
+              "fieldName": "colorPalette"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
+            },
+            {
               "name": "init-value",
@@ -628,3 +674,11 @@ "type": {
           "tagName": "pfe-autocomplete",
-          "customElement": true
+          "customElement": true,
+          "demos": [
+            {
+              "url": "https://patternflyelements.org/components/autocomplete/demo/",
+              "source": {
+                "href": "https://github.com/patternfly/patternfly-elements/tree/main/elements/pfe-autocomplete/demo/pfe-autocomplete.html"
+              }
+            }
+          ]
         }
@@ -742,3 +796,3 @@ ],
               "static": true,
-              "default": "'{{version}}'",
+              "default": "2.0.0-next.3",
               "readonly": true
@@ -748,2 +802,13 @@ },
               "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "open",
@@ -891,2 +956,11 @@ "type": {
             {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
+            },
+            {
               "name": "open",
@@ -893,0 +967,0 @@ "type": {

package.json

 {
   "name": "@patternfly/pfe-autocomplete",
   "license": "MIT",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.3",
   "description": "Autocomplete for PatternFly Elements",
@@ -70,6 +70,7 @@ "customElements": "custom-elements.json",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.3",
-    "@patternfly/pfe-sass": "^2.0.0-next.0",
-    "lit": "^2.1.2"
+    "@patternfly/pfe-button": "^2.0.0-next.5",
+    "@patternfly/pfe-core": "^2.0.0-next.8",
+    "@patternfly/pfe-sass": "^2.0.0-next.5",
+    "lit": "2.3.0"
   }
 }

pfe-autocomplete.d.ts

 import { LitElement } from 'lit';
+import { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
 import { ComposedEvent } from '@patternfly/pfe-core';
@@ -87,2 +88,15 @@ import './pfe-search-droplist';
     /**
+     * Sets color palette, which affects the element's styles as well as descendants' color theme.
+     * Overrides parent color context.
+     * Your theme will influence these colors so check there first if you are seeing inconsistencies.
+     * See [Color](https://patternflyelements.org/theming/colors/) for default values
+     */
+    colorPalette?: ColorPalette;
+    /** @deprecated use `color-palette` */
+    color?: ColorPalette;
+    /**
+     * Sets color theme based on parent context
+     */
+    on: ColorTheme;
+    /**
      * Set this attribute when you want to set a value in input box when web component is added to page.
@@ -89,0 +103,0 @@ */

pfe-autocomplete.js

@@ -1,2 +0,2 @@
-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};
+var O=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var e=(s,p,t,i)=>{for(var r=i>1?void 0:i?R(p,t):p,l=s.length-1,c;l>=0;l--)(c=s[l])&&(r=(i?c(p,t,r):c(r))||r);return i&&r&&O(p,t,r),r};import{LitElement as H,html as J}from"lit";import{customElement as Q,property as n,state as I,query as M}from"lit/decorators.js";import"@patternfly/pfe-core";import{ComposedEvent as f}from"@patternfly/pfe-core";import{pfelement as W,bound as d,observed as h,colorContextConsumer as X,colorContextProvider as Y,deprecation as Z}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as b}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{LitElement as z,html as C}from"lit";import{customElement as S,property as u,state as U,query as E}from"lit/decorators.js";import{classMap as N}from"lit/directives/class-map.js";import{repeat as D}from"lit/directives/repeat.js";import{ComposedEvent as K}from"@patternfly/pfe-core";import{pfelement as V,bound as v,observed as m,colorContextConsumer as A}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as F}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as B}from"lit";var q=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: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)}`,T=q;function $(s){return s?.tagName==="LI"}var g=class extends K{constructor(t){super("select");this.value=t}},a=class extends z{constructor(){super(...arguments);this.on="light";this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let t=this.data??[];return C`<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)=>C`<li id="option-${r}" part="option item-index-${r}" class="${N({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" ":$(t.target)&&this._select(t.target)}}_optionSelected(t){$(t.target)&&this._select(t.target)}_select(t){let i=t.innerText;this.dispatchEvent(F("pfe-autocomplete:option-selected",{optionValue:i})),this.dispatchEvent(new g(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,l=window.getComputedStyle(t).getPropertyValue("margin-bottom");r+=parseInt(l,10),i.scrollTop=t.offsetTop-i.offsetHeight+r}};a.version="{{version}}",a.styles=[T],e([A(),u({reflect:!0})],a.prototype,"on",2),e([u({type:Boolean,reflect:!0})],a.prototype,"open",2),e([m("_renderOptions"),u({type:Boolean,reflect:!0})],a.prototype,"reflow",2),e([u({attribute:"announce-template",reflect:!0})],a.prototype,"announceTemplate",2),e([m,u({type:Number,reflect:!0,attribute:"active-index"})],a.prototype,"activeIndex",2),e([m("_renderOptions"),u({attribute:!1})],a.prototype,"data",2),e([U()],a.prototype,"ariaAnnounceText",2),e([E(".active")],a.prototype,"activeElement",2),e([E(".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([S("pfe-search-droplist"),V()],a);import{css as j}from"lit";var G=j`.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}`,L=G;var _=class extends f{constructor(){super("clear")}},w=class extends f{constructor(){super("show")}},y=class extends f{constructor(t){super("search");this.value=t}},k=class extends f{constructor(t){super("select");this.value=t}};function P(s){return s?.tagName?.toLowerCase?.()==="input"}var x=!1,o=class extends H{constructor(){super();this.on="light";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 J`<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,l)=>`item-index-${l}`).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=>!P(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(b("pfe-autocomplete:option-cleared",{searchValue:""})),this.dispatchEvent(new _)}_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(b("pfe-autocomplete:options-shown")),this.dispatchEvent(new w),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(b("pfe-autocomplete:search-event",{searchValue:t})),this.dispatchEvent(new y(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,l=this.data.length;switch(i){case"Escape":this._closeDroplist();break;case"ArrowUp":if(!this._dropdown.open)return;r=r===null?l:r,r-=1,r<0&&(r=l-1),this._input.value=this._activeOption(r)??"";break;case"ArrowDown":if(!this._dropdown.open)return;r=r===null?-1:r,r+=1,r>l-1&&(r=0),this._input.value=this._activeOption(r)??"";break;case"Enter":{let c=this._activeOption(r);c?(this.dispatchEvent(b("pfe-autocomplete:option-selected",{optionValue:c})),this.dispatchEvent(new k(c))):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=[L],o.shadowRootOptions={...H.shadowRootOptions,delegatesFocus:!0},e([Y(),n({reflect:!0,attribute:"color-palette"})],o.prototype,"colorPalette",2),e([Z({alias:"colorPalette",attribute:"color"})],o.prototype,"color",2),e([X(),n({reflect:!0})],o.prototype,"on",2),e([h,n({attribute:"init-value",reflect:!0})],o.prototype,"initValue",2),e([n({type:Boolean,reflect:!0})],o.prototype,"loading",2),e([h,n({type:Boolean,reflect:!0})],o.prototype,"disabled",2),e([h,n({attribute:"is-disabled",type:Boolean})],o.prototype,"isDisabled",2),e([n({type:Number,reflect:!0})],o.prototype,"debounce",2),e([n({reflect:!0,attribute:"selected-value"})],o.prototype,"selectedValue",2),e([h,n({attribute:"button-text",reflect:!0})],o.prototype,"buttonText",2),e([n({attribute:!1})],o.prototype,"data",2),e([n({attribute:"announce-template",reflect:!0})],o.prototype,"announceTemplate",2),e([n({attribute:"aria-announce-template"})],o.prototype,"ariaAnnounceTemplate",1),e([I()],o.prototype,"activeIndex",2),e([I()],o.prototype,"showTextualSearch",2),e([M("slot")],o.prototype,"_slot",2),e([M("#dropdown")],o.prototype,"_dropdown",2),e([d],o.prototype,"_inputChanged",1),e([d],o.prototype,"_clear",1),e([d],o.prototype,"_search",1),e([d],o.prototype,"_closeDroplist",1),e([d],o.prototype,"_openDroplist",1),e([d],o.prototype,"_doSearch",1),e([d],o.prototype,"_autocompleteCallback",1),e([d],o.prototype,"_inputKeyUp",1),o=e([Q("pfe-autocomplete"),W()],o);export{_ as AutocompleteClearEvent,y as AutocompleteSearchEvent,k as AutocompleteSelectEvent,w as AutocompleteShowEvent,o as PfeAutocomplete};
 //# sourceMappingURL=pfe-autocomplete.js.map

pfe-search-droplist.d.ts

 import { LitElement } from 'lit';
-import { ComposedEvent } from '@patternfly/pfe-core';
+import { ComposedEvent, ColorTheme } from '@patternfly/pfe-core';
 export declare class DroplistSelectEvent extends ComposedEvent {
@@ -20,2 +20,6 @@ value: string;
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Sets color theme based on parent context
+     */
+    on: ColorTheme;
     /** Set when the combo box dropdown is open */
@@ -22,0 +26,0 @@ open: boolean;

pfe-search-droplist.js

@@ -1,2 +0,2 @@
-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};
+var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=(a,n,e,o)=>{for(var r=o>1?void 0:o?b(n,e):n,s=a.length-1,p;s>=0;s--)(p=a[s])&&(r=(o?p(n,e,r):p(r))||r);return o&&r&&g(n,e,r),r};import{LitElement as T,html as u}from"lit";import{customElement as E,property as l,state as k,query as h}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{repeat as H}from"lit/directives/repeat.js";import{ComposedEvent as L}from"@patternfly/pfe-core";import{pfelement as w,bound as d,observed as c,colorContextConsumer as _}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)}`,f=y;function v(a){return a?.tagName==="LI"}var m=class extends L{constructor(e){super("select");this.value=e}},t=class extends T{constructor(){super(...arguments);this.on="light";this.open=!1;this.reflow=!1;this.announceTemplate="";this.activeIndex=null;this.data=[];this.ariaAnnounceText=""}render(){let e=this.data??[];return u`<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">${H(e,o=>o,(o,r)=>u`<li id="option-${r}" part="option item-index-${r}" class="${C({active:r===this.activeIndex})}" aria-selected="${String(r===this.activeIndex)}" role="option" tabindex="-1" value="${o}">${o}</li>`)}</ul></div>`}_onKeyup(e){switch(e.key){case"Enter":case" ":v(e.target)&&this._select(e.target)}}_optionSelected(e){v(e.target)&&this._select(e.target)}_select(e){let o=e.innerText;this.dispatchEvent($("pfe-autocomplete:option-selected",{optionValue:o})),this.dispatchEvent(new m(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 r=e.offsetHeight,s=window.getComputedStyle(e).getPropertyValue("margin-bottom");r+=parseInt(s,10),o.scrollTop=e.offsetTop-o.offsetHeight+r}};t.version="{{version}}",t.styles=[f],i([_(),l({reflect:!0})],t.prototype,"on",2),i([l({type:Boolean,reflect:!0})],t.prototype,"open",2),i([c("_renderOptions"),l({type:Boolean,reflect:!0})],t.prototype,"reflow",2),i([l({attribute:"announce-template",reflect:!0})],t.prototype,"announceTemplate",2),i([c,l({type:Number,reflect:!0,attribute:"active-index"})],t.prototype,"activeIndex",2),i([c("_renderOptions"),l({attribute:!1})],t.prototype,"data",2),i([k()],t.prototype,"ariaAnnounceText",2),i([h(".active")],t.prototype,"activeElement",2),i([h(".droplist")],t.prototype,"droplist",2),i([d],t.prototype,"_onKeyup",1),i([d],t.prototype,"_optionSelected",1),i([d],t.prototype,"_renderOptions",1),t=i([E("pfe-search-droplist"),w()],t);export{m 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

Improved metrics

Total package byte prevSize

94521

increased by9.08%

Lines of code

1376

increased by7.5%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@patternfly/pfe-button@^2.0.0-next.5

• + Added@patternfly/pfe-button@2.0.0-next.9(transitive)

• + Added@patternfly/pfe-icon@2.0.0-next.6(transitive)

• + Added@patternfly/pfe-spinner@2.0.0-next.6(transitive)

• + Addedlit@2.3.0(transitive)

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

• Updated@patternfly/pfe-sass@^2.0.0-next.5

• Updatedlit@2.3.0