@pro6pp/infer-core 0.0.2-beta.3 → 0.0.2-beta.5
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.
- package/README.md +18 -7
- package/dist/index.cjs +102 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.global.js +102 -1
- package/dist/index.js +102 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
The headless logic engine behind the Pro6PP Infer SDKs.
|
|
4
4
|
Use this package if you are building a custom integration for a framework, or if you need to run Infer in a non-standard environment.
|
|
5
5
|
|
|
6
|
-
> **Note:** Use
|
|
6
|
+
> **Note:** Use [`@pro6pp/infer-react`](https://www.npmjs.com/package/@pro6pp/infer-react) for React applications. For all other frameworks or Vanilla JS, use [`@pro6pp/infer-js`](https://www.npmjs.com/package/@pro6pp/infer-js).
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
@@ -22,17 +22,28 @@ const core = new InferCore({
|
|
|
22
22
|
authKey: 'YOUR_AUTH_KEY',
|
|
23
23
|
country: 'NL',
|
|
24
24
|
onStateChange: (state) => {
|
|
25
|
-
|
|
26
|
-
console.log('
|
|
25
|
+
// suggestions, isLoading, isValid, selectedSuggestionIndex, etc.
|
|
26
|
+
console.log('Current State:', state);
|
|
27
27
|
},
|
|
28
28
|
onSelect: (result) => {
|
|
29
29
|
console.log('User selected:', result);
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
core.handleInput('Amsterdam');
|
|
33
|
+
const input = document.querySelector('#my-input');
|
|
35
34
|
|
|
36
|
-
//
|
|
37
|
-
|
|
35
|
+
// pass input events to the core
|
|
36
|
+
input.addEventListener('input', (e) => {
|
|
37
|
+
core.handleInput(e.target.value);
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
// pass keyboard events
|
|
41
|
+
input.addEventListener('keydown', (e) => {
|
|
42
|
+
core.handleKeyDown(e);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// handle clicks
|
|
46
|
+
function onSuggestionClick(item) {
|
|
47
|
+
core.selectItem(item);
|
|
48
|
+
}
|
|
38
49
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1,102 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?c(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var C=(n,t)=>{for(var e in t)c(n,e,{get:t[e],enumerable:!0})},T=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!I.call(n,s)&&s!==e&&c(n,s,{get:()=>t[s],enumerable:!(i=y(t,s))||i.enumerable});return n};var F=n=>T(c({},"__esModule",{value:!0}),n);var o=(n,t,e)=>w(n,typeof t!="symbol"?t+"":t,e);var A={};C(A,{DEFAULT_STYLES:()=>b,INITIAL_STATE:()=>h,InferCore:()=>g});module.exports=F(A);var d={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},m={DIGITS_1_3:/^[0-9]{1,3}$/},h={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},g=class{constructor(t){o(this,"country");o(this,"authKey");o(this,"apiUrl");o(this,"limit");o(this,"fetcher");o(this,"onStateChange");o(this,"onSelect");o(this,"state");o(this,"abortController",null);o(this,"debouncedFetch");o(this,"isSelecting",!1);this.country=t.country,this.authKey=t.authKey,this.apiUrl=t.apiUrl||d.API_URL,this.limit=t.limit||d.LIMIT,this.fetcher=t.fetcher||((e,i)=>fetch(e,i)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...h},this.debouncedFetch=this.debounce(e=>this.executeFetch(e),d.DEBOUNCE_MS)}handleInput(t){if(this.isSelecting){this.isSelecting=!1;return}let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,isLoading:!!t.trim(),selectedSuggestionIndex:-1}),e&&this.onSelect(null),this.debouncedFetch(t)}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let r=this.state.selectedSuggestionIndex+1;r>=i&&(r=0),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="ArrowUp"){t.preventDefault();let r=this.state.selectedSuggestionIndex-1;r<0&&(r=i-1),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let a=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];a&&(this.selectItem(a),this.updateState({selectedSuggestionIndex:-1}));return}}let s=e.value;if(t.key===" "&&this.shouldAutoInsertComma(s)){t.preventDefault();let r=`${s.trim()}, `;this.updateQueryAndFetch(r)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let s=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,r=!!s&&Object.keys(s).length>0;if(this.isSelecting=!0,this.state.stage==="final"||r){let p=e;if(s&&Object.keys(s).length>0){let{street:l,street_number:u,house_number:x,city:f}=s,S=u||x;l&&S&&f&&(p=`${l} ${S}, ${f}`)}this.finishSelection(p,s);return}let a=typeof t!="string"?t.subtitle:null;this.processSelection(i,a)}shouldAutoInsertComma(t){if(!t.includes(",")&&m.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="house_number"){let i=this.getCurrentFragment(t);return m.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final"}),this.onSelect(e||t),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(t,e){let{stage:i,query:s}=this.state,r=s;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")r=`${e}, ${t}, `;else{let u=this.getQueryPrefix(s);r=u?`${u} ${t}, ${e}, `:`${t}, ${e}, `}this.updateQueryAndFetch(r);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!s.includes(",")&&(i==="city"||i==="street"||i==="house_number_first")?r=`${t}, `:(r=this.replaceLastSegment(s,t),i!=="house_number"&&(r+=", ")),this.updateQueryAndFetch(r)}executeFetch(t){let e=(t||"").toString();if(!e.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let i=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),s={authKey:this.authKey,query:e,limit:this.limit.toString()};i.search=new URLSearchParams(s).toString(),this.fetcher(i.toString(),{signal:this.abortController.signal}).then(r=>{if(!r.ok)throw new Error("Network error");return r.json()}).then(r=>this.mapResponseToState(r)).catch(r=>{r.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=!1,s=null,r=t.suggestions||[],a=[],p=new Set;for(let l of r){let u=`${l.label}|${l.subtitle||""}|${JSON.stringify(l.value||{})}`;p.has(u)||(p.add(u),a.push(l))}if(t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.suggestions=[]):(e.suggestions=a,e.cities=[],e.streets=[],t.stage==="final"&&a.length===1&&(i=!0,s=a[0])),e.isValid=t.stage==="final",i&&s){e.query=s.label,e.suggestions=[],e.cities=[],e.streets=[],e.isValid=!0,this.updateState(e);let l=typeof s.value=="object"?s.value:s.label;this.onSelect(l)}else this.updateState(e)}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1}),this.debouncedFetch(t),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...h,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,s=(...r)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,r),e)};return s.cancel=()=>{i&&(clearTimeout(i),i=void 0)},s}};var b=`
|
|
2
|
+
.pro6pp-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
.pro6pp-wrapper * {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
.pro6pp-input {
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 10px 12px;
|
|
14
|
+
border: 1px solid #e0e0e0;
|
|
15
|
+
border-radius: 4px;
|
|
16
|
+
font-size: 16px;
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
19
|
+
}
|
|
20
|
+
.pro6pp-input:focus {
|
|
21
|
+
outline: none;
|
|
22
|
+
border-color: #3b82f6;
|
|
23
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
24
|
+
}
|
|
25
|
+
.pro6pp-dropdown {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 100%;
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
z-index: 9999;
|
|
31
|
+
margin-top: 4px;
|
|
32
|
+
background: white;
|
|
33
|
+
border: 1px solid #e0e0e0;
|
|
34
|
+
border-radius: 4px;
|
|
35
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
36
|
+
max-height: 300px;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
list-style: none !important;
|
|
39
|
+
padding: 0 !important;
|
|
40
|
+
margin: 0 !important;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
.pro6pp-item {
|
|
44
|
+
padding: 12px 12px 9px 12px;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
color: #000000;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
line-height: 1;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
border-radius: 0 !important;
|
|
55
|
+
margin: 0 !important;
|
|
56
|
+
}
|
|
57
|
+
.pro6pp-item:hover, .pro6pp-item--active {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
.pro6pp-item__label {
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
}
|
|
64
|
+
.pro6pp-item__subtitle {
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
color: #404040;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
text-overflow: ellipsis;
|
|
69
|
+
flex-shrink: 1;
|
|
70
|
+
}
|
|
71
|
+
.pro6pp-item__chevron {
|
|
72
|
+
margin-left: auto;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
color: #a3a3a3;
|
|
76
|
+
padding-left: 8px;
|
|
77
|
+
}
|
|
78
|
+
.pro6pp-no-results {
|
|
79
|
+
padding: 12px;
|
|
80
|
+
color: #555555;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
text-align: center;
|
|
83
|
+
user-select: none;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
.pro6pp-loader {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: 12px;
|
|
89
|
+
top: 50%;
|
|
90
|
+
transform: translateY(-50%);
|
|
91
|
+
width: 16px;
|
|
92
|
+
height: 16px;
|
|
93
|
+
border: 2px solid #e0e0e0;
|
|
94
|
+
border-top-color: #404040;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
@keyframes pro6pp-spin {
|
|
100
|
+
to { transform: translateY(-50%) rotate(360deg); }
|
|
101
|
+
}
|
|
102
|
+
`;0&&(module.exports={DEFAULT_STYLES,INITIAL_STATE,InferCore});
|
package/dist/index.d.cts
CHANGED
|
@@ -115,6 +115,7 @@ declare class InferCore {
|
|
|
115
115
|
state: InferState;
|
|
116
116
|
private abortController;
|
|
117
117
|
private debouncedFetch;
|
|
118
|
+
private isSelecting;
|
|
118
119
|
constructor(config: InferConfig);
|
|
119
120
|
handleInput(value: string): void;
|
|
120
121
|
handleKeyDown(event: KeyboardEvent | {
|
|
@@ -137,4 +138,6 @@ declare class InferCore {
|
|
|
137
138
|
private debounce;
|
|
138
139
|
}
|
|
139
140
|
|
|
140
|
-
|
|
141
|
+
declare const DEFAULT_STYLES = "\n .pro6pp-wrapper {\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n box-sizing: border-box;\n width: 100%;\n }\n .pro6pp-wrapper * {\n box-sizing: border-box;\n }\n .pro6pp-input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-size: 16px;\n line-height: 1.5;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .pro6pp-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n .pro6pp-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 9999;\n margin-top: 4px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n max-height: 300px;\n overflow-y: auto;\n list-style: none !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n }\n .pro6pp-item {\n padding: 12px 12px 9px 12px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: #000000;\n font-size: 14px;\n line-height: 1;\n white-space: nowrap;\n overflow: hidden;\n border-radius: 0 !important;\n margin: 0 !important;\n }\n .pro6pp-item:hover, .pro6pp-item--active {\n background-color: #f5f5f5;\n }\n .pro6pp-item__label {\n font-weight: 500;\n flex-shrink: 0;\n }\n .pro6pp-item__subtitle {\n font-size: 14px;\n color: #404040;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1;\n }\n .pro6pp-item__chevron {\n margin-left: auto;\n display: flex;\n align-items: center;\n color: #a3a3a3;\n padding-left: 8px;\n }\n .pro6pp-no-results {\n padding: 12px;\n color: #555555;\n font-size: 14px;\n text-align: center;\n user-select: none;\n pointer-events: none;\n }\n .pro6pp-loader {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n height: 16px;\n border: 2px solid #e0e0e0;\n border-top-color: #404040;\n border-radius: 50%;\n animation: pro6pp-spin 0.6s linear infinite;\n pointer-events: none;\n }\n @keyframes pro6pp-spin {\n to { transform: translateY(-50%) rotate(360deg); }\n }\n";
|
|
142
|
+
|
|
143
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage };
|
package/dist/index.d.ts
CHANGED
|
@@ -115,6 +115,7 @@ declare class InferCore {
|
|
|
115
115
|
state: InferState;
|
|
116
116
|
private abortController;
|
|
117
117
|
private debouncedFetch;
|
|
118
|
+
private isSelecting;
|
|
118
119
|
constructor(config: InferConfig);
|
|
119
120
|
handleInput(value: string): void;
|
|
120
121
|
handleKeyDown(event: KeyboardEvent | {
|
|
@@ -137,4 +138,6 @@ declare class InferCore {
|
|
|
137
138
|
private debounce;
|
|
138
139
|
}
|
|
139
140
|
|
|
140
|
-
|
|
141
|
+
declare const DEFAULT_STYLES = "\n .pro6pp-wrapper {\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n box-sizing: border-box;\n width: 100%;\n }\n .pro6pp-wrapper * {\n box-sizing: border-box;\n }\n .pro6pp-input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-size: 16px;\n line-height: 1.5;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .pro6pp-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n .pro6pp-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 9999;\n margin-top: 4px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n max-height: 300px;\n overflow-y: auto;\n list-style: none !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n }\n .pro6pp-item {\n padding: 12px 12px 9px 12px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: #000000;\n font-size: 14px;\n line-height: 1;\n white-space: nowrap;\n overflow: hidden;\n border-radius: 0 !important;\n margin: 0 !important;\n }\n .pro6pp-item:hover, .pro6pp-item--active {\n background-color: #f5f5f5;\n }\n .pro6pp-item__label {\n font-weight: 500;\n flex-shrink: 0;\n }\n .pro6pp-item__subtitle {\n font-size: 14px;\n color: #404040;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1;\n }\n .pro6pp-item__chevron {\n margin-left: auto;\n display: flex;\n align-items: center;\n color: #a3a3a3;\n padding-left: 8px;\n }\n .pro6pp-no-results {\n padding: 12px;\n color: #555555;\n font-size: 14px;\n text-align: center;\n user-select: none;\n pointer-events: none;\n }\n .pro6pp-loader {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n height: 16px;\n border: 2px solid #e0e0e0;\n border-top-color: #404040;\n border-radius: 50%;\n animation: pro6pp-spin 0.6s linear infinite;\n pointer-events: none;\n }\n @keyframes pro6pp-spin {\n to { transform: translateY(-50%) rotate(360deg); }\n }\n";
|
|
142
|
+
|
|
143
|
+
export { type AddressValue, type CountryCode, DEFAULT_STYLES, type Fetcher, INITIAL_STATE, type InferConfig, InferCore, type InferResult, type InferState, type Stage };
|
package/dist/index.global.js
CHANGED
|
@@ -1 +1,102 @@
|
|
|
1
|
-
"use strict";var Pro6PPCore=(()=>{var
|
|
1
|
+
"use strict";var Pro6PPCore=(()=>{var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var w=(n,t,e)=>t in n?c(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var C=(n,t)=>{for(var e in t)c(n,e,{get:t[e],enumerable:!0})},T=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!I.call(n,s)&&s!==e&&c(n,s,{get:()=>t[s],enumerable:!(i=y(t,s))||i.enumerable});return n};var F=n=>T(c({},"__esModule",{value:!0}),n);var o=(n,t,e)=>w(n,typeof t!="symbol"?t+"":t,e);var A={};C(A,{DEFAULT_STYLES:()=>b,INITIAL_STATE:()=>h,InferCore:()=>g});var d={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},m={DIGITS_1_3:/^[0-9]{1,3}$/},h={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},g=class{constructor(t){o(this,"country");o(this,"authKey");o(this,"apiUrl");o(this,"limit");o(this,"fetcher");o(this,"onStateChange");o(this,"onSelect");o(this,"state");o(this,"abortController",null);o(this,"debouncedFetch");o(this,"isSelecting",!1);this.country=t.country,this.authKey=t.authKey,this.apiUrl=t.apiUrl||d.API_URL,this.limit=t.limit||d.LIMIT,this.fetcher=t.fetcher||((e,i)=>fetch(e,i)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...h},this.debouncedFetch=this.debounce(e=>this.executeFetch(e),d.DEBOUNCE_MS)}handleInput(t){if(this.isSelecting){this.isSelecting=!1;return}let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,isLoading:!!t.trim(),selectedSuggestionIndex:-1}),e&&this.onSelect(null),this.debouncedFetch(t)}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let r=this.state.selectedSuggestionIndex+1;r>=i&&(r=0),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="ArrowUp"){t.preventDefault();let r=this.state.selectedSuggestionIndex-1;r<0&&(r=i-1),this.updateState({selectedSuggestionIndex:r});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let a=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];a&&(this.selectItem(a),this.updateState({selectedSuggestionIndex:-1}));return}}let s=e.value;if(t.key===" "&&this.shouldAutoInsertComma(s)){t.preventDefault();let r=`${s.trim()}, `;this.updateQueryAndFetch(r)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let s=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,r=!!s&&Object.keys(s).length>0;if(this.isSelecting=!0,this.state.stage==="final"||r){let p=e;if(s&&Object.keys(s).length>0){let{street:l,street_number:u,house_number:x,city:f}=s,S=u||x;l&&S&&f&&(p=`${l} ${S}, ${f}`)}this.finishSelection(p,s);return}let a=typeof t!="string"?t.subtitle:null;this.processSelection(i,a)}shouldAutoInsertComma(t){if(!t.includes(",")&&m.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="house_number"){let i=this.getCurrentFragment(t);return m.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final"}),this.onSelect(e||t),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(t,e){let{stage:i,query:s}=this.state,r=s;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")r=`${e}, ${t}, `;else{let u=this.getQueryPrefix(s);r=u?`${u} ${t}, ${e}, `:`${t}, ${e}, `}this.updateQueryAndFetch(r);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!s.includes(",")&&(i==="city"||i==="street"||i==="house_number_first")?r=`${t}, `:(r=this.replaceLastSegment(s,t),i!=="house_number"&&(r+=", ")),this.updateQueryAndFetch(r)}executeFetch(t){let e=(t||"").toString();if(!e.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let i=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),s={authKey:this.authKey,query:e,limit:this.limit.toString()};i.search=new URLSearchParams(s).toString(),this.fetcher(i.toString(),{signal:this.abortController.signal}).then(r=>{if(!r.ok)throw new Error("Network error");return r.json()}).then(r=>this.mapResponseToState(r)).catch(r=>{r.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=!1,s=null,r=t.suggestions||[],a=[],p=new Set;for(let l of r){let u=`${l.label}|${l.subtitle||""}|${JSON.stringify(l.value||{})}`;p.has(u)||(p.add(u),a.push(l))}if(t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.suggestions=[]):(e.suggestions=a,e.cities=[],e.streets=[],t.stage==="final"&&a.length===1&&(i=!0,s=a[0])),e.isValid=t.stage==="final",i&&s){e.query=s.label,e.suggestions=[],e.cities=[],e.streets=[],e.isValid=!0,this.updateState(e);let l=typeof s.value=="object"?s.value:s.label;this.onSelect(l)}else this.updateState(e)}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1}),this.debouncedFetch(t),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...h,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,s=(...r)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,r),e)};return s.cancel=()=>{i&&(clearTimeout(i),i=void 0)},s}};var b=`
|
|
2
|
+
.pro6pp-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
.pro6pp-wrapper * {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
.pro6pp-input {
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 10px 12px;
|
|
14
|
+
border: 1px solid #e0e0e0;
|
|
15
|
+
border-radius: 4px;
|
|
16
|
+
font-size: 16px;
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
19
|
+
}
|
|
20
|
+
.pro6pp-input:focus {
|
|
21
|
+
outline: none;
|
|
22
|
+
border-color: #3b82f6;
|
|
23
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
24
|
+
}
|
|
25
|
+
.pro6pp-dropdown {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 100%;
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
z-index: 9999;
|
|
31
|
+
margin-top: 4px;
|
|
32
|
+
background: white;
|
|
33
|
+
border: 1px solid #e0e0e0;
|
|
34
|
+
border-radius: 4px;
|
|
35
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
36
|
+
max-height: 300px;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
list-style: none !important;
|
|
39
|
+
padding: 0 !important;
|
|
40
|
+
margin: 0 !important;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
.pro6pp-item {
|
|
44
|
+
padding: 12px 12px 9px 12px;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
color: #000000;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
line-height: 1;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
border-radius: 0 !important;
|
|
55
|
+
margin: 0 !important;
|
|
56
|
+
}
|
|
57
|
+
.pro6pp-item:hover, .pro6pp-item--active {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
.pro6pp-item__label {
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
}
|
|
64
|
+
.pro6pp-item__subtitle {
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
color: #404040;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
text-overflow: ellipsis;
|
|
69
|
+
flex-shrink: 1;
|
|
70
|
+
}
|
|
71
|
+
.pro6pp-item__chevron {
|
|
72
|
+
margin-left: auto;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
color: #a3a3a3;
|
|
76
|
+
padding-left: 8px;
|
|
77
|
+
}
|
|
78
|
+
.pro6pp-no-results {
|
|
79
|
+
padding: 12px;
|
|
80
|
+
color: #555555;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
text-align: center;
|
|
83
|
+
user-select: none;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
.pro6pp-loader {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: 12px;
|
|
89
|
+
top: 50%;
|
|
90
|
+
transform: translateY(-50%);
|
|
91
|
+
width: 16px;
|
|
92
|
+
height: 16px;
|
|
93
|
+
border: 2px solid #e0e0e0;
|
|
94
|
+
border-top-color: #404040;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
@keyframes pro6pp-spin {
|
|
100
|
+
to { transform: translateY(-50%) rotate(360deg); }
|
|
101
|
+
}
|
|
102
|
+
`;return F(A);})();
|
package/dist/index.js
CHANGED
|
@@ -1 +1,102 @@
|
|
|
1
|
-
var
|
|
1
|
+
var b=Object.defineProperty;var x=(u,t,e)=>t in u?b(u,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):u[t]=e;var n=(u,t,e)=>x(u,typeof t!="symbol"?t+"":t,e);var c={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},g={DIGITS_1_3:/^[0-9]{1,3}$/},f={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},S=class{constructor(t){n(this,"country");n(this,"authKey");n(this,"apiUrl");n(this,"limit");n(this,"fetcher");n(this,"onStateChange");n(this,"onSelect");n(this,"state");n(this,"abortController",null);n(this,"debouncedFetch");n(this,"isSelecting",!1);this.country=t.country,this.authKey=t.authKey,this.apiUrl=t.apiUrl||c.API_URL,this.limit=t.limit||c.LIMIT,this.fetcher=t.fetcher||((e,i)=>fetch(e,i)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...f},this.debouncedFetch=this.debounce(e=>this.executeFetch(e),c.DEBOUNCE_MS)}handleInput(t){if(this.isSelecting){this.isSelecting=!1;return}let e=this.state.stage==="final"&&t!==this.state.query;this.updateState({query:t,isValid:!1,isLoading:!!t.trim(),selectedSuggestionIndex:-1}),e&&this.onSelect(null),this.debouncedFetch(t)}handleKeyDown(t){let e=t.target;if(!e)return;let i=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(i>0){if(t.key==="ArrowDown"){t.preventDefault();let s=this.state.selectedSuggestionIndex+1;s>=i&&(s=0),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="ArrowUp"){t.preventDefault();let s=this.state.selectedSuggestionIndex-1;s<0&&(s=i-1),this.updateState({selectedSuggestionIndex:s});return}if(t.key==="Enter"&&this.state.selectedSuggestionIndex>=0){t.preventDefault();let o=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];o&&(this.selectItem(o),this.updateState({selectedSuggestionIndex:-1}));return}}let r=e.value;if(t.key===" "&&this.shouldAutoInsertComma(r)){t.preventDefault();let s=`${r.trim()}, `;this.updateQueryAndFetch(s)}}selectItem(t){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let e=typeof t=="string"?t:t.label,i=e;typeof t!="string"&&typeof t.value=="string"&&(i=t.value);let r=typeof t!="string"&&typeof t.value=="object"?t.value:void 0,s=!!r&&Object.keys(r).length>0;if(this.isSelecting=!0,this.state.stage==="final"||s){let p=e;if(r&&Object.keys(r).length>0){let{street:a,street_number:l,house_number:m,city:d}=r,h=l||m;a&&h&&d&&(p=`${a} ${h}, ${d}`)}this.finishSelection(p,r);return}let o=typeof t!="string"?t.subtitle:null;this.processSelection(i,o)}shouldAutoInsertComma(t){if(!t.includes(",")&&g.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="house_number"){let i=this.getCurrentFragment(t);return g.DIGITS_1_3.test(i)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final"}),this.onSelect(e||t),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(t,e){let{stage:i,query:r}=this.state,s=r;if(e&&(i==="city"||i==="street"||i==="mixed")){if(i==="city")s=`${e}, ${t}, `;else{let l=this.getQueryPrefix(r);s=l?`${l} ${t}, ${e}, `:`${t}, ${e}, `}this.updateQueryAndFetch(s);return}if(i==="direct"||i==="addition"){this.finishSelection(t);return}!r.includes(",")&&(i==="city"||i==="street"||i==="house_number_first")?s=`${t}, `:(s=this.replaceLastSegment(r,t),i!=="house_number"&&(s+=", ")),this.updateQueryAndFetch(s)}executeFetch(t){let e=(t||"").toString();if(!e.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let i=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),r={authKey:this.authKey,query:e,limit:this.limit.toString()};i.search=new URLSearchParams(r).toString(),this.fetcher(i.toString(),{signal:this.abortController.signal}).then(s=>{if(!s.ok)throw new Error("Network error");return s.json()}).then(s=>this.mapResponseToState(s)).catch(s=>{s.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(t){let e={stage:t.stage,isLoading:!1},i=!1,r=null,s=t.suggestions||[],o=[],p=new Set;for(let a of s){let l=`${a.label}|${a.subtitle||""}|${JSON.stringify(a.value||{})}`;p.has(l)||(p.add(l),o.push(a))}if(t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.suggestions=[]):(e.suggestions=o,e.cities=[],e.streets=[],t.stage==="final"&&o.length===1&&(i=!0,r=o[0])),e.isValid=t.stage==="final",i&&r){e.query=r.label,e.suggestions=[],e.cities=[],e.streets=[],e.isValid=!0,this.updateState(e);let a=typeof r.value=="object"?r.value:r.label;this.onSelect(a)}else this.updateState(e)}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1}),this.debouncedFetch(t),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(t,e){let i=t.lastIndexOf(",");return i===-1?e:`${t.slice(0,i+1)} ${e}`.trim()}getQueryPrefix(t){let e=t.lastIndexOf(",");return e===-1?"":t.slice(0,e+1).trimEnd()}getCurrentFragment(t){return(t.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...f,query:this.state.query})}updateState(t){this.state={...this.state,...t},this.onStateChange(this.state)}debounce(t,e){let i,r=(...s)=>{i&&clearTimeout(i),i=setTimeout(()=>t.apply(this,s),e)};return r.cancel=()=>{i&&(clearTimeout(i),i=void 0)},r}};var y=`
|
|
2
|
+
.pro6pp-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
.pro6pp-wrapper * {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
.pro6pp-input {
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 10px 12px;
|
|
14
|
+
border: 1px solid #e0e0e0;
|
|
15
|
+
border-radius: 4px;
|
|
16
|
+
font-size: 16px;
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
19
|
+
}
|
|
20
|
+
.pro6pp-input:focus {
|
|
21
|
+
outline: none;
|
|
22
|
+
border-color: #3b82f6;
|
|
23
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
24
|
+
}
|
|
25
|
+
.pro6pp-dropdown {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 100%;
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
z-index: 9999;
|
|
31
|
+
margin-top: 4px;
|
|
32
|
+
background: white;
|
|
33
|
+
border: 1px solid #e0e0e0;
|
|
34
|
+
border-radius: 4px;
|
|
35
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
36
|
+
max-height: 300px;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
list-style: none !important;
|
|
39
|
+
padding: 0 !important;
|
|
40
|
+
margin: 0 !important;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
.pro6pp-item {
|
|
44
|
+
padding: 12px 12px 9px 12px;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
color: #000000;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
line-height: 1;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
border-radius: 0 !important;
|
|
55
|
+
margin: 0 !important;
|
|
56
|
+
}
|
|
57
|
+
.pro6pp-item:hover, .pro6pp-item--active {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
.pro6pp-item__label {
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
}
|
|
64
|
+
.pro6pp-item__subtitle {
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
color: #404040;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
text-overflow: ellipsis;
|
|
69
|
+
flex-shrink: 1;
|
|
70
|
+
}
|
|
71
|
+
.pro6pp-item__chevron {
|
|
72
|
+
margin-left: auto;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
color: #a3a3a3;
|
|
76
|
+
padding-left: 8px;
|
|
77
|
+
}
|
|
78
|
+
.pro6pp-no-results {
|
|
79
|
+
padding: 12px;
|
|
80
|
+
color: #555555;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
text-align: center;
|
|
83
|
+
user-select: none;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
.pro6pp-loader {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: 12px;
|
|
89
|
+
top: 50%;
|
|
90
|
+
transform: translateY(-50%);
|
|
91
|
+
width: 16px;
|
|
92
|
+
height: 16px;
|
|
93
|
+
border: 2px solid #e0e0e0;
|
|
94
|
+
border-top-color: #404040;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
animation: pro6pp-spin 0.6s linear infinite;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
@keyframes pro6pp-spin {
|
|
100
|
+
to { transform: translateY(-50%) rotate(360deg); }
|
|
101
|
+
}
|
|
102
|
+
`;export{y as DEFAULT_STYLES,f as INITIAL_STATE,S as InferCore};
|
package/package.json
CHANGED
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"url": "https://github.com/pro6pp/infer-sdk/issues"
|
|
23
23
|
},
|
|
24
24
|
"sideEffects": false,
|
|
25
|
-
"version": "0.0.2-beta.
|
|
26
|
-
"main": "./dist/index.
|
|
27
|
-
"module": "./dist/index.
|
|
25
|
+
"version": "0.0.2-beta.5",
|
|
26
|
+
"main": "./dist/index.cjs",
|
|
27
|
+
"module": "./dist/index.js",
|
|
28
28
|
"types": "./dist/index.d.ts",
|
|
29
29
|
"unpkg": "./dist/index.global.js",
|
|
30
30
|
"jsdelivr": "./dist/index.global.js",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
".": {
|
|
33
33
|
"types": "./dist/index.d.ts",
|
|
34
34
|
"script": "./dist/index.global.js",
|
|
35
|
-
"import": "./dist/index.
|
|
36
|
-
"require": "./dist/index.
|
|
35
|
+
"import": "./dist/index.js",
|
|
36
|
+
"require": "./dist/index.cjs"
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
"files": [
|