@mapsindoors/map-template 1.95.1 → 1.95.3
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/dist/{GoogleMapsMap-C5n6Bgtp.mjs → GoogleMapsMap-Dkn60-_e.mjs} +2 -2
- package/dist/{MapboxMap-UCqzt1AC.mjs → MapboxMap-B1oo7IUm.mjs} +2 -2
- package/dist/_commonjsHelpers-B85MJLTf.js +5 -0
- package/dist/app-globals-DQuL1Twl.js +3 -0
- package/dist/combo-box-item.entry.js +8 -10
- package/dist/icon-DT_sDkmK.js +11 -0
- package/dist/index-BZQHyS7V.js +1701 -0
- package/dist/loader.js +7 -14
- package/dist/mapsindoors-react.es.js +1 -1
- package/dist/mapsindoors-react.umd.js +175 -175
- package/dist/mapsindoors-webcomponent.es.js +2916 -2904
- package/dist/mi-card_2.entry.js +23 -18
- package/dist/mi-chip.entry.js +25 -16
- package/dist/mi-column.entry.js +47 -23
- package/dist/mi-combo-box.entry.js +412 -379
- package/dist/mi-components.js +15 -12
- package/dist/mi-data-table.entry.js +300 -278
- package/dist/mi-distance_2.entry.js +58 -56
- package/dist/mi-dropdown-item.entry.js +8 -10
- package/dist/mi-dropdown.entry.js +527 -481
- package/dist/mi-floor-selector.entry.js +187 -180
- package/dist/mi-keyboard.entry.js +209 -186
- package/dist/mi-list-item-category.entry.js +44 -41
- package/dist/mi-list-item-location.entry.js +168 -162
- package/dist/mi-list.entry.js +60 -48
- package/dist/mi-location-booking.entry.js +320 -295
- package/dist/mi-location-info.entry.js +61 -53
- package/dist/mi-map-googlemaps.entry.js +369 -324
- package/dist/mi-map-mapbox.entry.js +502 -439
- package/dist/mi-metric-card.entry.js +50 -37
- package/dist/mi-my-position.entry.js +2345 -874
- package/dist/mi-notification.entry.js +112 -102
- package/dist/mi-route-instructions-heading.entry.js +70 -65
- package/dist/mi-route-instructions-maneuver-legacy.entry.js +80 -76
- package/dist/mi-route-instructions-maneuver.entry.js +80 -76
- package/dist/mi-route-instructions-step-legacy.entry.js +296 -282
- package/dist/mi-route-instructions-step.entry.js +313 -292
- package/dist/mi-route-instructions.entry.js +169 -150
- package/dist/mi-scroll-buttons.entry.js +106 -98
- package/dist/mi-search.entry.js +378 -325
- package/dist/mi-share-sms.entry.js +84 -70
- package/dist/mi-step-switcher.entry.js +34 -25
- package/dist/mi-tab-panel.entry.js +18 -18
- package/dist/mi-tab.entry.js +5 -7
- package/dist/mi-tabs.entry.js +42 -40
- package/dist/mi-time.entry.js +49 -49
- package/dist/mi-variables-CDNvnTkH.js +5 -0
- package/dist/{reactcomponent-DQsjxRIN.mjs → reactcomponent-2Oa1vSiK.mjs} +8996 -8660
- package/dist/route-travel-mode.enum-BvqP1fpw.js +9 -0
- package/dist/sort-order.enum-jsLAbYWg.js +566 -0
- package/dist/{unit-system.enum-eaefb53e.js → unit-system.enum-BwPgAWqL.js} +2 -2
- package/dist/utils-DNHzysQ6.js +61 -0
- package/package.json +1 -1
- package/dist/_commonjsHelpers-ba3f0406.js +0 -21
- package/dist/icon-b8d01d6f.js +0 -24
- package/dist/index-7e9696f3.js +0 -1678
- package/dist/mi-variables-9a6c8d4d.js +0 -6
- package/dist/polyfills/core-js.js +0 -11
- package/dist/polyfills/css-shim.js +0 -1
- package/dist/polyfills/dom.js +0 -79
- package/dist/polyfills/es5-html-element.js +0 -1
- package/dist/polyfills/index.js +0 -34
- package/dist/polyfills/system.js +0 -6
- package/dist/route-travel-mode.enum-7f4ce9c7.js +0 -9
- package/dist/sort-order.enum-64ce8998.js +0 -552
- package/dist/utils-ae714467.js +0 -61
package/dist/mi-search.entry.js
CHANGED
|
@@ -1,376 +1,429 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
2
|
-
import {
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BZQHyS7V.js';
|
|
2
|
+
import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B85MJLTf.js';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var dist = {};
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
value: true
|
|
8
|
-
});
|
|
9
|
-
exports["default"] = outerDecorator;
|
|
10
|
-
exports.debounce = debounce;
|
|
11
|
-
var DEFAULT_DEBOUNCE_DURATION = 500;
|
|
6
|
+
var Debounce$1 = {};
|
|
12
7
|
|
|
13
|
-
|
|
14
|
-
/** Decorates a class method so that it is debounced by the specified duration */
|
|
8
|
+
var hasRequiredDebounce;
|
|
15
9
|
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
enumerable: descriptor.enumerable,
|
|
21
|
-
get: function getter() {
|
|
22
|
-
// Attach this function to the instance (not the class)
|
|
23
|
-
Object.defineProperty(this, key, {
|
|
24
|
-
configurable: true,
|
|
25
|
-
enumerable: descriptor.enumerable,
|
|
26
|
-
value: debounce(descriptor.value, duration)
|
|
27
|
-
});
|
|
10
|
+
function requireDebounce () {
|
|
11
|
+
if (hasRequiredDebounce) return Debounce$1;
|
|
12
|
+
hasRequiredDebounce = 1;
|
|
13
|
+
(function (exports) {
|
|
28
14
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
15
|
+
Object.defineProperty(exports, "__esModule", {
|
|
16
|
+
value: true
|
|
17
|
+
});
|
|
18
|
+
exports["default"] = outerDecorator;
|
|
19
|
+
exports.debounce = debounce;
|
|
20
|
+
var DEFAULT_DEBOUNCE_DURATION = 500;
|
|
34
21
|
|
|
35
|
-
|
|
22
|
+
exports.DEFAULT_DEBOUNCE_DURATION = DEFAULT_DEBOUNCE_DURATION;
|
|
23
|
+
/** Decorates a class method so that it is debounced by the specified duration */
|
|
36
24
|
|
|
37
|
-
function
|
|
38
|
-
|
|
25
|
+
function outerDecorator(duration) {
|
|
26
|
+
return function innerDecorator(target, key, descriptor) {
|
|
27
|
+
return {
|
|
28
|
+
configurable: true,
|
|
29
|
+
enumerable: descriptor.enumerable,
|
|
30
|
+
get: function getter() {
|
|
31
|
+
// Attach this function to the instance (not the class)
|
|
32
|
+
Object.defineProperty(this, key, {
|
|
33
|
+
configurable: true,
|
|
34
|
+
enumerable: descriptor.enumerable,
|
|
35
|
+
value: debounce(descriptor.value, duration)
|
|
36
|
+
});
|
|
39
37
|
|
|
40
|
-
|
|
38
|
+
return this[key];
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
}
|
|
41
43
|
|
|
42
|
-
|
|
43
|
-
var _this = this;
|
|
44
|
+
/** Debounces the specified function and returns a wrapper function */
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
46
|
+
function debounce(method) {
|
|
47
|
+
var duration = arguments.length <= 1 || arguments[1] === undefined ? DEFAULT_DEBOUNCE_DURATION : arguments[1];
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
var timeoutId = undefined;
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
method.apply(_this, args);
|
|
54
|
-
}, duration);
|
|
55
|
-
}
|
|
51
|
+
function debounceWrapper() {
|
|
52
|
+
var _this = this;
|
|
56
53
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
|
+
args[_key] = arguments[_key];
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
debounceWrapper.clear();
|
|
59
|
+
|
|
60
|
+
timeoutId = setTimeout(function () {
|
|
61
|
+
timeoutId = null;
|
|
62
|
+
method.apply(_this, args);
|
|
63
|
+
}, duration);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
debounceWrapper.clear = function () {
|
|
67
|
+
if (timeoutId) {
|
|
68
|
+
clearTimeout(timeoutId);
|
|
69
|
+
timeoutId = null;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
63
72
|
|
|
64
|
-
|
|
73
|
+
return debounceWrapper;
|
|
74
|
+
}
|
|
75
|
+
} (Debounce$1));
|
|
76
|
+
return Debounce$1;
|
|
65
77
|
}
|
|
66
|
-
});
|
|
67
78
|
|
|
68
|
-
var
|
|
79
|
+
var hasRequiredDist;
|
|
69
80
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
81
|
+
function requireDist () {
|
|
82
|
+
if (hasRequiredDist) return dist;
|
|
83
|
+
hasRequiredDist = 1;
|
|
84
|
+
(function (exports) {
|
|
73
85
|
|
|
74
|
-
|
|
86
|
+
Object.defineProperty(exports, '__esModule', {
|
|
87
|
+
value: true
|
|
88
|
+
});
|
|
75
89
|
|
|
76
|
-
function
|
|
90
|
+
function _interopExportWildcard(obj, defaults) { var newObj = defaults({}, obj); delete newObj['default']; return newObj; }
|
|
77
91
|
|
|
78
|
-
function
|
|
92
|
+
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
|
79
93
|
|
|
94
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
80
95
|
|
|
96
|
+
var _DebounceJs = requireDebounce();
|
|
81
97
|
|
|
82
|
-
var _DebounceJs2 = _interopRequireDefault(
|
|
98
|
+
var _DebounceJs2 = _interopRequireDefault(_DebounceJs);
|
|
83
99
|
|
|
84
|
-
exports['default'] = _DebounceJs2['default'];
|
|
100
|
+
exports['default'] = _DebounceJs2['default'];
|
|
85
101
|
|
|
86
|
-
_defaults(exports, _interopExportWildcard(
|
|
87
|
-
});
|
|
102
|
+
_defaults(exports, _interopExportWildcard(_DebounceJs, _defaults));
|
|
103
|
+
} (dist));
|
|
104
|
+
return dist;
|
|
105
|
+
}
|
|
88
106
|
|
|
89
|
-
|
|
107
|
+
var distExports = requireDist();
|
|
108
|
+
var Debounce = /*@__PURE__*/getDefaultExportFromCjs(distExports);
|
|
90
109
|
|
|
91
|
-
const searchCss =
|
|
110
|
+
const searchCss = () => `@charset "UTF-8";mi-search{display:block;position:relative;}mi-search input[type=search]{border-radius:8px;background-color:#ffffff;padding-left:2.5rem;min-height:3rem;height:auto;font-size:1rem;padding-right:2.5rem;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43MSAxMUgxMi41TDE3LjQ5IDE2TDE2IDE3LjQ5TDExIDEyLjVWMTEuNzFMMTAuNzMgMTEuNDNDOS41OSAxMi40MSA4LjExIDEzIDYuNSAxM0MyLjkxIDEzIDAgMTAuMDkgMCA2LjVDMCAyLjkxIDIuOTEgMCA2LjUgMEMxMC4wOSAwIDEzIDIuOTEgMTMgNi41QzEzIDguMTEgMTIuNDEgOS41OSAxMS40MyAxMC43M0wxMS43MSAxMVpNMiA2LjVDMiA4Ljk5IDQuMDEgMTEgNi41IDExQzguOTkgMTEgMTEgOC45OSAxMSA2LjVDMTEgNC4wMSA4Ljk5IDIgNi41IDJDNC4wMSAyIDIgNC4wMSAyIDYuNVoiIGZpbGw9IiM4RDk4QUEiLz4KPC9zdmc+Cg==");background-repeat:no-repeat;background-position:1rem center;background-size:1.125rem 1.125rem;border-color:#E6E6E6;color:var(--tailwind-colors-neutral-500);border:1px solid var(--tailwind-colors-gray-200)}mi-search input[type=search]:-moz-placeholder-shown{padding-right:0.875rem}mi-search input[type=search]:placeholder-shown{padding-right:0.875rem}mi-search input[type=search]:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #cfe0fc;}mi-search input[type=search][disabled]{pointer-events:none}mi-search input::-webkit-search-cancel-button{-webkit-appearance:none}mi-search input::-ms-clear{display:none}mi-search input::-moz-search-clear-button{-moz-appearance:none}mi-search button{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;background-color:#6b7280;border-radius:50%;padding:0;border-width:0;display:flex;align-items:center;justify-content:center}mi-search button:focus{outline:0}mi-search button svg{fill:white;width:0.625rem;height:0.625rem}`;
|
|
92
111
|
|
|
93
112
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
113
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
114
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
115
|
+
r = Reflect.decorate(decorators, target, key, desc);
|
|
116
|
+
else
|
|
117
|
+
for (var i = decorators.length - 1; i >= 0; i--)
|
|
118
|
+
if (d = decorators[i])
|
|
119
|
+
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
120
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
102
121
|
};
|
|
103
122
|
const Search = class {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
123
|
+
constructor(hostRef) {
|
|
124
|
+
registerInstance(this, hostRef);
|
|
125
|
+
this.results = createEvent(this, "results", 7);
|
|
126
|
+
this.cleared = createEvent(this, "cleared", 7);
|
|
127
|
+
this.componentRendered = createEvent(this, "componentRendered", 7);
|
|
128
|
+
this.shortInput = createEvent(this, "shortInput", 7);
|
|
129
|
+
this.changed = createEvent(this, "changed", 7);
|
|
130
|
+
/**
|
|
131
|
+
* Placeholder for the input field.
|
|
132
|
+
*/
|
|
133
|
+
this.placeholder = '';
|
|
134
|
+
/**
|
|
135
|
+
* Id for the input field.
|
|
136
|
+
*/
|
|
137
|
+
this.idAttribute = '';
|
|
138
|
+
/**
|
|
139
|
+
* Data attributes for the input field.
|
|
140
|
+
*/
|
|
141
|
+
this.dataAttributes = {};
|
|
142
|
+
/**
|
|
143
|
+
* If searching should include MapsIndoors locations.
|
|
144
|
+
*/
|
|
145
|
+
this.mapsindoors = false;
|
|
146
|
+
/**
|
|
147
|
+
* If searching should include Google Places autocomplete suggestions.
|
|
148
|
+
*
|
|
149
|
+
* Remember to comply to Google's policy by showing a "Power By Google" badge somewhere on your
|
|
150
|
+
* page if not already showing a Google map: https://developers.google.com/places/web-service/policies
|
|
151
|
+
*/
|
|
152
|
+
this.google = false;
|
|
153
|
+
/**
|
|
154
|
+
* If searching should include Mapbox autocomplete suggestions.
|
|
155
|
+
*/
|
|
156
|
+
this.mapbox = false;
|
|
157
|
+
/**
|
|
158
|
+
* The language used when retrieving Google Places or Mapbox autocomplete suggestions.
|
|
159
|
+
*/
|
|
160
|
+
this.language = 'en';
|
|
161
|
+
/**
|
|
162
|
+
* Which fields on MapsIndoors locations to search in. Comma separated string.
|
|
163
|
+
*/
|
|
164
|
+
this.miFields = 'name,description,aliases,categories,externalId';
|
|
165
|
+
/**
|
|
166
|
+
* Make the search field disabled
|
|
167
|
+
*/
|
|
168
|
+
this.disabled = false;
|
|
169
|
+
/**
|
|
170
|
+
* Sets the prevention of the search.
|
|
171
|
+
*/
|
|
172
|
+
this.preventSearch = false;
|
|
145
173
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
*/
|
|
150
|
-
async clear() {
|
|
151
|
-
this.inputElement.value = '';
|
|
152
|
-
this.value = '';
|
|
153
|
-
this.lastRequested = null;
|
|
154
|
-
this.cleared.emit();
|
|
155
|
-
}
|
|
156
|
-
/**
|
|
157
|
-
* Programmatically trigger the search.
|
|
158
|
-
*/
|
|
159
|
-
triggerSearch() {
|
|
160
|
-
const inputValue = this.inputElement.value;
|
|
161
|
-
this.search(inputValue);
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Sets text to be shown in the search field.
|
|
165
|
-
* Setting it will not perform a search.
|
|
166
|
-
*/
|
|
167
|
-
setDisplayText(displayText) {
|
|
168
|
-
this.preventSearch = true;
|
|
169
|
-
this.inputElement.value = displayText;
|
|
170
|
-
this.value = displayText;
|
|
171
|
-
this.preventSearch = false;
|
|
172
|
-
}
|
|
173
|
-
/**
|
|
174
|
-
* Set focus on the input field.
|
|
175
|
-
* The preventScroll boolean is passed as true to prevent the browser
|
|
176
|
-
* from scrolling the document to bring the newly-focused element into view.
|
|
177
|
-
*/
|
|
178
|
-
focusInput() {
|
|
179
|
-
this.inputElement.focus({ preventScroll: true });
|
|
180
|
-
}
|
|
181
|
-
/**
|
|
182
|
-
* Get hold of the search input field.
|
|
183
|
-
*/
|
|
184
|
-
async getInputField() {
|
|
185
|
-
return this.inputElement;
|
|
186
|
-
}
|
|
187
|
-
/**
|
|
188
|
-
* Perform the search.
|
|
189
|
-
*/
|
|
190
|
-
search(inputValue) {
|
|
191
|
-
Promise.all([
|
|
192
|
-
this.makeMapsIndoorsQuery(inputValue),
|
|
193
|
-
this.makeGooglePlacesQuery(inputValue),
|
|
194
|
-
this.getMapboxSearchResults(inputValue),
|
|
195
|
-
])
|
|
196
|
-
.then(results => {
|
|
197
|
-
this.lastRequested = inputValue;
|
|
198
|
-
if (this.google) {
|
|
199
|
-
this.pushResults(results[0].concat(results[1]));
|
|
200
|
-
}
|
|
201
|
-
else if (this.mapbox && mapboxgl.accessToken) {
|
|
202
|
-
this.pushResults(results[0].concat(results[2]));
|
|
203
|
-
}
|
|
204
|
-
else {
|
|
205
|
-
this.pushResults(results[0]);
|
|
206
|
-
}
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
/**
|
|
210
|
-
* Handles incoming input change event, eg. input field value has changed.
|
|
211
|
-
* The function is debounced 500ms to avoid firing too many requests while typing.
|
|
212
|
-
*/
|
|
213
|
-
inputChanged() {
|
|
214
|
-
const inputValue = this.inputElement.value;
|
|
215
|
-
this.value = inputValue; // reflect on value attribute
|
|
216
|
-
if (!this.preventSearch) {
|
|
217
|
-
if (inputValue.length < 2) {
|
|
218
|
-
this.lastRequested = null;
|
|
219
|
-
if (inputValue.length === 1) {
|
|
220
|
-
this.shortInput.emit();
|
|
174
|
+
valueChange(newValue) {
|
|
175
|
+
if (!newValue || !this.inputElement) {
|
|
176
|
+
return;
|
|
221
177
|
}
|
|
222
|
-
|
|
223
|
-
|
|
178
|
+
if (newValue !== this.inputElement.value) {
|
|
179
|
+
// If newValue is different from what is in the input element, we know it's set from outside the component.
|
|
180
|
+
this.inputElement.value = newValue;
|
|
181
|
+
if (!this.preventSearch) {
|
|
182
|
+
this.inputChanged();
|
|
183
|
+
}
|
|
224
184
|
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Clear the input field.
|
|
188
|
+
*/
|
|
189
|
+
async clear() {
|
|
190
|
+
if (!this.inputElement)
|
|
191
|
+
return;
|
|
192
|
+
this.inputElement.value = '';
|
|
193
|
+
this.value = '';
|
|
194
|
+
this.lastRequested = null;
|
|
195
|
+
this.cleared.emit();
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* Programmatically trigger the search.
|
|
199
|
+
*/
|
|
200
|
+
async triggerSearch() {
|
|
201
|
+
if (!this.inputElement)
|
|
202
|
+
return;
|
|
203
|
+
const inputValue = this.inputElement.value;
|
|
228
204
|
this.search(inputValue);
|
|
229
|
-
}
|
|
230
|
-
this.changed.emit();
|
|
231
205
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
206
|
+
/**
|
|
207
|
+
* Sets text to be shown in the search field.
|
|
208
|
+
* Setting it will not perform a search.
|
|
209
|
+
*/
|
|
210
|
+
async setDisplayText(displayText) {
|
|
211
|
+
if (!this.inputElement)
|
|
212
|
+
return;
|
|
213
|
+
this.preventSearch = true;
|
|
214
|
+
this.inputElement.value = displayText;
|
|
215
|
+
this.value = displayText;
|
|
216
|
+
this.preventSearch = false;
|
|
217
|
+
}
|
|
218
|
+
/**
|
|
219
|
+
* Set focus on the input field.
|
|
220
|
+
* The preventScroll boolean is passed as true to prevent the browser
|
|
221
|
+
* from scrolling the document to bring the newly-focused element into view.
|
|
222
|
+
*/
|
|
223
|
+
async focusInput() {
|
|
224
|
+
if (!this.inputElement)
|
|
225
|
+
return;
|
|
226
|
+
this.inputElement.focus({ preventScroll: true });
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* Get hold of the search input field.
|
|
230
|
+
*/
|
|
231
|
+
async getInputField() {
|
|
232
|
+
if (!this.inputElement)
|
|
233
|
+
return null;
|
|
234
|
+
return this.inputElement;
|
|
248
235
|
}
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
236
|
+
/**
|
|
237
|
+
* Perform the search.
|
|
238
|
+
*/
|
|
239
|
+
search(inputValue) {
|
|
240
|
+
Promise.all([
|
|
241
|
+
this.makeMapsIndoorsQuery(inputValue),
|
|
242
|
+
this.makeGooglePlacesQuery(inputValue),
|
|
243
|
+
this.getMapboxSearchResults(inputValue),
|
|
244
|
+
])
|
|
245
|
+
.then(results => {
|
|
246
|
+
this.lastRequested = inputValue;
|
|
247
|
+
if (this.google) {
|
|
248
|
+
this.pushResults(results[0].concat(results[1]));
|
|
249
|
+
}
|
|
250
|
+
else if (this.mapbox && mapboxgl.accessToken) {
|
|
251
|
+
this.pushResults(results[0].concat(results[2]));
|
|
252
|
+
}
|
|
253
|
+
else {
|
|
254
|
+
this.pushResults(results[0]);
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
257
|
}
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
258
|
+
/**
|
|
259
|
+
* Handles incoming input change event, eg. input field value has changed.
|
|
260
|
+
* The function is debounced 500ms to avoid firing too many requests while typing.
|
|
261
|
+
*/
|
|
262
|
+
inputChanged() {
|
|
263
|
+
const inputValue = this.inputElement.value;
|
|
264
|
+
this.value = inputValue; // reflect on value attribute
|
|
265
|
+
if (!this.preventSearch) {
|
|
266
|
+
if (inputValue.length < 2) {
|
|
267
|
+
this.lastRequested = null;
|
|
268
|
+
if (inputValue.length === 1) {
|
|
269
|
+
this.shortInput.emit();
|
|
270
|
+
}
|
|
271
|
+
else {
|
|
272
|
+
this.clear();
|
|
273
|
+
}
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
if (inputValue.length > 1 && inputValue !== this.lastRequested) {
|
|
277
|
+
this.search(inputValue);
|
|
278
|
+
}
|
|
279
|
+
this.changed.emit();
|
|
280
|
+
}
|
|
280
281
|
}
|
|
281
|
-
|
|
282
|
-
|
|
282
|
+
/**
|
|
283
|
+
* Push the results via the results event.
|
|
284
|
+
* @param object[] Locations
|
|
285
|
+
*/
|
|
286
|
+
pushResults(locations) {
|
|
287
|
+
this.results.emit(locations);
|
|
283
288
|
}
|
|
284
|
-
|
|
285
|
-
|
|
289
|
+
/**
|
|
290
|
+
* Make MapsIndoors locations request based on given search query.
|
|
291
|
+
* @param {string} query
|
|
292
|
+
* @return {Promise<any[]>}
|
|
293
|
+
*/
|
|
294
|
+
makeMapsIndoorsQuery(query) {
|
|
295
|
+
if (!this.mapsindoors) {
|
|
296
|
+
return Promise.resolve([]);
|
|
297
|
+
}
|
|
298
|
+
// Transform miNear string attribute to object if it matches a latlng
|
|
299
|
+
let miNear;
|
|
300
|
+
if (this.miNear) {
|
|
301
|
+
miNear = this.miNear;
|
|
302
|
+
if (/^(-?\d+(\.\d+)?),\s*(-?\d+(\.\d+)?)$/.test(this.miNear)) {
|
|
303
|
+
const near = this.miNear.split(',');
|
|
304
|
+
miNear = { lat: parseFloat(near[0]), lng: parseFloat(near[1]) };
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
return mapsindoors.services.LocationsService.getLocations({
|
|
308
|
+
q: query.trim(),
|
|
309
|
+
fields: this.miFields,
|
|
310
|
+
take: this.miTake,
|
|
311
|
+
skip: this.miSkip,
|
|
312
|
+
orderBy: this.miOrder,
|
|
313
|
+
near: miNear,
|
|
314
|
+
venue: this.miVenue,
|
|
315
|
+
categories: this.miCategories
|
|
316
|
+
});
|
|
286
317
|
}
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
306
|
-
}));
|
|
307
|
-
resolve(places);
|
|
308
|
-
});
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
/**
|
|
312
|
-
* Get Mapbox Places results.
|
|
313
|
-
*
|
|
314
|
-
* @param {string} query
|
|
315
|
-
* @return {Promise<any>}
|
|
316
|
-
*/
|
|
317
|
-
getMapboxSearchResults(query) {
|
|
318
|
-
if (this.mapbox && mapboxgl.accessToken) {
|
|
319
|
-
if (query) {
|
|
318
|
+
/**
|
|
319
|
+
* Make Google Places autocomplete suggestion request.
|
|
320
|
+
*
|
|
321
|
+
* @param {string} query
|
|
322
|
+
* @return {Promise<any>}
|
|
323
|
+
*/
|
|
324
|
+
makeGooglePlacesQuery(query) {
|
|
325
|
+
if (this.google) {
|
|
326
|
+
if (!this.googleAutocompleteService) {
|
|
327
|
+
this.googleAutocompleteService = new google.maps.places.AutocompleteService();
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
this.googleAutocompleteService = null;
|
|
332
|
+
}
|
|
333
|
+
if (!this.googleAutocompleteService) {
|
|
334
|
+
return Promise.resolve([]);
|
|
335
|
+
}
|
|
320
336
|
return new Promise((resolve) => {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
})
|
|
342
|
-
resolve(places);
|
|
343
|
-
})
|
|
344
|
-
.catch(() => {
|
|
345
|
-
resolve([]);
|
|
346
|
-
});
|
|
337
|
+
const params = {
|
|
338
|
+
input: query,
|
|
339
|
+
language: this.language
|
|
340
|
+
};
|
|
341
|
+
if (this.gmCountryCode) {
|
|
342
|
+
params.componentRestrictions = { country: this.gmCountryCode };
|
|
343
|
+
}
|
|
344
|
+
this.googleAutocompleteService.getPlacePredictions(params, (results) => {
|
|
345
|
+
const places = (results || []).map((result) => ({
|
|
346
|
+
id: result.place_id,
|
|
347
|
+
type: 'Feature',
|
|
348
|
+
properties: {
|
|
349
|
+
type: 'google_places',
|
|
350
|
+
placeId: result.place_id,
|
|
351
|
+
name: result.structured_formatting.main_text,
|
|
352
|
+
subtitle: result.structured_formatting.secondary_text || '',
|
|
353
|
+
floor: 0
|
|
354
|
+
}
|
|
355
|
+
}));
|
|
356
|
+
resolve(places);
|
|
357
|
+
});
|
|
347
358
|
});
|
|
348
|
-
}
|
|
349
359
|
}
|
|
350
|
-
|
|
351
|
-
|
|
360
|
+
/**
|
|
361
|
+
* Get Mapbox Places results.
|
|
362
|
+
*
|
|
363
|
+
* @param {string} query
|
|
364
|
+
* @return {Promise<any>}
|
|
365
|
+
*/
|
|
366
|
+
getMapboxSearchResults(query) {
|
|
367
|
+
if (this.mapbox && mapboxgl.accessToken) {
|
|
368
|
+
if (query) {
|
|
369
|
+
return new Promise((resolve) => {
|
|
370
|
+
const language = this.language.split('-')[0]; // Mapbox seemingly only supports the primary language subtag.
|
|
371
|
+
let url = `https://api.mapbox.com/search/searchbox/v1/suggest?q=${query}&session_token=${this.sessionToken}&access_token=${mapboxgl.accessToken}&language=${language}`;
|
|
372
|
+
if (this.userPosition) {
|
|
373
|
+
url = url.concat(`&proximity=${this.userPosition}`);
|
|
374
|
+
}
|
|
375
|
+
fetch(url)
|
|
376
|
+
.then((response) => {
|
|
377
|
+
return response.json();
|
|
378
|
+
})
|
|
379
|
+
.then((result) => {
|
|
380
|
+
const places = result.suggestions.map((result) => ({
|
|
381
|
+
id: result.mapbox_id,
|
|
382
|
+
type: 'Feature',
|
|
383
|
+
properties: {
|
|
384
|
+
type: 'mapbox_places',
|
|
385
|
+
placeId: result.mapbox_id,
|
|
386
|
+
name: result.name,
|
|
387
|
+
subtitle: result.place_formatted || '',
|
|
388
|
+
floor: 0
|
|
389
|
+
}
|
|
390
|
+
}));
|
|
391
|
+
resolve(places);
|
|
392
|
+
})
|
|
393
|
+
.catch(() => {
|
|
394
|
+
resolve([]);
|
|
395
|
+
});
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
else {
|
|
400
|
+
return Promise.resolve([]);
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
componentDidRender() {
|
|
404
|
+
if (!this.inputElement)
|
|
405
|
+
return;
|
|
406
|
+
if (this.dataAttributes) {
|
|
407
|
+
for (const key in this.dataAttributes) {
|
|
408
|
+
this.inputElement.setAttribute(key, this.dataAttributes[key]);
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
this.componentRendered.emit();
|
|
352
412
|
}
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
this.inputElement.setAttribute(key, this.dataAttributes[key]);
|
|
358
|
-
}
|
|
413
|
+
render() {
|
|
414
|
+
var _a;
|
|
415
|
+
return (h(Host, { key: '2a7218a542e11e078974394e53952a96170d900a' }, h("input", { key: '933157a4c89795b1a90c2472303586390ae18e4c', disabled: this.disabled, id: this.idAttribute ? this.idAttribute : null, type: "search", ref: (el) => this.inputElement = el, onInput: () => this.inputChanged(), placeholder: this.placeholder, autocomplete: "off" }), ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) &&
|
|
416
|
+
h("button", { key: '92360364b036ba224cd74741b5ac95818f05564c', type: "button", onClick: () => this.clear(), "aria-label": "Clear" }, h("svg", { key: 'da9d421f4fd9033a0326f9ede9974de48430498a', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '759d43febded3f03cb538038d323836ccd423a54', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))));
|
|
359
417
|
}
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
h("button", { type: "button", onClick: () => this.clear(), "aria-label": "Clear" }, h("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))));
|
|
366
|
-
}
|
|
367
|
-
static get watchers() { return {
|
|
368
|
-
"value": ["valueChange"]
|
|
369
|
-
}; }
|
|
418
|
+
static get watchers() { return {
|
|
419
|
+
"value": [{
|
|
420
|
+
"valueChange": 0
|
|
421
|
+
}]
|
|
422
|
+
}; }
|
|
370
423
|
};
|
|
371
424
|
__decorate([
|
|
372
|
-
|
|
425
|
+
Debounce(500)
|
|
373
426
|
], Search.prototype, "inputChanged", null);
|
|
374
|
-
Search.style = searchCss;
|
|
427
|
+
Search.style = searchCss();
|
|
375
428
|
|
|
376
429
|
export { Search as mi_search };
|