@mapsindoors/map-template 1.93.2 → 1.94.0
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-982405ad.mjs → GoogleMapsMap-BqYRaFgc.mjs} +51 -62
- package/dist/MapboxMap-CUYrfLHY.mjs +34732 -0
- package/dist/_commonjsHelpers-ba3f0406.js +21 -0
- package/dist/combo-box-item.entry.js +15 -0
- package/dist/icon-b8d01d6f.js +24 -0
- package/dist/index-7e9696f3.js +1678 -0
- package/dist/index.js +1 -0
- package/dist/loader.js +18 -0
- package/dist/mapsindoors-react.es.js +3 -5
- package/dist/mapsindoors-react.umd.js +197 -582
- package/dist/mapsindoors-webcomponent.es.js +58512 -75790
- package/dist/mi-card_2.entry.js +28 -0
- package/dist/mi-chip.entry.js +22 -0
- package/dist/mi-column.entry.js +28 -0
- package/dist/mi-combo-box.entry.js +416 -0
- package/dist/mi-components.js +18 -0
- package/dist/mi-data-table.entry.js +302 -0
- package/dist/mi-distance_2.entry.js +67 -0
- package/dist/mi-dropdown-item.entry.js +15 -0
- package/dist/mi-dropdown.entry.js +610 -0
- package/dist/mi-floor-selector.entry.js +202 -0
- package/dist/mi-keyboard.entry.js +238 -0
- package/dist/mi-list-item-category.entry.js +48 -0
- package/dist/mi-list-item-location.entry.js +171 -0
- package/dist/mi-list.entry.js +56 -0
- package/dist/mi-location-booking.entry.js +5193 -0
- package/dist/mi-location-info.entry.js +63 -0
- package/dist/mi-map-googlemaps.entry.js +750 -0
- package/dist/mi-map-mapbox.entry.js +467 -0
- package/dist/mi-metric-card.entry.js +48 -0
- package/dist/mi-my-position.entry.js +986 -0
- package/dist/mi-notification.entry.js +127 -0
- package/dist/mi-route-instructions-heading.entry.js +73 -0
- package/dist/mi-route-instructions-maneuver-legacy.entry.js +82 -0
- package/dist/mi-route-instructions-maneuver.entry.js +82 -0
- package/dist/mi-route-instructions-step-legacy.entry.js +308 -0
- package/dist/mi-route-instructions-step.entry.js +321 -0
- package/dist/mi-route-instructions.entry.js +157 -0
- package/dist/mi-scroll-buttons.entry.js +112 -0
- package/dist/mi-search.entry.js +376 -0
- package/dist/mi-share-sms.entry.js +80 -0
- package/dist/mi-step-switcher.entry.js +31 -0
- package/dist/mi-tab-panel.entry.js +25 -0
- package/dist/mi-tab.entry.js +12 -0
- package/dist/mi-tabs.entry.js +47 -0
- package/dist/mi-time.entry.js +57 -0
- package/dist/mi-variables-9a6c8d4d.js +6 -0
- package/dist/polyfills/core-js.js +11 -0
- package/dist/polyfills/css-shim.js +1 -0
- package/dist/polyfills/dom.js +79 -0
- package/dist/polyfills/es5-html-element.js +1 -0
- package/dist/polyfills/index.js +34 -0
- package/dist/polyfills/system.js +6 -0
- package/dist/{reactcomponent-7fbbd9b2.mjs → reactcomponent-DTepe7hB.mjs} +14121 -14626
- package/dist/route-travel-mode.enum-7f4ce9c7.js +9 -0
- package/dist/sort-order.enum-64ce8998.js +552 -0
- package/dist/unit-system.enum-eaefb53e.js +7 -0
- package/dist/utils-ae714467.js +61 -0
- package/package.json +10 -6
- package/dist/MapboxMap-06ef82a3.mjs +0 -37815
- package/dist/_commonjsHelpers-ba3f0406-b96e6d6a.mjs +0 -22
- package/dist/combo-box-item.entry-d35f3d51.mjs +0 -15
- package/dist/icon-b8d01d6f-ddfa2c17.mjs +0 -25
- package/dist/mapsindoors-webcomponent.umd.js +0 -3245
- package/dist/mi-card_2.entry-fc772c35.mjs +0 -26
- package/dist/mi-chip.entry-81c742a1.mjs +0 -19
- package/dist/mi-column.entry-3a083282.mjs +0 -21
- package/dist/mi-combo-box.entry-cae6401a.mjs +0 -263
- package/dist/mi-data-table.entry-d4c3f445.mjs +0 -224
- package/dist/mi-distance_2.entry-a33ed69a.mjs +0 -339
- package/dist/mi-dropdown-item.entry-974d1e4f.mjs +0 -15
- package/dist/mi-dropdown.entry-5317db65.mjs +0 -349
- package/dist/mi-floor-selector.entry-185fbd8b.mjs +0 -115
- package/dist/mi-keyboard.entry-eaf4b9ef.mjs +0 -3103
- package/dist/mi-list-item-category.entry-9c95008c.mjs +0 -39
- package/dist/mi-list-item-location.entry-8b41e8f0.mjs +0 -137
- package/dist/mi-list.entry-1218d29d.mjs +0 -42
- package/dist/mi-location-booking.entry-270aaf5a.mjs +0 -4866
- package/dist/mi-location-info.entry-e4f7fd04.mjs +0 -32
- package/dist/mi-map-googlemaps.entry-81fa28d2.mjs +0 -467
- package/dist/mi-map-mapbox.entry-31821da3.mjs +0 -301
- package/dist/mi-metric-card.entry-40407f04.mjs +0 -29
- package/dist/mi-my-position.entry-bc48fe6e.mjs +0 -703
- package/dist/mi-notification.entry-9a2bc53b.mjs +0 -84
- package/dist/mi-route-instructions-heading.entry-e5b1ff04.mjs +0 -75
- package/dist/mi-route-instructions-maneuver-legacy.entry-2c3d73ab.mjs +0 -76
- package/dist/mi-route-instructions-maneuver.entry-c6f01024.mjs +0 -76
- package/dist/mi-route-instructions-step-legacy.entry-80bcf097.mjs +0 -202
- package/dist/mi-route-instructions-step.entry-db802e13.mjs +0 -231
- package/dist/mi-route-instructions.entry-62416e29.mjs +0 -143
- package/dist/mi-scroll-buttons.entry-92b62b21.mjs +0 -83
- package/dist/mi-search.entry-87f1e64a.mjs +0 -251
- package/dist/mi-share-sms.entry-b6725edb.mjs +0 -56
- package/dist/mi-step-switcher.entry-f8f6c040.mjs +0 -27
- package/dist/mi-tab-panel.entry-a89213c2.mjs +0 -22
- package/dist/mi-tab.entry-a2fb3f8c.mjs +0 -14
- package/dist/mi-tabs.entry-cd638ea7.mjs +0 -37
- package/dist/mi-time.entry-0b02870d.mjs +0 -46
- package/dist/mi-variables-9a6c8d4d-e06eec88.mjs +0 -8
- package/dist/route-travel-mode.enum-7f4ce9c7-a9c95a83.mjs +0 -8
- package/dist/sort-order.enum-64ce8998-b75ac596.mjs +0 -318
- package/dist/unit-system.enum-eaefb53e-0f424da4.mjs +0 -8
- package/dist/utils-ae714467-b07fc3be.mjs +0 -37
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { r as s, h as e, H as i } from "./reactcomponent-7fbbd9b2.mjs";
|
|
2
|
-
import "react";
|
|
3
|
-
import "react-dom";
|
|
4
|
-
const r = ':host{box-sizing:border-box;display:block;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;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 1px 1px rgba(0, 0, 0, 0.2);border-radius:8px;padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;margin:24px}', o = class {
|
|
5
|
-
constructor(n) {
|
|
6
|
-
s(this, n);
|
|
7
|
-
}
|
|
8
|
-
render() {
|
|
9
|
-
return e("slot", null);
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
o.style = r;
|
|
13
|
-
const a = ".spinner{display:flex;justify-content:center;align-items:center}.spinner>div{width:16px;height:16px;background-color:#6b7280;margin:4px;border-radius:100%;display:inline-block;animation:bouncedelay 1.4s infinite ease-in-out both}.spinner.inverse>div{background-color:#ffffff}.spinner .bounce1{animation-delay:-0.32s}.spinner .bounce2{animation-delay:-0.16s}@keyframes bouncedelay{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}", t = class {
|
|
14
|
-
constructor(n) {
|
|
15
|
-
s(this, n), this.inverse = !1;
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
return e(i, null, e("div", { class: `spinner ${this.inverse ? "inverse" : ""}` }, e("div", { class: "bounce1" }), e("div", { class: "bounce2" }), e("div", { class: "bounce3" })));
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
t.style = a;
|
|
22
|
-
export {
|
|
23
|
-
o as mi_card,
|
|
24
|
-
t as mi_spinner
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=mi-card_2.entry-fc772c35.mjs.map
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { r, h as l } from "./reactcomponent-7fbbd9b2.mjs";
|
|
2
|
-
import "react";
|
|
3
|
-
import "react-dom";
|
|
4
|
-
const i = ':root{--z-index-top:999999;--z-index-popup:950;--z-index-modal:900;--z-index-spinner:800;--z-index-overlay:700;--z-index-dropdown:600;--z-index-toast:500;--z-index-header:400;--z-index-sticky:300;--z-index-mask:200;--z-index-masked:100;--z-index-default:1;--z-index-deep:-999999;--transition-slowly:600ms ease;--transition-quickly:300ms ease;--tailwind-colors-rose-900:#881337;--tailwind-colors-rose-800:#9f1239;--tailwind-colors-rose-700:#be123c;--tailwind-colors-rose-600:#e11d48;--tailwind-colors-rose-500:#f43f5e;--tailwind-colors-rose-400:#fb7185;--tailwind-colors-rose-300:#fda4af;--tailwind-colors-rose-200:#fecdd3;--tailwind-colors-rose-100:#ffe4e6;--tailwind-colors-rose-50:#fff1f2;--tailwind-colors-pink-900:#831843;--tailwind-colors-pink-800:#9d174d;--tailwind-colors-pink-700:#be185d;--tailwind-colors-pink-600:#db2777;--tailwind-colors-pink-500:#ec4899;--tailwind-colors-pink-400:#f472b6;--tailwind-colors-pink-300:#f9a8d4;--tailwind-colors-pink-200:#fbcfe8;--tailwind-colors-pink-100:#fce7f3;--tailwind-colors-pink-50:#fdf2f8;--tailwind-colors-fuchsia-900:#701a75;--tailwind-colors-fuchsia-800:#86198f;--tailwind-colors-fuchsia-700:#a21caf;--tailwind-colors-fuchsia-600:#c026d3;--tailwind-colors-fuchsia-500:#d946ef;--tailwind-colors-fuchsia-400:#e879f9;--tailwind-colors-fuchsia-300:#f0abfc;--tailwind-colors-fuchsia-200:#f5d0fe;--tailwind-colors-fuchsia-100:#fae8ff;--tailwind-colors-fuchsia-50:#fdf4ff;--tailwind-colors-purple-900:#581c87;--tailwind-colors-purple-800:#6b21a8;--tailwind-colors-purple-700:#7e22ce;--tailwind-colors-purple-600:#9333ea;--tailwind-colors-purple-500:#a855f7;--tailwind-colors-purple-400:#c084fc;--tailwind-colors-purple-300:#d8b4fe;--tailwind-colors-purple-200:#e9d5ff;--tailwind-colors-purple-100:#f3e8ff;--tailwind-colors-purple-50:#faf5ff;--tailwind-colors-violet-900:#4c1d95;--tailwind-colors-violet-800:#5b21b6;--tailwind-colors-violet-700:#6d28d9;--tailwind-colors-violet-600:#7c3aed;--tailwind-colors-violet-500:#8b5cf6;--tailwind-colors-violet-400:#a78bfa;--tailwind-colors-violet-300:#c4b5fd;--tailwind-colors-violet-200:#ddd6fe;--tailwind-colors-violet-100:#ede9fe;--tailwind-colors-violet-50:#f5f3ff;--tailwind-colors-indigo-900:#312e81;--tailwind-colors-indigo-800:#3730a3;--tailwind-colors-indigo-700:#4338ca;--tailwind-colors-indigo-600:#4f46e5;--tailwind-colors-indigo-500:#6366f1;--tailwind-colors-indigo-400:#818cf8;--tailwind-colors-indigo-300:#a5b4fc;--tailwind-colors-indigo-200:#c7d2fe;--tailwind-colors-indigo-100:#e0e7ff;--tailwind-colors-indigo-50:#eef2ff;--tailwind-colors-blue-900:#1e3a8a;--tailwind-colors-blue-800:#1e40af;--tailwind-colors-blue-700:#1d4ed8;--tailwind-colors-blue-600:#2563eb;--tailwind-colors-blue-500:#3b82f6;--tailwind-colors-blue-400:#60a5fa;--tailwind-colors-blue-300:#93c5fd;--tailwind-colors-blue-200:#bfdbfe;--tailwind-colors-blue-100:#dbeafe;--tailwind-colors-blue-50:#eff6ff;--tailwind-colors-sky-900:#0c4a6e;--tailwind-colors-sky-800:#075985;--tailwind-colors-sky-700:#0369a1;--tailwind-colors-sky-600:#0284c7;--tailwind-colors-sky-500:#0ea5e9;--tailwind-colors-sky-400:#38bdf8;--tailwind-colors-sky-300:#7dd3fc;--tailwind-colors-sky-200:#bae6fd;--tailwind-colors-sky-100:#e0f2fe;--tailwind-colors-sky-50:#f0f9ff;--tailwind-colors-cyan-900:#164e63;--tailwind-colors-cyan-800:#155e75;--tailwind-colors-cyan-700:#0e7490;--tailwind-colors-cyan-600:#0891b2;--tailwind-colors-cyan-500:#06b6d4;--tailwind-colors-cyan-400:#22d3ee;--tailwind-colors-cyan-300:#67e8f9;--tailwind-colors-cyan-200:#a5f3fc;--tailwind-colors-cyan-100:#cffafe;--tailwind-colors-cyan-50:#ecfeff;--tailwind-colors-teal-900:#134e4a;--tailwind-colors-teal-800:#115e59;--tailwind-colors-teal-700:#0f766e;--tailwind-colors-teal-600:#0d9488;--tailwind-colors-teal-500:#14b8a6;--tailwind-colors-teal-400:#2dd4bf;--tailwind-colors-teal-300:#5eead4;--tailwind-colors-teal-200:#99f6e4;--tailwind-colors-teal-100:#ccfbf1;--tailwind-colors-teal-50:#f0fdfa;--tailwind-colors-emerald-900:#064e3b;--tailwind-colors-emerald-800:#065f46;--tailwind-colors-emerald-700:#047857;--tailwind-colors-emerald-600:#059669;--tailwind-colors-emerald-500:#10b981;--tailwind-colors-emerald-400:#34d399;--tailwind-colors-emerald-300:#6ee7b7;--tailwind-colors-emerald-200:#a7f3d0;--tailwind-colors-emerald-100:#d1fae5;--tailwind-colors-emerald-50:#ecfdf5;--tailwind-colors-green-900:#14532d;--tailwind-colors-green-800:#166534;--tailwind-colors-green-700:#15803d;--tailwind-colors-green-600:#16a34a;--tailwind-colors-green-500:#22c55e;--tailwind-colors-green-400:#4ade80;--tailwind-colors-green-300:#86efac;--tailwind-colors-green-200:#bbf7d0;--tailwind-colors-green-100:#dcfce7;--tailwind-colors-green-50:#f0fdf4;--tailwind-colors-lime-900:#365314;--tailwind-colors-lime-800:#3f6212;--tailwind-colors-lime-700:#4d7c0f;--tailwind-colors-lime-600:#65a30d;--tailwind-colors-lime-500:#84cc16;--tailwind-colors-lime-400:#a3e635;--tailwind-colors-lime-300:#bef264;--tailwind-colors-lime-200:#d9f99d;--tailwind-colors-lime-100:#ecfccb;--tailwind-colors-lime-50:#f7fee7;--tailwind-colors-yellow-900:#713f12;--tailwind-colors-yellow-800:#854d0e;--tailwind-colors-yellow-700:#a16207;--tailwind-colors-yellow-600:#ca8a04;--tailwind-colors-yellow-500:#eab308;--tailwind-colors-yellow-400:#facc15;--tailwind-colors-yellow-300:#fde047;--tailwind-colors-yellow-200:#fef08a;--tailwind-colors-yellow-100:#fef9c3;--tailwind-colors-yellow-50:#fefce8;--tailwind-colors-amber-900:#78350f;--tailwind-colors-amber-800:#92400e;--tailwind-colors-amber-700:#b45309;--tailwind-colors-amber-600:#d97706;--tailwind-colors-amber-500:#f59e0b;--tailwind-colors-amber-400:#fbbf24;--tailwind-colors-amber-300:#fcd34d;--tailwind-colors-amber-200:#fde68a;--tailwind-colors-amber-100:#fef3c7;--tailwind-colors-amber-50:#fffbeb;--tailwind-colors-orange-900:#7c2d12;--tailwind-colors-orange-800:#9a3412;--tailwind-colors-orange-700:#c2410c;--tailwind-colors-orange-600:#ea580c;--tailwind-colors-orange-500:#f97316;--tailwind-colors-orange-400:#fb923c;--tailwind-colors-orange-300:#fdba74;--tailwind-colors-orange-200:#fed7aa;--tailwind-colors-orange-100:#ffedd5;--tailwind-colors-orange-50:#fff7ed;--tailwind-colors-red-900:#7f1d1d;--tailwind-colors-red-800:#991b1b;--tailwind-colors-red-700:#b91c1c;--tailwind-colors-red-600:#dc2626;--tailwind-colors-red-500:#ef4444;--tailwind-colors-red-400:#f87171;--tailwind-colors-red-300:#fca5a5;--tailwind-colors-red-200:#fecaca;--tailwind-colors-red-100:#fee2e2;--tailwind-colors-red-50:#fef2f2;--tailwind-colors-stone-900:#1c1917;--tailwind-colors-stone-800:#292524;--tailwind-colors-stone-700:#44403c;--tailwind-colors-stone-600:#57534e;--tailwind-colors-stone-500:#78716c;--tailwind-colors-stone-400:#a8a29e;--tailwind-colors-stone-300:#d6d3d1;--tailwind-colors-stone-200:#e7e5e4;--tailwind-colors-stone-100:#f5f5f4;--tailwind-colors-stone-50:#fafaf9;--tailwind-colors-neutral-900:#171717;--tailwind-colors-neutral-800:#262626;--tailwind-colors-neutral-700:#404040;--tailwind-colors-neutral-600:#525252;--tailwind-colors-neutral-500:#737373;--tailwind-colors-neutral-400:#a3a3a3;--tailwind-colors-neutral-300:#d4d4d4;--tailwind-colors-neutral-200:#e5e5e5;--tailwind-colors-neutral-100:#f5f5f5;--tailwind-colors-neutral-50:#fafafa;--tailwind-colors-zinc-900:#18181b;--tailwind-colors-zinc-800:#27272a;--tailwind-colors-zinc-700:#3f3f46;--tailwind-colors-zinc-600:#52525b;--tailwind-colors-zinc-500:#71717a;--tailwind-colors-zinc-400:#a1a1aa;--tailwind-colors-zinc-300:#d4d4d8;--tailwind-colors-zinc-200:#e4e4e7;--tailwind-colors-zinc-100:#f4f4f5;--tailwind-colors-zinc-50:#fafafa;--tailwind-colors-gray-900:#111827;--tailwind-colors-gray-800:#1f2937;--tailwind-colors-gray-700:#374151;--tailwind-colors-gray-600:#4b5563;--tailwind-colors-gray-500:#6b7280;--tailwind-colors-gray-400:#9ca3af;--tailwind-colors-gray-300:#d1d5db;--tailwind-colors-gray-200:#e5e7eb;--tailwind-colors-gray-100:#f3f4f6;--tailwind-colors-gray-50:#f9fafb;--tailwind-colors-slate-900:#0f172a;--tailwind-colors-slate-800:#1e293b;--tailwind-colors-slate-700:#334155;--tailwind-colors-slate-600:#475569;--tailwind-colors-slate-500:#64748b;--tailwind-colors-slate-400:#94a3b8;--tailwind-colors-slate-300:#cbd5e1;--tailwind-colors-slate-200:#e2e8f0;--tailwind-colors-slate-100:#f1f5f9;--tailwind-colors-slate-50:#f8fafc;--tailwind-colors-black:#000000;--tailwind-colors-white:#ffffff;--spacing-xxxx-large:64px;--spacing-xxx-large:48px;--spacing-xx-large:40px;--spacing-x-large:32px;--spacing-large:24px;--spacing-medium:16px;--spacing-small:12px;--spacing-x-small:8px;--spacing-xx-small:4px;--spacing-xxx-small:2px;--rounding-circle:50%;--rounding-pill:9999px;--rounding-x-large:16px;--rounding-large:8px;--rounding-medium:4px;--rounding-small:2px;--rounding-x-small:1px;--rounding-xx-small:0px;--opacity-xxx-large:1;--opacity-xx-large:0.88;--opacity-x-large:0.72;--opacity-large:0.48;--opacity-medium:0.24;--opacity-small:0.16;--opacity-x-small:0.08;--opacity-xx-small:0;--icon-size-xx-large:64px;--icon-size-x-large:48px;--icon-size-large:32px;--icon-size-medium:24px;--icon-size-small:16px;--font-measure-large:34rem;--font-measure-medium:30rem;--font-measure-small:20rem;--font-tracking-x-large:.25rem;--font-tracking-large:.1rem;--font-tracking-medium:normal;--font-tracking-small:-.05rem;--font-weight-xx-large:700;--font-weight-x-large:600;--font-weight-large:500;--font-weight-medium:400;--font-weight-small:300;--font-size-xxxx-large:4.5rem;--font-size-xxx-large:3rem;--font-size-xx-large:2.25rem;--font-size-x-large:1.5rem;--font-size-large:1.25rem;--font-size-medium:1rem;--font-size-small:0.875rem;--font-size-x-small:0.75rem;--font-family-serif:Georgia, Times, Times New Roman, serif;--font-family-monospace:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--font-family-system:-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";--elevation-x-large:0px 20px 20px rgba(0, 0, 0, 0.2), 0px 16px 16px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.16), 0px 8px 8px rgba(0, 0, 0, 0.12);--elevation-large:0px 16px 16px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.16), 0px 8px 8px rgba(0, 0, 0, 0.12);--elevation-medium: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);--elevation-small:0px 4px 4px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 1px 1px rgba(0, 0, 0, 0.2);--elevation-x-small:0px 2px 2px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.2);--color-transparent-base:rgba(0, 0, 0, 0);--color-white-base:#fcfcfc;--breakpoints-xx-large:only screen and (min-width: 1220px);--breakpoints-x-large:only screen and (min-width: 1025px);--breakpoints-large:only screen and (min-width: 992px);--breakpoints-medium:only screen and (min-width: 768px);--breakpoints-small:only screen and (min-width: 576px);--breakpoints-x-small:only screen and (max-width: 575px);--breakpoints-xx-small:only screen and (max-width: 360px);--brand-colors-black-100:#000000;--brand-colors-black-80:#323232;--brand-colors-black-60:#666666;--brand-colors-black-40:#999999;--brand-colors-black-20:#cccccc;--brand-colors-white-100:#ffffff;--brand-colors-dark-pine-100:#005655;--brand-colors-dark-pine-80:#327676;--brand-colors-dark-pine-60:#669999;--brand-colors-dark-pine-40:#99bbbb;--brand-colors-dark-pine-20:#ccdddd;--brand-colors-sky-blue-100:#abddff;--brand-colors-sky-blue-80:#c3e5ff;--brand-colors-sky-blue-60:#d2ebff;--brand-colors-sky-blue-40:#e1f2ff;--brand-colors-sky-blue-20:#f0f8ff;--brand-colors-sand-100:#ffefd7;--brand-colors-sand-80:#fff2df;--brand-colors-sand-60:#fff5e7;--brand-colors-brand-lime-100:#cdff00;--brand-colors-brand-lime-80:#d7ff32;--brand-colors-brand-lime-60:#e1ff66;--brand-colors-brand-lime-40:#ebff99;--brand-colors-brand-lime-20:#f5ffcc;--brand-colors-electric-purple-100:#7d49f3;--brand-colors-electric-purple-80:#976df5;--brand-colors-electric-purple-60:#b191f7;--brand-colors-electric-purple-40:#cbb6fa;--brand-colors-electric-purple-20:#e5dafc;--font-family-sans-serif:Figtree, var(--font-family-system);--color-dusk-base:var(--tailwind-colors-violet-500);--color-dusk-100:var(--tailwind-colors-violet-900);--color-dusk-90:var(--tailwind-colors-violet-800);--color-dusk-80:var(--tailwind-colors-violet-700);--color-dusk-70:var(--tailwind-colors-violet-600);--color-dusk-60:var(--tailwind-colors-violet-500);--color-dusk-50:var(--tailwind-colors-violet-400);--color-dusk-40:var(--tailwind-colors-violet-300);--color-dusk-30:var(--tailwind-colors-violet-200);--color-dusk-20:var(--tailwind-colors-violet-100);--color-dusk-10:var(--tailwind-colors-violet-50);--color-slate-base:var(--tailwind-colors-slate-500);--color-slate-100:var(--tailwind-colors-slate-900);--color-slate-90:var(--tailwind-colors-slate-800);--color-slate-80:var(--tailwind-colors-slate-700);--color-slate-70:var(--tailwind-colors-slate-600);--color-slate-60:var(--tailwind-colors-slate-500);--color-slate-50:var(--tailwind-colors-slate-400);--color-slate-40:var(--tailwind-colors-slate-300);--color-slate-30:var(--tailwind-colors-slate-200);--color-slate-20:var(--tailwind-colors-slate-100);--color-slate-10:var(--tailwind-colors-slate-50);--color-teal-base:var(--tailwind-colors-teal-500);--color-teal-100:var(--tailwind-colors-teal-900);--color-teal-90:var(--tailwind-colors-teal-800);--color-teal-80:var(--tailwind-colors-teal-700);--color-teal-70:var(--tailwind-colors-teal-600);--color-teal-60:var(--tailwind-colors-teal-500);--color-teal-50:var(--tailwind-colors-teal-400);--color-teal-40:var(--tailwind-colors-teal-300);--color-teal-30:var(--tailwind-colors-teal-200);--color-teal-20:var(--tailwind-colors-teal-100);--color-teal-10:var(--tailwind-colors-teal-50);--color-sky-base:var(--tailwind-colors-sky-500);--color-sky-100:var(--tailwind-colors-sky-900);--color-sky-90:var(--tailwind-colors-sky-800);--color-sky-80:var(--tailwind-colors-sky-700);--color-sky-70:var(--tailwind-colors-sky-600);--color-sky-60:var(--tailwind-colors-sky-500);--color-sky-50:var(--tailwind-colors-sky-400);--color-sky-40:var(--tailwind-colors-sky-300);--color-sky-30:var(--tailwind-colors-sky-200);--color-sky-20:var(--tailwind-colors-sky-100);--color-sky-10:var(--tailwind-colors-sky-50);--color-indigo-base:var(--tailwind-colors-indigo-500);--color-indigo-100:var(--tailwind-colors-indigo-900);--color-indigo-90:var(--tailwind-colors-indigo-800);--color-indigo-80:var(--tailwind-colors-indigo-700);--color-indigo-70:var(--tailwind-colors-indigo-600);--color-indigo-60:var(--tailwind-colors-indigo-500);--color-indigo-50:var(--tailwind-colors-indigo-400);--color-indigo-40:var(--tailwind-colors-indigo-300);--color-indigo-30:var(--tailwind-colors-indigo-200);--color-indigo-20:var(--tailwind-colors-indigo-100);--color-indigo-10:var(--tailwind-colors-indigo-50);--color-magenta-base:var(--tailwind-colors-pink-500);--color-magenta-100:var(--tailwind-colors-pink-900);--color-magenta-90:var(--tailwind-colors-pink-800);--color-magenta-80:var(--tailwind-colors-pink-700);--color-magenta-70:var(--tailwind-colors-pink-600);--color-magenta-60:var(--tailwind-colors-pink-500);--color-magenta-50:var(--tailwind-colors-pink-400);--color-magenta-40:var(--tailwind-colors-pink-300);--color-magenta-30:var(--tailwind-colors-pink-200);--color-magenta-20:var(--tailwind-colors-pink-100);--color-magenta-10:var(--tailwind-colors-pink-50);--color-purple-base:var(--tailwind-colors-purple-500);--color-purple-100:var(--tailwind-colors-purple-900);--color-purple-90:var(--tailwind-colors-purple-800);--color-purple-80:var(--tailwind-colors-purple-700);--color-purple-70:var(--tailwind-colors-purple-600);--color-purple-60:var(--tailwind-colors-purple-500);--color-purple-50:var(--tailwind-colors-purple-400);--color-purple-40:var(--tailwind-colors-purple-300);--color-purple-30:var(--tailwind-colors-purple-200);--color-purple-20:var(--tailwind-colors-purple-100);--color-purple-10:var(--tailwind-colors-purple-50);--color-bronze-base:var(--tailwind-colors-amber-500);--color-bronze-100:var(--tailwind-colors-amber-900);--color-bronze-90:var(--tailwind-colors-amber-800);--color-bronze-80:var(--tailwind-colors-amber-700);--color-bronze-70:var(--tailwind-colors-amber-600);--color-bronze-60:var(--tailwind-colors-amber-500);--color-bronze-50:var(--tailwind-colors-amber-400);--color-bronze-40:var(--tailwind-colors-amber-300);--color-bronze-30:var(--tailwind-colors-amber-200);--color-bronze-20:var(--tailwind-colors-amber-100);--color-bronze-10:var(--tailwind-colors-amber-50);--color-blue-base:var(--tailwind-colors-blue-500);--color-blue-100:var(--tailwind-colors-blue-900);--color-blue-90:var(--tailwind-colors-blue-800);--color-blue-80:var(--tailwind-colors-blue-700);--color-blue-70:var(--tailwind-colors-blue-600);--color-blue-60:var(--tailwind-colors-blue-500);--color-blue-50:var(--tailwind-colors-blue-400);--color-blue-40:var(--tailwind-colors-blue-300);--color-blue-30:var(--tailwind-colors-blue-200);--color-blue-20:var(--tailwind-colors-blue-100);--color-blue-10:var(--tailwind-colors-blue-50);--color-green-base:var(--tailwind-colors-green-500);--color-green-100:var(--tailwind-colors-green-900);--color-green-90:var(--tailwind-colors-green-800);--color-green-80:var(--tailwind-colors-green-700);--color-green-70:var(--tailwind-colors-green-600);--color-green-60:var(--tailwind-colors-green-500);--color-green-50:var(--tailwind-colors-green-400);--color-green-40:var(--tailwind-colors-green-300);--color-green-30:var(--tailwind-colors-green-200);--color-green-20:var(--tailwind-colors-green-100);--color-green-10:var(--tailwind-colors-green-50);--color-red-base:var(--tailwind-colors-red-500);--color-red-100:var(--tailwind-colors-red-900);--color-red-90:var(--tailwind-colors-red-800);--color-red-80:var(--tailwind-colors-red-700);--color-red-70:var(--tailwind-colors-red-600);--color-red-60:var(--tailwind-colors-red-500);--color-red-50:var(--tailwind-colors-red-400);--color-red-40:var(--tailwind-colors-red-300);--color-red-30:var(--tailwind-colors-red-200);--color-red-20:var(--tailwind-colors-red-100);--color-red-10:var(--tailwind-colors-red-50);--color-gray-base:var(--tailwind-colors-gray-500);--color-gray-100:var(--tailwind-colors-gray-900);--color-gray-90:var(--tailwind-colors-gray-800);--color-gray-80:var(--tailwind-colors-gray-700);--color-gray-70:var(--tailwind-colors-gray-600);--color-gray-60:var(--tailwind-colors-gray-500);--color-gray-50:var(--tailwind-colors-gray-400);--color-gray-40:var(--tailwind-colors-gray-300);--color-gray-30:var(--tailwind-colors-gray-200);--color-gray-20:var(--tailwind-colors-gray-100);--color-gray-10:var(--tailwind-colors-gray-50);--color-hotorchid-base:var(--tailwind-colors-pink-500);--color-white-white:var(--tailwind-colors-white);--color-black-black:var(--tailwind-colors-black);--color-black-base:var(--tailwind-colors-stone-900)}.chip{display:flex;background-color:var(--tailwind-colors-gray-50);border:1px solid var(--tailwind-colors-gray-200);padding:0 var(--spacing-xx-small);border-radius:var(--spacing-x-small);align-items:center;color:var(--tailwind-colors-neutral-500);font-family:var(--font-family-system);font-size:var(--font-size-medium);height:var(--spacing-xxx-large);width:-moz-fit-content;width:fit-content;cursor:default}.chip:hover{background-color:var(--tailwind-colors-gray-100)}.chip--active{color:var(--brand-colors-white-100)}.chip--active:hover{filter:brightness(90%)}.chip__content{padding:0 var(--spacing-small);white-space:nowrap}.chip__icon{width:var(--spacing-x-large);height:var(--spacing-x-large)}', a = class {
|
|
5
|
-
constructor(o) {
|
|
6
|
-
r(this, o), this.icon = void 0, this.content = void 0, this.backgroundColor = "#005655", this.active = !1;
|
|
7
|
-
}
|
|
8
|
-
render() {
|
|
9
|
-
const o = {
|
|
10
|
-
background: this.active ? this.backgroundColor : ""
|
|
11
|
-
};
|
|
12
|
-
return l("div", { style: o, class: `chip ${this.active ? "chip--active" : ""}` }, this.icon && l("img", { class: "chip__icon", src: this.icon }), l("div", { class: "chip__content" }, this.content));
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
a.style = i;
|
|
16
|
-
export {
|
|
17
|
-
a as mi_chip
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=mi-chip.entry-81c742a1.mjs.map
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { r as e, c as i } from "./reactcomponent-7fbbd9b2.mjs";
|
|
2
|
-
import "react";
|
|
3
|
-
import "react-dom";
|
|
4
|
-
const o = class {
|
|
5
|
-
constructor(t) {
|
|
6
|
-
e(this, t), this.clicked = i(this, "clicked", 7), this.monospace = !1, this.alignContent = "left", this.label = void 0, this.sortable = void 0, this.sort = void 0, this.binding = void 0, this.fitContent = !1, this.width = "auto";
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Relays the cellContentClicked event from the table component as a clicked event out of the component.
|
|
10
|
-
* @fires clicked
|
|
11
|
-
*/
|
|
12
|
-
cellContentClickedHandler(t) {
|
|
13
|
-
this.clicked.emit(t.detail);
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
o as mi_column
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=mi-column.entry-3a083282.mjs.map
|
|
@@ -1,263 +0,0 @@
|
|
|
1
|
-
import { r as c, c as d, h as n, H as p, g as u } from "./reactcomponent-7fbbd9b2.mjs";
|
|
2
|
-
import { S as m, f as g } from "./sort-order.enum-64ce8998-b75ac596.mjs";
|
|
3
|
-
import "react";
|
|
4
|
-
import "react-dom";
|
|
5
|
-
import "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
|
|
6
|
-
const f = `.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}combo-box-item{display:none}:host{display:inline-block;position:relative;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{transform:rotate(180deg)}.input{position:relative;display:flex;justify-content:flex-start;align-items:center;height:100%;width:100%;font-family:inherit;background:linear-gradient(#f9fafb, #f3f4f6);border-radius:4px;border-width:1px;border-style:solid;border-color:#d1d5db;color:#1c1917;font-size:1rem;font-weight:500;line-height:1rem;padding-right:40px;padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input__svg{margin-left:auto;position:absolute;top:50%;right:-42px}.input__label{padding-top:12px;padding-bottom:12px;margin-right:8px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input__label--from-inner-html{display:flex;flex-direction:row;align-items:center;gap:8px}.input: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 .list{padding:0;margin:0;list-style:none;overflow-y:auto}.content .list__item{cursor:pointer}.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:flex;flex-direction:row;align-items:center;gap:8px}.label__checkbox{margin-right:12px}.label__checkbox--hidden{display:none}`;
|
|
7
|
-
var l;
|
|
8
|
-
(function(e) {
|
|
9
|
-
e.ArrowDown = "ArrowDown", e.ArrowUp = "ArrowUp", e.Enter = "Enter", e.Esc = "Escape";
|
|
10
|
-
})(l || (l = {}));
|
|
11
|
-
const x = class {
|
|
12
|
-
constructor(e) {
|
|
13
|
-
c(this, e), this.change = d(this, "change", 3), this.isFilterSelectionDisabled = !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.filterable = !1, this.selected = [], this.noResultsMessage = "No results found", this.currentItems = [], this.disabled = !1;
|
|
14
|
-
}
|
|
15
|
-
onItemsChanged(e) {
|
|
16
|
-
if (e.some((t) => t.tagName.toLowerCase() !== "combo-box-item"))
|
|
17
|
-
throw new Error("Items contains unknown element(s).");
|
|
18
|
-
if (Object.values(m).includes(this.itemsOrder) && (e = this.getSortedItems(e)), this.currentItems = [...e], this.filter(), !this.filterable) {
|
|
19
|
-
const t = this.currentItems.findIndex((i) => i.selected);
|
|
20
|
-
this.currentItemIndex = t > -1 ? t : 0, this.selectedItemIndex = this.currentItemIndex;
|
|
21
|
-
}
|
|
22
|
-
this.items.forEach((t, i) => {
|
|
23
|
-
t.dataset.index = i.toString();
|
|
24
|
-
}), this.selectFirstMiDropdownItem();
|
|
25
|
-
}
|
|
26
|
-
onCurrentItemsChange() {
|
|
27
|
-
this.isFilterSelectionDisabled = this.currentItems.length === 0;
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
|
|
31
|
-
*
|
|
32
|
-
* @param {ev} ev
|
|
33
|
-
*/
|
|
34
|
-
checkForClickOutside(e) {
|
|
35
|
-
var t;
|
|
36
|
-
!this.hostElement.contains(e.target) && this.noResultsMessage && (this.clearFilter(), this.filterElement.value = (t = this.selected[0]) === null || t === void 0 ? void 0 : t.text, this.open = !1);
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* When clicked on input button we change it's type to text and highlight value that is inside.
|
|
40
|
-
*
|
|
41
|
-
* @param {Event} event
|
|
42
|
-
*/
|
|
43
|
-
onClickExists(e) {
|
|
44
|
-
this.open = !0, e.target.type = "text", this.filterElement.select();
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Mousemove event handler.
|
|
48
|
-
* When the mouse is moved the mouseover event handler is enabled.
|
|
49
|
-
*/
|
|
50
|
-
mouseMoveEventHandler() {
|
|
51
|
-
this.isMouseOverEventDisabled = !1;
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Scroll event handler.
|
|
55
|
-
* The dropdown is closed when the scroll event is trigget outside the dropdown.
|
|
56
|
-
*/
|
|
57
|
-
scrollEventHandler(e) {
|
|
58
|
-
const t = e.target;
|
|
59
|
-
(!t || !this.hostElement.contains(t)) && (this.open = !1);
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Resize event handler.
|
|
63
|
-
* Recalculate the position of the dropdown when the window is resized.
|
|
64
|
-
*/
|
|
65
|
-
resizeEventHandler() {
|
|
66
|
-
this.calculateDropDownPosition();
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Component did load.
|
|
70
|
-
*/
|
|
71
|
-
componentDidLoad() {
|
|
72
|
-
this.createMiDropdownItemsFromDocument(), this.selectFirstMiDropdownItem(), this.enableKeyboardNavigationEvents();
|
|
73
|
-
const e = new IntersectionObserver((t) => {
|
|
74
|
-
t.forEach((i) => {
|
|
75
|
-
i.isIntersecting === !0 && this.filterElement.blur();
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
|
-
this.filterElement !== void 0 && (e.observe(this.filterElement), this.filterElement.addEventListener("keydown", (t) => {
|
|
79
|
-
(t.key === l.ArrowDown || t.key === l.ArrowUp) && t.preventDefault();
|
|
80
|
-
}));
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Component did rener.
|
|
84
|
-
*/
|
|
85
|
-
componentDidRender() {
|
|
86
|
-
this.calculateDropDownPosition(), this.filterable || this.highlightItem(this.currentItemIndex, !0);
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Gets all mi-dropdown-item elements for the mi-dropdown items property.
|
|
90
|
-
*/
|
|
91
|
-
createMiDropdownItemsFromDocument() {
|
|
92
|
-
const e = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll("combo-box-item");
|
|
93
|
-
e.length > 0 && (this.items = Array.from(e));
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Set the first mi-dropdown-item as the textual content of the button.
|
|
97
|
-
*/
|
|
98
|
-
selectFirstMiDropdownItem() {
|
|
99
|
-
var e;
|
|
100
|
-
if (!this.filterable) {
|
|
101
|
-
const t = (e = this.items) === null || e === void 0 ? void 0 : e.findIndex((i) => i.selected);
|
|
102
|
-
this.selected = [this.items[t > -1 ? t : 0]];
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Enables cycling through the items in the content window using arrow up/down keys.
|
|
107
|
-
*/
|
|
108
|
-
enableKeyboardNavigationEvents() {
|
|
109
|
-
this.hostElement.addEventListener("keydown", (e) => {
|
|
110
|
-
if (this.open === !1 && e.key === l.ArrowDown) {
|
|
111
|
-
this.isMouseOverEventDisabled = !0, this.toggleContentWindow(), e.preventDefault();
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
if (this.open === !0 && !this.filterable)
|
|
115
|
-
switch (e.key) {
|
|
116
|
-
case (l.ArrowDown || l.ArrowUp):
|
|
117
|
-
this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), e.preventDefault();
|
|
118
|
-
break;
|
|
119
|
-
case l.ArrowUp:
|
|
120
|
-
this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + this.currentItems.length - 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), e.preventDefault();
|
|
121
|
-
break;
|
|
122
|
-
case l.Enter:
|
|
123
|
-
if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement)
|
|
124
|
-
return;
|
|
125
|
-
this.currentItems[this.currentItemIndex] !== void 0 && this.onSelect(this.currentItems[this.currentItemIndex]), e.preventDefault();
|
|
126
|
-
break;
|
|
127
|
-
}
|
|
128
|
-
e.key === l.Esc && (this.filterable || (this.currentItemIndex = this.selectedItemIndex, this.highlightItem(this.currentItemIndex)), this.toggleContentWindow(), this.clearFilter());
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
/**
|
|
132
|
-
* Updates the currently highlighted item in the markup.
|
|
133
|
-
*
|
|
134
|
-
* @param {number} itemIndex
|
|
135
|
-
*/
|
|
136
|
-
highlightItem(e, t = !1) {
|
|
137
|
-
var i, s;
|
|
138
|
-
const r = this.hostElement.shadowRoot.querySelectorAll(".list__item");
|
|
139
|
-
r.forEach((a) => {
|
|
140
|
-
a.classList.remove(this.highlightedItemClassName);
|
|
141
|
-
}), (i = r[e]) === null || i === void 0 || i.classList.add(this.highlightedItemClassName), t && ((s = r[e]) === null || s === void 0 || s.scrollIntoView({ block: "nearest", inline: "nearest" }));
|
|
142
|
-
}
|
|
143
|
-
/**
|
|
144
|
-
* Get sorted items.
|
|
145
|
-
* The sorting order is defined by the itemsOrder attribute.
|
|
146
|
-
*
|
|
147
|
-
* @param {HTMLMiDropdownItemElement[]} items
|
|
148
|
-
* @returns {HTMLMiDropdownItemElement[]}
|
|
149
|
-
*/
|
|
150
|
-
getSortedItems(e) {
|
|
151
|
-
return this.itemsOrder === m.Asc ? e.sort((t, i) => (t.text || t.innerText).trimStart().toLowerCase().localeCompare((i.text || i.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })) : e.sort((t, i) => (i.text || i.innerText).trimStart().toLowerCase().localeCompare((t.text || t.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })), e;
|
|
152
|
-
}
|
|
153
|
-
/**
|
|
154
|
-
* Update and emit list of selected items.
|
|
155
|
-
*/
|
|
156
|
-
onChangedHandler() {
|
|
157
|
-
this.selected = [...this.items.filter((e) => e.selected)], this.change.emit(this.selected);
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* Toggle visibility of content window.
|
|
161
|
-
*/
|
|
162
|
-
toggleContentWindow() {
|
|
163
|
-
this.open = !this.open;
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* Select or toggle selection of item.
|
|
167
|
-
*
|
|
168
|
-
* @param {HTMLMiDropdownItemElement} item
|
|
169
|
-
*/
|
|
170
|
-
onSelect(e) {
|
|
171
|
-
this.filterable || (this.open = !1, Array.from(this.items).forEach((i) => {
|
|
172
|
-
i.selected = !1;
|
|
173
|
-
}), this.clearFilter()), e.selected = !e.selected, this.currentItemIndex = Number(e.dataset.index), this.selectedItemIndex = this.currentItemIndex, this.onChangedHandler();
|
|
174
|
-
}
|
|
175
|
-
/**
|
|
176
|
-
* Highlights the item that the cursor is hovering in the content window.
|
|
177
|
-
*
|
|
178
|
-
* @param {number} filteredItemsIndex
|
|
179
|
-
*/
|
|
180
|
-
onMouseOver(e) {
|
|
181
|
-
!this.isMouseOverEventDisabled && !this.filterable && (this.highlightItem(e), this.currentItemIndex = e);
|
|
182
|
-
}
|
|
183
|
-
/**
|
|
184
|
-
* Filter items based on input query.
|
|
185
|
-
*
|
|
186
|
-
* @returns {HTMLMiDropdownItemElement[]}
|
|
187
|
-
*/
|
|
188
|
-
filter() {
|
|
189
|
-
if (this.filterElement) {
|
|
190
|
-
const e = this.filterElement.value, t = this.items.map((o) => o.text || o.innerText), i = this.currentItems.length;
|
|
191
|
-
if (e === "")
|
|
192
|
-
return this.currentItemIndex = this.selectedItemIndex, this.currentItems = [...this.items];
|
|
193
|
-
const s = {
|
|
194
|
-
limit: 50,
|
|
195
|
-
allowTypo: !1,
|
|
196
|
-
threshold: -1e4
|
|
197
|
-
}, a = g.go(e, t, s).map((o) => this.items.find((h) => (h.text || h.innerText) === o.target));
|
|
198
|
-
this.currentItems = a, i !== this.currentItems.length && (this.currentItemIndex = 0);
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* Clear filter.
|
|
203
|
-
*/
|
|
204
|
-
clearFilter() {
|
|
205
|
-
var e;
|
|
206
|
-
this.filterElement && (this.filterElement.value = (e = this.selected[0]) === null || e === void 0 ? void 0 : e.text, this.filterElement.blur(), this.currentItems = this.items);
|
|
207
|
-
}
|
|
208
|
-
/**
|
|
209
|
-
* Render input field - combobox.
|
|
210
|
-
*
|
|
211
|
-
* @returns {Host}
|
|
212
|
-
*/
|
|
213
|
-
render() {
|
|
214
|
-
var e;
|
|
215
|
-
const t = n("ul", { class: "list" }, this.currentItems.map((i, s) => this.renderListItem(i, s, this.filterable)));
|
|
216
|
-
return n(p, { class: { open: this.open } }, n("input", { type: "text", class: "input", onFocus: (i) => this.onClickExists(i), ref: (i) => this.filterElement = i, onInput: () => this.filter(), tabIndex: 0, value: (e = this.selected[0]) === null || e === void 0 ? void 0 : e.text }), n("svg", { role: "button", class: "input__svg", part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg", onClick: () => this.toggleContentWindow() }, n("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" })), n("section", { ref: (i) => this.listElement = i, part: "dropdown-container", class: "content" }, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : t));
|
|
217
|
-
}
|
|
218
|
-
/**
|
|
219
|
-
* Helper function to render markup when no items are available to be displayed in the content window.
|
|
220
|
-
*
|
|
221
|
-
* @returns {JSX.Element}
|
|
222
|
-
*/
|
|
223
|
-
renderNoResultsTemplate() {
|
|
224
|
-
return n("div", { class: "empty-page" }, n("p", { class: "empty-page__header" }, this.noResultsMessage));
|
|
225
|
-
}
|
|
226
|
-
/**
|
|
227
|
-
* Helper function for rendering list item.
|
|
228
|
-
*
|
|
229
|
-
* @param {HTMLMiDropdownItemElement} item
|
|
230
|
-
* @param {number} index
|
|
231
|
-
* @param {boolean} showCheckBox
|
|
232
|
-
* @returns {JSX.Element}
|
|
233
|
-
*/
|
|
234
|
-
renderListItem(e, t, i) {
|
|
235
|
-
let s;
|
|
236
|
-
const r = e.getAttribute("title") || e.text || e.innerText;
|
|
237
|
-
return e.innerText.length > 0 ? s = n("div", { class: "label__item label__item--from-inner-html", innerHTML: e.innerHTML }) : s = n("div", { class: "label__item", innerHTML: e.text }), n("li", { class: "list__item", title: r, onMouseOver: () => {
|
|
238
|
-
this.onMouseOver(t);
|
|
239
|
-
} }, n("label", { class: "mi-label label", tabindex: "-1" }, n("input", { class: { label__checkbox: !0, "label__checkbox--hidden": !i, "mi-input": !0 }, type: "checkbox", value: t, checked: e.selected, onChange: () => this.onSelect(e) }), s));
|
|
240
|
-
}
|
|
241
|
-
/**
|
|
242
|
-
* Function for calculating the position of the dropdown list element.
|
|
243
|
-
*/
|
|
244
|
-
calculateDropDownPosition() {
|
|
245
|
-
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;
|
|
246
|
-
const { clientWidth: e, clientHeight: t } = document.documentElement, i = this.hostElement.getBoundingClientRect(), s = this.listElement.getBoundingClientRect(), r = t - i.bottom, a = i.top, o = 580, h = 12;
|
|
247
|
-
e <= s.width || i.right - s.width < 0 && s.right > e ? (this.listElement.style.right = `${h}px`, this.listElement.style.left = `${h}px`, this.listElement.style.minWidth = "unset") : s.right > e ? (this.listElement.style.left = "unset", this.listElement.style.right = `${e - i.right}px`) : (this.listElement.style.left = `${i.left}px`, this.listElement.style.right = "unset"), a > r ? (this.listElement.style.maxHeight = `${Math.min(a, o)}px`, this.listElement.style.top = "unset", this.listElement.style.bottom = `${t - i.top}px`) : (this.listElement.style.top = `${i.bottom}px`, this.listElement.style.bottom = "unset", this.listElement.style.maxHeight = `${Math.min(r - h * 2, o)}px`);
|
|
248
|
-
}
|
|
249
|
-
get hostElement() {
|
|
250
|
-
return u(this);
|
|
251
|
-
}
|
|
252
|
-
static get watchers() {
|
|
253
|
-
return {
|
|
254
|
-
items: ["onItemsChanged"],
|
|
255
|
-
currentItems: ["onCurrentItemsChange"]
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
};
|
|
259
|
-
x.style = f;
|
|
260
|
-
export {
|
|
261
|
-
x as mi_combo_box
|
|
262
|
-
};
|
|
263
|
-
//# sourceMappingURL=mi-combo-box.entry-cae6401a.mjs.map
|
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import { r as s, c as h, h as o, H as c, g } from "./reactcomponent-7fbbd9b2.mjs";
|
|
2
|
-
import { i as l, a as b } from "./utils-ae714467-b07fc3be.mjs";
|
|
3
|
-
import "react";
|
|
4
|
-
import "react-dom";
|
|
5
|
-
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 {
|
|
6
|
-
constructor(e) {
|
|
7
|
-
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;
|
|
8
|
-
}
|
|
9
|
-
onSelectionChangedHandler() {
|
|
10
|
-
this.selectionChanged.emit(this.selected);
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* 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.
|
|
14
|
-
*/
|
|
15
|
-
onRowsChangedHandler() {
|
|
16
|
-
this.tableRows = Array.from(this.rows), this.setHeaderCheckboxState();
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* When the page is set from outside of the components the table needs to show the newly specified page of rows.
|
|
20
|
-
*/
|
|
21
|
-
onPageChangedHandler() {
|
|
22
|
-
this.currentPage = this.page, this.renderTableContent();
|
|
23
|
-
}
|
|
24
|
-
connectedCallback() {
|
|
25
|
-
const e = this.el.querySelectorAll("mi-column");
|
|
26
|
-
this.columns = Array.from(e).map((t) => {
|
|
27
|
-
const i = {
|
|
28
|
-
alignContent: t.alignContent,
|
|
29
|
-
monospace: t.monospace,
|
|
30
|
-
label: l(t.label) ? t.binding : t.label,
|
|
31
|
-
binding: t.binding || null,
|
|
32
|
-
sortable: t.sortable,
|
|
33
|
-
fitContent: !!t.fitContent,
|
|
34
|
-
/* All HTML comments are removed from the template to avoid the issues with the table not displaying any data in IE11 */
|
|
35
|
-
template: t.innerHTML.replace(/<!--[\s\S]*?-->/g, ""),
|
|
36
|
-
columnElement: t,
|
|
37
|
-
width: t.width
|
|
38
|
-
};
|
|
39
|
-
return t.sort && !this.sortByColumn && (this.sortByColumn = { column: i, sortOrder: t.sort === "asc" ? "asc" : "desc" }), i;
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Column header click handler.
|
|
44
|
-
* If the column is sortable the sort order is reversed.
|
|
45
|
-
*
|
|
46
|
-
* @private
|
|
47
|
-
* @param {MouseEvent} event
|
|
48
|
-
* @param {any} column
|
|
49
|
-
*/
|
|
50
|
-
columnHeaderClickHandler(e, t) {
|
|
51
|
-
var i, a;
|
|
52
|
-
if (!l(t.sortable)) {
|
|
53
|
-
let n = "asc";
|
|
54
|
-
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 };
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Sorts table rows.
|
|
59
|
-
*
|
|
60
|
-
* @private
|
|
61
|
-
* @return {Array<any>}
|
|
62
|
-
*/
|
|
63
|
-
sortTableRows() {
|
|
64
|
-
var e, t, i;
|
|
65
|
-
if (this.tableRows.length > 0 && this.sortByColumn) {
|
|
66
|
-
let a;
|
|
67
|
-
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;
|
|
68
|
-
if (n && r)
|
|
69
|
-
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)];
|
|
70
|
-
}
|
|
71
|
-
return this.tableRows;
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Replace template variables (eg. "{id}") with the corresponding value from the data.
|
|
75
|
-
*
|
|
76
|
-
* @private
|
|
77
|
-
* @param {string} template
|
|
78
|
-
* @param {object} data
|
|
79
|
-
* @returns {string}
|
|
80
|
-
*/
|
|
81
|
-
replaceVars(e, t) {
|
|
82
|
-
return e.replace(/\{(.*?)\}/g, (i, a) => a.split(".").reduce((r, d) => r ? r[d] : null, t));
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Remove boolean HTML attributes (eg. checked) that will have a false value based on data. This is necessary since
|
|
86
|
-
* the very presence of the attribute will give it a truthy value.
|
|
87
|
-
*
|
|
88
|
-
* @private
|
|
89
|
-
* @param {string} template
|
|
90
|
-
* @param {array} data
|
|
91
|
-
* @returns {string}
|
|
92
|
-
*/
|
|
93
|
-
removeFalseBooleanAttributes(e, t) {
|
|
94
|
-
return e.replace(/ (checked|disabled|hidden|selected)="\{(.*?)\}"/, (i, a, n) => t[n] === !1 ? "" : a);
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* React to clicks on table rows and emits the internal cellContentClicked event to
|
|
98
|
-
* the column component if clicked on content within a cell.
|
|
99
|
-
*
|
|
100
|
-
* @private
|
|
101
|
-
* @param {MouseEvent} event
|
|
102
|
-
* @param {any} tableRow
|
|
103
|
-
*/
|
|
104
|
-
tableRowClicked(e, t) {
|
|
105
|
-
var i;
|
|
106
|
-
const a = e.target, n = a.closest("td").cellIndex, r = this.selectable ? n - 1 : n;
|
|
107
|
-
if (a.tagName.toLowerCase() !== "td" && this.columns[r]) {
|
|
108
|
-
const d = { detail: t };
|
|
109
|
-
(i = this.columns[r]) === null || i === void 0 || i.columnElement.dispatchEvent(new CustomEvent("cellContentClicked", d));
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
async componentWillLoad() {
|
|
113
|
-
this.rows.length > 0 && (this.tableRows = Array.from(this.rows));
|
|
114
|
-
}
|
|
115
|
-
render() {
|
|
116
|
-
return o(c, null, o("table", { class: "table" }, o("thead", null, o("tr", null, this.renderSelectHeader(), this.columns.map((e) => {
|
|
117
|
-
var t;
|
|
118
|
-
const i = e.fitContent ? "" : e.width || "auto", a = ((t = this.sortByColumn) === null || t === void 0 ? void 0 : t.column) === e ? this.sortByColumn.sortOrder : null;
|
|
119
|
-
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);
|
|
120
|
-
}))), o("tbody", null, this.renderTableContent())), this.tableRows.length === 0 ? this.renderEmptyPage() : null);
|
|
121
|
-
}
|
|
122
|
-
/**
|
|
123
|
-
* If the table is selectable then renderSelectHeader will render the th element with the checkbox to check or uncheck all items in the table.
|
|
124
|
-
*
|
|
125
|
-
* @private
|
|
126
|
-
* @returns {JSX.Element}
|
|
127
|
-
*/
|
|
128
|
-
renderSelectHeader() {
|
|
129
|
-
if (this.selectable)
|
|
130
|
-
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() }));
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* If the table is selectable then this method will render the td for each row in the item to select or unselect the row.
|
|
134
|
-
*
|
|
135
|
-
* @private
|
|
136
|
-
* @param {object} row
|
|
137
|
-
* @returns {JSX.Element}
|
|
138
|
-
*/
|
|
139
|
-
renderSelectRow(e) {
|
|
140
|
-
if (this.selectable)
|
|
141
|
-
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) }));
|
|
142
|
-
}
|
|
143
|
-
/**
|
|
144
|
-
* Helper method to render the tables content.
|
|
145
|
-
*
|
|
146
|
-
* @private
|
|
147
|
-
* @returns {[JSX.Element]}
|
|
148
|
-
*/
|
|
149
|
-
renderTableContent() {
|
|
150
|
-
let e = this.sortTableRows();
|
|
151
|
-
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));
|
|
152
|
-
}
|
|
153
|
-
/**
|
|
154
|
-
* Helper method to render a table row.
|
|
155
|
-
*
|
|
156
|
-
* @private
|
|
157
|
-
* @param {*} tableRow
|
|
158
|
-
* @returns {JSX.Element}
|
|
159
|
-
*/
|
|
160
|
-
renderTableRow(e) {
|
|
161
|
-
const t = [];
|
|
162
|
-
for (const i of this.columns) {
|
|
163
|
-
let a = i.template;
|
|
164
|
-
a > "" ? (a = this.removeFalseBooleanAttributes(a, e), a = this.replaceVars(a, e), t.push(a)) : t.push(e[i.binding]);
|
|
165
|
-
}
|
|
166
|
-
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 })));
|
|
167
|
-
}
|
|
168
|
-
/**
|
|
169
|
-
* Renders en empty page with error message when no table rows are available.
|
|
170
|
-
*
|
|
171
|
-
* @private
|
|
172
|
-
* @returns {JSX.Element}
|
|
173
|
-
*/
|
|
174
|
-
renderEmptyPage() {
|
|
175
|
-
return o("div", { class: "empty-page" }, o("p", { class: "empty-page__header" }, this.emptyPageHeader), o("p", { class: "empty-page__subheader" }, this.emptyPageSubheader));
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* The event handler for the onchange event for the checkboxes in the selectable column.
|
|
179
|
-
*
|
|
180
|
-
* @private
|
|
181
|
-
* @param {EventData} event
|
|
182
|
-
* @param {object} row
|
|
183
|
-
*/
|
|
184
|
-
selectOnChangeHandler(e, t) {
|
|
185
|
-
e.target.checked ? this.selected.add(t) : this.selected.delete(t), this.setHeaderCheckboxState(), this.numberOfSelectedRows = this.selected.size, e.stopPropagation();
|
|
186
|
-
}
|
|
187
|
-
/**
|
|
188
|
-
* Set the state of the checkbox in the table header.
|
|
189
|
-
* The state can be either checked, unchecked or indeterminate.
|
|
190
|
-
*/
|
|
191
|
-
setHeaderCheckboxState() {
|
|
192
|
-
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);
|
|
193
|
-
}
|
|
194
|
-
/**
|
|
195
|
-
* The event handler for the onchange event for the checkbox in the selectable column header.
|
|
196
|
-
*
|
|
197
|
-
* @private
|
|
198
|
-
* @param {EventData} event
|
|
199
|
-
*/
|
|
200
|
-
selectHeaderOnChangeHandler() {
|
|
201
|
-
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;
|
|
202
|
-
}
|
|
203
|
-
get el() {
|
|
204
|
-
return g(this);
|
|
205
|
-
}
|
|
206
|
-
static get watchers() {
|
|
207
|
-
return {
|
|
208
|
-
numberOfSelectedRows: ["onSelectionChangedHandler"],
|
|
209
|
-
rows: ["onRowsChangedHandler"],
|
|
210
|
-
page: ["onPageChangedHandler"]
|
|
211
|
-
};
|
|
212
|
-
}
|
|
213
|
-
}, 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) => {
|
|
214
|
-
const a = Date.parse(t[e]), n = Date.parse(i[e]);
|
|
215
|
-
return a > n ? 1 : a < n ? -1 : 0;
|
|
216
|
-
}, w = (e) => (t, i) => {
|
|
217
|
-
const a = Date.parse(i[e]), n = Date.parse(t[e]);
|
|
218
|
-
return a > n ? 1 : a < n ? -1 : 0;
|
|
219
|
-
};
|
|
220
|
-
m.style = p;
|
|
221
|
-
export {
|
|
222
|
-
m as mi_data_table
|
|
223
|
-
};
|
|
224
|
-
//# sourceMappingURL=mi-data-table.entry-d4c3f445.mjs.map
|