Fixed broken tw-elements link

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

package.json

@@ -1,17 +1,17 @@
 {
   "devDependencies": {
-    "@types/leaflet": "^1.9.1",
-    "@types/lz-string": "^1.3.34",
+    "@types/leaflet": "^1.9.3",
+    "@types/lz-string": "^1.5.0",
     "@types/pubsub-js": "^1.8.3",
     "cssnano": "^5.1.15",
     "leaflet-arrowheads": "^1.4.0",
-    "leaflet-geometryutil": "0.10.1",
+    "leaflet-geometryutil": "^0.10.2",
     "parcel": "^2.8.3"
   },
   "dependencies": {
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "tw-elements": "^1.0.0-beta1"
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
+    "tw-elements": "^1.0.0-beta2"
   },
   "alias": {
     "leaflet": {
@@ -39,5 +39,6 @@
       "global": "leaflet-arrowheads"
     }
   },
-  "packageManager": "yarn@3.2.3"
-}
+  "packageManager": "yarn@3.5.0",
+  "version": "0.0.0"
+}

src/scripts/MapContainer.ts

@@ -1,5 +1,7 @@
 import * as L from 'leaflet';
 import PubSub from 'pubsub-js';
+import { Tab, Modal, initTE } from 'tw-elements'
+
 import { ModalFilterLayer } from './layers/ModalFilterLayer';
 import { IMapLayer } from './layers/IMapLayer';
 import { FileManager } from './FileManager';
@@ -56,6 +58,8 @@ export class MapContainer {
         this.addTileLayer();
 
         this.setupCloseHelpButtons();
+
+        initTE({ Tab, Modal }, true);
     }
 
     private setupPanes = (map: L.Map) => {

src/styles/help.css

@@ -55,7 +55,6 @@
 
 #help {
   height: 0;
-  background: rgba(0, 0, 0, 0.7);
   left: 50%;
   top: 10%;
   transform: translate(-50%, -10%);

src/styles/index.css

@@ -1,12 +1,13 @@
-@tailwind components;
-@tailwind utilities;
-
 @import "./cursors.css";
 @import "./legend.css";
 @import "./modal.css";
 @import "./toolbar.css";
 @import "./mapmanager.css";
 @import "./help.css";
+@import "npm:tw-elements/dist/css/tw-elements.min.css";
+
+@tailwind components;
+@tailwind utilities;
 
 #map {
   height: 100vh;
@@ -21,7 +22,11 @@ h2 {
   @apply font-medium leading-tight text-xl mt-0 mb-2;
 }
 
-.hide {
+li {
+  list-style-type: none;
+}
+
+.hidden {
   display: none;
 }
 
@@ -65,7 +70,6 @@ ul.popup-buttons {
 }
 
 ul.popup-buttons li {
-  list-style: none;
   display: block;
   flex: 0 1 auto; /* Default */
   justify-content: center;

src/styles/toolbar.css

@@ -38,6 +38,7 @@
   position: absolute;
   display: inline;
   white-space: nowrap;
+  padding: 0;
 }
 
 .toolbar li .subToolbar > li {

tailwind.config.js

@@ -2,15 +2,17 @@ module.exports = {
   future: {
   },
   content: [
-    "./src/**/*.{html,js,ts}, './node_modules/tw-elements/dist/js/**/*.js'"
+    "./src/**/*.{html,js,ts}",
+    "./node_modules/tw-elements/dist/js/**/*.js"
   ],
   theme: {
     extend: {},
   },
   variants: {},
   plugins: [
-    require('tw-elements/dist/plugin')
+    require("tw-elements/dist/plugin.cjs")
   ],
   corePlugins: {
     preflight: false,
-  }}
+  }
+}