@fluid-topics/ft-search-input 1.1.59 → 1.1.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,11 +10,13 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
|
|
|
10
10
|
private liveQuery;
|
|
11
11
|
private suggestResults?;
|
|
12
12
|
private forceCloseSuggestion;
|
|
13
|
+
private placeholder;
|
|
13
14
|
private input;
|
|
14
15
|
private suggestion;
|
|
15
16
|
protected render(): import("lit").TemplateResult<1>;
|
|
16
17
|
private onSearchBarKeyDown;
|
|
17
18
|
private onSearchBarKeyUp;
|
|
19
|
+
private onInput;
|
|
18
20
|
private launchSearch;
|
|
19
21
|
private onSuggestionSelected;
|
|
20
22
|
}
|
package/build/ft-search-input.js
CHANGED
|
@@ -10,7 +10,7 @@ import { styles } from "./ft-search-input.styles";
|
|
|
10
10
|
import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
|
|
11
11
|
import { withI18n } from "@fluid-topics/ft-i18n";
|
|
12
12
|
import { searchInputContext } from "./SearchInputMessages";
|
|
13
|
-
import { query, state } from "lit/decorators.js";
|
|
13
|
+
import { property, query, state } from "lit/decorators.js";
|
|
14
14
|
import { classMap } from "lit/directives/class-map.js";
|
|
15
15
|
import { FtSearchInputSuggestion } from "./ft-search-input-suggestion";
|
|
16
16
|
import { FtButton } from "@fluid-topics/ft-button";
|
|
@@ -20,6 +20,7 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
|
|
|
20
20
|
super();
|
|
21
21
|
this.liveQuery = "";
|
|
22
22
|
this.forceCloseSuggestion = false;
|
|
23
|
+
this.placeholder = searchInputContext.messages.placeholder();
|
|
23
24
|
this.addI18nContext(searchInputContext);
|
|
24
25
|
}
|
|
25
26
|
render() {
|
|
@@ -36,8 +37,9 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
|
|
|
36
37
|
<input class="ft-search-input--input ft-typography--body2"
|
|
37
38
|
part="input"
|
|
38
39
|
type="text"
|
|
39
|
-
placeholder="${
|
|
40
|
+
placeholder="${this.placeholder}"
|
|
40
41
|
.value="${this.liveQuery}"
|
|
42
|
+
@input=${(e) => this.onInput(e)}
|
|
41
43
|
@keydown=${(e) => this.onSearchBarKeyDown(e)}
|
|
42
44
|
@keyup=${(e) => this.onSearchBarKeyUp(e)}>
|
|
43
45
|
</div>
|
|
@@ -81,20 +83,22 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
|
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
85
|
onSearchBarKeyUp(e) {
|
|
84
|
-
var _a;
|
|
85
|
-
if (e.key === "Backspace") {
|
|
86
|
-
e.stopPropagation();
|
|
87
|
-
}
|
|
88
86
|
switch (e.key) {
|
|
87
|
+
case "Backspace":
|
|
88
|
+
e.stopPropagation();
|
|
89
|
+
break;
|
|
89
90
|
case "Enter":
|
|
90
91
|
this.launchSearch(this.input.value);
|
|
91
92
|
break;
|
|
92
93
|
default:
|
|
93
|
-
(_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setLiveQuery(this.input.value);
|
|
94
|
-
this.forceCloseSuggestion = false;
|
|
95
94
|
break;
|
|
96
95
|
}
|
|
97
96
|
}
|
|
97
|
+
onInput(e) {
|
|
98
|
+
var _a;
|
|
99
|
+
(_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setLiveQuery(this.input.value);
|
|
100
|
+
this.forceCloseSuggestion = false;
|
|
101
|
+
}
|
|
98
102
|
launchSearch(query) {
|
|
99
103
|
var _a;
|
|
100
104
|
(_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(query);
|
|
@@ -125,6 +129,9 @@ __decorate([
|
|
|
125
129
|
__decorate([
|
|
126
130
|
state()
|
|
127
131
|
], FtSearchInput.prototype, "forceCloseSuggestion", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
property({ type: String })
|
|
134
|
+
], FtSearchInput.prototype, "placeholder", void 0);
|
|
128
135
|
__decorate([
|
|
129
136
|
query(".ft-search-input--input")
|
|
130
137
|
], FtSearchInput.prototype, "input", void 0);
|
|
@@ -950,15 +950,16 @@ const Ko=Symbol.for(""),Ao=t=>{if(t?.r===Ko)return t?._$litStatic$},Do=t=>({_$li
|
|
|
950
950
|
</div>
|
|
951
951
|
`}onSuggestKeyDown(t){var o,e,r,i,n,a;switch(t.key){case"ArrowUp":null===(r=null!==(e=null===(o=this.getFocusedSuggestionElement())||void 0===o?void 0:o.previousElementSibling)&&void 0!==e?e:this.getLastSuggestionElement())||void 0===r||r.focus(),t.preventDefault(),t.stopPropagation();break;case"ArrowDown":null===(a=null!==(n=null===(i=this.getFocusedSuggestionElement())||void 0===i?void 0:i.nextElementSibling)&&void 0!==n?n:this.getFirstSuggestionElement())||void 0===a||a.focus(),t.preventDefault(),t.stopPropagation()}}onSuggestKeyUp(t,o){"Enter"!==t.key&&" "!==t.key||this.onSuggestSelected(t,o)}onSuggestSelected(t,o){t.preventDefault(),this.dispatchEvent(new si(o))}getIcon(t){const o="DOCUMENT"===t.type?Qe.file_format:Qe.fluid_topics;let r;switch(t.type){case"MAP":r="BOOK"===t.editorialType?_e.BOOK:_e.ARTICLE;break;case"DOCUMENT":r=function(t,o){var e,r,i,n;t=(null!=t?t:"").toLowerCase(),o=(null!=o?o:"").toLowerCase();const[a,l]=((null!==(e=Je.get(t))&&void 0!==e?e:t)+"/").split("/");return null!==(n=null!==(i=null!==(r=Xe.get(l))&&void 0!==r?r:Xe.get(o))&&void 0!==i?i:Xe.get(a))&&void 0!==n?n:Ye.UNKNOWN}(t.mimeType,t.filenameExtension);break;case"TOPIC":r=_e.TOPICS}return e.html`
|
|
952
952
|
<ft-icon .variant="${o}" .value="${r}" part="suggestion-icon"></ft-icon>
|
|
953
|
-
`}getFocusedSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within")}getLastSuggestionElement(){let t=this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");return t.length>0?t[t.length-1]:null}getFirstSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion")}focusFirstSuggestion(){var t;null===(t=this.getFirstSuggestionElement())||void 0===t||t.focus()}};pi.elementDefinitions={"ft-ripple":Jt,"ft-typography":Po,"ft-icon":or},pi.styles=[o.wordWrap,li],ci([o.redux()],pi.prototype,"suggestResults",void 0),pi=ci([r.customElement("ft-search-input-suggestion")],pi);var fi=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class di extends(ti(Yr)){constructor(){super(),this.liveQuery="",this.forceCloseSuggestion=!1,this.addI18nContext(ai)}render(){var t,o;let r={"ft-search-input":!0,"ft-search-input--with-suggestions":null!==(o=null===(t=this.suggestResults)||void 0===t?void 0:t.length)&&void 0!==o&&o,"ft-search-input--with-suggestions-closed":this.forceCloseSuggestion};return e.html`
|
|
953
|
+
`}getFocusedSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within")}getLastSuggestionElement(){let t=this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");return t.length>0?t[t.length-1]:null}getFirstSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion")}focusFirstSuggestion(){var t;null===(t=this.getFirstSuggestionElement())||void 0===t||t.focus()}};pi.elementDefinitions={"ft-ripple":Jt,"ft-typography":Po,"ft-icon":or},pi.styles=[o.wordWrap,li],ci([o.redux()],pi.prototype,"suggestResults",void 0),pi=ci([r.customElement("ft-search-input-suggestion")],pi);var fi=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class di extends(ti(Yr)){constructor(){super(),this.liveQuery="",this.forceCloseSuggestion=!1,this.placeholder=ai.messages.placeholder(),this.addI18nContext(ai)}render(){var t,o;let r={"ft-search-input":!0,"ft-search-input--with-suggestions":null!==(o=null===(t=this.suggestResults)||void 0===t?void 0:t.length)&&void 0!==o&&o,"ft-search-input--with-suggestions-closed":this.forceCloseSuggestion};return e.html`
|
|
954
954
|
<div class="${i.classMap(r)}" @focusout=${()=>this.forceCloseSuggestion=!1}>
|
|
955
955
|
<div class="ft-search-input--input-container" part="input-container" tabindex="-1">
|
|
956
956
|
<div class="ft-search-input--input-outline" part="input-outline">
|
|
957
957
|
<input class="ft-search-input--input ft-typography--body2"
|
|
958
958
|
part="input"
|
|
959
959
|
type="text"
|
|
960
|
-
placeholder="${
|
|
960
|
+
placeholder="${this.placeholder}"
|
|
961
961
|
.value="${this.liveQuery}"
|
|
962
|
+
@input=${t=>this.onInput(t)}
|
|
962
963
|
@keydown=${t=>this.onSearchBarKeyDown(t)}
|
|
963
964
|
@keyup=${t=>this.onSearchBarKeyUp(t)}>
|
|
964
965
|
</div>
|
|
@@ -987,4 +988,4 @@ const Ko=Symbol.for(""),Ao=t=>{if(t?.r===Ko)return t?._$litStatic$},Do=t=>({_$li
|
|
|
987
988
|
></ft-button>
|
|
988
989
|
</div>
|
|
989
990
|
</div>
|
|
990
|
-
`}onSearchBarKeyDown(t){switch(t.key){case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestion.focusFirstSuggestion();break;case"Backspace":t.stopPropagation()}}onSearchBarKeyUp(t){
|
|
991
|
+
`}onSearchBarKeyDown(t){switch(t.key){case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestion.focusFirstSuggestion();break;case"Backspace":t.stopPropagation()}}onSearchBarKeyUp(t){switch(t.key){case"Backspace":t.stopPropagation();break;case"Enter":this.launchSearch(this.input.value)}}onInput(t){var o;null===(o=this.stateManager)||void 0===o||o.setLiveQuery(this.input.value),this.forceCloseSuggestion=!1}launchSearch(t){var o;null===(o=this.stateManager)||void 0===o||o.setQuery(t),this.forceCloseSuggestion=!0,this.dispatchEvent(new CustomEvent("change"))}onSuggestionSelected(t){this.launchSearch(t.detail)}}di.elementDefinitions={"ft-search-input-suggestion":pi,"ft-button":ar},di.styles=[kt,fr],fi([o.redux()],di.prototype,"request",void 0),fi([o.redux()],di.prototype,"liveQuery",void 0),fi([o.redux()],di.prototype,"suggestResults",void 0),fi([r.state()],di.prototype,"forceCloseSuggestion",void 0),fi([r.property({type:String})],di.prototype,"placeholder",void 0),fi([r.query(".ft-search-input--input")],di.prototype,"input",void 0),fi([r.query("ft-search-input-suggestion")],di.prototype,"suggestion",void 0),o.customElement("ft-search-input")(di),t.FtSearchInput=di,t.FtSearchInputCssVariables=pr,t.styles=fr}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML,ftGlobals.litRepeat);
|
|
@@ -1120,15 +1120,16 @@ const Xl=Symbol.for(""),Ql=t=>{if(t?.r===Xl)return t?._$litStatic$},tc=t=>({_$li
|
|
|
1120
1120
|
</div>
|
|
1121
1121
|
`}onSuggestKeyDown(t){var e,o,r,i,n,a;switch(t.key){case"ArrowUp":null===(r=null!==(o=null===(e=this.getFocusedSuggestionElement())||void 0===e?void 0:e.previousElementSibling)&&void 0!==o?o:this.getLastSuggestionElement())||void 0===r||r.focus(),t.preventDefault(),t.stopPropagation();break;case"ArrowDown":null===(a=null!==(n=null===(i=this.getFocusedSuggestionElement())||void 0===i?void 0:i.nextElementSibling)&&void 0!==n?n:this.getFirstSuggestionElement())||void 0===a||a.focus(),t.preventDefault(),t.stopPropagation()}}onSuggestKeyUp(t,e){"Enter"!==t.key&&" "!==t.key||this.onSuggestSelected(t,e)}onSuggestSelected(t,e){t.preventDefault(),this.dispatchEvent(new Nf(e))}getIcon(t){const e="DOCUMENT"===t.type?hc.file_format:hc.fluid_topics;let o;switch(t.type){case"MAP":o="BOOK"===t.editorialType?lc.BOOK:lc.ARTICLE;break;case"DOCUMENT":o=function(t,e){var o,r,i,n;t=(null!=t?t:"").toLowerCase(),e=(null!=e?e:"").toLowerCase();const[a,s]=((null!==(o=dc.get(t))&&void 0!==o?o:t)+"/").split("/");return null!==(n=null!==(i=null!==(r=uc.get(s))&&void 0!==r?r:uc.get(e))&&void 0!==i?i:uc.get(a))&&void 0!==n?n:cc.UNKNOWN}(t.mimeType,t.filenameExtension);break;case"TOPIC":o=lc.TOPICS}return Jt`
|
|
1122
1122
|
<ft-icon .variant="${e}" .value="${o}" part="suggestion-icon"></ft-icon>
|
|
1123
|
-
`}getFocusedSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within")}getLastSuggestionElement(){let t=this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");return t.length>0?t[t.length-1]:null}getFirstSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion")}focusFirstSuggestion(){var t;null===(t=this.getFirstSuggestionElement())||void 0===t||t.focus()}};Ef.elementDefinitions={"ft-ripple":Jl,"ft-typography":nc,"ft-icon":yc},Ef.styles=[Yi,Sf],Cf([on()],Ef.prototype,"suggestResults",void 0),Ef=Cf([xe("ft-search-input-suggestion")],Ef);var Rf=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class If extends(yf(ff)){constructor(){super(),this.liveQuery="",this.forceCloseSuggestion=!1,this.addI18nContext(wf)}render(){var t,e;let o={"ft-search-input":!0,"ft-search-input--with-suggestions":null!==(e=null===(t=this.suggestResults)||void 0===t?void 0:t.length)&&void 0!==e&&e,"ft-search-input--with-suggestions-closed":this.forceCloseSuggestion};return Jt`
|
|
1123
|
+
`}getFocusedSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within")}getLastSuggestionElement(){let t=this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");return t.length>0?t[t.length-1]:null}getFirstSuggestionElement(){return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion")}focusFirstSuggestion(){var t;null===(t=this.getFirstSuggestionElement())||void 0===t||t.focus()}};Ef.elementDefinitions={"ft-ripple":Jl,"ft-typography":nc,"ft-icon":yc},Ef.styles=[Yi,Sf],Cf([on()],Ef.prototype,"suggestResults",void 0),Ef=Cf([xe("ft-search-input-suggestion")],Ef);var Rf=function(t,e,o,r){for(var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};class If extends(yf(ff)){constructor(){super(),this.liveQuery="",this.forceCloseSuggestion=!1,this.placeholder=wf.messages.placeholder(),this.addI18nContext(wf)}render(){var t,e;let o={"ft-search-input":!0,"ft-search-input--with-suggestions":null!==(e=null===(t=this.suggestResults)||void 0===t?void 0:t.length)&&void 0!==e&&e,"ft-search-input--with-suggestions-closed":this.forceCloseSuggestion};return Jt`
|
|
1124
1124
|
<div class="${Ze(o)}" @focusout=${()=>this.forceCloseSuggestion=!1}>
|
|
1125
1125
|
<div class="ft-search-input--input-container" part="input-container" tabindex="-1">
|
|
1126
1126
|
<div class="ft-search-input--input-outline" part="input-outline">
|
|
1127
1127
|
<input class="ft-search-input--input ft-typography--body2"
|
|
1128
1128
|
part="input"
|
|
1129
1129
|
type="text"
|
|
1130
|
-
placeholder="${
|
|
1130
|
+
placeholder="${this.placeholder}"
|
|
1131
1131
|
.value="${this.liveQuery}"
|
|
1132
|
+
@input=${t=>this.onInput(t)}
|
|
1132
1133
|
@keydown=${t=>this.onSearchBarKeyDown(t)}
|
|
1133
1134
|
@keyup=${t=>this.onSearchBarKeyUp(t)}>
|
|
1134
1135
|
</div>
|
|
@@ -1157,4 +1158,4 @@ const Xl=Symbol.for(""),Ql=t=>{if(t?.r===Xl)return t?._$litStatic$},tc=t=>({_$li
|
|
|
1157
1158
|
></ft-button>
|
|
1158
1159
|
</div>
|
|
1159
1160
|
</div>
|
|
1160
|
-
`}onSearchBarKeyDown(t){switch(t.key){case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestion.focusFirstSuggestion();break;case"Backspace":t.stopPropagation()}}onSearchBarKeyUp(t){
|
|
1161
|
+
`}onSearchBarKeyDown(t){switch(t.key){case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestion.focusFirstSuggestion();break;case"Backspace":t.stopPropagation()}}onSearchBarKeyUp(t){switch(t.key){case"Backspace":t.stopPropagation();break;case"Enter":this.launchSearch(this.input.value)}}onInput(t){var e;null===(e=this.stateManager)||void 0===e||e.setLiveQuery(this.input.value),this.forceCloseSuggestion=!1}launchSearch(t){var e;null===(e=this.stateManager)||void 0===e||e.setQuery(t),this.forceCloseSuggestion=!0,this.dispatchEvent(new CustomEvent("change"))}onSuggestionSelected(t){this.launchSearch(t.detail)}}If.elementDefinitions={"ft-search-input-suggestion":Ef,"ft-button":Oc},If.styles=[kl,Ec],Rf([on()],If.prototype,"request",void 0),Rf([on()],If.prototype,"liveQuery",void 0),Rf([on()],If.prototype,"suggestResults",void 0),Rf([Ce()],If.prototype,"forceCloseSuggestion",void 0),Rf([Se({type:String})],If.prototype,"placeholder",void 0),Rf([Re(".ft-search-input--input")],If.prototype,"input",void 0),Rf([Re("ft-search-input-suggestion")],If.prototype,"suggestion",void 0),go("ft-search-input")(If),t.FtSearchInput=If,t.FtSearchInputCssVariables=Nc,t.styles=Ec}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-search-input",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.60",
|
|
4
4
|
"description": "Search bar input for integrated search component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-button": "1.1.
|
|
23
|
-
"@fluid-topics/ft-i18n": "1.1.
|
|
24
|
-
"@fluid-topics/ft-icon": "1.1.
|
|
25
|
-
"@fluid-topics/ft-ripple": "1.1.
|
|
26
|
-
"@fluid-topics/ft-search-context": "1.1.
|
|
27
|
-
"@fluid-topics/ft-typography": "1.1.
|
|
28
|
-
"@fluid-topics/ft-wc-utils": "1.1.
|
|
22
|
+
"@fluid-topics/ft-button": "1.1.60",
|
|
23
|
+
"@fluid-topics/ft-i18n": "1.1.60",
|
|
24
|
+
"@fluid-topics/ft-icon": "1.1.60",
|
|
25
|
+
"@fluid-topics/ft-ripple": "1.1.60",
|
|
26
|
+
"@fluid-topics/ft-search-context": "1.1.60",
|
|
27
|
+
"@fluid-topics/ft-typography": "1.1.60",
|
|
28
|
+
"@fluid-topics/ft-wc-utils": "1.1.60",
|
|
29
29
|
"lit": "3.1.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@fluid-topics/public-api": "1.0.63"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "508d561509be8c615dfc3de6780ab51e87c2fb22"
|
|
35
35
|
}
|