@pro6pp/infer-js 0.0.2-beta.4 → 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.
Files changed (7) hide show
  1. package/README.md +33 -61
  2. package/dist/index.d.mts +7 -3
  3. package/dist/index.d.ts +7 -3
  4. package/dist/index.global.js +87 -32
  5. package/dist/index.js +5 -51
  6. package/dist/index.mjs +5 -51
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -32,26 +32,20 @@ npm install @pro6pp/infer-js
32
32
  3. Attach the core logic to that input using `Pro6PP.attach()`.
33
33
 
34
34
  ```html
35
- <!DOCTYPE html>
36
- <html lang="en">
37
- <head>
38
- <meta charset="UTF-8" />
39
- <title>Address Autocomplete</title>
40
- </head>
41
- <body>
42
- <label>Address:</label>
43
- <script src="https://unpkg.com/@pro6pp/infer-js"></script>
44
- <script>
45
- Pro6PP.attach('#my-address-input', {
46
- authKey: 'YOUR_AUTH_KEY',
47
- country: 'NL',
48
- onSelect: function (result) {
49
- console.log('Selected Address:', result);
50
- },
51
- });
52
- </script>
53
- </body>
54
- </html>
35
+ <label>Address:</label>
36
+ <input id="address-input" type="text" />
37
+
38
+ <!-- Inject the CDN -->
39
+ <script src="https://unpkg.com/@pro6pp/infer-js"></script>
40
+ <script>
41
+ Pro6PP.attach('#address-input', {
42
+ authKey: 'YOUR_AUTH_KEY',
43
+ country: 'NL',
44
+ onSelect: function (result) {
45
+ console.log('Selected Address:', result);
46
+ },
47
+ });
48
+ </script>
55
49
  ```
56
50
 
57
51
  ### Option 2: NPM
@@ -61,68 +55,46 @@ npm install @pro6pp/infer-js
61
55
  3. Initialize the autocomplete on the input.
62
56
 
63
57
  ```html
64
- <label for="address-input">Address</label>
65
- <input id="address-input" name="address" type="text" placeholder="Type address..." />
58
+ <input id="address-input" name="address" />
66
59
  ```
67
60
 
68
61
  ```javascript
69
62
  import { attach } from '@pro6pp/infer-js';
70
- import '@pro6pp/infer-js/dist/style.css';
71
63
 
72
- const inputElement = document.querySelector('input[name="address"]');
64
+ const inputElement = document.getElementById('address-input');
73
65
 
74
66
  attach(inputElement, {
75
67
  authKey: 'YOUR_AUTH_KEY',
76
68
  country: 'NL',
77
69
  onSelect: (result) => {
78
- console.log(result);
70
+ console.log('Selected Address:', result);
79
71
  },
80
72
  });
81
73
  ```
82
74
 
83
75
  ## Styling
84
76
 
85
- By default, the SDK injects a small CSS block to make the dropdown look decent. If you want to control the styling with your own CSS, set `style: 'none'` in the config:
77
+ By default, the SDK injects the necessary CSS for the dropdown. If you want to control the styling with your own styles, set `style: 'none'` in the config:
86
78
 
87
79
  ```js
88
80
  attach(inputElement, {
89
- authKey: 'YOUR_AUTH_KEY',
81
+ authKey: '...',
90
82
  country: 'NL',
91
83
  style: 'none', // disables default styles
92
- // ...
93
84
  });
94
85
  ```
95
86
 
96
- HTML created by the SDK:
97
-
98
- ```html
99
- <div class="pro6pp-autocomplete-wrapper">
100
- <input ... />
101
- <ul class="pro6pp-results">
102
- <li class="pro6pp-item">Suggestion 1</li>
103
- <li class="pro6pp-item pro6pp-selected">Suggestion 2</li>
104
- </ul>
105
- </div>
106
- ```
107
-
108
- You can target these classes in your CSS:
109
-
110
- ```css
111
- .pro6pp-results {
112
- background: white;
113
- border: 1px solid #ccc;
114
- list-style: none;
115
- padding: 0;
116
- margin: 0;
117
- }
118
-
119
- .pro6pp-item {
120
- padding: 8px;
121
- cursor: pointer;
122
- }
123
-
124
- .pro6pp-item:hover,
125
- .pro6pp-item.pro6pp-selected {
126
- background: #f0f0f0;
127
- }
128
- ```
87
+ You can then target the following classes in your CSS:
88
+
89
+ | Class | Description |
90
+ | :----------------------- | :-------------------------------------------------------- |
91
+ | `.pro6pp-wrapper` | The container element wrapping the input and dropdown. |
92
+ | `.pro6pp-input` | The input element itself. |
93
+ | `.pro6pp-loader` | The loading spinner shown during API requests. |
94
+ | `.pro6pp-dropdown` | The `<ul>` list containing the suggestions. |
95
+ | `.pro6pp-item` | A single suggestion item (`<li>`). |
96
+ | `.pro6pp-item--active` | The currently highlighted item (for keyboard navigation). |
97
+ | `.pro6pp-item__label` | The main text/label of a suggestion. |
98
+ | `.pro6pp-item__subtitle` | The secondary text (e.g., city or result count). |
99
+ | `.pro6pp-item__chevron` | The icon indicating a folder/expandable result. |
100
+ | `.pro6pp-no-results` | The message shown when no suggestions are found. |
package/dist/index.d.mts CHANGED
@@ -2,19 +2,23 @@ import { InferConfig } from '@pro6pp/infer-core';
2
2
 
