@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,231 @@
|
|
|
1
|
+
import { r as s, c as h, h as o, H as c, g } from "./reactcomponent-fed5da4c.mjs";
|
|
2
|
+
import { i as l, a as b } from "./utils-ae714467-4f4e3a56.mjs";
|
|
3
|
+
import "react";
|
|
4
|
+
import "react-dom";
|
|
5
|
+
(function() {
|
|
6
|
+
try {
|
|
7
|
+
var e = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, t = new e.Error().stack;
|
|
8
|
+
t && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[t] = "94e92682-ef21-4537-b958-26a8b5246728", e._sentryDebugIdIdentifier = "sentry-dbid-94e92682-ef21-4537-b958-26a8b5246728");
|
|
9
|
+
} catch {
|
|
10
|
+
}
|
|
11
|
+
})();
|
|
12
|
+
const p = `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}.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-select{display:block;padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:32px;border-radius:4px;border-width:1px;border-style:solid;border-color:#c8d0e0;color:#1e2025;font-size:1rem;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#f5f7fa, #ebeff5)}.mi-select:disabled{opacity:0.48;cursor:not-allowed}.mi-select:not(:disabled):hover{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-select:not(:disabled):active{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#dee3ed, #ebeff5)}.mi-toggle{margin:0}.mi-toggle:disabled{cursor:not-allowed}.mi-toggle+.mi-label{margin-left:8px}@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none){.mi-toggle{padding:2px;box-sizing:border-box;appearance:none;-moz-appearance:none;-webkit-appearance:none;width:48px;height:24px;border-radius:9999px;background-color:#8d98aa;transition:background-color 300ms ease}.mi-toggle:disabled{opacity:0.48}.mi-toggle:checked{background-color:#2a844e}.mi-toggle::after{content:"";display:inline-block;width:20px;height:20px;transform:translateX(0px);border-radius:50%;background-color:#fcfcfc;box-shadow:0 1px 1px rgba(0, 0, 0, 0.125), 0 2px 2px rgba(0, 0, 0, 0.125);transition:300ms ease}.mi-toggle:checked::after{transform:translateX(24px)}}.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}*{box-sizing:border-box}.table{width:100%;border-collapse:collapse;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";background-color:#ffffff;border-style:solid;border-width:1px;border-color:#d1d5db;border-top:none}.table__header-cell{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:48px;font-weight:500;font-size:1rem;line-height:1.25rem;color:#ffffff;background-color:#374151;padding-top:16px;padding-bottom:16px;padding-left:8px;padding-right:8px}.table__header-cell::before,.table__header-cell::after{content:"";display:block;position:absolute;right:16px;top:50%;border:7px solid transparent}.table__header-cell::before{border-bottom-color:#6b7280;margin-top:-15px}.table__header-cell::after{border-top-color:#6b7280;margin-top:3px}.table__header-cell.desc::after{border-top-color:#f9fafb}.table__header-cell.asc::before{border-bottom-color:#f9fafb}.table__header-cell--no-sort::before,.table__header-cell--no-sort::after{border:none}.table__header-cell:not(.table__header-cell--no-sort){padding-right:46px;cursor:pointer}.table__header-cell--fit-content{white-space:nowrap;width:1px}.table__header-cell--align-left{text-align:left}.table__header-cell--align-center{text-align:center}.table__header-cell--align-right{text-align:right}.table__header-cell--sticky{position:sticky;top:0;z-index:1}.table__row:nth-child(even):hover{background-color:#f3f4f6}.table__row:nth-child(odd){background-color:#f9fafb}.table__row:nth-child(odd):hover{background-color:#f3f4f6}.table__data{font-size:1rem;padding-left:8px;padding-right:8px;height:56px;border-right:1px solid #d1d5db}.table__data:last-child{border-right:none}.table__data--fit-content{white-space:nowrap;width:1px}.table__data--align-left{text-align:left}.table__data--align-center{text-align:center}.table__data--align-right{text-align:right}.table__data--monospace-font{font-family:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace}.empty-page{display:flex;align-items:center;flex-direction:column;margin-top:72px;height:345px}.empty-page>*{margin:0}.empty-page__header{font-size:2.25rem}.empty-page__subheader{margin-top:32px;font-size:1.5rem}`, m = class {
|
|
13
|
+
constructor(e) {
|
|
14
|
+
s(this, e), this.selectionChanged = h(this, "selectionChanged", 7), this.columns = [], this.numberOfSelectedRows = void 0, this.rows = [], this.maxRows = void 0, this.page = void 0, this.selectable = !1, this.selected = /* @__PURE__ */ new Set(), this.emptyPageHeader = "No results found", this.emptyPageSubheader = void 0, this.isHeaderSticky = !0, this.tableRows = [], this.currentPage = 1, this.sortByColumn = null;
|
|
15
|
+
}
|
|
16
|
+
onSelectionChangedHandler() {
|
|
17
|
+
this.selectionChanged.emit(this.selected);
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* When the rows is set from outside of the components the table sorting is reset and the rows are assigned to the internal tabelRows property.
|
|
21
|
+
*/
|
|
22
|
+
onRowsChangedHandler() {
|
|
23
|
+
this.tableRows = Array.from(this.rows), this.setHeaderCheckboxState();
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* When the page is set from outside of the components the table needs to show the newly specified page of rows.
|
|
27
|
+
*/
|
|
28
|
+
onPageChangedHandler() {
|
|
29
|
+
this.currentPage = this.page, this.renderTableContent();
|
|
30
|
+
}
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
const e = this.el.querySelectorAll("mi-column");
|
|
33
|
+
this.columns = Array.from(e).map((t) => {
|
|
34
|
+
const i = {
|
|
35
|
+
alignContent: t.alignContent,
|
|
36
|
+
monospace: t.monospace,
|
|
37
|
+
label: l(t.label) ? t.binding : t.label,
|
|
38
|
+
binding: t.binding || null,
|
|
39
|
+
sortable: t.sortable,
|
|
40
|
+
fitContent: !!t.fitContent,
|
|
41
|
+
/* All HTML comments are removed from the template to avoid the issues with the table not displaying any data in IE11 */
|
|
42
|
+
template: t.innerHTML.replace(/<!--[\s\S]*?-->/g, ""),
|
|
43
|
+
columnElement: t,
|
|
44
|
+
width: t.width
|
|
45
|
+
};
|
|
46
|
+
return t.sort && !this.sortByColumn && (this.sortByColumn = { column: i, sortOrder: t.sort === "asc" ? "asc" : "desc" }), i;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Column header click handler.
|
|
51
|
+
* If the column is sortable the sort order is reversed.
|
|
52
|
+
*
|
|
53
|
+
* @private
|
|
54
|
+
* @param {MouseEvent} event
|
|
55
|
+
* @param {any} column
|
|
56
|
+
*/
|
|
57
|
+
columnHeaderClickHandler(e, t) {
|
|
58
|
+
var i, a;
|
|
59
|
+
if (!l(t.sortable)) {
|
|
60
|
+
let n = "asc";
|
|
61
|
+
t === ((i = this.sortByColumn) === null || i === void 0 ? void 0 : i.column) && (n = ((a = this.sortByColumn) === null || a === void 0 ? void 0 : a.sortOrder) === "asc" ? "desc" : "asc"), this.sortByColumn = { column: t, sortOrder: n };
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Sorts table rows.
|
|
66
|
+
*
|
|
67
|
+
* @private
|
|
68
|
+
* @return {Array<any>}
|
|
69
|
+
*/
|
|
70
|
+
sortTableRows() {
|
|
71
|
+
var e, t, i;
|
|
72
|
+
if (this.tableRows.length > 0 && this.sortByColumn) {
|
|
73
|
+
let a;
|
|
74
|
+
const n = (e = this.sortByColumn) === null || e === void 0 ? void 0 : e.column, r = (t = this.sortByColumn) === null || t === void 0 ? void 0 : t.sortOrder;
|
|
75
|
+
if (n && r)
|
|
76
|
+
return ((i = n.sortable) === null || i === void 0 ? void 0 : i.toLowerCase()) === "date" ? a = r === "desc" ? w(n.binding) : f(n.binding) : a = r === "desc" ? u(n.binding) : x(n.binding), [...this.tableRows.sort(a)];
|
|
77
|
+
}
|
|
78
|
+
return this.tableRows;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Replace template variables (eg. "{id}") with the corresponding value from the data.
|
|
82
|
+
*
|
|
83
|
+
* @private
|
|
84
|
+
* @param {string} template
|
|
85
|
+
* @param {object} data
|
|
86
|
+
* @returns {string}
|
|
87
|
+
*/
|
|
88
|
+
replaceVars(e, t) {
|
|
89
|
+
return e.replace(/\{(.*?)\}/g, (i, a) => a.split(".").reduce((r, d) => r ? r[d] : null, t));
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Remove boolean HTML attributes (eg. checked) that will have a false value based on data. This is necessary since
|
|
93
|
+
* the very presence of the attribute will give it a truthy value.
|
|
94
|
+
*
|
|
95
|
+
* @private
|
|
96
|
+
* @param {string} template
|
|
97
|
+
* @param {array} data
|
|
98
|
+
* @returns {string}
|
|
99
|
+
*/
|
|
100
|
+
removeFalseBooleanAttributes(e, t) {
|
|
101
|
+
return e.replace(/ (checked|disabled|hidden|selected)="\{(.*?)\}"/, (i, a, n) => t[n] === !1 ? "" : a);
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* React to clicks on table rows and emits the internal cellContentClicked event to
|
|
105
|
+
* the column component if clicked on content within a cell.
|
|
106
|
+
*
|
|
107
|
+
* @private
|
|
108
|
+
* @param {MouseEvent} event
|
|
109
|
+
* @param {any} tableRow
|
|
110
|
+
*/
|
|
111
|
+
tableRowClicked(e, t) {
|
|
112
|
+
var i;
|
|
113
|
+
const a = e.target, n = a.closest("td").cellIndex, r = this.selectable ? n - 1 : n;
|
|
114
|
+
if (a.tagName.toLowerCase() !== "td" && this.columns[r]) {
|
|
115
|
+
const d = { detail: t };
|
|
116
|
+
(i = this.columns[r]) === null || i === void 0 || i.columnElement.dispatchEvent(new CustomEvent("cellContentClicked", d));
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
async componentWillLoad() {
|
|
120
|
+
this.rows.length > 0 && (this.tableRows = Array.from(this.rows));
|
|
121
|
+
}
|
|
122
|
+
render() {
|
|
123
|
+
return o(c, null, o("table", { class: "table" }, o("thead", null, o("tr", null, this.renderSelectHeader(), this.columns.map((e) => {
|
|
124
|
+
var t;
|
|
125
|
+
const i = e.fitContent ? "" : e.width || "auto", a = ((t = this.sortByColumn) === null || t === void 0 ? void 0 : t.column) === e ? this.sortByColumn.sortOrder : null;
|
|
126
|
+
return o("th", { "data-binding": e.binding, style: { width: i, "max-width": i, "min-width": i }, onClick: (n) => this.columnHeaderClickHandler(n, e), class: `table__header-cell ${this.isHeaderSticky ? "table__header-cell--sticky" : ""} ${l(e.sortable) ? "table__header-cell--no-sort" : ""} ${l(a) ? "" : a} ${e.fitContent ? "table__header-cell--fit-content" : ""}` }, e.label);
|
|
127
|
+
}))), o("tbody", null, this.renderTableContent())), this.tableRows.length === 0 ? this.renderEmptyPage() : null);
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* If the table is selectable then renderSelectHeader will render the th element with the checkbox to check or uncheck all items in the table.
|
|
131
|
+
*
|
|
132
|
+
* @private
|
|
133
|
+
* @returns {JSX.Element}
|
|
134
|
+
*/
|
|
135
|
+
renderSelectHeader() {
|
|
136
|
+
if (this.selectable)
|
|
137
|
+
return o("th", { class: `table__header-cell ${this.isHeaderSticky ? "table__header-cell--sticky" : ""} table__header-cell--fit-content table__header-cell--no-sort table__header-cell--align-center` }, o("input", { type: "checkbox", class: "mi-input", ref: (e) => this.selectAllCheckbox = e, onChange: () => this.selectHeaderOnChangeHandler() }));
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* If the table is selectable then this method will render the td for each row in the item to select or unselect the row.
|
|
141
|
+
*
|
|
142
|
+
* @private
|
|
143
|
+
* @param {object} row
|
|
144
|
+
* @returns {JSX.Element}
|
|
145
|
+
*/
|
|
146
|
+
renderSelectRow(e) {
|
|
147
|
+
if (this.selectable)
|
|
148
|
+
return o("td", { class: "table__data table__data--align-center" }, o("input", { class: "mi-input", type: "checkbox", checked: this.selected.has(e), onChange: (t) => this.selectOnChangeHandler(t, e) }));
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Helper method to render the tables content.
|
|
152
|
+
*
|
|
153
|
+
* @private
|
|
154
|
+
* @returns {[JSX.Element]}
|
|
155
|
+
*/
|
|
156
|
+
renderTableContent() {
|
|
157
|
+
let e = this.sortTableRows();
|
|
158
|
+
return e = b(this.maxRows) && this.maxRows > 0 ? e.slice(this.maxRows * (this.currentPage - 1), this.maxRows * this.currentPage) : e, e.map((t) => this.renderTableRow(t));
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Helper method to render a table row.
|
|
162
|
+
*
|
|
163
|
+
* @private
|
|
164
|
+
* @param {*} tableRow
|
|
165
|
+
* @returns {JSX.Element}
|
|
166
|
+
*/
|
|
167
|
+
renderTableRow(e) {
|
|
168
|
+
const t = [];
|
|
169
|
+
for (const i of this.columns) {
|
|
170
|
+
let a = i.template;
|
|
171
|
+
a > "" ? (a = this.removeFalseBooleanAttributes(a, e), a = this.replaceVars(a, e), t.push(a)) : t.push(e[i.binding]);
|
|
172
|
+
}
|
|
173
|
+
return o("tr", { class: "table__row", onClick: (i) => this.tableRowClicked(i, e) }, this.renderSelectRow(e), t.map((i, a) => o("td", { class: `table__data ${this.columns[a].fitContent ? "table__data--fit-content" : ""} table__data--align-${this.columns[a].alignContent || "left"} ${this.columns[a].monospace ? "table__data--monospace-font" : ""}`, innerHTML: i })));
|
|
174
|
+
}
|
|
175
|
+
/**
|
|
176
|
+
* Renders en empty page with error message when no table rows are available.
|
|
177
|
+
*
|
|
178
|
+
* @private
|
|
179
|
+
* @returns {JSX.Element}
|
|
180
|
+
*/
|
|
181
|
+
renderEmptyPage() {
|
|
182
|
+
return o("div", { class: "empty-page" }, o("p", { class: "empty-page__header" }, this.emptyPageHeader), o("p", { class: "empty-page__subheader" }, this.emptyPageSubheader));
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* The event handler for the onchange event for the checkboxes in the selectable column.
|
|
186
|
+
*
|
|
187
|
+
* @private
|
|
188
|
+
* @param {EventData} event
|
|
189
|
+
* @param {object} row
|
|
190
|
+
*/
|
|
191
|
+
selectOnChangeHandler(e, t) {
|
|
192
|
+
e.target.checked ? this.selected.add(t) : this.selected.delete(t), this.setHeaderCheckboxState(), this.numberOfSelectedRows = this.selected.size, e.stopPropagation();
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* Set the state of the checkbox in the table header.
|
|
196
|
+
* The state can be either checked, unchecked or indeterminate.
|
|
197
|
+
*/
|
|
198
|
+
setHeaderCheckboxState() {
|
|
199
|
+
this.selectAllCheckbox && this.selectable && (this.selectAllCheckbox.checked = this.selected.size === this.rows.length, this.selectAllCheckbox.indeterminate = this.selected.size > 0 && this.selected.size < this.rows.length);
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* The event handler for the onchange event for the checkbox in the selectable column header.
|
|
203
|
+
*
|
|
204
|
+
* @private
|
|
205
|
+
* @param {EventData} event
|
|
206
|
+
*/
|
|
207
|
+
selectHeaderOnChangeHandler() {
|
|
208
|
+
this.selected.size > 0 && this.selected.size <= this.rows.length ? (this.selected.clear(), this.selectAllCheckbox.checked = !1) : (this.rows.forEach((e) => this.selected.add(e)), this.selectAllCheckbox.checked = !0), this.numberOfSelectedRows = this.selected.size;
|
|
209
|
+
}
|
|
210
|
+
get el() {
|
|
211
|
+
return g(this);
|
|
212
|
+
}
|
|
213
|
+
static get watchers() {
|
|
214
|
+
return {
|
|
215
|
+
numberOfSelectedRows: ["onSelectionChangedHandler"],
|
|
216
|
+
rows: ["onRowsChangedHandler"],
|
|
217
|
+
page: ["onPageChangedHandler"]
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
}, x = (e) => (t, i) => `${t[e] || ""}`.localeCompare(`${i[e] || ""}`.trimStart().toLowerCase(), void 0, { numeric: !0 }), u = (e) => (t, i) => `${i[e] || ""}`.localeCompare(`${t[e] || ""}`.trimStart().toLowerCase(), void 0, { numeric: !0 }), f = (e) => (t, i) => {
|
|
221
|
+
const a = Date.parse(t[e]), n = Date.parse(i[e]);
|
|
222
|
+
return a > n ? 1 : a < n ? -1 : 0;
|
|
223
|
+
}, w = (e) => (t, i) => {
|
|
224
|
+
const a = Date.parse(i[e]), n = Date.parse(t[e]);
|
|
225
|
+
return a > n ? 1 : a < n ? -1 : 0;
|
|
226
|
+
};
|
|
227
|
+
m.style = p;
|
|
228
|
+
export {
|
|
229
|
+
m as mi_data_table
|
|
230
|
+
};
|
|
231
|
+
//# sourceMappingURL=mi-data-table.entry-e0a9dd7a.mjs.map
|