@@ -45,99 +45,99 @@ export class PfSearchInput extends LitElement {
4545 text : string ;
4646 value : string ;
4747 } [ ] = [
48- {
49- " text" : " London" ,
50- " value" : " london"
51- } ,
52- {
53- " text" : " Paris" ,
54- " value" : " paris"
55- } ,
56- {
57- " text" : " Tokyo" ,
58- " value" : " tokyo"
59- } ,
60- {
61- " text" : " New York" ,
62- " value" : " york"
63- } ,
64- {
65- " text" : " Rome" ,
66- " value" : " rome"
67- } ,
68- {
69- " text" : " Sydney" ,
70- " value" : " sydney"
71- } ,
72- {
73- " text" : " Beijing" ,
74- " value" : " beijing"
75- } ,
76- {
77- " text" : " Dubai" ,
78- " value" : " dubai"
79- } ,
80- {
81- " text" : " Rio de Janeiro" ,
82- " value" : "de"
83- } ,
84- {
85- " text" : " Barcelona" ,
86- " value" : " barcelona"
87- } ,
88- {
89- " text" : " Istanbul" ,
90- " value" : " istanbul"
91- } ,
92- {
93- " text" : " Cairo" ,
94- " value" : " cairo"
95- } ,
96- {
97- " text" : " Havana" ,
98- " value" : " havana"
99- } ,
100- {
101- " text" : " Machu Picchu" ,
102- " value" : " picchu"
103- } ,
104- {
105- " text" : " The Great Barrier Reef" ,
106- " value" : " great"
107- } ,
108- {
109- " text" : " The Grand Canyon" ,
110- " value" : " grand"
111- } ,
112- {
113- " text" : " The Amazon Rainforest" ,
114- " value" : " amazon"
115- } ,
116- {
117- " text" : " The Great Barrier Reef1" ,
118- " value" : " great1"
119- } ,
120- {
121- " text" : " The Grand Canyon1" ,
122- " value" : " grand1"
123- } ,
124- {
125- " text" : " The Amazon Rainforest1" ,
126- " value" : " amazon1"
127- } ,
128- {
129- " text" : " The Maldives" ,
130- " value" : " maldives"
131- } ,
132- {
133- " text" : " Iceland" ,
134- " value" : " iceland"
135- } ,
136- {
137- " text" : " Bora Bora" ,
138- " value" : " bora"
139- }
140- ]
48+ {
49+ ' text' : ' London' ,
50+ ' value' : ' london' ,
51+ } ,
52+ {
53+ ' text' : ' Paris' ,
54+ ' value' : ' paris' ,
55+ } ,
56+ {
57+ ' text' : ' Tokyo' ,
58+ ' value' : ' tokyo' ,
59+ } ,
60+ {
61+ ' text' : ' New York' ,
62+ ' value' : ' york' ,
63+ } ,
64+ {
65+ ' text' : ' Rome' ,
66+ ' value' : ' rome' ,
67+ } ,
68+ {
69+ ' text' : ' Sydney' ,
70+ ' value' : ' sydney' ,
71+ } ,
72+ {
73+ ' text' : ' Beijing' ,
74+ ' value' : ' beijing' ,
75+ } ,
76+ {
77+ ' text' : ' Dubai' ,
78+ ' value' : ' dubai' ,
79+ } ,
80+ {
81+ ' text' : ' Rio de Janeiro' ,
82+ ' value' : 'de' ,
83+ } ,
84+ {
85+ ' text' : ' Barcelona' ,
86+ ' value' : ' barcelona' ,
87+ } ,
88+ {
89+ ' text' : ' Istanbul' ,
90+ ' value' : ' istanbul' ,
91+ } ,
92+ {
93+ ' text' : ' Cairo' ,
94+ ' value' : ' cairo' ,
95+ } ,
96+ {
97+ ' text' : ' Havana' ,
98+ ' value' : ' havana' ,
99+ } ,
100+ {
101+ ' text' : ' Machu Picchu' ,
102+ ' value' : ' picchu' ,
103+ } ,
104+ {
105+ ' text' : ' The Great Barrier Reef' ,
106+ ' value' : ' great' ,
107+ } ,
108+ {
109+ ' text' : ' The Grand Canyon' ,
110+ ' value' : ' grand' ,
111+ } ,
112+ {
113+ ' text' : ' The Amazon Rainforest' ,
114+ ' value' : ' amazon' ,
115+ } ,
116+ {
117+ ' text' : ' The Great Barrier Reef1' ,
118+ ' value' : ' great1' ,
119+ } ,
120+ {
121+ ' text' : ' The Grand Canyon1' ,
122+ ' value' : ' grand1' ,
123+ } ,
124+ {
125+ ' text' : ' The Amazon Rainforest1' ,
126+ ' value' : ' amazon1' ,
127+ } ,
128+ {
129+ ' text' : ' The Maldives' ,
130+ ' value' : ' maldives' ,
131+ } ,
132+ {
133+ ' text' : ' Iceland' ,
134+ ' value' : ' iceland' ,
135+ } ,
136+ {
137+ ' text' : ' Bora Bora' ,
138+ ' value' : ' bora' ,
139+ } ,
140+ ] ;
141141
142142 /** Accessible label for the select */
143143 @property ( { attribute : 'accessible-label' } ) accessibleLabel ?: string ;
@@ -181,7 +181,7 @@ export class PfSearchInput extends LitElement {
181181
182182 @query ( '#outer' ) private _searchInputContainer ! : HTMLElement ;
183183
184- #isNotPlaceholderOption = ( option : PfOption ) => option !== this . _placeholder ;
184+ // #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
185185
186186 #internals = InternalsController . of ( this ) ;
187187
@@ -218,7 +218,7 @@ export class PfSearchInput extends LitElement {
218218 document . removeEventListener ( 'click' , this . _onOutsideClick ) ;
219219 }
220220
221- // Function to handle the closing of popover
221+ // Function to handle the closing of popover
222222 @bound private _onOutsideClick ( event : MouseEvent ) {
223223 const path = event . composedPath ( ) ;
224224 if ( ! path . includes ( this . _searchInputContainer ) ) {
@@ -263,7 +263,7 @@ export class PfSearchInput extends LitElement {
263263 const { disabled, expanded, placeholder } = this ;
264264 const { anchor = 'bottom' , alignment = 'start' , styles = { } } = this . #float;
265265 const { height, width } = this . getBoundingClientRect ?.( ) || { } ;
266- const hideLightDomItems = ! ComboboxController . supportsCrossRootActiveDescendant ;
266+ const hideLightDomItems = ! ComboboxController . supportsCrossRootActiveDescendant ;
267267
268268 return html `
269269 < div
@@ -286,7 +286,7 @@ export class PfSearchInput extends LitElement {
286286 >
287287 < pf-button
288288 @click ="${ this . #OnClose} "
289- ?hidden ="${ ( ! expanded && this . _toggleInput ?. value . trim ( ) === "" ) } "
289+ ?hidden ="${ ( ! expanded && this . _toggleInput ?. value . trim ( ) === '' ) } "
290290 id ="close-button "
291291 plain
292292 label ="Close "
@@ -370,18 +370,18 @@ export class PfSearchInput extends LitElement {
370370 }
371371 }
372372
373- #computePlaceholderText( ) {
374- return this . placeholder
375- || this . querySelector ?.< HTMLSlotElement > ( '[slot=placeholder]' )
376- ?. assignedNodes ( )
377- ?. reduce ( ( acc , node ) => `${ acc } ${ node . textContent } ` , '' )
378- ?. trim ( )
379- || this . #combobox. items
380- . filter ( this . #isNotPlaceholderOption)
381- . at ( 0 )
382- ?. value
383- || '' ;
384- }
373+ // #computePlaceholderText() {
374+ // return this.placeholder
375+ // || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
376+ // ?.assignedNodes()
377+ // ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
378+ // ?.trim()
379+ // || this.#combobox.items
380+ // .filter(this.#isNotPlaceholderOption)
381+ // .at(0)
382+ // ?.value
383+ // || '';
384+ // }
385385
386386 /**
387387 * Opens the dropdown
@@ -410,11 +410,11 @@ export class PfSearchInput extends LitElement {
410410 }
411411 }
412412
413- async #OnClose( ) {
413+ async #OnClose( ) {
414414 if ( this . expanded ) {
415415 await this . hide ( ) ;
416416 }
417- this . value = "" ;
417+ this . value = '' ;
418418 this . _toggleInput ! . value = this . value ;
419419 this . #combobox. selected = [ ] ;
420420 }
@@ -429,7 +429,7 @@ export class PfSearchInput extends LitElement {
429429 option . value = `${ optionDetail . text } ` ;
430430 option . setAttribute ( 'suggestion' , '' ) ;
431431 return option ;
432- } )
432+ } ) ;
433433 this . append ( ...options ) ;
434434 }
435435}
0 commit comments