3
3
  interface InferJSConfig extends InferConfig {
4
4
  style?: 'default' | 'none';
5
+ placeholder?: string;
6
+ inputClass?: string;
7
+ noResultsText?: string;
5
8
  }
6
9
  declare class InferJS {
7
10
  private core;
8
11
  private input;
9
12
  private list;
10
13
  private wrapper;
14
+ private loader;
11
15
  private useDefaultStyles;
12
- constructor(target: string | HTMLInputElement, config: InferJSConfig);
16
+ private noResultsText;
17
+ constructor(target: string | HTMLElement, config: InferJSConfig);
13
18
  private injectStyles;
14
- private setupDOM;
15
19
  private bindEvents;
16
20
  private render;
17
21
  }
18
- declare function attach(target: string | HTMLInputElement, config: InferJSConfig): InferJS;
22
+ declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
19
23
 
20
24
  export { InferJS, type InferJSConfig, attach };
package/dist/index.d.ts CHANGED
@@ -2,19 +2,23 @@ import { InferConfig } from '@pro6pp/infer-core';
2
2
 
3
3
  interface InferJSConfig extends InferConfig {
4
4
  style?: 'default' | 'none';
5
+ placeholder?: string;
6
+ inputClass?: string;
7
+ noResultsText?: string;
5
8
  }
6
9
  declare class InferJS {
7
10
  private core;
8
11
  private input;
9
12
  private list;
10
13
  private wrapper;
14
+ private loader;
11
15
  private useDefaultStyles;
12
- constructor(target: string | HTMLInputElement, config: InferJSConfig);
16
+ private noResultsText;
17
+ constructor(target: string | HTMLElement, config: InferJSConfig);
13
18
  private injectStyles;
14
- private setupDOM;
15
19
  private bindEvents;
16
20
  private render;
17
21
  }
18
- declare function attach(target: string | HTMLInputElement, config: InferJSConfig): InferJS;
22
+ declare function attach(target: string | HTMLElement, config: InferJSConfig): InferJS;
19
23
 
20
24
  export { InferJS, type InferJSConfig, attach };
