@mapsindoors/map-template 1.95.8 → 1.95.10
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-mNXwkS5r.mjs → GoogleMapsMap-CwUKio6U.mjs} +2 -2
- package/dist/{MapboxMap-JSpSXMbZ.mjs → MapboxMap-C5oy5rc4.mjs} +2 -2
- package/dist/favicon.png +0 -0
- package/dist/logo-192.png +0 -0
- package/dist/manifest.json +21 -0
- package/dist/mapsindoors-react.es.js +1 -1
- package/dist/mapsindoors-react.umd.js +236 -198
- package/dist/mapsindoors-webcomponent.es.js +51235 -42443
- package/dist/reactcomponent-Dyc_LGHg.mjs +37841 -0
- package/dist/robots.txt +3 -0
- package/package.json +5 -7
- package/dist/_commonjsHelpers-B85MJLTf.js +0 -5
- package/dist/app-globals-DQuL1Twl.js +0 -3
- package/dist/combo-box-item.entry.js +0 -13
- package/dist/icon-DT_sDkmK.js +0 -11
- package/dist/index-BZQHyS7V.js +0 -1701
- package/dist/index.js +0 -1
- package/dist/loader.js +0 -11
- package/dist/mi-card_2.entry.js +0 -33
- package/dist/mi-chip.entry.js +0 -31
- package/dist/mi-column.entry.js +0 -52
- package/dist/mi-combo-box.entry.js +0 -449
- package/dist/mi-components.js +0 -21
- package/dist/mi-data-table.entry.js +0 -324
- package/dist/mi-distance_2.entry.js +0 -69
- package/dist/mi-dropdown-item.entry.js +0 -13
- package/dist/mi-dropdown.entry.js +0 -656
- package/dist/mi-floor-selector.entry.js +0 -209
- package/dist/mi-keyboard.entry.js +0 -261
- package/dist/mi-list-item-category.entry.js +0 -51
- package/dist/mi-list-item-location.entry.js +0 -177
- package/dist/mi-list.entry.js +0 -68
- package/dist/mi-location-booking.entry.js +0 -5218
- package/dist/mi-location-info.entry.js +0 -71
- package/dist/mi-map-googlemaps.entry.js +0 -795
- package/dist/mi-map-mapbox.entry.js +0 -530
- package/dist/mi-metric-card.entry.js +0 -61
- package/dist/mi-my-position.entry.js +0 -2457
- package/dist/mi-notification.entry.js +0 -137
- package/dist/mi-route-instructions-heading.entry.js +0 -78
- package/dist/mi-route-instructions-maneuver-legacy.entry.js +0 -86
- package/dist/mi-route-instructions-maneuver.entry.js +0 -86
- package/dist/mi-route-instructions-step-legacy.entry.js +0 -322
- package/dist/mi-route-instructions-step.entry.js +0 -342
- package/dist/mi-route-instructions.entry.js +0 -176
- package/dist/mi-scroll-buttons.entry.js +0 -120
- package/dist/mi-search.entry.js +0 -429
- package/dist/mi-share-sms.entry.js +0 -94
- package/dist/mi-step-switcher.entry.js +0 -40
- package/dist/mi-tab-panel.entry.js +0 -25
- package/dist/mi-tab.entry.js +0 -10
- package/dist/mi-tabs.entry.js +0 -49
- package/dist/mi-time.entry.js +0 -57
- package/dist/mi-variables-CDNvnTkH.js +0 -5
- package/dist/reactcomponent-BrPGG2Eb.mjs +0 -29048
- package/dist/route-travel-mode.enum-BvqP1fpw.js +0 -9
- package/dist/sort-order.enum-jsLAbYWg.js +0 -566
- package/dist/unit-system.enum-BwPgAWqL.js +0 -7
- package/dist/utils-DNHzysQ6.js +0 -61
package/dist/mi-search.entry.js
DELETED
|
@@ -1,429 +0,0 @@
|
|
|
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
|
-
|
|
4
|
-
var dist = {};
|
|
5
|
-
|
|
6
|
-
var Debounce$1 = {};
|
|
7
|
-
|
|
8
|
-
var hasRequiredDebounce;
|
|
9
|
-
|
|
10
|
-
function requireDebounce () {
|
|
11
|
-
if (hasRequiredDebounce) return Debounce$1;
|
|
12
|
-
hasRequiredDebounce = 1;
|
|
13
|
-
(function (exports) {
|
|
14
|
-
|
|
15
|
-
Object.defineProperty(exports, "__esModule", {
|
|
16
|
-
value: true
|
|
17
|
-
});
|
|
18
|
-
exports["default"] = outerDecorator;
|
|
19
|
-
exports.debounce = debounce;
|
|
20
|
-
var DEFAULT_DEBOUNCE_DURATION = 500;
|
|
21
|
-
|
|
22
|
-
exports.DEFAULT_DEBOUNCE_DURATION = DEFAULT_DEBOUNCE_DURATION;
|
|
23
|
-
/** Decorates a class method so that it is debounced by the specified duration */
|
|
24
|
-
|
|
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
|
-
});
|
|
37
|
-
|
|
38
|
-
return this[key];
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/** Debounces the specified function and returns a wrapper function */
|
|
45
|
-
|
|
46
|
-
function debounce(method) {
|
|
47
|
-
var duration = arguments.length <= 1 || arguments[1] === undefined ? DEFAULT_DEBOUNCE_DURATION : arguments[1];
|
|
48
|
-
|
|
49
|
-
var timeoutId = undefined;
|
|
50
|
-
|
|
51
|
-
function debounceWrapper() {
|
|
52
|
-
var _this = this;
|
|
53
|
-
|
|
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
|
-
};
|
|
72
|
-
|
|
73
|
-
return debounceWrapper;
|
|
74
|
-
}
|
|
75
|
-
} (Debounce$1));
|
|
76
|
-
return Debounce$1;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
var hasRequiredDist;
|
|
80
|
-
|
|
81
|
-
function requireDist () {
|
|
82
|
-
if (hasRequiredDist) return dist;
|
|
83
|
-
hasRequiredDist = 1;
|
|
84
|
-
(function (exports) {
|
|
85
|
-
|
|
86
|
-
Object.defineProperty(exports, '__esModule', {
|
|
87
|
-
value: true
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
function _interopExportWildcard(obj, defaults) { var newObj = defaults({}, obj); delete newObj['default']; return newObj; }
|
|
91
|
-
|
|
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; }
|
|
93
|
-
|
|
94
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
95
|
-
|
|
96
|
-
var _DebounceJs = requireDebounce();
|
|
97
|
-
|
|
98
|
-
var _DebounceJs2 = _interopRequireDefault(_DebounceJs);
|
|
99
|
-
|
|
100
|
-
exports['default'] = _DebounceJs2['default'];
|
|
101
|
-
|
|
102
|
-
_defaults(exports, _interopExportWildcard(_DebounceJs, _defaults));
|
|
103
|
-
} (dist));
|
|
104
|
-
return dist;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
var distExports = requireDist();
|
|
108
|
-
var Debounce = /*@__PURE__*/getDefaultExportFromCjs(distExports);
|
|
109
|
-
|
|
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}`;
|
|
111
|
-
|
|
112
|
-
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
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;
|
|
121
|
-
};
|
|
122
|
-
const Search = class {
|
|
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;
|
|
173
|
-
}
|
|
174
|
-
valueChange(newValue) {
|
|
175
|
-
if (!newValue || !this.inputElement) {
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
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
|
-
}
|
|
184
|
-
}
|
|
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;
|
|
204
|
-
this.search(inputValue);
|
|
205
|
-
}
|
|
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;
|
|
235
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
281
|
-
}
|
|
282
|
-
/**
|
|
283
|
-
* Push the results via the results event.
|
|
284
|
-
* @param object[] Locations
|
|
285
|
-
*/
|
|
286
|
-
pushResults(locations) {
|
|
287
|
-
this.results.emit(locations);
|
|
288
|
-
}
|
|
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
|
-
});
|
|
317
|
-
}
|
|
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
|
-
}
|
|
336
|
-
return new Promise((resolve) => {
|
|
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
|
-
});
|
|
358
|
-
});
|
|
359
|
-
}
|
|
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();
|
|
412
|
-
}
|
|
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" })))));
|
|
417
|
-
}
|
|
418
|
-
static get watchers() { return {
|
|
419
|
-
"value": [{
|
|
420
|
-
"valueChange": 0
|
|
421
|
-
}]
|
|
422
|
-
}; }
|
|
423
|
-
};
|
|
424
|
-
__decorate([
|
|
425
|
-
Debounce(500)
|
|
426
|
-
], Search.prototype, "inputChanged", null);
|
|
427
|
-
Search.style = searchCss();
|
|
428
|
-
|
|
429
|
-
export { Search as mi_search };
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-BZQHyS7V.js';
|
|
2
|
-
|
|
3
|
-
const shareSmsCss = () => `a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -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";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}form .inputs{margin:0 auto;width:80%;padding-top:32px;padding-bottom:32px;position:relative;display:flex;flex-direction:row;align-items:center}form .inputs span.plus-sign{position:absolute;left:16px;display:block;font-size:1rem;font-family:Figtree, -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";color:#1c1917;top:50%;transform:translateY(-50%)}form .inputs input{padding-left:12px;padding-right:12px;background-color:#ffffff;border-style:solid;border-width:1px;border-radius:8px;height:48px;font-size:1.25rem;font-family:Figtree, -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";color:#1c1917;box-sizing:border-box}form .inputs input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #dbeafe}form .inputs input.country-code{width:15%;min-width:88px;margin-right:16px;padding-left:32px}form .inputs input.phone-number{width:85%}form button{margin-top:32px;margin-bottom:24px}`;
|
|
4
|
-
|
|
5
|
-
const ShareSms = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.successfullySent = createEvent(this, "successfullySent", 7);
|
|
9
|
-
this.unsuccessfullySent = createEvent(this, "unsuccessfullySent", 7);
|
|
10
|
-
/**
|
|
11
|
-
* Default value for country code input field.
|
|
12
|
-
*
|
|
13
|
-
* @type {string}
|
|
14
|
-
*/
|
|
15
|
-
this.countryCode = '1';
|
|
16
|
-
/**
|
|
17
|
-
* Placeholder text for phone number input field.
|
|
18
|
-
*
|
|
19
|
-
* @type {string}
|
|
20
|
-
*/
|
|
21
|
-
this.phoneNumberInputPlaceholder = 'Enter phone number';
|
|
22
|
-
/**
|
|
23
|
-
* Label for submit button.
|
|
24
|
-
*
|
|
25
|
-
* @type {string}
|
|
26
|
-
*/
|
|
27
|
-
this.submitButtonLabel = 'Send SMS';
|
|
28
|
-
/**
|
|
29
|
-
* Handle form submission event and send directions to phone if validation checks passes.
|
|
30
|
-
*/
|
|
31
|
-
this.submitFormHandler = (event) => {
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
const isParametersValid = this.venueId && this.originLocationId && this.destinationLocationId ? true : false;
|
|
34
|
-
if (!this.formElement.checkValidity() || !isParametersValid) {
|
|
35
|
-
if (!this.countryCodeInputElement.validity.valid) {
|
|
36
|
-
this.countryCodeInputElement.focus();
|
|
37
|
-
}
|
|
38
|
-
if (!this.phoneNumberInputElement.validity.valid) {
|
|
39
|
-
this.phoneNumberInputElement.focus();
|
|
40
|
-
}
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
mapsindoors.services.ShareService.directionsToPhone(this.venueId, this.originLocationId, this.destinationLocationId, this.countryCodeInputElement.value, this.phoneNumberInputElement.value)
|
|
44
|
-
.then(() => this.successfullySent.emit())
|
|
45
|
-
.catch((err) => this.unsuccessfullySent.emit(err));
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
componentDidRender() {
|
|
49
|
-
if (!this.countryCodeInputElement || !this.countryCode)
|
|
50
|
-
return;
|
|
51
|
-
this.countryCodeInputElement.value = this.countryCode;
|
|
52
|
-
}
|
|
53
|
-
componentDidLoad() {
|
|
54
|
-
this.addIntersectionObserver();
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Observe the input field for phone number and focus it on intersection.
|
|
58
|
-
*/
|
|
59
|
-
addIntersectionObserver() {
|
|
60
|
-
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
61
|
-
if (entries[0].intersectionRatio <= 0) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
this.phoneNumberInputElement.focus();
|
|
65
|
-
this.intersectionObserver.disconnect();
|
|
66
|
-
});
|
|
67
|
-
this.intersectionObserver.observe(this.phoneNumberInputElement);
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Set input attribute on mi-keyboard component.
|
|
71
|
-
*
|
|
72
|
-
* @param {FocusEvent} event
|
|
73
|
-
*/
|
|
74
|
-
setKeyboardInputElement(event) {
|
|
75
|
-
this.miKeyboardElement.inputElement = event.target;
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Update form validity.
|
|
79
|
-
*/
|
|
80
|
-
updateFormValidity() {
|
|
81
|
-
// Form validity check
|
|
82
|
-
if (!this.formElement.checkValidity()) {
|
|
83
|
-
this.submitButtonElement.disabled = true;
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
this.submitButtonElement.disabled = false;
|
|
87
|
-
}
|
|
88
|
-
render() {
|
|
89
|
-
return (h("form", { key: '6b95e4a70dd312d48820f1ab7d097f5015fbcd82', onSubmit: this.submitFormHandler, ref: (el) => this.formElement = el }, h("div", { key: 'a1d9078dcf9edea773fff8437117fabd96cee74d', class: "inputs" }, h("span", { key: '79d9bc0cdee2f4a8d950f912ed384cb91fa9c651', class: "plus-sign" }, "\uFF0B"), h("input", { key: '803a9d46a87d0984401995ba6c999dc6e349664a', id: "country-code", class: "country-code", pattern: "[0-9]{1,3}", required: true, autocomplete: "off", type: "text", placeholder: this.countryCode, ref: (el) => this.countryCodeInputElement = el, onInput: () => this.updateFormValidity(), onFocus: (e) => this.setKeyboardInputElement(e) }), h("input", { key: '6b2276bafe173ceebbe3b4e878f5db6081d536fe', id: "phone-number", class: "phone-number", pattern: "[0-9]{6,10}", required: true, autocomplete: "off", type: "text", placeholder: this.phoneNumberInputPlaceholder, ref: (el) => this.phoneNumberInputElement = el, onInput: () => this.updateFormValidity(), onFocus: (e) => this.setKeyboardInputElement(e) })), h("mi-keyboard", { key: 'd6f440ff7123ce57e02a6831aa9907048b9b59fa', layout: "numeric", ref: (el) => this.miKeyboardElement = el }), h("div", { key: 'd86ec402d9aa5c457d26b6ab26bdf292f088e3be', class: "flex justify-center" }, h("button", { key: '70b53db06f85c5e463b84189731e1d479b0cdf77', type: "submit", disabled: true, class: "mi-button mi-button--primary", ref: (el) => this.submitButtonElement = el }, this.submitButtonLabel))));
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
ShareSms.style = shareSmsCss();
|
|
93
|
-
|
|
94
|
-
export { ShareSms as mi_share_sms };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BZQHyS7V.js';
|
|
2
|
-
|
|
3
|
-
const stepSwitcherCss = () => `:host{display:flex}button{padding:16px;background-color:transparent;border:none}button:disabled svg{fill:#d1d5db}button svg{fill:#1f2937}div.steps{padding-top:12px;padding-bottom:12px;padding-left:4px;padding-right:4px;display:flex;flex-grow:1;flex-direction:column;vertical-align:center;justify-content:center}div.steps p{margin:0;padding-bottom:8px;color:#1c1917;font-size:1rem;font-weight:500;line-height:1.25rem;text-align:center}div.steps__dots{display:flex;justify-content:center}div.steps__dots span{width:8px;height:8px;margin-right:8px;float:left;background-color:#d1d5db;border-radius:50%}div.steps__dots span.active{background-color:#1f2937}div.steps__dots span:last-child{margin-right:0px}`;
|
|
4
|
-
|
|
5
|
-
const StepSwitcher = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.stepIndexChanged = createEvent(this, "stepIndexChanged", 7);
|
|
9
|
-
/**
|
|
10
|
-
* Steps to display dots for.
|
|
11
|
-
*
|
|
12
|
-
* @type {any[]}
|
|
13
|
-
*/
|
|
14
|
-
this.steps = [];
|
|
15
|
-
/**
|
|
16
|
-
* Step index to show. Defaults to first step.
|
|
17
|
-
*
|
|
18
|
-
* @type {number}
|
|
19
|
-
*/
|
|
20
|
-
this.stepIndex = 0;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Set step index and emit stepIndexChanged event.
|
|
24
|
-
*
|
|
25
|
-
* @param {number} index
|
|
26
|
-
*/
|
|
27
|
-
setStepIndex(index) {
|
|
28
|
-
this.stepIndex = index;
|
|
29
|
-
this.stepIndexChanged.emit(this.stepIndex);
|
|
30
|
-
}
|
|
31
|
-
render() {
|
|
32
|
-
return (h(Host, { key: '1e395bce6f748cccf4dbbfd779698021b053898d' }, h("button", { key: 'b519a479608fdb32b3093a7afb1594a1ef07a0d6', type: "button", disabled: this.steps.length === 0 || this.stepIndex === 0, onClick: () => this.setStepIndex(this.stepIndex - 1) }, h("svg", { key: 'f76750f1dee589871fdb3ec6cb0b9997899d17f5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" }, h("path", { key: '1f00900037a228cde36ff1162ccbceadd2fac043', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '06bb8082e8c1847ac8c6189f98b938ffb4e68434', d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" }))), h("div", { key: '96dffdb02ac846d3d3c077464b112a9c6fc18038', class: "steps" }, this.heading ? h("p", { part: "heading" }, this.heading) : null, h("div", { key: '6dc56a58ca81214d85c32775b59874ecaf77afdd', class: "steps__dots" }, this.steps.map((item, index) => {
|
|
33
|
-
const isActive = this.stepIndex === index ? true : false;
|
|
34
|
-
return h("span", { part: isActive ? 'active-dot' : 'dot', class: { 'active': isActive } });
|
|
35
|
-
}))), h("button", { key: '5c8a8344ee80fd9a9405bfe9951b23b2fa56ac58', type: "button", disabled: this.steps.length === 0 || this.stepIndex === this.steps.length - 1, onClick: () => this.setStepIndex(this.stepIndex + 1) }, h("svg", { key: '86d476332a460a49beb2791578c3d4d71890b94c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" }, h("path", { key: 'c2d9e3b32289adb5990736677bb756a89546adeb', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '8bbdf7b1b80e768a538df7b2e3cf5bd7ac5acb68', d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })))));
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
StepSwitcher.style = stepSwitcherCss();
|
|
39
|
-
|
|
40
|
-
export { StepSwitcher as mi_step_switcher };
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-BZQHyS7V.js';
|
|
2
|
-
|
|
3
|
-
const tabPanelCss = () => `div{display:none}div.active{font-family:Figtree, -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";flex-shrink:0;flex-grow:1;display:block}`;
|
|
4
|
-
|
|
5
|
-
const TabPanel = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.isActive = false;
|
|
9
|
-
}
|
|
10
|
-
async active(active) {
|
|
11
|
-
if (active !== undefined) {
|
|
12
|
-
this.isActive = !!active;
|
|
13
|
-
}
|
|
14
|
-
return this.isActive;
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
const classList = {
|
|
18
|
-
'active': this.isActive
|
|
19
|
-
};
|
|
20
|
-
return (h("div", { key: '5ab9e40be53f24513cf2864e1cdc9ac78c73bc8a', class: classList }, h("slot", { key: 'a845f4a8d286200a463309cb8de2362cdc4065d2' })));
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
TabPanel.style = tabPanelCss();
|
|
24
|
-
|
|
25
|
-
export { TabPanel as mi_tab_panel };
|
package/dist/mi-tab.entry.js
DELETED
package/dist/mi-tabs.entry.js
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-BZQHyS7V.js';
|
|
2
|
-
|
|
3
|
-
const tabsCss = () => `:host{font-family:Figtree, -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";flex-shrink:0;flex-grow:1}:host .nav{border:none;border-bottom:solid;border-color:#d1d5db;border-width:1px;padding-left:24px}:host .nav--borderless-bottom{border-bottom:0}:host .nav ul{display:flex;flex-direction:row;padding:0;margin:0;margin-bottom:-1px}:host .nav ul li{list-style:none;text-align:center;cursor:pointer;padding:16px;border-width:1px;border-style:solid;border-color:rgba(0, 0, 0, 0)}:host .nav ul li.active{background-color:#f9fafb;border-color:#d1d5db;border-width:1px;border-style:solid;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;font-weight:600}:host .content{display:block;padding:16px;background-color:#f9fafb}:host .content--bordered{border-width:1px;border-color:#d1d5db;border-style:solid;border-radius:4px}`;
|
|
4
|
-
|
|
5
|
-
const Tabs = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.active = 0;
|
|
9
|
-
/**
|
|
10
|
-
* Sets a border surrounding the content view.
|
|
11
|
-
*/
|
|
12
|
-
this.bordered = false;
|
|
13
|
-
}
|
|
14
|
-
connectedCallback() {
|
|
15
|
-
// Create an observer instance linked to the callback function
|
|
16
|
-
const observer = new MutationObserver(this.componentWillRender.bind(this));
|
|
17
|
-
// Start observing the target node for configured mutations
|
|
18
|
-
observer.observe(this.el, { childList: true });
|
|
19
|
-
}
|
|
20
|
-
componentWillRender() {
|
|
21
|
-
const tabs = this.el.querySelectorAll('mi-tab');
|
|
22
|
-
this.tabs = Array.from(tabs).reduce((tabs, tab, index) => {
|
|
23
|
-
const content = Array.from(this.el.getElementsByTagName('mi-tab-panel')).find(el => el.id === tab.tabFor);
|
|
24
|
-
if (content) {
|
|
25
|
-
tabs.push({ label: tab.label, content: content });
|
|
26
|
-
}
|
|
27
|
-
return tabs;
|
|
28
|
-
}, []);
|
|
29
|
-
}
|
|
30
|
-
componentDidRender() {
|
|
31
|
-
this.selectTab(this.active);
|
|
32
|
-
}
|
|
33
|
-
async selectTab(index) {
|
|
34
|
-
const isTabActive = await this.tabs[index].content.active();
|
|
35
|
-
if (!isTabActive) {
|
|
36
|
-
this.active = index;
|
|
37
|
-
this.tabs.forEach((tab, tabIndex) => tab.content.active(tabIndex === index));
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
render() {
|
|
41
|
-
return (h(Host, { key: 'cfda4988c7be231b136bb7e2e29f57e5f69bc31d' }, h("nav", { key: '5f4682c587caaba179dbf186af270d69c3f5e739', class: `nav ${this.bordered === true ? 'nav--borderless-bottom' : ''}` }, h("ul", { key: '828e348d49f83a96cd36dd08690bc8eb990c9329' }, this.tabs.map((tab, index) => {
|
|
42
|
-
return (h("li", { class: this.active === index ? 'active' : '', onClick: () => { this.selectTab(index); } }, " ", tab.label, " "));
|
|
43
|
-
}))), h("section", { key: 'c9b6a595f575534ec720331401bc620c9b06125e', class: `content ${this.bordered === true ? 'content--bordered' : ''}` }, h("slot", { key: 'e52795c27ad173b657b003016a9fa378641abe35' }))));
|
|
44
|
-
}
|
|
45
|
-
get el() { return getElement(this); }
|
|
46
|
-
};
|
|
47
|
-
Tabs.style = tabsCss();
|
|
48
|
-
|
|
49
|
-
export { Tabs as mi_tabs };
|