@mapsindoors/map-template 1.66.2 → 1.66.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/_commonjsHelpers-ba3f0406-b20f75c1.mjs +30 -0
- package/dist/combo-box-item.entry-85094f35.mjs +22 -0
- package/dist/icon-b8d01d6f-6d4b7c40.mjs +33 -0
- package/dist/mapsindoors-react.es.js +7 -59824
- package/dist/mapsindoors-react.umd.js +560 -491
- package/dist/mapsindoors-webcomponent.es.js +51218 -39989
- package/dist/mapsindoors-webcomponent.umd.js +554 -480
- package/dist/mi-card_2.entry-817a0422.mjs +33 -0
- package/dist/mi-chip.entry-f7dbae24.mjs +26 -0
- package/dist/mi-column.entry-30d4c1d7.mjs +28 -0
- package/dist/mi-combo-box.entry-998279bc.mjs +270 -0
- package/dist/mi-data-table.entry-e0a9dd7a.mjs +231 -0
- package/dist/mi-distance_2.entry-e930707c.mjs +346 -0
- package/dist/mi-dropdown-item.entry-e624023f.mjs +22 -0
- package/dist/mi-dropdown.entry-8d4d8ee3.mjs +331 -0
- package/dist/mi-floor-selector.entry-329407f6.mjs +122 -0
- package/dist/mi-keyboard.entry-ceed8ed2.mjs +3048 -0
- package/dist/mi-list-item-category.entry-a33342c9.mjs +46 -0
- package/dist/mi-list-item-location.entry-e9b9527d.mjs +144 -0
- package/dist/mi-list.entry-d5bd6cae.mjs +49 -0
- package/dist/mi-location-booking.entry-63d82e20.mjs +4873 -0
- package/dist/mi-location-info.entry-43f0e6f3.mjs +39 -0
- package/dist/mi-map-googlemaps.entry-abe19e39.mjs +406 -0
- package/dist/mi-map-mapbox.entry-02d4ace9.mjs +308 -0
- package/dist/mi-metric-card.entry-85d97733.mjs +36 -0
- package/dist/mi-my-position.entry-223dd3e0.mjs +1406 -0
- package/dist/mi-notification.entry-7facb24f.mjs +91 -0
- package/dist/mi-route-instructions-heading.entry-e11004f5.mjs +82 -0
- package/dist/mi-route-instructions-maneuver-legacy.entry-e0a64029.mjs +83 -0
- package/dist/mi-route-instructions-maneuver.entry-98953d3e.mjs +83 -0
- package/dist/mi-route-instructions-step-legacy.entry-05ac87cf.mjs +209 -0
- package/dist/mi-route-instructions-step.entry-35ae490e.mjs +244 -0
- package/dist/mi-route-instructions.entry-fc97f09d.mjs +150 -0
- package/dist/mi-scroll-buttons.entry-9e523ef6.mjs +86 -0
- package/dist/mi-search.entry-8c1f6929.mjs +258 -0
- package/dist/mi-share-sms.entry-0689c0ac.mjs +63 -0
- package/dist/mi-step-switcher.entry-aa8f0707.mjs +34 -0
- package/dist/mi-tab-panel.entry-1ddc397b.mjs +29 -0
- package/dist/mi-tab.entry-a478df47.mjs +21 -0
- package/dist/mi-tabs.entry-7c445312.mjs +44 -0
- package/dist/mi-time.entry-df58a4f1.mjs +53 -0
- package/dist/mi-variables-9a6c8d4d-64044b44.mjs +16 -0
- package/dist/reactcomponent-fed5da4c.mjs +57763 -0
- package/dist/route-travel-mode.enum-7f4ce9c7-0da65b8e.mjs +16 -0
- package/dist/sort-order.enum-64ce8998-fb78d66a.mjs +326 -0
- package/dist/unit-system.enum-eaefb53e-5d1cf129.mjs +16 -0
- package/dist/utils-ae714467-4f4e3a56.mjs +45 -0
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { r as s, g as d } from "./reactcomponent-fed5da4c.mjs";
|
|
2
|
+
import "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
(function() {
|
|
5
|
+
try {
|
|
6
|
+
var e = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, t = new e.Error().stack;
|
|
7
|
+
t && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[t] = "fffeafc3-8136-4d72-99e2-579392bb2814", e._sentryDebugIdIdentifier = "sentry-dbid-fffeafc3-8136-4d72-99e2-579392bb2814");
|
|
8
|
+
} catch {
|
|
9
|
+
}
|
|
10
|
+
})();
|
|
11
|
+
const o = class {
|
|
12
|
+
constructor(e) {
|
|
13
|
+
s(this, e), this.selected = !1, this.disabled = !1, this.excludefromall = !1, this.value = void 0, this.text = void 0;
|
|
14
|
+
}
|
|
15
|
+
get el() {
|
|
16
|
+
return d(this);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
o as mi_dropdown_item
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=mi-dropdown-item.entry-e624023f.mjs.map
|
|
@@ -0,0 +1,331 @@
|
|
|
1
|
+
import { r as m, c as h, h as s, H as p, g as u } from "./reactcomponent-fed5da4c.mjs";
|
|
2
|
+
import { S as c, f } from "./sort-order.enum-64ce8998-fb78d66a.mjs";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
import "./_commonjsHelpers-ba3f0406-b20f75c1.mjs";
|
|
6
|
+
(function() {
|
|
7
|
+
try {
|
|
8
|
+
var t = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, e = new t.Error().stack;
|
|
9
|
+
e && (t._sentryDebugIds = t._sentryDebugIds || {}, t._sentryDebugIds[e] = "7519a583-e2f6-4f8b-a08b-05147c67a069", t._sentryDebugIdIdentifier = "sentry-dbid-7519a583-e2f6-4f8b-a08b-05147c67a069");
|
|
10
|
+
} catch {
|
|
11
|
+
}
|
|
12
|
+
})();
|
|
13
|
+
const g = `.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=tel]{font-size:1rem;padding:8px;border-style:solid;border-width:1px;border-color:#8d98aa;border-radius:4px}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=range],.mi-input[type=tel]{display:block}.mi-input[type=radio],.mi-input[type=checkbox]{margin:0px;transform:scale(1.2, 1.2)}.mi-input[type=search]{padding-left:32px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6267 8.43836C14.6267 11.8561 11.8561 14.6267 8.43836 14.6267C5.02062 14.6267 2.25 11.8561 2.25 8.43836C2.25 5.02062 5.02062 2.25 8.43836 2.25C11.8561 2.25 14.6267 5.02062 14.6267 8.43836Z' stroke='%23aeb9cb' stroke-width='2.5'/%3E%3Crect x='15.0979' y='14.1614' width='7.34678' height='1.32449' rx='0.662244' transform='rotate(45 15.0979 14.1614)' fill='%23aeb9cb' stroke='%23aeb9cb'/%3E%3Crect x='13.7847' y='13.2916' width='1.05276' height='0.697347' transform='rotate(45 13.7847 13.2916)' stroke='%23aeb9cb' stroke-width='0.697346'/%3E%3C/svg%3E%0A") no-repeat scroll 8px center, white}.mi-input:disabled{opacity:0.48;cursor:not-allowed}.mi-label{font-style:normal;display:block;font-size:1rem;font-weight:500;color:#1e2025}.mi-label>*{margin-top:4px}.mi-label>input[type=radio],.mi-label>input[type=checkbox],.mi-label>label.mi-toggle-btn{margin-right:8px}mi-dropdown-item{display:none}:host{display:inline-block;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;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"}:host(.open) .button::after{border-top-color:transparent;border-bottom-color:#1f2937;margin-top:-8px}:host(.open) section{display:flex}:host(.open) svg.arrow{transform:rotate(180deg)}.button{display:flex;justify-content:flex-start;align-items:center;height:100%;width:100%;font-family:inherit;background:linear-gradient(#f9fafb, #f3f4f6);padding:0;padding-left:16px;padding-right:16px;border-radius:4px;border-width:1px;border-style:solid;border-color:#d1d5db;color:#1c1917;font-size:1rem;font-weight:500;line-height:1rem;gap:8px}.button__left-icon{height:20px;width:20px}.button svg{margin-left:auto}.button__label{padding-top:12px;padding-bottom:12px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.button__label--from-inner-html{display:grid;grid-auto-flow:column;grid-template-columns:24px 1fr;gap:8px;place-items:center}.button:disabled{opacity:0.72;cursor:not-allowed}.content{padding-top:12px;padding-bottom:12px;margin-top:12px;margin-bottom:12px;border-radius:8px;color:#1c1917;font-size:1rem;font-weight:500;background-color:#fcfcfc;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.18), 0px 8px 8px rgba(0, 0, 0, 0.16);min-width:320px;max-width:480px;max-height:580px;display:none;flex-direction:column;position:fixed;z-index:10000}.content .filter{margin-bottom:16px;padding-left:8px;padding-right:8px;display:flex;position:relative}.content .filter__input{width:100%}.content .filter__clear{width:20px;height:20px;padding:0;border-width:0;display:flex;align-items:center;justify-content:center;position:absolute;right:14px;top:50%;transform:translateY(-50%);background-color:#1f2937;border-radius:50%}.content .filter__clear:focus{outline:0}.content .filter__clear--hidden{opacity:0;pointer-events:none}.content .filter__clear svg{fill:#fcfcfc;width:10px;height:10px}.content .options{margin-bottom:16px;padding-left:16px;padding-right:16px}.content .options__item{padding:0;color:#3b82f6;font-size:0.75rem;font-weight:500;font-family:inherit;background-color:transparent;border:transparent}.content .options__item:hover{text-decoration:underline}.content .options__item:first-child{margin-right:16px}.content .options__item:disabled{color:rgba(48, 113, 217, 0.72);cursor:not-allowed;text-decoration:none}.content .list{padding:0;margin:0;list-style:none;overflow-y:auto}.content .list__item{cursor:pointer}.content .list__item--disabled{opacity:0.72}.content .list__item--highlighted{background-color:#f3f4f6}.empty-page{display:flex;align-items:left;flex-direction:column;margin-left:16px;margin-bottom:12px}.empty-page>*{margin:0}.empty-page__header{font-size:1rem;font-weight:400;color:#374151}.label{display:flex;flex-direction:row;align-items:center;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}.label__item{display:inline-block;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label__item--from-inner-html{display:grid;grid-auto-flow:column;grid-template-columns:24px 1fr;gap:8px;place-items:center}.label__checkbox{margin-right:12px}.label__checkbox--hidden{display:none}`;
|
|
14
|
+
var o;
|
|
15
|
+
(function(t) {
|
|
16
|
+
t.ArrowDown = "ArrowDown", t.ArrowUp = "ArrowUp", t.Enter = "Enter", t.Esc = "Escape";
|
|
17
|
+
})(o || (o = {}));
|
|
18
|
+
const b = class {
|
|
19
|
+
constructor(t) {
|
|
20
|
+
m(this, t), this.change = h(this, "change", 3), this.cleared = h(this, "cleared", 7), this.isFilterSelectionDisabled = !1, this.isClearButtonVisible = !1, this.isMouseOverEventDisabled = !1, this.currentItemIndex = 0, this.selectedItemIndex = 0, this.highlightedItemClassName = "list__item--highlighted", this.open = !1, this.items = [], this.itemsOrder = void 0, this.label = void 0, this.filterable = !1, this.placeholder = "Type to filter...", this.multiple = !1, this.selected = [], this.noResultsMessage = "No results found", this.iconSrc = void 0, this.iconAlt = void 0, this.dropdownAlignment = "left", this.currentItems = [], this.disabled = !1;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Watcher for items property.
|
|
24
|
+
*/
|
|
25
|
+
onItemsChanged(t) {
|
|
26
|
+
if (t.some((e) => e.tagName.toLowerCase() !== "mi-dropdown-item"))
|
|
27
|
+
throw new Error("Items contains unknown element(s).");
|
|
28
|
+
if (Object.values(c).includes(this.itemsOrder) && (t = this.getSortedItems(t)), this.currentItems = [...t], this.filter(), !this.multiple) {
|
|
29
|
+
const e = this.currentItems.findIndex((i) => i.selected);
|
|
30
|
+
this.currentItemIndex = e > -1 ? e : 0, this.selectedItemIndex = this.currentItemIndex;
|
|
31
|
+
}
|
|
32
|
+
this.items.forEach((e, i) => {
|
|
33
|
+
e.dataset.index = i.toString(), e.dataset.excludefromall = `${e.excludefromall}`;
|
|
34
|
+
}), this.selectFirstMiDropdownItem();
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Watcher for currentItems property.
|
|
38
|
+
*/
|
|
39
|
+
onCurrentItemsChange() {
|
|
40
|
+
this.isFilterSelectionDisabled = this.currentItems.length === 0;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Keyboard event listener.
|
|
44
|
+
* When the Tab key is pressed, the focus is set to the filter input field (If present).
|
|
45
|
+
*
|
|
46
|
+
* @param {KeyboardEvent} event
|
|
47
|
+
* @returns {void}
|
|
48
|
+
*/
|
|
49
|
+
handleKeyDown(t) {
|
|
50
|
+
var e;
|
|
51
|
+
t.key === "Tab" && this.open && ((e = this.filterElement) === null || e === void 0 || e.focus(), t.preventDefault());
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
|
|
55
|
+
*
|
|
56
|
+
* @param {Event} event
|
|
57
|
+
*/
|
|
58
|
+
checkForClickOutside(t) {
|
|
59
|
+
this.hostElement.contains(t.target) || (this.open = !1);
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Mousemove event handler.
|
|
63
|
+
* When the mouse is moved the mouseover event handler is enabled.
|
|
64
|
+
*/
|
|
65
|
+
mouseMoveEventHandler() {
|
|
66
|
+
this.isMouseOverEventDisabled = !1;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Scroll event handler.
|
|
70
|
+
* The dropdown is closed when the scroll event is trigget outside the dropdown.
|
|
71
|
+
*/
|
|
72
|
+
scrollEventHandler(t) {
|
|
73
|
+
const e = t.target;
|
|
74
|
+
(!e || !this.hostElement.contains(e)) && (this.open = !1);
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Resize event handler.
|
|
78
|
+
* Recalculate the position of the dropdown when the window is resized.
|
|
79
|
+
*/
|
|
80
|
+
resizeEventHandler() {
|
|
81
|
+
this.calculateDropDownPosition();
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Lifecycle method called when the component is loaded in the DOM.
|
|
85
|
+
*/
|
|
86
|
+
componentDidLoad() {
|
|
87
|
+
this.createMiDropdownItemsFromDocument(), this.selectFirstMiDropdownItem(), this.enableKeyboardNavigationEvents();
|
|
88
|
+
const t = new IntersectionObserver((e) => {
|
|
89
|
+
e.forEach((i) => {
|
|
90
|
+
i.isIntersecting === !0 && this.filterElement.focus();
|
|
91
|
+
});
|
|
92
|
+
});
|
|
93
|
+
this.filterElement !== void 0 && (t.observe(this.filterElement), this.filterElement.addEventListener("keydown", (e) => {
|
|
94
|
+
(e.key === o.ArrowDown || e.key === o.ArrowUp) && e.preventDefault();
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Lifecycle method called when the component is updated.
|
|
99
|
+
*/
|
|
100
|
+
componentDidRender() {
|
|
101
|
+
this.calculateDropDownPosition(), this.multiple || this.highlightItem(this.currentItemIndex, !0);
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Gets all mi-dropdown-item elements for the mi-dropdown items property.
|
|
105
|
+
*/
|
|
106
|
+
createMiDropdownItemsFromDocument() {
|
|
107
|
+
const t = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll("mi-dropdown-item");
|
|
108
|
+
t.length > 0 && (this.items = Array.from(t));
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* Set the first mi-dropdown-item as the textual content of the button.
|
|
112
|
+
*/
|
|
113
|
+
selectFirstMiDropdownItem() {
|
|
114
|
+
var t;
|
|
115
|
+
if (!this.multiple) {
|
|
116
|
+
const e = (t = this.items) === null || t === void 0 ? void 0 : t.findIndex((i) => i.selected);
|
|
117
|
+
this.selected = [this.items[e > -1 ? e : 0]];
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Enables cycling through the items in the content window using arrow up/down keys.
|
|
122
|
+
*/
|
|
123
|
+
enableKeyboardNavigationEvents() {
|
|
124
|
+
this.hostElement.addEventListener("keydown", (t) => {
|
|
125
|
+
if (this.open === !1 && t.key === o.ArrowDown) {
|
|
126
|
+
this.isMouseOverEventDisabled = !0, this.toggleContentWindow(), t.preventDefault();
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (this.open === !0 && !this.multiple)
|
|
130
|
+
switch (t.key) {
|
|
131
|
+
case o.ArrowDown:
|
|
132
|
+
this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
|
|
133
|
+
break;
|
|
134
|
+
case o.ArrowUp:
|
|
135
|
+
this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + this.currentItems.length - 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
|
|
136
|
+
break;
|
|
137
|
+
case o.Enter:
|
|
138
|
+
if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement)
|
|
139
|
+
return;
|
|
140
|
+
this.currentItems[this.currentItemIndex] !== void 0 && this.onSelect(this.currentItems[this.currentItemIndex]), t.preventDefault();
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
t.key === o.Esc && (this.multiple || (this.currentItemIndex = this.selectedItemIndex, this.highlightItem(this.currentItemIndex)), this.toggleContentWindow(), this.clearFilter());
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Updates the currently highlighted item in the markup.
|
|
148
|
+
*
|
|
149
|
+
* @param {number} itemIndex
|
|
150
|
+
*/
|
|
151
|
+
highlightItem(t, e = !1) {
|
|
152
|
+
var i, n;
|
|
153
|
+
const l = this.hostElement.shadowRoot.querySelectorAll(".list__item");
|
|
154
|
+
l.forEach((r) => {
|
|
155
|
+
r.classList.remove(this.highlightedItemClassName);
|
|
156
|
+
}), (i = l[t]) === null || i === void 0 || i.classList.add(this.highlightedItemClassName), e && ((n = l[t]) === null || n === void 0 || n.scrollIntoView({ block: "nearest", inline: "nearest" }));
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Get sorted items.
|
|
160
|
+
* The sorting order is defined by the itemsOrder attribute.
|
|
161
|
+
*
|
|
162
|
+
* @param {HTMLMiDropdownItemElement[]} items
|
|
163
|
+
* @returns {HTMLMiDropdownItemElement[]}
|
|
164
|
+
*/
|
|
165
|
+
getSortedItems(t) {
|
|
166
|
+
return this.itemsOrder === c.Asc ? t.sort((e, i) => (e.text || e.innerText).trimStart().toLowerCase().localeCompare((i.text || i.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })) : t.sort((e, i) => (i.text || i.innerText).trimStart().toLowerCase().localeCompare((e.text || e.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })), t;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Update and emit list of selected items.
|
|
170
|
+
*/
|
|
171
|
+
onChangedHandler() {
|
|
172
|
+
this.selected = [...this.items.filter((t) => t.selected)], this.change.emit(this.selected);
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Toggle visibility of content window.
|
|
176
|
+
*/
|
|
177
|
+
toggleContentWindow() {
|
|
178
|
+
this.open = !this.open;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Check all checkboxes.
|
|
182
|
+
*/
|
|
183
|
+
selectAll() {
|
|
184
|
+
const t = Array.from(this.currentItems);
|
|
185
|
+
for (const e of t)
|
|
186
|
+
e.selected = !(`${e.dataset.excludefromall}` == "true" || e.disabled);
|
|
187
|
+
this.onChangedHandler();
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Uncheck all checkboxes.
|
|
191
|
+
*/
|
|
192
|
+
selectNone() {
|
|
193
|
+
const t = Array.from(this.currentItems);
|
|
194
|
+
for (const e of t)
|
|
195
|
+
e.selected = !1;
|
|
196
|
+
this.onChangedHandler();
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Select or toggle selection of item.
|
|
200
|
+
*
|
|
201
|
+
* @param {HTMLMiDropdownItemElement} item
|
|
202
|
+
*/
|
|
203
|
+
onSelect(t) {
|
|
204
|
+
this.multiple || (this.open = !1, Array.from(this.items).forEach((i) => {
|
|
205
|
+
i.selected = !1;
|
|
206
|
+
}), this.clearFilter()), t.selected = !t.selected, this.currentItemIndex = Number(t.dataset.index), this.selectedItemIndex = this.currentItemIndex, this.onChangedHandler();
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* Highlights the item that the cursor is hovering in the content window.
|
|
210
|
+
*
|
|
211
|
+
* @param {number} filteredItemsIndex
|
|
212
|
+
*/
|
|
213
|
+
onMouseOver(t) {
|
|
214
|
+
!this.isMouseOverEventDisabled && !this.multiple && (this.highlightItem(t), this.currentItemIndex = t);
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Filter items based on the input query.
|
|
218
|
+
*/
|
|
219
|
+
filter() {
|
|
220
|
+
if (this.filterElement) {
|
|
221
|
+
const t = this.filterElement.value, e = this.items.map((a) => a.text || a.innerText), i = this.currentItems.length;
|
|
222
|
+
if (t === "") {
|
|
223
|
+
this.currentItemIndex = this.selectedItemIndex, this.isClearButtonVisible = !1, this.currentItems = [...this.items];
|
|
224
|
+
return;
|
|
225
|
+
} else
|
|
226
|
+
this.isClearButtonVisible = !0;
|
|
227
|
+
const n = {
|
|
228
|
+
limit: 50,
|
|
229
|
+
allowTypo: !1,
|
|
230
|
+
threshold: -1e4
|
|
231
|
+
}, r = f.go(t, e, n).map((a) => this.items.find((d) => (d.text || d.innerText) === a.target));
|
|
232
|
+
this.currentItems = r, i !== this.currentItems.length && (this.currentItemIndex = 0);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
/**
|
|
236
|
+
* Clear filter.
|
|
237
|
+
*/
|
|
238
|
+
clearFilter() {
|
|
239
|
+
this.filterElement && (this.filterElement.value = "", this.filterElement.focus(), this.currentItems = this.items, this.cleared.emit()), this.isClearButtonVisible = !1;
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* Render the dropdown component.
|
|
243
|
+
*
|
|
244
|
+
* @returns {JSX.Element}
|
|
245
|
+
*/
|
|
246
|
+
render() {
|
|
247
|
+
const t = this.filterable ? this.renderFiltering() : null, e = this.multiple ? this.renderMultipleOptions() : null, i = this.iconSrc ? this.renderLeftSideIcon() : null, n = s("ul", { class: "list" }, this.currentItems.map((l, r) => this.renderListItem(l, r, !!e)));
|
|
248
|
+
return s(p, { class: { open: this.open } }, s("button", { part: "button", class: "button", disabled: this.disabled || this.items.length === 0, onClick: () => this.toggleContentWindow() }, i, this.renderButtonLabel(), s("svg", { class: "arrow", part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, s("path", { d: "M9.37165 9.58706C9.17303 9.80775 8.82697 9.80775 8.62835 9.58706L0.751035 0.834484C0.46145 0.512722 0.689796 7.73699e-08 1.12268 1.25924e-07L16.8773 1.89302e-06C17.3102 1.94157e-06 17.5386 0.512723 17.249 0.834484L9.37165 9.58706Z" }))), s("section", { ref: (l) => this.listElement = l, part: "dropdown-container", class: "content", "tab-index": "1" }, t, e, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : n));
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* Helper function to render markup when no items are available to be displayed in the content window.
|
|
252
|
+
*
|
|
253
|
+
* @returns {JSX.Element}
|
|
254
|
+
*/
|
|
255
|
+
renderNoResultsTemplate() {
|
|
256
|
+
return s("div", { class: "empty-page" }, s("p", { class: "empty-page__header" }, this.noResultsMessage));
|
|
257
|
+
}
|
|
258
|
+
/**
|
|
259
|
+
* Helper function to render the button label.
|
|
260
|
+
*
|
|
261
|
+
* @returns {JSX.Element}
|
|
262
|
+
*/
|
|
263
|
+
renderButtonLabel() {
|
|
264
|
+
var t, e, i, n, l;
|
|
265
|
+
const r = (t = this.label) !== null && t !== void 0 ? t : (i = (e = this.selected) === null || e === void 0 ? void 0 : e[0]) === null || i === void 0 ? void 0 : i.text;
|
|
266
|
+
return r > "" ? s("div", { part: "button-label", class: "button__label" }, r) : !((l = (n = this.selected) === null || n === void 0 ? void 0 : n[0]) === null || l === void 0) && l.innerHTML ? s("div", { part: "button-label", class: "button__label button__label--from-inner-html", innerHTML: this.selected[0].innerHTML }) : s("div", { part: "button-label", class: "button__label" });
|
|
267
|
+
}
|
|
268
|
+
/**
|
|
269
|
+
* Helper function to render an icon when an image source is provided.
|
|
270
|
+
*
|
|
271
|
+
* @returns {JSX.Element}
|
|
272
|
+
*/
|
|
273
|
+
renderLeftSideIcon() {
|
|
274
|
+
return s("img", { part: "button-icon", class: "button__left-icon", src: this.iconSrc, alt: this.iconAlt ? this.iconAlt : "" });
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* Helper function for rendering the filtering UI.
|
|
278
|
+
*
|
|
279
|
+
* @returns {JSX.Element}
|
|
280
|
+
*/
|
|
281
|
+
renderFiltering() {
|
|
282
|
+
return s("div", { class: "filter" }, s("input", { type: "text", class: "mi-input filter__input", placeholder: this.placeholder, ref: (t) => this.filterElement = t, onInput: () => {
|
|
283
|
+
this.filter();
|
|
284
|
+
}, tabIndex: this.open ? 0 : -1 }), s("button", { ref: (t) => this.clearButtonElement = t, tabindex: this.isClearButtonVisible ? 0 : -1, type: "button", onClick: () => this.clearFilter(), class: `filter__clear ${this.isClearButtonVisible === !1 ? "filter__clear--hidden" : ""}`, "aria-label": "Clear" }, s("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, s("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" }))));
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Helper function for rendering the multi select options.
|
|
288
|
+
*
|
|
289
|
+
* @returns {JSX.Element}
|
|
290
|
+
*/
|
|
291
|
+
renderMultipleOptions() {
|
|
292
|
+
return s("div", { class: "options" }, s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectAll() }, "Select all"), s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectNone() }, "Select none"));
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Helper function for rendering list item.
|
|
296
|
+
*
|
|
297
|
+
* @param {HTMLMiDropdownItemElement} item
|
|
298
|
+
* @param {number} index
|
|
299
|
+
* @param {boolean} showCheckBox
|
|
300
|
+
* @returns {JSX.Element}
|
|
301
|
+
*/
|
|
302
|
+
renderListItem(t, e, i) {
|
|
303
|
+
let n;
|
|
304
|
+
const l = t.getAttribute("title") || t.text || t.innerText;
|
|
305
|
+
return t.innerText.length > 0 ? n = s("div", { class: "label__item label__item--from-inner-html", innerHTML: t.innerHTML }) : n = s("div", { class: "label__item", innerHTML: t.text }), s("li", { class: { list__item: !0, "list__item--disabled": t.disabled }, title: l, onMouseOver: () => {
|
|
306
|
+
this.onMouseOver(e);
|
|
307
|
+
} }, s("label", { class: "mi-label label", tabindex: "-1" }, s("input", { class: { label__checkbox: !0, "label__checkbox--hidden": !i, "mi-input": !0 }, type: "checkbox", value: e, checked: t.selected, disabled: t.disabled, "data-excludefromall": t.excludefromall, onChange: () => this.onSelect(t) }), n));
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Function for calculating the position of the dropdown list element.
|
|
311
|
+
*/
|
|
312
|
+
calculateDropDownPosition() {
|
|
313
|
+
this.listElement.style.bottom = null, this.listElement.style.left = null, this.listElement.style.right = null, this.listElement.style.top = null, this.listElement.style.maxHeight = null, this.listElement.style.minWidth = null;
|
|
314
|
+
const { clientWidth: t, clientHeight: e } = document.documentElement, i = this.hostElement.getBoundingClientRect(), n = this.listElement.getBoundingClientRect(), l = e - i.bottom, r = i.top, a = 580, d = 12;
|
|
315
|
+
t <= n.width || i.right - n.width < 0 && n.right > t ? (this.listElement.style.right = `${d}px`, this.listElement.style.left = `${d}px`, this.listElement.style.minWidth = "unset") : n.right > t || this.dropdownAlignment === "right" ? (this.listElement.style.left = "unset", this.listElement.style.right = `${t - i.right}px`) : (this.listElement.style.left = `${i.left}px`, this.listElement.style.right = "unset"), r > l ? (this.listElement.style.maxHeight = `${Math.min(r, a)}px`, this.listElement.style.top = "unset", this.listElement.style.bottom = `${e - i.top}px`) : (this.listElement.style.top = `${i.bottom}px`, this.listElement.style.bottom = "unset", this.listElement.style.maxHeight = `${Math.min(l - d * 2, a)}px`);
|
|
316
|
+
}
|
|
317
|
+
get hostElement() {
|
|
318
|
+
return u(this);
|
|
319
|
+
}
|
|
320
|
+
static get watchers() {
|
|
321
|
+
return {
|
|
322
|
+
items: ["onItemsChanged"],
|
|
323
|
+
currentItems: ["onCurrentItemsChange"]
|
|
324
|
+
};
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
b.style = g;
|
|
328
|
+
export {
|
|
329
|
+
b as mi_dropdown
|
|
330
|
+
};
|
|
331
|
+
//# sourceMappingURL=mi-dropdown.entry-8d4d8ee3.mjs.map
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { r as g, h as N, H as T, g as l } from "./reactcomponent-fed5da4c.mjs";
|
|
2
|
+
import "react";
|
|
3
|
+
import "react-dom";
|
|
4
|
+
(function() {
|
|
5
|
+
try {
|
|
6
|
+
var M = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, e = new M.Error().stack;
|
|
7
|
+
e && (M._sentryDebugIds = M._sentryDebugIds || {}, M._sentryDebugIds[e] = "adfa9dba-ac6c-4c30-b77e-02fc71305060", M._sentryDebugIdIdentifier = "sentry-dbid-adfa9dba-ac6c-4c30-b77e-02fc71305060");
|
|
8
|
+
} catch {
|
|
9
|
+
}
|
|
10
|
+
})();
|
|
11
|
+
const s = '.mi-floor-selector{width:-moz-min-content;width:min-content;display:flex;align-items:flex-start;position:relative;margin:10px;overflow:hidden;animation-duration:0.15s;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;border-radius:56px;border-width:1px;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";font-size:0.875rem;border-color:#e5e7eb;border-style:solid;background-color:#fcfcfc}.mi-floor-selector--hidden{display:none}.mi-floor-selector__button{position:absolute;z-index:4;top:4px;right:4px;left:4px;background-position:center;background-repeat:no-repeat;border-width:1px;background-color:#f9fafb;border-color:#e5e7eb;border-style:solid;border-radius:50%;width:40px;height:40px}.mi-floor-selector__button:hover{background-color:#f3f4f6}.mi-floor-selector__button--open{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMTUwNDUgNi4wODk5OEM3LjEzODUgNi4wNzg3NiA3LjEyODk3IDYuMDY1MjEgNy4xMjI0NSA2LjA1MDE2QzcuMTE1OTQgNi4wMzUxMSA3LjExMjU3IDYuMDE4ODggNy4xMTI1NyA2LjAwMjQ4QzcuMTEyNTcgNS45ODYwOCA3LjExNTk0IDUuOTY5ODYgNy4xMjI0NSA1Ljk1NDgxQzcuMTI4OTcgNS45Mzk3NiA3LjEzODUgNS45MjYyIDcuMTUwNDUgNS45MTQ5OEwxMS43ODA1IDEuMjc5OThDMTEuODUwNiAxLjIxMDY5IDExLjkwNjMgMS4xMjgxNiAxMS45NDQzIDEuMDM3MThDMTEuOTgyMyAwLjk0NjIwMSAxMi4wMDE5IDAuODQ4NTgyIDEyLjAwMTkgMC43NDk5ODJDMTIuMDAxOSAwLjY1MTM4MiAxMS45ODIzIDAuNTUzNzYzIDExLjk0NDMgMC40NjI3ODRDMTEuOTA2MyAwLjM3MTgwNSAxMS44NTA2IDAuMjg5Mjc2IDExLjc4MDUgMC4yMTk5ODJDMTEuNjM5MiAwLjA4MDc0MTkgMTEuNDQ4OCAwLjAwMjY4NTU1IDExLjI1MDUgMC4wMDI2ODU1NUMxMS4wNTIxIDAuMDAyNjg1NTUgMTAuODYxNyAwLjA4MDc0MTkgMTAuNzIwNSAwLjIxOTk4Mkw2LjA5MDQ1IDQuODQ5OThDNi4wNzg3OSA0Ljg2MjA4IDYuMDY0ODEgNC44NzE3IDYuMDQ5MzUgNC44NzgyN0M2LjAzMzg5IDQuODg0ODUgNi4wMTcyNiA0Ljg4ODI0IDYuMDAwNDUgNC44ODgyNEM1Ljk4MzY1IDQuODg4MjQgNS45NjcwMiA0Ljg4NDg1IDUuOTUxNTYgNC44NzgyN0M1LjkzNjA5IDQuODcxNyA1LjkyMjExIDQuODYyMDggNS45MTA0NSA0Ljg0OTk4TDEuMjgwNDUgMC4yMTk5ODJDMS4xMzkxOSAwLjA4MDc0MTkgMC45NDg4MDUgMC4wMDI2ODU1NSAwLjc1MDQ1NCAwLjAwMjY4NTU1QzAuNTUyMTAyIDAuMDAyNjg1NTUgMC4zNjE3MTggMC4wODA3NDE5IDAuMjIwNDU0IDAuMjE5OTgyQzAuMTUwMzA5IDAuMjg5Mjc2IDAuMDk0NjE2OSAwLjM3MTgwNSAwLjA1NjYwNjQgMC40NjI3ODRDMC4wMTg1OTYgMC41NTM3NjMgLTAuMDAwOTc2NTYyIDAuNjUxMzgyIC0wLjAwMDk3NjU2MiAwLjc0OTk4MkMtMC4wMDA5NzY1NjIgMC44NDg1ODIgMC4wMTg1OTYgMC45NDYyMDEgMC4wNTY2MDY0IDEuMDM3MThDMC4wOTQ2MTY5IDEuMTI4MTYgMC4xNTAzMDkgMS4yMTA2OSAwLjIyMDQ1NCAxLjI3OTk4TDQuODUwNDUgNS45MTQ5OEM0Ljg2MjQxIDUuOTI2MiA0Ljg3MTk0IDUuOTM5NzYgNC44Nzg0NiA1Ljk1NDgxQzQuODg0OTcgNS45Njk4NiA0Ljg4ODMzIDUuOTg2MDggNC44ODgzMyA2LjAwMjQ4QzQuODg4MzMgNi4wMTg4OCA0Ljg4NDk3IDYuMDM1MTEgNC44Nzg0NiA2LjA1MDE2QzQuODcxOTQgNi4wNjUyMSA0Ljg2MjQxIDYuMDc4NzYgNC44NTA0NSA2LjA4OTk4TDAuMjIwNDU0IDEwLjcyQzAuMTUwMzA5IDEwLjc4OTMgMC4wOTQ2MTY5IDEwLjg3MTggMC4wNTY2MDY0IDEwLjk2MjhDMC4wMTg1OTYgMTEuMDUzOCAtMC4wMDA5NzY1NjIgMTEuMTUxNCAtMC4wMDA5NzY1NjIgMTEuMjVDLTAuMDAwOTc2NTYyIDExLjM0ODYgMC4wMTg1OTYgMTEuNDQ2MiAwLjA1NjYwNjQgMTEuNTM3MkMwLjA5NDYxNjkgMTEuNjI4MiAwLjE1MDMwOSAxMS43MTA3IDAuMjIwNDU0IDExLjc4QzAuMzYxNzE4IDExLjkxOTIgMC41NTIxMDIgMTEuOTk3MyAwLjc1MDQ1NCAxMS45OTczQzAuOTQ4ODA1IDExLjk5NzMgMS4xMzkxOSAxMS45MTkyIDEuMjgwNDUgMTEuNzhMNS45MTA0NSA3LjE0OTk4QzUuOTIyMTEgNy4xMzc4OCA1LjkzNjA5IDcuMTI4MjYgNS45NTE1NiA3LjEyMTY5QzUuOTY3MDIgNy4xMTUxMiA1Ljk4MzY1IDcuMTExNzMgNi4wMDA0NSA3LjExMTczQzYuMDE3MjYgNy4xMTE3MyA2LjAzMzg5IDcuMTE1MTIgNi4wNDkzNSA3LjEyMTY5QzYuMDY0ODEgNy4xMjgyNiA2LjA3ODc5IDcuMTM3ODggNi4wOTA0NSA3LjE0OTk4TDEwLjcyMDUgMTEuNzhDMTAuODYxNyAxMS45MTkyIDExLjA1MjEgMTEuOTk3MyAxMS4yNTA1IDExLjk5NzNDMTEuNDQ4OCAxMS45OTczIDExLjYzOTIgMTEuOTE5MiAxMS43ODA1IDExLjc4QzExLjg1MDYgMTEuNzEwNyAxMS45MDYzIDExLjYyODIgMTEuOTQ0MyAxMS41MzcyQzExLjk4MjMgMTEuNDQ2MiAxMi4wMDE5IDExLjM0ODYgMTIuMDAxOSAxMS4yNUMxMi4wMDE5IDExLjE1MTQgMTEuOTgyMyAxMS4wNTM4IDExLjk0NDMgMTAuOTYyOEMxMS45MDYzIDEwLjg3MTggMTEuODUwNiAxMC43ODkzIDExLjc4MDUgMTAuNzJMNy4xNTA0NSA2LjA4OTk4WiIgZmlsbD0iIzcwNzA3MCIvPgo8L3N2Zz4K)}.mi-floor-selector__button--open+.mi-floor-selector__list{max-height:300px;overflow:auto;flex-wrap:unset}.mi-floor-selector__button--closed{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuOTY3Mzc0IDYuMTY2NjRMOS4wMDA3MSA5LjY1ODMxQzkuMzE2MTIgOS43OTU5NiA5LjY1NjU2IDkuODY3MDIgMTAuMDAwNyA5Ljg2NzAyQzEwLjM0NDkgOS44NjcwMiAxMC42ODUzIDkuNzk1OTYgMTEuMDAwNyA5LjY1ODMxTDE5LjA0MjQgNi4xNjY2NEMxOS4yNjczIDYuMDY2MTcgMTkuNDU4IDUuOTAyMjkgMTkuNTkxMiA1LjY5NTA4QzE5LjcyNDUgNS40ODc4NiAxOS43OTQzIDUuMjQ2MyAxOS43OTI0IDQuOTk5OTdDMTkuNzkzMSA0Ljc1NjAxIDE5LjcyMTQgNC41MTczMiAxOS41ODY0IDQuMzE0MUMxOS40NTE0IDQuMTEwODggMTkuMjU5MiAzLjk1MjI2IDE5LjAzNCAzLjg1ODMxTDExLjAwMDcgMC4zNzQ5NzJDMTAuNjg1MyAwLjIzNzMxNCAxMC4zNDQ5IDAuMTY2MjYgMTAuMDAwNyAwLjE2NjI2QzkuNjU2NTYgMC4xNjYyNiA5LjMxNjEyIDAuMjM3MzE0IDkuMDAwNzEgMC4zNzQ5NzJMMC45NjczNzQgMy44NzQ5N0MwLjc0NDgzNiAzLjk2NzgzIDAuNTU0Mzk4IDQuMTIzODggMC40MTk2MTggNC4zMjM4M0MwLjI4NDgzNyA0LjUyMzc4IDAuMjExNjI2IDQuNzU4ODUgMC4yMDkwNDEgNC45OTk5N0MwLjIwNjY5OCA1LjI0NzQ2IDAuMjc3MzkxIDUuNDkwMTUgMC40MTIyNzYgNS42OTc2NkMwLjU0NzE2MSA1LjkwNTE4IDAuNzQwMjQ3IDYuMDY4MzEgMC45NjczNzQgNi4xNjY2NFoiIGZpbGw9IiM3MDcwNzAiLz4KPHBhdGggZD0iTTE5LjAzMzYgOC44NzQ5MUwxOC4wMDAzIDguNDI0OTFDMTcuODk5MiA4LjM3NDE5IDE3Ljc4ODggOC4zNDQ2IDE3LjY3NTkgOC4zMzc5NEMxNy41NjI5IDguMzMxMjcgMTcuNDQ5OCA4LjM0NzY3IDE3LjM0MzQgOC4zODYxNEMxNy4yMzcgOC40MjQ2IDE3LjEzOTYgOC40ODQzMyAxNy4wNTcgOC41NjE2N0MxNi45NzQ1IDguNjM5MDIgMTYuOTA4NSA4LjczMjM3IDE2Ljg2MzIgOC44MzYwM0MxNi44MTc5IDguOTM5NjkgMTYuNzk0MSA5LjA1MTQ5IDE2Ljc5MzQgOS4xNjQ2MkMxNi43OTI3IDkuMjc3NzUgMTYuODE1MSA5LjM4OTgzIDE2Ljg1OTEgOS40OTQwNUMxNi45MDMxIDkuNTk4MjcgMTYuOTY3OSA5LjY5MjQzIDE3LjA0OTUgOS43NzA4MUMxNy4xMzExIDkuODQ5MTggMTcuMjI3NyA5LjkxMDEyIDE3LjMzMzYgOS45NDk5MUwxNy41MDAzIDkuOTk5OTFMMTAuMzMzNiAxMy4xMzMyQzEwLjIyODUgMTMuMTc5MSAxMC4xMTUgMTMuMjAyOCAxMC4wMDAzIDEzLjIwMjhDOS44ODU2IDEzLjIwMjggOS43NzIxMiAxMy4xNzkxIDkuNjY2OTggMTMuMTMzMkwyLjUwMDMxIDkuOTk5OTFMMi42NTg2NSA5LjkzMzI0QzIuNzY0NTUgOS44OTM0NSAyLjg2MTI0IDkuODMyNTEgMi45NDI4MyA5Ljc1NDE0QzMuMDI0NDIgOS42NzU3NyAzLjA4OTE5IDkuNTgxNiAzLjEzMzIxIDkuNDc3MzlDMy4xNzcyMiA5LjM3MzE3IDMuMTk5NTYgOS4yNjEwOCAzLjE5ODg1IDkuMTQ3OTVDMy4xOTgxNSA5LjAzNDgyIDMuMTc0NDEgOC45MjMwMiAzLjEyOTEgOC44MTkzNkMzLjA4Mzc4IDguNzE1NyAzLjAxNzgzIDguNjIyMzUgMi45MzUyNyA4LjU0NTAxQzIuODUyNzEgOC40Njc2NiAyLjc1NTI3IDguNDA3OTQgMi42NDg4NyA4LjM2OTQ3QzIuNTQyNDggOC4zMzEwMSAyLjQyOTM3IDguMzE0NjEgMi4zMTY0NCA4LjMyMTI3QzIuMjAzNSA4LjMyNzk0IDIuMDkzMTEgOC4zNTc1MyAxLjk5MTk4IDguNDA4MjRMMC45NTg2NDcgOC44NTgyNEMwLjczMjU2MSA4Ljk1MjYyIDAuNTM5NDQ5IDkuMTExNzggMC40MDM2MTkgOS4zMTU2N0MwLjI2Nzc4OSA5LjUxOTU2IDAuMTk1MzEzIDkuNzU5MDggMC4xOTUzMTIgMTAuMDA0MUMwLjE5NTMxMyAxMC4yNDkxIDAuMjY3Nzg5IDEwLjQ4ODYgMC40MDM2MTkgMTAuNjkyNUMwLjUzOTQ0OSAxMC44OTY0IDAuNzMyNTYxIDExLjA1NTUgMC45NTg2NDcgMTEuMTQ5OUw4Ljk5MTk4IDE0LjY0MTZDOS4zMDczOSAxNC43NzkyIDkuNjQ3ODMgMTQuODUwMyA5Ljk5MTk4IDE0Ljg1MDNDMTAuMzM2MSAxNC44NTAzIDEwLjY3NjYgMTQuNzc5MiAxMC45OTIgMTQuNjQxNkwxOS4wMjUzIDExLjE0OTlDMTkuMjUxNCAxMS4wNTQgMTkuNDQ0NCAxMC44OTM5IDE5LjU4MDcgMTAuNjg5NkMxOS43MTY5IDEwLjQ4NTIgMTkuNzkwNCAxMC4yNDU1IDE5Ljc5MiA5Ljk5OTkxQzE5Ljc4OTQgOS43NTg3OSAxOS43MTYyIDkuNTIzNzEgMTkuNTgxNCA5LjMyMzc3QzE5LjQ0NjYgOS4xMjM4MiAxOS4yNTYyIDguOTY3NzYgMTkuMDMzNiA4Ljg3NDkxWiIgZmlsbD0iIzcwNzA3MCIvPgo8cGF0aCBkPSJNMTkuMDM0IDEzLjgzMzRMMTguMDAwNyAxMy4zODM0QzE3LjkgMTMuMzM5MyAxNy43OTE3IDEzLjMxNTUgMTcuNjgxOCAxMy4zMTM0QzE3LjU3MTkgMTMuMzExMyAxNy40NjI3IDEzLjMzMSAxNy4zNjA1IDEzLjM3MTJDMTcuMjU4MyAxMy40MTE1IDE3LjE2NSAxMy40NzE2IDE3LjA4NjEgMTMuNTQ4MUMxNy4wMDcyIDEzLjYyNDUgMTYuOTQ0MSAxMy43MTU4IDE2LjkwMDcgMTMuODE2N0MxNi44MTQxIDE0LjAxOTEgMTYuODExMSAxNC4yNDc0IDE2Ljg5MjMgMTQuNDUxOUMxNi45NzM1IDE0LjY1NjQgMTcuMTMyMyAxNC44MjA1IDE3LjMzNCAxNC45MDg0TDE3LjUwMDcgMTUuMDAwMUwxMC4zMzQgMTguMDkxN0MxMC4yMjg5IDE4LjEzNzYgMTAuMTE1NCAxOC4xNjEzIDEwLjAwMDcgMTguMTYxM0M5Ljg4NTk0IDE4LjE2MTMgOS43NzI0NiAxOC4xMzc2IDkuNjY3MzIgMTguMDkxN0wyLjUwMDY2IDE1LjAwMDFMMi42NTg5OSAxNC45MjUxQzIuODYwNzEgMTQuODM3MiAzLjAxOTQ5IDE0LjY3MzEgMy4xMDA2NyAxNC40Njg2QzMuMTgxODUgMTQuMjY0IDMuMTc4ODUgMTQuMDM1NyAzLjA5MjMyIDEzLjgzMzRDMy4wNDg4MyAxMy43MzI1IDIuOTg1ODEgMTMuNjQxMiAyLjkwNjg5IDEzLjU2NDdDMi44Mjc5NyAxMy40ODgzIDIuNzM0NzEgMTMuNDI4MiAyLjYzMjQ4IDEzLjM4NzlDMi41MzAyNCAxMy4zNDc2IDIuNDIxMDUgMTMuMzI4IDIuMzExMTggMTMuMzMwMUMyLjIwMTMyIDEzLjMzMjEgMi4wOTI5NSAxMy4zNTU5IDEuOTkyMzIgMTMuNDAwMUwwLjk1ODk4OSAxMy44NTAxQzAuNzM2MDMzIDEzLjk0ODUgMC41NDY0NyAxNC4xMDk2IDAuNDEzMzI5IDE0LjMxMzhDMC4yODAxODggMTQuNTE3OSAwLjIwOTIgMTQuNzU2MyAwLjIwODk4OSAxNS4wMDAxQzAuMjA4MzAzIDE1LjI0NCAwLjI3OTk4NSAxNS40ODI3IDAuNDE0OTcgMTUuNjg1OUMwLjU0OTk1NSAxNS44ODkyIDAuNzQyMTc3IDE2LjA0NzggMC45NjczMjMgMTYuMTQxN0w5LjAwMDY2IDE5LjY0MTdDOS4zMTYwNyAxOS43Nzk0IDkuNjU2NTEgMTkuODUwNSAxMC4wMDA3IDE5Ljg1MDVDMTAuMzQ0OCAxOS44NTA1IDEwLjY4NTIgMTkuNzc5NCAxMS4wMDA3IDE5LjY0MTdMMTkuMDM0IDE2LjE0MTdDMTkuMjU5MSAxNi4wNDc4IDE5LjQ1MTQgMTUuODg5MiAxOS41ODYzIDE1LjY4NTlDMTkuNzIxMyAxNS40ODI3IDE5Ljc5MyAxNS4yNDQgMTkuNzkyMyAxNS4wMDAxQzE5Ljc5NDcgMTQuNzUyNiAxOS43MjQgMTQuNTA5OSAxOS41ODkxIDE0LjMwMjRDMTkuNDU0MiAxNC4wOTQ5IDE5LjI2MTEgMTMuOTMxNyAxOS4wMzQgMTMuODMzNFoiIGZpbGw9IiM3MDcwNzAiLz4KPC9zdmc+Cg==)}.mi-floor-selector__button span{position:none}.mi-floor-selector__list{box-sizing:unset;display:flex;flex-direction:column;gap:4px;overflow-y:hidden;transition:max-height 0.25s;scroll-behavior:smooth;z-index:0;border-radius:9999px;padding:4px;padding-top:48px;max-height:40px}.mi-floor-selector__list::before,.mi-floor-selector__list::after{content:"";height:100%;position:absolute;pointer-events:none;z-index:3;left:-1px;right:-1px;transition:opacity 0.1s;opacity:0}.mi-floor-selector__list--fade-top::before{opacity:1;top:-1px;background:linear-gradient(180deg, white 39px, rgba(255, 255, 255, 0) 86px)}.mi-floor-selector__list--fade-bottom::after{opacity:1;bottom:-1px;background:linear-gradient(0deg, white 4px, rgba(255, 255, 255, 0) 40px)}.mi-floor-selector__list::-webkit-scrollbar{width:4px}.mi-floor-selector__list::-webkit-scrollbar-track{background:none}.mi-floor-selector__list::-webkit-scrollbar-thumb{background:#8D98AA;border-radius:5px}.mi-floor-selector__floor{position:relative;order:1;flex-shrink:0;margin-top:-1px;z-index:0;float:none;text-align:center;background:none;transition:translateY 0.25s;transform:translateY(0px);color:#666666;border-radius:50%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border-style:none;width:40px;height:40px}.mi-floor-selector__floor:hover{z-index:2;background-color:#d1d5db}.mi-floor-selector__floor--active{z-index:2;transform:translateY(0px);color:#fcfcfc}.mi-floor-selector__floor-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:4px;padding-right:4px}', j = class {
|
|
12
|
+
constructor(M) {
|
|
13
|
+
g(this, M), this.maxListHeight = 300, this.mapsindoors = void 0, this.primaryColor = "#005655", this.floors = new Array(), this.currentFloor = void 0, this.floorSelectorClosed = !0, this.fadeFloorSelectorOnTop = !1, this.fadeFloorSelectorOnBottom = !1;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Scrolling the floorList element to the selected floor.
|
|
17
|
+
*/
|
|
18
|
+
scrollToSelectedFloor() {
|
|
19
|
+
const M = this.floorSelectorElement.clientHeight, e = this.floorListElement.scrollHeight, o = this.currentFloorElement.offsetTop, i = this.currentFloorElement.offsetHeight;
|
|
20
|
+
let t;
|
|
21
|
+
e > M ? (t = o - M / 2 + i / 2, t = Math.max(0, t), t = Math.min(t, e - M)) : t = 0, this.floorListElement.scrollTop = t;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Applies a 'transform: translateY()' animation to the provided element.
|
|
25
|
+
*
|
|
26
|
+
* @param {HTMLElement} element
|
|
27
|
+
* @param {number} distance
|
|
28
|
+
* @param {number} duration
|
|
29
|
+
*/
|
|
30
|
+
animateTranslateY(M, e, o) {
|
|
31
|
+
const i = [{ transform: `translateY(${e}px)` }];
|
|
32
|
+
M.animate(i, { duration: o, fill: "forwards" });
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Calls the animation for the needed elements with the calculated animation values.
|
|
36
|
+
*/
|
|
37
|
+
animateFloorSelector() {
|
|
38
|
+
const M = this.el.querySelectorAll(".mi-floor-selector__floor"), e = [];
|
|
39
|
+
for (let o = 0; o < M.length && M[o].getAttribute("data-floor") !== this.currentFloor; o++)
|
|
40
|
+
e.push(M[o]);
|
|
41
|
+
if (this.floorSelectorClosed) {
|
|
42
|
+
const o = this.floorListElement.scrollTop, i = parseInt(window.getComputedStyle(this.floorListElement).getPropertyValue("padding-top")), r = -(this.currentFloorElement.offsetTop - this.floorListElement.offsetTop - o - i);
|
|
43
|
+
this.animateTranslateY(this.currentFloorElement, r, 250), this.floorListElement.scrollTop > 0 ? M.forEach((D) => {
|
|
44
|
+
D.getAttribute("data-floor") !== this.currentFloor && (e.indexOf(D) > -1 ? this.animateTranslateY(D, D.offsetTop + this.floorListElement.scrollTop, 250) : this.animateTranslateY(D, this.floorListElement.scrollTop, 250));
|
|
45
|
+
}) : e.forEach((D) => {
|
|
46
|
+
this.animateTranslateY(D, D.offsetTop, 250);
|
|
47
|
+
});
|
|
48
|
+
} else
|
|
49
|
+
this.animateTranslateY(this.currentFloorElement, 0, 250), M.forEach((o) => {
|
|
50
|
+
o.getAttribute("data-floor") !== this.currentFloor && this.animateTranslateY(o, 0, 250);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Toggles the floor selector open-close.
|
|
55
|
+
*/
|
|
56
|
+
onToggleFloorSelector() {
|
|
57
|
+
this.floorSelectorClosed = !this.floorSelectorClosed, this.animateFloorSelector(), this.floorListElement.addEventListener("transitionend", () => {
|
|
58
|
+
this.floorSelectorClosed || this.scrollToSelectedFloor(), this.onScrollStyle();
|
|
59
|
+
}, { once: !0 });
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Adding/removing classes to the floorlist to fade-in/out the top/bottom part of the container..
|
|
63
|
+
*/
|
|
64
|
+
onScrollStyle() {
|
|
65
|
+
const M = this.floorListElement.scrollHeight - this.floorListElement.clientHeight;
|
|
66
|
+
if (this.floorSelectorClosed) {
|
|
67
|
+
this.fadeFloorSelectorOnTop = !1, this.fadeFloorSelectorOnBottom = !1;
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
this.maxListHeight > this.floorListElement.clientHeight - 48 || (this.fadeFloorSelectorOnTop = this.floorListElement.scrollTop > 0, this.fadeFloorSelectorOnBottom = this.floorListElement.scrollTop !== M);
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Sets the clicked floor active.
|
|
74
|
+
*
|
|
75
|
+
* @param {PointerEvent} event
|
|
76
|
+
*/
|
|
77
|
+
onSelectFloor(M, e) {
|
|
78
|
+
this.mapsindoors.setFloor(e), this.currentFloor = this.mapsindoors.getFloor().toString(), this.currentFloorElement = M.currentTarget;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Called every time the component is connected to the DOM.
|
|
82
|
+
* It resets the floorlist and the active floor when the building changes.
|
|
83
|
+
*/
|
|
84
|
+
connectedCallback() {
|
|
85
|
+
this.mapsindoors.addListener("building_changed", () => {
|
|
86
|
+
this.floors = [];
|
|
87
|
+
const M = this.mapsindoors.getBuilding();
|
|
88
|
+
if (M) {
|
|
89
|
+
const e = () => {
|
|
90
|
+
this.currentFloor = this.mapsindoors.getFloor().toString(), this.mapsindoors.removeListener("floor_changed", e);
|
|
91
|
+
};
|
|
92
|
+
this.mapsindoors.getFloor() === null || this.mapsindoors.getFloor() === void 0 ? this.mapsindoors.addListener("floor_changed", e) : this.currentFloor = this.mapsindoors.getFloor().toString(), Object.keys(M.floors).sort((o, i) => i - o).forEach((o) => {
|
|
93
|
+
M.floors[o].index = o, this.floors.push(M.floors[o]);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
}), this.mapsindoors.addListener("floor_changed", () => {
|
|
97
|
+
this.currentFloor = this.mapsindoors.getFloor().toString();
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Called after every render().
|
|
102
|
+
*/
|
|
103
|
+
componentDidRender() {
|
|
104
|
+
!this.mapsindoors.getBuilding() || this.mapsindoors.getFloor() === null || this.mapsindoors.getFloor() === void 0 ? this.floorSelectorElement.classList.add("mi-floor-selector--hidden") : this.floorSelectorElement.classList.remove("mi-floor-selector--hidden"), this.currentFloorElement = this.el.querySelector(".mi-floor-selector__floor--active"), this.currentFloorElement && this.currentFloor && this.animateFloorSelector();
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Renders the floor selector.
|
|
108
|
+
*
|
|
109
|
+
* @returns {JSX.Element}
|
|
110
|
+
*/
|
|
111
|
+
render() {
|
|
112
|
+
return N(T, null, N("div", { class: "mi-floor-selector", ref: (M) => this.floorSelectorElement = M }, N("button", { class: `mi-floor-selector__button mi-floor-selector__button--${this.floorSelectorClosed ? "closed" : "open"}`, onClick: () => this.onToggleFloorSelector() }), N("div", { class: `mi-floor-selector__list ${this.fadeFloorSelectorOnTop ? "mi-floor-selector__list--fade-top" : ""} ${this.fadeFloorSelectorOnBottom ? "mi-floor-selector__list--fade-bottom" : ""}`, ref: (M) => this.floorListElement = M, onScroll: () => this.onScrollStyle() }, this.floors.map((M) => N("button", { "data-floor": M.index, style: this.currentFloor === M.index ? { backgroundColor: this.primaryColor } : {}, class: `mi-floor-selector__floor ${this.currentFloor === M.index ? "mi-floor-selector__floor--active" : ""}`, onClick: (e) => this.onSelectFloor(e, M.index) }, N("span", null, M.name))))));
|
|
113
|
+
}
|
|
114
|
+
get el() {
|
|
115
|
+
return l(this);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
j.style = s;
|
|
119
|
+
export {
|
|
120
|
+
j as mi_floor_selector
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=mi-floor-selector.entry-329407f6.mjs.map
|