package/dist/index.global.js CHANGED
@@ -1,51 +1,106 @@
1
- "use strict";var Pro6PP=(()=>{var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},v=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of m(t))!S.call(r,n)&&n!==e&&u(r,n,{get:()=>t[n],enumerable:!(s=g(t,n))||s.enumerable});return r};var I=r=>v(u({},"__esModule",{value:!0}),r);var C={};y(C,{InferJS:()=>p,attach:()=>x});var h={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},d={DIGITS_1_3:/^[0-9]{1,3}$/},f={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},l=class{constructor(t){this.abortController=null;this.country=t.country,this.authKey=t.authKey,this.apiUrl=t.apiUrl||h.API_URL,this.limit=t.limit||h.LIMIT,this.fetcher=t.fetcher||((e,s)=>fetch(e,s)),this.onStateChange=t.onStateChange||(()=>{}),this.onSelect=t.onSelect||(()=>{}),this.state={...f},this.debouncedFetch=this.debounce(e=>this.executeFetch(e),h.DEBOUNCE_MS)}handleInput(t){this.updateState({query:t,isValid:!1,isLoading:!!t.trim(),selectedSuggestionIndex:-1}),this.state.stage==="final"&&this.onSelect(null),this.debouncedFetch(t)}handleKeyDown(t){let e=t.target;if(!e)return;let s=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(s>0){if(t.key==="ArrowDown"){t.preventDefault();let i=this.state.selectedSuggestionIndex+1;i>=s&&(i=0),this.updateState({selectedSuggestionIndex:i});return}if(t.key==="ArrowUp"){t.preventDefault();let i=this.state.selectedSuggestionIndex-1;i<0&&(i=s-1),this.updateState({selectedSuggestionIndex:i});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 n=e.value;if(t.key===" "&&this.shouldAutoInsertComma(n)){t.preventDefault();let i=`${n.trim()}, `;this.updateQueryAndFetch(i)}}selectItem(t){let e=typeof t=="string"?t:t.label,s=typeof t!="string"?t.value:void 0,n=typeof t!="string"?t.subtitle:null;if(this.state.stage==="final"){this.finishSelection(e,s);return}this.processSelection(e,n)}shouldAutoInsertComma(t){if(!t.includes(",")&&d.DIGITS_1_3.test(t.trim()))return!0;if(this.state.stage==="house_number"){let s=this.getCurrentFragment(t);return d.DIGITS_1_3.test(s)}return!1}finishSelection(t,e){this.updateState({query:t,suggestions:[],cities:[],streets:[],isValid:!0}),this.onSelect(e||t)}processSelection(t,e){let{stage:s,query:n}=this.state,i=n;if(e&&(s==="city"||s==="street"||s==="mixed")){if(s==="city")i=`${e}, ${t}, `;else{let c=this.getQueryPrefix(n);i=c?`${c} ${t}, ${e}, `:`${t}, ${e}, `}this.updateQueryAndFetch(i);return}if(s==="direct"||s==="addition"){this.finishSelection(t);return}!n.includes(",")&&(s==="city"||s==="street"||s==="house_number_first")?i=`${t}, `:(i=this.replaceLastSegment(n,t),s!=="house_number"&&(i+=", ")),this.updateQueryAndFetch(i)}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 s=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),n={authKey:this.authKey,query:e,limit:this.limit.toString()};s.search=new URLSearchParams(n).toString(),this.fetcher(s.toString(),{signal:this.abortController.signal}).then(i=>{if(!i.ok)throw new Error("Network error");return i.json()}).then(i=>this.mapResponseToState(i)).catch(i=>{i.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(t){let e={stage:t.stage,isLoading:!1};t.stage==="mixed"?(e.cities=t.cities||[],e.streets=t.streets||[],e.suggestions=[]):(e.suggestions=t.suggestions||[],e.cities=[],e.streets=[]),e.isValid=t.stage==="final",this.updateState(e)}updateQueryAndFetch(t){this.updateState({query:t,suggestions:[],cities:[],streets:[]}),this.handleInput(t)}replaceLastSegment(t,e){let s=t.lastIndexOf(",");return s===-1?e:`${t.slice(0,s+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 s;return(...n)=>{s&&clearTimeout(s),s=setTimeout(()=>t.apply(this,n),e)}}};var b=`
1
+ "use strict";var Pro6PP=(()=>{var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var C=(p,e)=>{for(var t in e)h(p,t,{get:e[t],enumerable:!0})},w=(p,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of x(e))!I.call(p,n)&&n!==t&&h(p,n,{get:()=>e[n],enumerable:!(s=b(e,n))||s.enumerable});return p};var E=p=>w(h({},"__esModule",{value:!0}),p);var L={};C(L,{InferJS:()=>c,attach:()=>T});var f={API_URL:"https://api.pro6pp.nl/v2",LIMIT:1e3,DEBOUNCE_MS:300},S={DIGITS_1_3:/^[0-9]{1,3}$/},v={query:"",stage:null,cities:[],streets:[],suggestions:[],isValid:!1,isError:!1,isLoading:!1,selectedSuggestionIndex:-1},d=class{constructor(e){this.abortController=null;this.isSelecting=!1;this.country=e.country,this.authKey=e.authKey,this.apiUrl=e.apiUrl||f.API_URL,this.limit=e.limit||f.LIMIT,this.fetcher=e.fetcher||((t,s)=>fetch(t,s)),this.onStateChange=e.onStateChange||(()=>{}),this.onSelect=e.onSelect||(()=>{}),this.state={...v},this.debouncedFetch=this.debounce(t=>this.executeFetch(t),f.DEBOUNCE_MS)}handleInput(e){if(this.isSelecting){this.isSelecting=!1;return}let t=this.state.stage==="final"&&e!==this.state.query;this.updateState({query:e,isValid:!1,isLoading:!!e.trim(),selectedSuggestionIndex:-1}),t&&this.onSelect(null),this.debouncedFetch(e)}handleKeyDown(e){let t=e.target;if(!t)return;let s=this.state.cities.length+this.state.streets.length+this.state.suggestions.length;if(s>0){if(e.key==="ArrowDown"){e.preventDefault();let i=this.state.selectedSuggestionIndex+1;i>=s&&(i=0),this.updateState({selectedSuggestionIndex:i});return}if(e.key==="ArrowUp"){e.preventDefault();let i=this.state.selectedSuggestionIndex-1;i<0&&(i=s-1),this.updateState({selectedSuggestionIndex:i});return}if(e.key==="Enter"&&this.state.selectedSuggestionIndex>=0){e.preventDefault();let l=[...this.state.cities,...this.state.streets,...this.state.suggestions][this.state.selectedSuggestionIndex];l&&(this.selectItem(l),this.updateState({selectedSuggestionIndex:-1}));return}}let n=t.value;if(e.key===" "&&this.shouldAutoInsertComma(n)){e.preventDefault();let i=`${n.trim()}, `;this.updateQueryAndFetch(i)}}selectItem(e){this.debouncedFetch.cancel(),this.abortController&&this.abortController.abort();let t=typeof e=="string"?e:e.label,s=t;typeof e!="string"&&typeof e.value=="string"&&(s=e.value);let n=typeof e!="string"&&typeof e.value=="object"?e.value:void 0,i=!!n&&Object.keys(n).length>0;if(this.isSelecting=!0,this.state.stage==="final"||i){let r=t;if(n&&Object.keys(n).length>0){let{street:o,street_number:u,house_number:m,city:a}=n,y=u||m;o&&y&&a&&(r=`${o} ${y}, ${a}`)}this.finishSelection(r,n);return}let l=typeof e!="string"?e.subtitle:null;this.processSelection(s,l)}shouldAutoInsertComma(e){if(!e.includes(",")&&S.DIGITS_1_3.test(e.trim()))return!0;if(this.state.stage==="house_number"){let s=this.getCurrentFragment(e);return S.DIGITS_1_3.test(s)}return!1}finishSelection(e,t){this.updateState({query:e,suggestions:[],cities:[],streets:[],isValid:!0,stage:"final"}),this.onSelect(t||e),setTimeout(()=>{this.isSelecting=!1},0)}processSelection(e,t){let{stage:s,query:n}=this.state,i=n;if(t&&(s==="city"||s==="street"||s==="mixed")){if(s==="city")i=`${t}, ${e}, `;else{let u=this.getQueryPrefix(n);i=u?`${u} ${e}, ${t}, `:`${e}, ${t}, `}this.updateQueryAndFetch(i);return}if(s==="direct"||s==="addition"){this.finishSelection(e);return}!n.includes(",")&&(s==="city"||s==="street"||s==="house_number_first")?i=`${e}, `:(i=this.replaceLastSegment(n,e),s!=="house_number"&&(i+=", ")),this.updateQueryAndFetch(i)}executeFetch(e){let t=(e||"").toString();if(!t.trim()){this.abortController?.abort(),this.resetState();return}this.updateState({isError:!1}),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;let s=new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`),n={authKey:this.authKey,query:t,limit:this.limit.toString()};s.search=new URLSearchParams(n).toString(),this.fetcher(s.toString(),{signal:this.abortController.signal}).then(i=>{if(!i.ok)throw new Error("Network error");return i.json()}).then(i=>this.mapResponseToState(i)).catch(i=>{i.name!=="AbortError"&&this.updateState({isError:!0,isLoading:!1})})}mapResponseToState(e){let t={stage:e.stage,isLoading:!1},s=!1,n=null,i=e.suggestions||[],l=[],r=new Set;for(let o of i){let u=`${o.label}|${o.subtitle||""}|${JSON.stringify(o.value||{})}`;r.has(u)||(r.add(u),l.push(o))}if(e.stage==="mixed"?(t.cities=e.cities||[],t.streets=e.streets||[],t.suggestions=[]):(t.suggestions=l,t.cities=[],t.streets=[],e.stage==="final"&&l.length===1&&(s=!0,n=l[0])),t.isValid=e.stage==="final",s&&n){t.query=n.label,t.suggestions=[],t.cities=[],t.streets=[],t.isValid=!0,this.updateState(t);let o=typeof n.value=="object"?n.value:n.label;this.onSelect(o)}else this.updateState(t)}updateQueryAndFetch(e){this.updateState({query:e,suggestions:[],cities:[],streets:[]}),this.updateState({isLoading:!0,isValid:!1}),this.debouncedFetch(e),setTimeout(()=>{this.isSelecting=!1},0)}replaceLastSegment(e,t){let s=e.lastIndexOf(",");return s===-1?t:`${e.slice(0,s+1)} ${t}`.trim()}getQueryPrefix(e){let t=e.lastIndexOf(",");return t===-1?"":e.slice(0,t+1).trimEnd()}getCurrentFragment(e){return(e.split(",").slice(-1)[0]??"").trim()}resetState(){this.updateState({...v,query:this.state.query})}updateState(e){this.state={...this.state,...e},this.onStateChange(this.state)}debounce(e,t){let s,n=(...i)=>{s&&clearTimeout(s),s=setTimeout(()=>e.apply(this,i),t)};return n.cancel=()=>{s&&(clearTimeout(s),s=void 0)},n}};var g=`
2
2
  .pro6pp-wrapper {
3
3
  position: relative;
4
- display: block;
4
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
5
+ box-sizing: border-box;
5
6
  width: 100%;
6
7
  }
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
+ }
8
25
  .pro6pp-dropdown {
9
26
  position: absolute;
10
27
  top: 100%;
11
28
  left: 0;
12
29
  right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
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;
22
37
  overflow-y: auto;
38
+ list-style: none !important;
39
+ padding: 0 !important;
40
+ margin: 0 !important;
41
+ overflow: hidden;
23
42
  }
24
-
25
43
  .pro6pp-item {
26
- padding: 10px 12px;
44
+ padding: 12px 12px 9px 12px;
27
45
  cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
46
+ display: flex;
47
+ flex-direction: row;
48
+ align-items: center;
49
+ color: #000000;
30
50
  font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
51
+ line-height: 1;
52
+ white-space: nowrap;
53
+ overflow: hidden;
54
+ border-radius: 0 !important;
55
+ margin: 0 !important;
34
56
  }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
57
  .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
58
+ background-color: #f5f5f5;
59
+ }
60
+ .pro6pp-item__label {
61
+ font-weight: 500;
62
+ flex-shrink: 0;
43
63
  }
44
-
45
64
  .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
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); }
50
101
  }
51
- `,p=class{constructor(t,e){let s=typeof t=="string"?document.querySelector(t):t;if(!s||!(s instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=s,this.useDefaultStyles=e.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new l({...e,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),e.onSelect&&e.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let t="pro6pp-infer-styles";if(!document.getElementById(t)){let e=document.createElement("style");e.id=t,e.textContent=b,document.head.appendChild(e)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",t=>{let e=t.target.value;this.core.handleInput(e)}),this.input.addEventListener("keydown",t=>{this.core.handleKeyDown(t)}),document.addEventListener("click",t=>{this.wrapper.contains(t.target)||(this.list.style.display="none")})}render(t){this.input.value!==t.query&&(this.input.value=t.query),this.list.innerHTML="";let e=[...t.cities.map(s=>({item:s,type:"city"})),...t.streets.map(s=>({item:s,type:"street"})),...t.suggestions.map(s=>({item:s,type:"suggestion"}))];if(e.length===0){this.list.style.display="none";return}this.list.style.display="block",e.forEach(({item:s},n)=>{let i=document.createElement("li");i.className="pro6pp-item",n===t.selectedSuggestionIndex&&i.classList.add("pro6pp-item--active"),i.setAttribute("role","option");let o=document.createElement("span");if(o.className="pro6pp-item__label",o.textContent=s.label,i.appendChild(o),s.subtitle){let a=document.createElement("span");a.className="pro6pp-item__subtitle",a.textContent=s.subtitle,i.appendChild(a)}i.onclick=a=>{a.stopPropagation(),this.core.selectItem(s)},this.list.appendChild(i)})}};function x(r,t){return new p(r,t)}return I(C);})();
102
+ `;var c=class{constructor(e,t){let s=typeof e=="string"?document.querySelector(e):e;if(!s)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",s instanceof HTMLInputElement?(this.input=s,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(s.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let n=t.inputClass.split(" ");this.input.classList.add(...n)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new d({...t,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(n)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=g,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(i=>({item:i,type:"city"})),...e.streets.map(i=>({item:i,type:"street"})),...e.suggestions.map(i=>({item:i,type:"suggestion"}))],s=t.length>0,n=!e.isLoading&&!e.isError&&e.query.length>0&&!s&&!e.isValid;if(!s&&!n){this.list.style.display="none";return}if(this.list.style.display="block",n){let i=document.createElement("li");i.className="pro6pp-no-results",i.textContent=this.noResultsText,this.list.appendChild(i);return}t.forEach(({item:i},l)=>{let r=document.createElement("li");r.className="pro6pp-item",l===e.selectedSuggestionIndex&&r.classList.add("pro6pp-item--active"),r.setAttribute("role","option"),r.setAttribute("aria-selected",l===e.selectedSuggestionIndex?"true":"false");let o=document.createElement("span");o.className="pro6pp-item__label",o.textContent=i.label,r.appendChild(o);let u=i.subtitle||i.count;if(u){let a=document.createElement("span");a.className="pro6pp-item__subtitle",a.textContent=`, ${u}`,r.appendChild(a)}if(i.value===void 0||i.value===null){let a=document.createElement("div");a.className="pro6pp-item__chevron",a.innerHTML=`
103
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
104
+ <polyline points="9 18 15 12 9 6"></polyline>
105
+ </svg>
106
+ `,r.appendChild(a)}r.onmousedown=a=>a.preventDefault(),r.onclick=a=>{a.stopPropagation(),this.core.selectItem(i),e.isValid||this.input.focus()},this.list.appendChild(r)})}};function T(p,e){return new c(p,e)}return E(L);})();
package/dist/index.js CHANGED
@@ -1,51 +1,5 @@
1
- "use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(p,e)=>{for(var t in e)a(p,t,{get:e[t],enumerable:!0})},m=(p,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!h.call(p,n)&&n!==t&&a(p,n,{get:()=>e[n],enumerable:!(i=c(e,n))||i.enumerable});return p};var y=p=>m(a({},"__esModule",{value:!0}),p);var v={};f(v,{InferJS:()=>r,attach:()=>g});module.exports=y(v);var d=require("@pro6pp/infer-core"),b=`
2
- .pro6pp-wrapper {
3
- position: relative;
4
- display: block;
5
- width: 100%;
6
- }
7
-
8
- .pro6pp-dropdown {
9
- position: absolute;
10
- top: 100%;
11
- left: 0;
12
- right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
22
- overflow-y: auto;
23
- }
24
-
25
- .pro6pp-item {
26
- padding: 10px 12px;
27
- cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
30
- font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
34
- }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
- .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
43
- }
44
-
45
- .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
50
- }
51
- `,r=class{constructor(e,t){let i=typeof e=="string"?document.querySelector(e):e;if(!i||!(i instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=i,this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new d.InferCore({...t,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let e="pro6pp-infer-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=b,document.head.appendChild(t)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.list.innerHTML="";let t=[...e.cities.map(i=>({item:i,type:"city"})),...e.streets.map(i=>({item:i,type:"street"})),...e.suggestions.map(i=>({item:i,type:"suggestion"}))];if(t.length===0){this.list.style.display="none";return}this.list.style.display="block",t.forEach(({item:i},n)=>{let s=document.createElement("li");s.className="pro6pp-item",n===e.selectedSuggestionIndex&&s.classList.add("pro6pp-item--active"),s.setAttribute("role","option");let l=document.createElement("span");if(l.className="pro6pp-item__label",l.textContent=i.label,s.appendChild(l),i.subtitle){let o=document.createElement("span");o.className="pro6pp-item__subtitle",o.textContent=i.subtitle,s.appendChild(o)}s.onclick=o=>{o.stopPropagation(),this.core.selectItem(i)},this.list.appendChild(s)})}};function g(p,e){return new r(p,e)}0&&(module.exports={InferJS,attach});
1
+ "use strict";var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(l,e)=>{for(var t in e)u(l,t,{get:e[t],enumerable:!0})},E=(l,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!y.call(l,s)&&s!==t&&u(l,s,{get:()=>e[s],enumerable:!(r=m(e,s))||r.enumerable});return l};var C=l=>E(u({},"__esModule",{value:!0}),l);var w={};v(w,{InferJS:()=>o,attach:()=>g});module.exports=C(w);var a=require("@pro6pp/infer-core"),o=class{constructor(e,t){let r=typeof e=="string"?document.querySelector(e):e;if(!r)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",r instanceof HTMLInputElement?(this.input=r,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(r.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let s=t.inputClass.split(" ");this.input.classList.add(...s)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new a.InferCore({...t,onStateChange:s=>this.render(s),onSelect:s=>{typeof s=="string"?this.input.value=s:s&&typeof s=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(s)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=a.DEFAULT_STYLES,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(i=>({item:i,type:"city"})),...e.streets.map(i=>({item:i,type:"street"})),...e.suggestions.map(i=>({item:i,type:"suggestion"}))],r=t.length>0,s=!e.isLoading&&!e.isError&&e.query.length>0&&!r&&!e.isValid;if(!r&&!s){this.list.style.display="none";return}if(this.list.style.display="block",s){let i=document.createElement("li");i.className="pro6pp-no-results",i.textContent=this.noResultsText,this.list.appendChild(i);return}t.forEach(({item:i},h)=>{let p=document.createElement("li");p.className="pro6pp-item",h===e.selectedSuggestionIndex&&p.classList.add("pro6pp-item--active"),p.setAttribute("role","option"),p.setAttribute("aria-selected",h===e.selectedSuggestionIndex?"true":"false");let d=document.createElement("span");d.className="pro6pp-item__label",d.textContent=i.label,p.appendChild(d);let c=i.subtitle||i.count;if(c){let n=document.createElement("span");n.className="pro6pp-item__subtitle",n.textContent=`, ${c}`,p.appendChild(n)}if(i.value===void 0||i.value===null){let n=document.createElement("div");n.className="pro6pp-item__chevron",n.innerHTML=`
2
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3
+ <polyline points="9 18 15 12 9 6"></polyline>
4
+ </svg>
5
+ `,p.appendChild(n)}p.onmousedown=n=>n.preventDefault(),p.onclick=n=>{n.stopPropagation(),this.core.selectItem(i),e.isValid||this.input.focus()},this.list.appendChild(p)})}};function g(l,e){return new o(l,e)}0&&(module.exports={InferJS,attach});
package/dist/index.mjs CHANGED
@@ -1,51 +1,5 @@
1
- import{InferCore as a}from"@pro6pp/infer-core";var d=`
2
- .pro6pp-wrapper {
3
- position: relative;
4
- display: block;
5
- width: 100%;
6
- }
7
-
8
- .pro6pp-dropdown {
9
- position: absolute;
10
- top: 100%;
11
- left: 0;
12
- right: 0;
13
- z-index: 10000;
14
- background-color: #ffffff;
15
- border: 1px solid #e2e8f0;
16
- border-radius: 0 0 4px 4px;
17
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
- list-style: none;
19
- margin: 0;
20
- padding: 0;
21
- max-height: 250px;
22
- overflow-y: auto;
23
- }
24
-
25
- .pro6pp-item {
26
- padding: 10px 12px;
27
- cursor: pointer;
28
- border-bottom: 1px solid #f1f5f9;
29
- font-family: inherit;
30
- font-size: 14px;
31
- line-height: 1.4;
32
- color: #1e293b;
33
- transition: background-color 0.15s ease;
34
- }
35
-
36
- .pro6pp-item:last-child {
37
- border-bottom: none;
38
- }
39
-
40
- .pro6pp-item:hover, .pro6pp-item--active {
41
- background-color: #f8fafc;
42
- color: #0f172a;
43
- }
44
-
45
- .pro6pp-item__subtitle {
46
- display: block;
47
- font-size: 0.85em;
48
- color: #64748b;
49
- margin-top: 2px;
50
- }
51
- `,r=class{constructor(e,i){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!(t instanceof HTMLInputElement))throw new Error("InferJS: Target element not found or is not an input.");this.input=t,this.useDefaultStyles=i.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.core=new a({...i,onStateChange:n=>this.render(n),onSelect:n=>{typeof n=="string"?this.input.value=n:n&&typeof n=="object"&&(this.input.value=this.core.state.query),i.onSelect&&i.onSelect(n)}}),this.setupDOM(),this.bindEvents()}injectStyles(){let e="pro6pp-infer-styles";if(!document.getElementById(e)){let i=document.createElement("style");i.id=e,i.textContent=d,document.head.appendChild(i)}}setupDOM(){this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.wrapper.appendChild(this.list)}bindEvents(){this.input.addEventListener("input",e=>{let i=e.target.value;this.core.handleInput(i)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.list.innerHTML="";let i=[...e.cities.map(t=>({item:t,type:"city"})),...e.streets.map(t=>({item:t,type:"street"})),...e.suggestions.map(t=>({item:t,type:"suggestion"}))];if(i.length===0){this.list.style.display="none";return}this.list.style.display="block",i.forEach(({item:t},n)=>{let p=document.createElement("li");p.className="pro6pp-item",n===e.selectedSuggestionIndex&&p.classList.add("pro6pp-item--active"),p.setAttribute("role","option");let o=document.createElement("span");if(o.className="pro6pp-item__label",o.textContent=t.label,p.appendChild(o),t.subtitle){let s=document.createElement("span");s.className="pro6pp-item__subtitle",s.textContent=t.subtitle,p.appendChild(s)}p.onclick=s=>{s.stopPropagation(),this.core.selectItem(t)},this.list.appendChild(p)})}};function f(l,e){return new r(l,e)}export{r as InferJS,f as attach};
1
+ import{InferCore as h,DEFAULT_STYLES as c}from"@pro6pp/infer-core";var o=class{constructor(e,t){let r=typeof e=="string"?document.querySelector(e):e;if(!r)throw new Error("InferJS: Target element not found.");if(this.noResultsText=t.noResultsText||"No results found",this.useDefaultStyles=t.style!=="none",this.useDefaultStyles&&this.injectStyles(),this.wrapper=document.createElement("div"),this.wrapper.className="pro6pp-wrapper",r instanceof HTMLInputElement?(this.input=r,this.input.parentNode?.insertBefore(this.wrapper,this.input),this.wrapper.appendChild(this.input)):(r.appendChild(this.wrapper),this.input=document.createElement("input"),this.input.type="text",t.placeholder&&(this.input.placeholder=t.placeholder),this.wrapper.appendChild(this.input)),this.useDefaultStyles&&this.input.classList.add("pro6pp-input"),t.inputClass){let i=t.inputClass.split(" ");this.input.classList.add(...i)}this.loader=document.createElement("div"),this.loader.className="pro6pp-loader",this.loader.style.display="none",this.wrapper.appendChild(this.loader),this.list=document.createElement("ul"),this.list.className="pro6pp-dropdown",this.list.style.display="none",this.list.setAttribute("role","listbox"),this.wrapper.appendChild(this.list),this.core=new h({...t,onStateChange:i=>this.render(i),onSelect:i=>{typeof i=="string"?this.input.value=i:i&&typeof i=="object"&&(this.input.value=this.core.state.query),t.onSelect&&t.onSelect(i)}}),this.bindEvents()}injectStyles(){let e="pro6pp-styles";if(!document.getElementById(e)){let t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}bindEvents(){this.input.addEventListener("input",e=>{let t=e.target.value;this.core.handleInput(t)}),this.input.addEventListener("keydown",e=>{this.core.handleKeyDown(e)}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||(this.list.style.display="none")}),this.input.addEventListener("focus",()=>{this.list.children.length>0&&(this.list.style.display="block")})}render(e){this.input.value!==e.query&&(this.input.value=e.query),this.loader.style.display=e.isLoading?"block":"none",this.list.innerHTML="";let t=[...e.cities.map(s=>({item:s,type:"city"})),...e.streets.map(s=>({item:s,type:"street"})),...e.suggestions.map(s=>({item:s,type:"suggestion"}))],r=t.length>0,i=!e.isLoading&&!e.isError&&e.query.length>0&&!r&&!e.isValid;if(!r&&!i){this.list.style.display="none";return}if(this.list.style.display="block",i){let s=document.createElement("li");s.className="pro6pp-no-results",s.textContent=this.noResultsText,this.list.appendChild(s);return}t.forEach(({item:s},d)=>{let l=document.createElement("li");l.className="pro6pp-item",d===e.selectedSuggestionIndex&&l.classList.add("pro6pp-item--active"),l.setAttribute("role","option"),l.setAttribute("aria-selected",d===e.selectedSuggestionIndex?"true":"false");let p=document.createElement("span");p.className="pro6pp-item__label",p.textContent=s.label,l.appendChild(p);let u=s.subtitle||s.count;if(u){let n=document.createElement("span");n.className="pro6pp-item__subtitle",n.textContent=`, ${u}`,l.appendChild(n)}if(s.value===void 0||s.value===null){let n=document.createElement("div");n.className="pro6pp-item__chevron",n.innerHTML=`
2
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
3
+ <polyline points="9 18 15 12 9 6"></polyline>
4
+ </svg>
5
+ `,l.appendChild(n)}l.onmousedown=n=>n.preventDefault(),l.onclick=n=>{n.stopPropagation(),this.core.selectItem(s),e.isValid||this.input.focus()},this.list.appendChild(l)})}};function E(a,e){return new o(a,e)}export{o as InferJS,E as attach};
package/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "sideEffects": [
19
19
  "*.css"
20
20
  ],
21
- "version": "0.0.2-beta.4",
21
+ "version": "0.0.2-beta.5",
22
22
  "main": "./dist/index.js",
23
23
  "module": "./dist/index.mjs",
24
24
  "types": "./dist/index.d.ts",
@@ -43,7 +43,7 @@
43
43
  "test:coverage": "vitest run --coverage"
44
44
  },
45
45
  "dependencies": {
46
- "@pro6pp/infer-core": "0.0.2-beta.4"
46
+ "@pro6pp/infer-core": "0.0.2-beta.5"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@testing-library/dom": "^10.4.1",