utopia-ui 3.0.99 → 3.0.100

package/dist/TagView-C6Dx0Dh8.js

@@ -0,0 +1,2421 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, useContext, useState, useReducer, useCallback, useEffect, createRef, useRef } from 'react';
+import { toast } from 'react-toastify';
+import require$$0, { DomEvent } from 'leaflet';
+import Markdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import { useNavigate } from 'react-router-dom';
+import SVG from 'react-inlinesvg';
+
+const ClusterRefContext = createContext({
+    clusterRef: {},
+    setClusterRef: () => { },
+});
+function useClusterRefManager() {
+    const [clusterRef, setClusterRef] = useState({});
+    return { clusterRef, setClusterRef };
+}
+const ClusterRefProvider = ({ children }) => (jsx(ClusterRefContext.Provider, { value: useClusterRefManager(), children: children }));
+const useClusterRef = () => {
+    const { clusterRef } = useContext(ClusterRefContext);
+    return clusterRef;
+};
+const useSetClusterRef = () => {
+    const { setClusterRef } = useContext(ClusterRefContext);
+    return setClusterRef;
+};
+
+const LayerContext = createContext({
+    layers: [],
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    addLayer: () => { },
+});
+function useLayerManager(initialLayers) {
+    const [layers, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD LAYER':
+                // eslint-disable-next-line no-case-declarations
+                const exist = state.find((layer) => layer.name === action.layer.name);
+                if (!exist) {
+                    return [...state, action.layer];
+                }
+                else
+                    return state;
+            default:
+                throw new Error();
+        }
+    }, initialLayers);
+    const addLayer = useCallback((layer) => {
+        dispatch({
+            type: 'ADD LAYER',
+            layer,
+        });
+    }, []);
+    return { layers, addLayer };
+}
+const LayersProvider = ({ initialLayers, children }) => (jsx(LayerContext.Provider, { value: useLayerManager(initialLayers), children: children }));
+const useLayers = () => {
+    const { layers } = useContext(LayerContext);
+    return layers;
+};
+const useAddLayer = () => {
+    const { addLayer } = useContext(LayerContext);
+    return addLayer;
+};
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowDimensions;
+}
+
+const FilterContext = createContext({
+    filterTags: [],
+    searchPhrase: '',
+    visibleLayers: [],
+    visibleGroupTypes: [],
+    addFilterTag: () => { },
+    removeFilterTag: () => { },
+    resetFilterTags: () => { },
+    setSearchPhrase: () => { },
+    addVisibleLayer: () => { },
+    toggleVisibleLayer: () => { },
+    resetVisibleLayers: () => { },
+    isLayerVisible: () => true,
+    addVisibleGroupType: () => { },
+    toggleVisibleGroupType: () => { },
+    isGroupTypeVisible: () => true,
+});
+function useFilterManager(initialTags) {
+    const [filterTags, dispatchTags] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD_TAG':
+                const exist = state.find((tag) => tag.id === action.tag.id);
+                if (!exist) {
+                    return [...state, action.tag];
+                }
+                else
+                    return state;
+            case 'REMOVE_TAG':
+                return state.filter(({ name }) => name !== action.name);
+            case 'RESET_TAGS':
+                return initialTags;
+            default:
+                throw new Error();
+        }
+    }, initialTags);
+    const initialLayers = useLayers();
+    const navigate = useNavigate();
+    const windowDimensions = useWindowDimensions();
+    const [visibleLayers, dispatchLayers] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD_LAYER':
+                const exist1 = state.find((layer) => layer.name === action.layer.name);
+                if (!exist1) {
+                    return [...state, action.layer];
+                }
+                else
+                    return state;
+            case 'TOGGLE_LAYER':
+                const exist2 = state.some((layer) => layer.name === action.layer.name);
+                if (exist2)
+                    return state.filter(({ name }) => name !== action.layer.name);
+                else
+                    return [...state, action.layer];
+            case 'RESET_LAYERS':
+                return initialLayers;
+            default:
+                throw new Error();
+        }
+    }, initialLayers);
+    const allLayers = useLayers();
+    useEffect(() => {
+        if (allLayers.length === 0)
+            return;
+        const visibleNames = visibleLayers.map((l) => l.name);
+        const allNames = allLayers.map((l) => l.name);
+        const params = new URLSearchParams(location.search);
+        const allVisible = visibleNames.length === allNames.length &&
+            visibleNames.every((name) => allNames.includes(name));
+        if (allVisible) {
+            params.delete('layers');
+        }
+        else {
+            params.set('layers', visibleNames.join(','));
+        }
+        navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }, [visibleLayers, allLayers, navigate]);
+    const [visibleGroupTypes, dispatchGroupTypes] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD_GROUP_TYPE':
+                const exist1 = state.find((groupType) => groupType === action.groupType);
+                if (!exist1) {
+                    return [...state, action.groupType];
+                }
+                else
+                    return state;
+            case 'TOGGLE_GROUP_TYPE':
+                const exist2 = state.some((groupType) => groupType === action.groupType);
+                if (exist2)
+                    return state.filter((groupType) => groupType !== action.groupType);
+                else
+                    return [...state, action.groupType];
+            case 'RESET_GROUP_TYPE':
+                return [];
+            default:
+                throw new Error();
+        }
+    }, []);
+    const [searchPhrase, searchPhraseSet] = useState('');
+    const addFilterTag = useCallback((tag) => {
+        const params = new URLSearchParams(location.search);
+        const urlTags = params.get('tags');
+        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
+        if (!decodedTags.includes(tag.name)) {
+            params.set('tags', `${urlTags || ''}${urlTags ? ';' : ''}${tag.name}`);
+        }
+        if (windowDimensions.width < 786 && location.pathname.split('/').length > 2)
+            navigate('/' + `${params ? `?${params}` : ''}`);
+        else
+            navigate(location.pathname + `${params ? `?${params}` : ''}`);
+        dispatchTags({
+            type: 'ADD_TAG',
+            tag,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const removeFilterTag = useCallback((name) => {
+        const params = new URLSearchParams(window.location.search);
+        const urlTags = params.get('tags');
+        let newUrlTags = '';
+        const tags = urlTags?.split(';');
+        if (tags?.length === 0 && urlTags?.length && urlTags.length > 0)
+            tags[0] = urlTags;
+        tags?.map((urlTag) => {
+            if (!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase())) {
+                newUrlTags = newUrlTags + `${newUrlTags === '' ? urlTag : `;${urlTag}`}`;
+            }
+            return null;
+        });
+        if (newUrlTags !== '') {
+            params.set('tags', `${newUrlTags}`);
+            navigate(location.pathname + `${params ? `?${params}` : ''}`);
+        }
+        else {
+            params.delete('tags');
+            navigate(location.pathname + `${params ? `?${params}` : ''}`);
+        }
+        dispatchTags({
+            type: 'REMOVE_TAG',
+            name,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const resetFilterTags = useCallback(() => {
+        dispatchTags({
+            type: 'RESET_TAGS',
+        });
+    }, []);
+    const addVisibleLayer = (layer) => {
+        dispatchLayers({
+            type: 'ADD_LAYER',
+            layer,
+        });
+    };
+    const toggleVisibleLayer = (layer) => {
+        dispatchLayers({
+            type: 'TOGGLE_LAYER',
+            layer,
+        });
+    };
+    const resetVisibleLayers = useCallback(() => {
+        dispatchLayers({
+            type: 'RESET_LAYERS',
+        });
+    }, []);
+    const isLayerVisible = useCallback((layer) => {
+        return visibleLayers.some((l) => l.name === layer.name);
+    }, [visibleLayers]);
+    const addVisibleGroupType = (groupType) => {
+        dispatchGroupTypes({
+            type: 'ADD_GROUP_TYPE',
+            groupType,
+        });
+    };
+    const toggleVisibleGroupType = (groupType) => {
+        dispatchGroupTypes({
+            type: 'TOGGLE_GROUP_TYPE',
+            groupType,
+        });
+    };
+    const isGroupTypeVisible = useCallback((groupType) => {
+        return visibleGroupTypes.some((gt) => gt === groupType);
+    }, [visibleGroupTypes]);
+    const setSearchPhrase = useCallback((phrase) => {
+        searchPhraseSet(phrase);
+    }, []);
+    return {
+        filterTags,
+        addFilterTag,
+        removeFilterTag,
+        resetFilterTags,
+        setSearchPhrase,
+        searchPhrase,
+        visibleLayers,
+        toggleVisibleLayer,
+        resetVisibleLayers,
+        isLayerVisible,
+        addVisibleLayer,
+        visibleGroupTypes,
+        addVisibleGroupType,
+        toggleVisibleGroupType,
+        isGroupTypeVisible,
+    };
+}
+const FilterProvider = ({ initialTags, children }) => (jsx(FilterContext.Provider, { value: useFilterManager(initialTags), children: children }));
+const useFilterTags = () => {
+    const { filterTags } = useContext(FilterContext);
+    return filterTags;
+};
+const useAddFilterTag = () => {
+    const { addFilterTag } = useContext(FilterContext);
+    return addFilterTag;
+};
+const useRemoveFilterTag = () => {
+    const { removeFilterTag } = useContext(FilterContext);
+    return removeFilterTag;
+};
+const useResetFilterTags = () => {
+    const { resetFilterTags } = useContext(FilterContext);
+    return resetFilterTags;
+};
+const useAddVisibleLayer = () => {
+    const { addVisibleLayer } = useContext(FilterContext);
+    return addVisibleLayer;
+};
+const useToggleVisibleLayer = () => {
+    const { toggleVisibleLayer } = useContext(FilterContext);
+    return toggleVisibleLayer;
+};
+const useIsLayerVisible = () => {
+    const { isLayerVisible } = useContext(FilterContext);
+    return isLayerVisible;
+};
+const useAddVisibleGroupType = () => {
+    const { addVisibleGroupType } = useContext(FilterContext);
+    return addVisibleGroupType;
+};
+const useToggleVisibleGroupType = () => {
+    const { toggleVisibleGroupType } = useContext(FilterContext);
+    return toggleVisibleGroupType;
+};
+const useIsGroupTypeVisible = () => {
+    const { isGroupTypeVisible } = useContext(FilterContext);
+    return isGroupTypeVisible;
+};
+const useVisibleGroupType = () => {
+    const { visibleGroupTypes } = useContext(FilterContext);
+    return visibleGroupTypes;
+};
+
+const ItemContext = createContext({
+    items: [],
+    addItem: () => { },
+    updateItem: () => { },
+    removeItem: () => { },
+    resetItems: () => { },
+    setItemsApi: () => { },
+    setItemsData: () => { },
+    allItemsLoaded: false,
+});
+function useItemsManager(initialItems) {
+    const addLayer = useAddLayer();
+    const [allItemsLoaded, setallItemsLoaded] = useState(false);
+    const [items, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD':
+                // eslint-disable-next-line no-case-declarations
+                const exist = state.find((item) => item.id === action.item.id);
+                if (!exist) {
+                    return [...state, action.item];
+                }
+                else
+                    return state;
+            case 'UPDATE':
+                return state.map((item) => {
+                    if (item.id === action.item.id) {
+                        return action.item;
+                    }
+                    return item;
+                });
+            case 'REMOVE':
+                return state.filter((item) => item !== action.item);
+            case 'RESET':
+                return state.filter((item) => item.layer?.name !== action.layer.name);
+            default:
+                throw new Error();
+        }
+    }, initialItems);
+    const setItemsApi = useCallback(async (layer) => {
+        addLayer(layer);
+        const result = await toast.promise(layer.api.getItems(), {
+            pending: `loading ${layer.name} ...`,
+            success: `${layer.name} loaded`,
+            error: {
+                render({ data }) {
+                    return `${data}`;
+                },
+            },
+        });
+        result.map((item) => {
+            dispatch({ type: 'ADD', item: { ...item, layer } });
+            return null;
+        });
+        setallItemsLoaded(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const setItemsData = useCallback((layer) => {
+        addLayer(layer);
+        layer.data?.map((item) => {
+            dispatch({ type: 'ADD', item: { ...item, layer } });
+            return null;
+        });
+        setallItemsLoaded(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const addItem = useCallback(async (item) => {
+        dispatch({
+            type: 'ADD',
+            item,
+        });
+    }, []);
+    const updateItem = useCallback(async (item) => {
+        dispatch({
+            type: 'UPDATE',
+            item,
+        });
+    }, []);
+    const removeItem = useCallback((item) => {
+        dispatch({
+            type: 'REMOVE',
+            item,
+        });
+    }, []);
+    const resetItems = useCallback((layer) => {
+        dispatch({
+            type: 'RESET',
+            layer,
+        });
+    }, []);
+    return {
+        items,
+        updateItem,
+        addItem,
+        removeItem,
+        resetItems,
+        setItemsApi,
+        setItemsData,
+        allItemsLoaded,
+    };
+}
+const ItemsProvider = ({ initialItems, children }) => (jsx(ItemContext.Provider, { value: useItemsManager(initialItems), children: children }));
+const useItems = () => {
+    const { items } = useContext(ItemContext);
+    return items;
+};
+const useAddItem = () => {
+    const { addItem } = useContext(ItemContext);
+    return addItem;
+};
+const useUpdateItem = () => {
+    const { updateItem } = useContext(ItemContext);
+    return updateItem;
+};
+const useRemoveItem = () => {
+    const { removeItem } = useContext(ItemContext);
+    return removeItem;
+};
+const useSetItemsApi = () => {
+    const { setItemsApi } = useContext(ItemContext);
+    return setItemsApi;
+};
+const useSetItemsData = () => {
+    const { setItemsData } = useContext(ItemContext);
+    return setItemsData;
+};
+const useAllItemsLoaded = () => {
+    const { allItemsLoaded } = useContext(ItemContext);
+    return allItemsLoaded;
+};
+
+const LeafletRefsContext = createContext({
+    leafletRefs: {},
+    addMarker: () => { },
+    addPopup: () => { },
+});
+function useLeafletRefsManager(initialLeafletRefs) {
+    const [leafletRefs, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD_MARKER':
+                return {
+                    ...state,
+                    [action.item.id]: {
+                        ...state[action.item.id],
+                        marker: action.marker,
+                        item: action.item,
+                    },
+                };
+            case 'ADD_POPUP':
+                return {
+                    ...state,
+                    [action.item.id]: { ...state[action.item.id], popup: action.popup, item: action.item },
+                };
+            default:
+                throw new Error();
+        }
+    }, initialLeafletRefs);
+    const addMarker = useCallback((item, marker) => {
+        dispatch({
+            type: 'ADD_MARKER',
+            item,
+            marker,
+        });
+    }, []);
+    const addPopup = useCallback((item, popup) => {
+        dispatch({
+            type: 'ADD_POPUP',
+            item,
+            popup,
+        });
+    }, []);
+    return { leafletRefs, addMarker, addPopup };
+}
+const LeafletRefsProvider = ({ initialLeafletRefs, children }) => (jsx(LeafletRefsContext.Provider, { value: useLeafletRefsManager(initialLeafletRefs), children: children }));
+const useLeafletRefs = () => {
+    const { leafletRefs } = useContext(LeafletRefsContext);
+    return leafletRefs;
+};
+const useAddMarker = () => {
+    const { addMarker } = useContext(LeafletRefsContext);
+    return addMarker;
+};
+const useAddPopup = () => {
+    const { addPopup } = useContext(LeafletRefsContext);
+    return addPopup;
+};
+
+const AuthContext = createContext({
+    isAuthenticated: false,
+    user: null,
+    login: () => Promise.reject(Error('Unimplemented')),
+    register: () => Promise.reject(Error('Unimplemented')),
+    loading: false,
+    logout: () => Promise.reject(Error('Unimplemented')),
+    updateUser: () => Promise.reject(Error('Unimplemented')),
+    token: '',
+    requestPasswordReset: () => Promise.reject(Error('Unimplemented')),
+    passwordReset: () => Promise.reject(Error('Unimplemented')),
+});
+/**
+ * @category Auth
+ */
+const AuthProvider = ({ userApi, children }) => {
+    const [user, setUser] = useState(null);
+    const [token, setToken] = useState();
+    const [loading, setLoading] = useState(false);
+    const isAuthenticated = !!user;
+    useEffect(() => {
+        setLoading(true);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        loadUser();
+        setLoading(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    async function loadUser() {
+        try {
+            const token = await userApi.getToken();
+            setToken(token);
+            if (token) {
+                const me = await userApi.getUser();
+                setUser(me);
+                setLoading(false);
+                return me;
+            }
+            else
+                return undefined;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            setLoading(false);
+            return undefined;
+        }
+    }
+    const login = async (credentials) => {
+        setLoading(true);
+        try {
+            const user = await userApi.login(credentials.email, credentials.password);
+            setToken(user?.access_token);
+            return await loadUser();
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    const register = async (credentials, userName) => {
+        setLoading(true);
+        try {
+            /* const res = */ await userApi.register(credentials.email, credentials.password, userName);
+            return await login(credentials);
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    const logout = async () => {
+        try {
+            await userApi.logout();
+            setUser(null);
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    const updateUser = async (user) => {
+        setLoading(true);
+        try {
+            const updatedUser = await userApi.updateUser(user);
+            setUser(updatedUser);
+            await loadUser();
+            setLoading(false);
+            return updatedUser;
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    const requestPasswordReset = async (email, resetUrl) => {
+        setLoading(true);
+        try {
+            await userApi.requestPasswordReset(email, resetUrl);
+            return setLoading(false);
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    const passwordReset = async (token, newPassword) => {
+        setLoading(true);
+        try {
+            await userApi.passwordReset(token, newPassword);
+            return setLoading(false);
+        }
+        catch (error) {
+            setLoading(false);
+            throw error;
+        }
+    };
+    return (jsx(AuthContext.Provider, { value: {
+            isAuthenticated,
+            user,
+            login,
+            register,
+            loading,
+            logout,
+            updateUser,
+            token,
+            requestPasswordReset,
+            passwordReset,
+        }, children: children }));
+};
+const useAuth = () => useContext(AuthContext);
+
+const PermissionContext = createContext({
+    permissions: [],
+    setPermissionApi: () => { },
+    setPermissionData: () => { },
+    setAdminRole: () => { },
+    hasUserPermission: () => true,
+});
+function usePermissionsManager(initialPermissions) {
+    const [permissions, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD':
+                // eslint-disable-next-line no-case-declarations
+                const exist = state.find((permission) => permission.id === action.permission.id);
+                if (!exist) {
+                    return [...state, action.permission];
+                }
+                else
+                    return state;
+            case 'REMOVE':
+                return state.filter(({ id }) => id !== action.id);
+            default:
+                throw new Error();
+        }
+    }, initialPermissions);
+    const [adminRole, setAdminRole] = useState(null);
+    const { user } = useAuth();
+    const setPermissionApi = useCallback(async (api) => {
+        const result = await api.getItems();
+        result.map((permission) => {
+            dispatch({ type: 'ADD', permission });
+            return null;
+        });
+    }, []);
+    const setPermissionData = useCallback((data) => {
+        data.map((permission) => {
+            dispatch({ type: 'ADD', permission });
+            return null;
+        });
+    }, []);
+    const hasUserPermission = useCallback((collectionName, action, item, layer) => {
+        const evaluateCondition = (condition) => {
+            if (condition.user_created?._eq === '$CURRENT_USER') {
+                return item?.user_created?.id === user?.id;
+            }
+            if (condition.public_edit?._eq === true) {
+                return item?.public_edit === true;
+            }
+            return false;
+        };
+        const evaluatePermissions = (permissionConditions) => {
+            if (!permissionConditions?._and) {
+                return true;
+            }
+            return permissionConditions._and.every((andCondition) => andCondition._or
+                ? andCondition._or.some((orCondition) => evaluateCondition(orCondition))
+                : evaluateCondition(andCondition));
+        };
+        if (collectionName === 'items' && action === 'create' && layer?.public_edit_items)
+            return true;
+        // Bedingung für leere Berechtigungen nur, wenn NICHT item und create
+        if (permissions.length === 0)
+            return true;
+        else if (user && user.role?.id === adminRole)
+            return true;
+        else {
+            return permissions.some((p) => p.action === action &&
+                p.collection === collectionName &&
+                ((p.policy?.name === user?.role?.name &&
+                    (!item || evaluatePermissions(p.permissions))) ||
+                    (p.policy?.name === '$t:public_label' &&
+                        (layer?.public_edit_items || item?.layer?.public_edit_items) &&
+                        (!item || evaluatePermissions(p.permissions)))));
+        }
+    }, [permissions, user, adminRole]);
+    return { permissions, setPermissionApi, setPermissionData, setAdminRole, hasUserPermission };
+}
+const PermissionsProvider = ({ initialPermissions, children, }) => (jsx(PermissionContext.Provider, { value: usePermissionsManager(initialPermissions), children: children }));
+const useSetPermissionApi = () => {
+    const { setPermissionApi } = useContext(PermissionContext);
+    return setPermissionApi;
+};
+const useSetPermissionData = () => {
+    const { setPermissionData } = useContext(PermissionContext);
+    return setPermissionData;
+};
+const useHasUserPermission = () => {
+    const { hasUserPermission } = useContext(PermissionContext);
+    return hasUserPermission;
+};
+const useSetAdminRole = () => {
+    const { setAdminRole } = useContext(PermissionContext);
+    return setAdminRole;
+};
+
+const SelectPositionContext = createContext({
+    selectPosition: null,
+    setSelectPosition: () => { },
+    setMarkerClicked: () => { },
+    setMapClicked: () => { },
+});
+function useSelectPositionManager() {
+    const [selectPosition, setSelectPosition] = useState(null);
+    const [markerClicked, setMarkerClicked] = useState();
+    const [mapClicked, setMapClicked] = useState();
+    const updateItem = useUpdateItem();
+    const hasUserPermission = useHasUserPermission();
+    useEffect(() => {
+        if (selectPosition &&
+            markerClicked &&
+            'text' in selectPosition &&
+            markerClicked.id !== selectPosition.id) {
+            itemUpdateParent({ ...selectPosition, parent: markerClicked.id });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [markerClicked]);
+    useEffect(() => {
+        if (selectPosition != null) {
+            // selectPosition can be null, Layer or Item
+            if ('menuIcon' in selectPosition) {
+                // if selectPosition is a Layer
+                mapClicked &&
+                    mapClicked.setItemFormPopup({
+                        layer: selectPosition,
+                        position: mapClicked.position,
+                    });
+                setSelectPosition(null);
+            }
+            if ('text' in selectPosition) {
+                // if selectPosition is an Item
+                const position = mapClicked?.position.lng &&
+                    {
+                        type: 'Point',
+                        coordinates: [mapClicked.position.lng, mapClicked.position.lat],
+                    };
+                position && itemUpdatePosition({ ...selectPosition, position });
+                setSelectPosition(null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mapClicked]);
+    const itemUpdateParent = async (updatedItem) => {
+        if (markerClicked?.layer?.api?.collectionName &&
+            hasUserPermission(markerClicked.layer.api.collectionName, 'update', markerClicked)) {
+            let success = false;
+            try {
+                await updatedItem.layer?.api?.updateItem({
+                    id: updatedItem.id,
+                    parent: updatedItem.parent,
+                    position: null,
+                });
+                success = true;
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                toast.error(error.toString());
+            }
+            if (success) {
+                await updateItem({ ...updatedItem, parent: updatedItem.parent, position: undefined });
+                await linkItem(updatedItem.id);
+                toast.success('Item position updated');
+                setSelectPosition(null);
+                setMarkerClicked(null);
+            }
+        }
+        else {
+            setSelectPosition(null);
+            toast.error("you don't have permission to add items to " + markerClicked?.name);
+        }
+    };
+    const itemUpdatePosition = async (updatedItem) => {
+        let success = false;
+        try {
+            await updatedItem.layer?.api?.updateItem({
+                id: updatedItem.id,
+                position: updatedItem.position,
+            });
+            success = true;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            toast.error(error.toString());
+        }
+        if (success) {
+            updateItem(updatedItem);
+            toast.success('Item position updated');
+        }
+    };
+    const linkItem = async (id) => {
+        if (markerClicked) {
+            const newRelations = markerClicked.relations || [];
+            if (!newRelations.some((r) => r.related_items_id === id)) {
+                newRelations.push({ items_id: markerClicked.id, related_items_id: id });
+                const updatedItem = { id: markerClicked.id, relations: newRelations };
+                let success = false;
+                try {
+                    await markerClicked.layer?.api?.updateItem(updatedItem);
+                    success = true;
+                    // eslint-disable-next-line no-catch-all/no-catch-all
+                }
+                catch (error) {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    toast.error(error.toString());
+                }
+                if (success) {
+                    updateItem({ ...markerClicked, relations: newRelations });
+                    toast.success('Item linked');
+                }
+            }
+        }
+    };
+    return { selectPosition, setSelectPosition, setMarkerClicked, setMapClicked };
+}
+const SelectPositionProvider = ({ children }) => (jsx(SelectPositionContext.Provider, { value: useSelectPositionManager(), children: children }));
+const useSelectPosition = () => {
+    const { selectPosition } = useContext(SelectPositionContext);
+    return selectPosition;
+};
+const useSetSelectPosition = () => {
+    const { setSelectPosition } = useContext(SelectPositionContext);
+    return setSelectPosition;
+};
+const useSetMarkerClicked = () => {
+    const { setMarkerClicked } = useContext(SelectPositionContext);
+    return setMarkerClicked;
+};
+const useSetMapClicked = () => {
+    const { setMapClicked } = useContext(SelectPositionContext);
+    return setMapClicked;
+};
+
+const hashTagRegex = /(#+[a-zA-Z0-9À-ÖØ-öø-ʸ_-]{1,})/g;
+
+const TagContext = createContext({
+    tags: [],
+    addTag: () => { },
+    setTagApi: () => { },
+    setTagData: () => { },
+    getItemTags: () => [],
+    allTagsLoaded: false,
+});
+function useTagsManager(initialTags) {
+    const [allTagsLoaded, setallTagsLoaded] = useState(false);
+    const [tagCount, setTagCount] = useState(0);
+    const [tags, dispatch] = useReducer((state, action) => {
+        switch (action.type) {
+            case 'ADD':
+                // eslint-disable-next-line no-case-declarations
+                const exist = state.find((tag) => tag.name.toLocaleLowerCase() === action.tag.name.toLocaleLowerCase());
+                if (!exist) {
+                    const newState = [...state, { ...action.tag }];
+                    if (tagCount === newState.length)
+                        setallTagsLoaded(true);
+                    return newState;
+                }
+                else
+                    return state;
+            default:
+                throw new Error();
+        }
+    }, initialTags);
+    const [api, setApi] = useState({});
+    const setTagApi = useCallback(async (api) => {
+        setApi(api);
+        const result = await api.getItems();
+        setTagCount(result.length);
+        if (tagCount === 0)
+            setallTagsLoaded(true);
+        if (result) {
+            result.map((tag) => {
+                // tag.name = tag.name.toLocaleLowerCase();
+                dispatch({ type: 'ADD', tag });
+                return null;
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const setTagData = useCallback((data) => {
+        data.map((tag) => {
+            // tag.name = tag.name.toLocaleLowerCase();
+            dispatch({ type: 'ADD', tag });
+            return null;
+        });
+    }, []);
+    const addTag = (tag) => {
+        dispatch({
+            type: 'ADD',
+            tag,
+        });
+        if (!tags.some((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) {
+            api.createItem && api.createItem(tag);
+        }
+    };
+    const getItemTags = useCallback((item) => {
+        const text = item.text;
+        const itemTagStrings = text?.match(hashTagRegex);
+        const itemTags = [];
+        itemTagStrings?.map((tag) => {
+            if (tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                itemTags.push(tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()));
+            }
+            return null;
+        });
+        // Could be refactored as it occurs in multiple places
+        item.offers?.forEach((o) => {
+            const offer = tags.find((t) => t.id === o.tags_id);
+            offer && itemTags.push(offer);
+        });
+        item.needs?.forEach((n) => {
+            const need = tags.find((t) => t.id === n.tags_id);
+            need && itemTags.push(need);
+        });
+        return itemTags;
+    }, [tags]);
+    return { tags, addTag, setTagApi, setTagData, getItemTags, allTagsLoaded };
+}
+const TagsProvider = ({ initialTags, children }) => (jsx(TagContext.Provider, { value: useTagsManager(initialTags), children: children }));
+const useTags = () => {
+    const { tags } = useContext(TagContext);
+    return tags;
+};
+const useAddTag = () => {
+    const { addTag } = useContext(TagContext);
+    return addTag;
+};
+const useSetTagApi = () => {
+    const { setTagApi } = useContext(TagContext);
+    return setTagApi;
+};
+const useSetTagData = () => {
+    const { setTagData } = useContext(TagContext);
+    return setTagData;
+};
+const useGetItemTags = () => {
+    const { getItemTags } = useContext(TagContext);
+    return getItemTags;
+};
+const useAllTagsLoaded = () => {
+    const { allTagsLoaded } = useContext(TagContext);
+    return allTagsLoaded;
+};
+
+const initialAppState = {
+    assetsApi: {},
+    sideBarOpen: false,
+    sideBarSlim: false,
+    showThemeControl: false,
+    embedded: false,
+    openCollectiveApiKey: '',
+};
+const AppContext = createContext({
+    state: initialAppState,
+    setAppState: () => { },
+});
+function useAppManager() {
+    const [state, setState] = useState(initialAppState);
+    const setAppState = useCallback((newState) => {
+        setState((prevState) => ({
+            ...prevState,
+            ...newState,
+        }));
+    }, []);
+    return { state, setAppState };
+}
+const AppStateProvider = ({ children }) => jsx(AppContext.Provider, { value: useAppManager(), children: children });
+const useAppState = () => {
+    const { state } = useContext(AppContext);
+    return state;
+};
+const useSetAppState = () => {
+    const { setAppState } = useContext(AppContext);
+    return setAppState;
+};
+
+function decodeTag(string) {
+    const formatedTag = string.replace(/_/g, '\u00A0');
+    return formatedTag.charAt(0).toUpperCase() + formatedTag.slice(1);
+}
+function encodeTag(string) {
+    return string.replace(/\s+/g, '_');
+}
+
+var L_Control_Locate = {exports: {}};
+
+/*!
+Copyright (c) 2016 Dominik Moritz
+
+This file is part of the leaflet locate control. It is licensed under the MIT license.
+You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
+*/
+
+var hasRequiredL_Control_Locate;
+
+function requireL_Control_Locate () {
+	if (hasRequiredL_Control_Locate) return L_Control_Locate.exports;
+	hasRequiredL_Control_Locate = 1;
+	(function (module, exports) {
+		(function (factory, window) {
+		  // see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders
+		  // for details on how to structure a leaflet plugin.
+
+		  // define an AMD module that relies on 'leaflet'
+		  {
+		    if (typeof window !== "undefined" && window.L) {
+		      module.exports = factory(L);
+		    } else {
+		      module.exports = factory(require$$0);
+		    }
+		  }
+
+		  // attach your plugin to the global 'L' variable
+		  if (typeof window !== "undefined" && window.L) {
+		    window.L.Control.Locate = factory(L);
+		  }
+		})(function (L) {
+		  const LDomUtilApplyClassesMethod = (method, element, classNames) => {
+		    classNames = classNames.split(" ");
+		    classNames.forEach(function (className) {
+		      L.DomUtil[method].call(this, element, className);
+		    });
+		  };
+
+		  const addClasses = (el, names) => LDomUtilApplyClassesMethod("addClass", el, names);
+		  const removeClasses = (el, names) => LDomUtilApplyClassesMethod("removeClass", el, names);
+
+		  /**
+		   * Compatible with L.Circle but a true marker instead of a path
+		   */
+		  const LocationMarker = L.Marker.extend({
+		    initialize(latlng, options) {
+		      L.Util.setOptions(this, options);
+		      this._latlng = latlng;
+		      this.createIcon();
+		    },
+
+		    /**
+		     * Create a styled circle location marker
+		     */
+		    createIcon() {
+		      const opt = this.options;
+
+		      let style = "";
+
+		      if (opt.color !== undefined) {
+		        style += `stroke:${opt.color};`;
+		      }
+		      if (opt.weight !== undefined) {
+		        style += `stroke-width:${opt.weight};`;
+		      }
+		      if (opt.fillColor !== undefined) {
+		        style += `fill:${opt.fillColor};`;
+		      }
+		      if (opt.fillOpacity !== undefined) {
+		        style += `fill-opacity:${opt.fillOpacity};`;
+		      }
+		      if (opt.opacity !== undefined) {
+		        style += `opacity:${opt.opacity};`;
+		      }
+
+		      const icon = this._getIconSVG(opt, style);
+
+		      this._locationIcon = L.divIcon({
+		        className: icon.className,
+		        html: icon.svg,
+		        iconSize: [icon.w, icon.h]
+		      });
+
+		      this.setIcon(this._locationIcon);
+		    },
+
+		    /**
+		     * Return the raw svg for the shape
+		     *
+		     * Split so can be easily overridden
+		     */
+		    _getIconSVG(options, style) {
+		      const r = options.radius;
+		      const w = options.weight;
+		      const s = r + w;
+		      const s2 = s * 2;
+		      const svg =
+		        `<svg xmlns="http://www.w3.org/2000/svg" width="${s2}" height="${s2}" version="1.1" viewBox="-${s} -${s} ${s2} ${s2}">` +
+		        '<circle r="' +
+		        r +
+		        '" style="' +
+		        style +
+		        '" />' +
+		        "</svg>";
+		      return {
+		        className: "leaflet-control-locate-location",
+		        svg,
+		        w: s2,
+		        h: s2
+		      };
+		    },
+
+		    setStyle(style) {
+		      L.Util.setOptions(this, style);
+		      this.createIcon();
+		    }
+		  });
+
+		  const CompassMarker = LocationMarker.extend({
+		    initialize(latlng, heading, options) {
+		      L.Util.setOptions(this, options);
+		      this._latlng = latlng;
+		      this._heading = heading;
+		      this.createIcon();
+		    },
+
+		    setHeading(heading) {
+		      this._heading = heading;
+		    },
+
+		    /**
+		     * Create a styled arrow compass marker
+		     */
+		    _getIconSVG(options, style) {
+		      const r = options.radius;
+		      const w = options.width + options.weight;
+		      const h = (r + options.depth + options.weight) * 2;
+		      const path = `M0,0 l${options.width / 2},${options.depth} l-${w},0 z`;
+		      const svgstyle = `transform: rotate(${this._heading}deg)`;
+		      const svg =
+		        `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" version="1.1" viewBox="-${w / 2} 0 ${w} ${h}" style="${svgstyle}">` +
+		        '<path d="' +
+		        path +
+		        '" style="' +
+		        style +
+		        '" />' +
+		        "</svg>";
+		      return {
+		        className: "leaflet-control-locate-heading",
+		        svg,
+		        w,
+		        h
+		      };
+		    }
+		  });
+
+		  const LocateControl = L.Control.extend({
+		    options: {
+		      /** Position of the control */
+		      position: "topleft",
+		      /** The layer that the user's location should be drawn on. By default creates a new layer. */
+		      layer: undefined,
+		      /**
+		       * Automatically sets the map view (zoom and pan) to the user's location as it updates.
+		       * While the map is following the user's location, the control is in the `following` state,
+		       * which changes the style of the control and the circle marker.
+		       *
+		       * Possible values:
+		       *  - false: never updates the map view when location changes.
+		       *  - 'once': set the view when the location is first determined
+		       *  - 'always': always updates the map view when location changes.
+		       *              The map view follows the user's location.
+		       *  - 'untilPan': like 'always', except stops updating the
+		       *                view if the user has manually panned the map.
+		       *                The map view follows the user's location until she pans.
+		       *  - 'untilPanOrZoom': (default) like 'always', except stops updating the
+		       *                view if the user has manually panned the map.
+		       *                The map view follows the user's location until she pans.
+		       */
+		      setView: "untilPanOrZoom",
+		      /** Keep the current map zoom level when setting the view and only pan. */
+		      keepCurrentZoomLevel: false,
+		      /** After activating the plugin by clicking on the icon, zoom to the selected zoom level, even when keepCurrentZoomLevel is true. Set to 'false' to disable this feature. */
+		      initialZoomLevel: false,
+		      /**
+		       * This callback can be used to override the viewport tracking
+		       * This function should return a LatLngBounds object.
+		       *
+		       * For example to extend the viewport to ensure that a particular LatLng is visible:
+		       *
+		       * getLocationBounds: function(locationEvent) {
+		       *    return locationEvent.bounds.extend([-33.873085, 151.219273]);
+		       * },
+		       */
+		      getLocationBounds(locationEvent) {
+		        return locationEvent.bounds;
+		      },
+		      /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
+		      flyTo: false,
+		      /**
+		       * The user location can be inside and outside the current view when the user clicks on the
+		       * control that is already active. Both cases can be configures separately.
+		       * Possible values are:
+		       *  - 'setView': zoom and pan to the current location
+		       *  - 'stop': stop locating and remove the location marker
+		       */
+		      clickBehavior: {
+		        /** What should happen if the user clicks on the control while the location is within the current view. */
+		        inView: "stop",
+		        /** What should happen if the user clicks on the control while the location is outside the current view. */
+		        outOfView: "setView",
+		        /**
+		         * What should happen if the user clicks on the control while the location is within the current view
+		         * and we could be following but are not. Defaults to a special value which inherits from 'inView';
+		         */
+		        inViewNotFollowing: "inView"
+		      },
+		      /**
+		       * If set, save the map bounds just before centering to the user's
+		       * location. When control is disabled, set the view back to the
+		       * bounds that were saved.
+		       */
+		      returnToPrevBounds: false,
+		      /**
+		       * Keep a cache of the location after the user deactivates the control. If set to false, the user has to wait
+		       * until the locate API returns a new location before they see where they are again.
+		       */
+		      cacheLocation: true,
+		      /** If set, a circle that shows the location accuracy is drawn. */
+		      drawCircle: true,
+		      /** If set, the marker at the users' location is drawn. */
+		      drawMarker: true,
+		      /** If set and supported then show the compass heading */
+		      showCompass: true,
+		      /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
+		      markerClass: LocationMarker,
+		      /** The class us be used to create the compass bearing arrow */
+		      compassClass: CompassMarker,
+		      /** Accuracy circle style properties. NOTE these styles should match the css animations styles */
+		      circleStyle: {
+		        className: "leaflet-control-locate-circle",
+		        color: "#136AEC",
+		        fillColor: "#136AEC",
+		        fillOpacity: 0.15,
+		        weight: 0
+		      },
+		      /** Inner marker style properties. Only works if your marker class supports `setStyle`. */
+		      markerStyle: {
+		        className: "leaflet-control-locate-marker",
+		        color: "#fff",
+		        fillColor: "#2A93EE",
+		        fillOpacity: 1,
+		        weight: 3,
+		        opacity: 1,
+		        radius: 9
+		      },
+		      /** Compass */
+		      compassStyle: {
+		        fillColor: "#2A93EE",
+		        fillOpacity: 1,
+		        weight: 0,
+		        color: "#fff",
+		        opacity: 1,
+		        radius: 9, // How far is the arrow is from the center of of the marker
+		        width: 9, // Width of the arrow
+		        depth: 6 // Length of the arrow
+		      },
+		      /**
+		       * Changes to accuracy circle and inner marker while following.
+		       * It is only necessary to provide the properties that should change.
+		       */
+		      followCircleStyle: {},
+		      followMarkerStyle: {
+		        // color: '#FFA500',
+		        // fillColor: '#FFB000'
+		      },
+		      followCompassStyle: {},
+		      /** The CSS class for the icon. For example fa-location-arrow or fa-map-marker */
+		      icon: "leaflet-control-locate-location-arrow",
+		      iconLoading: "leaflet-control-locate-spinner",
+		      /** The element to be created for icons. For example span or i */
+		      iconElementTag: "span",
+		      /** The element to be created for the text. For example small or span */
+		      textElementTag: "small",
+		      /** Padding around the accuracy circle. */
+		      circlePadding: [0, 0],
+		      /** Use metric units. */
+		      metric: true,
+		      /**
+		       * This callback can be used in case you would like to override button creation behavior.
+		       * This is useful for DOM manipulation frameworks such as angular etc.
+		       * This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
+		       */
+		      createButtonCallback(container, options) {
+		        const link = L.DomUtil.create("a", "leaflet-bar-part leaflet-bar-part-single", container);
+		        link.title = options.strings.title;
+		        link.href = "#";
+		        link.setAttribute("role", "button");
+		        const icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
+
+		        if (options.strings.text !== undefined) {
+		          const text = L.DomUtil.create(options.textElementTag, "leaflet-locate-text", link);
+		          text.textContent = options.strings.text;
+		          link.classList.add("leaflet-locate-text-active");
+		          link.parentNode.style.display = "flex";
+		          if (options.icon.length > 0) {
+		            icon.classList.add("leaflet-locate-icon");
+		          }
+		        }
+
+		        return { link, icon };
+		      },
+		      /** This event is called in case of any location error that is not a time out error. */
+		      onLocationError(err, control) {
+		        alert(err.message);
+		      },
+		      /**
+		       * This event is called when the user's location is outside the bounds set on the map.
+		       * The event is called repeatedly when the location changes.
+		       */
+		      onLocationOutsideMapBounds(control) {
+		        control.stop();
+		        alert(control.options.strings.outsideMapBoundsMsg);
+		      },
+		      /** Display a pop-up when the user click on the inner marker. */
+		      showPopup: true,
+		      strings: {
+		        title: "Show me where I am",
+		        metersUnit: "meters",
+		        feetUnit: "feet",
+		        popup: "You are within {distance} {unit} from this point",
+		        outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
+		      },
+		      /** The default options passed to leaflets locate method. */
+		      locateOptions: {
+		        maxZoom: Infinity,
+		        watch: true, // if you overwrite this, visualization cannot be updated
+		        setView: false // have to set this to false because we have to
+		        // do setView manually
+		      }
+		    },
+
+		    initialize(options) {
+		      // set default options if nothing is set (merge one step deep)
+		      for (const i in options) {
+		        if (typeof this.options[i] === "object") {
+		          L.extend(this.options[i], options[i]);
+		        } else {
+		          this.options[i] = options[i];
+		        }
+		      }
+
+		      // extend the follow marker style and circle from the normal style
+		      this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
+		      this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);
+		      this.options.followCompassStyle = L.extend({}, this.options.compassStyle, this.options.followCompassStyle);
+		    },
+
+		    /**
+		     * Add control to map. Returns the container for the control.
+		     */
+		    onAdd(map) {
+		      const container = L.DomUtil.create("div", "leaflet-control-locate leaflet-bar leaflet-control");
+		      this._container = container;
+		      this._map = map;
+		      this._layer = this.options.layer || new L.LayerGroup();
+		      this._layer.addTo(map);
+		      this._event = undefined;
+		      this._compassHeading = null;
+		      this._prevBounds = null;
+
+		      const linkAndIcon = this.options.createButtonCallback(container, this.options);
+		      this._link = linkAndIcon.link;
+		      this._icon = linkAndIcon.icon;
+
+		      L.DomEvent.on(
+		        this._link,
+		        "click",
+		        function (ev) {
+		          L.DomEvent.stopPropagation(ev);
+		          L.DomEvent.preventDefault(ev);
+		          this._onClick();
+		        },
+		        this
+		      ).on(this._link, "dblclick", L.DomEvent.stopPropagation);
+
+		      this._resetVariables();
+
+		      this._map.on("unload", this._unload, this);
+
+		      return container;
+		    },
+
+		    /**
+		     * This method is called when the user clicks on the control.
+		     */
+		    _onClick() {
+		      this._justClicked = true;
+		      const wasFollowing = this._isFollowing();
+		      this._userPanned = false;
+		      this._userZoomed = false;
+
+		      if (this._active && !this._event) {
+		        // click while requesting
+		        this.stop();
+		      } else if (this._active) {
+		        const behaviors = this.options.clickBehavior;
+		        let behavior = behaviors.outOfView;
+		        if (this._map.getBounds().contains(this._event.latlng)) {
+		          behavior = wasFollowing ? behaviors.inView : behaviors.inViewNotFollowing;
+		        }
+
+		        // Allow inheriting from another behavior
+		        if (behaviors[behavior]) {
+		          behavior = behaviors[behavior];
+		        }
+
+		        switch (behavior) {
+		          case "setView":
+		            this.setView();
+		            break;
+		          case "stop":
+		            this.stop();
+		            if (this.options.returnToPrevBounds) {
+		              const f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
+		              f.bind(this._map)(this._prevBounds);
+		            }
+		            break;
+		        }
+		      } else {
+		        if (this.options.returnToPrevBounds) {
+		          this._prevBounds = this._map.getBounds();
+		        }
+		        this.start();
+		      }
+
+		      this._updateContainerStyle();
+		    },
+
+		    /**
+		     * Starts the plugin:
+		     * - activates the engine
+		     * - draws the marker (if coordinates available)
+		     */
+		    start() {
+		      this._activate();
+
+		      if (this._event) {
+		        this._drawMarker(this._map);
+
+		        // if we already have a location but the user clicked on the control
+		        if (this.options.setView) {
+		          this.setView();
+		        }
+		      }
+		      this._updateContainerStyle();
+		    },
+
+		    /**
+		     * Stops the plugin:
+		     * - deactivates the engine
+		     * - reinitializes the button
+		     * - removes the marker
+		     */
+		    stop() {
+		      this._deactivate();
+
+		      this._cleanClasses();
+		      this._resetVariables();
+
+		      this._removeMarker();
+		    },
+
+		    /**
+		     * Keep the control active but stop following the location
+		     */
+		    stopFollowing() {
+		      this._userPanned = true;
+		      this._updateContainerStyle();
+		      this._drawMarker();
+		    },
+
+		    /**
+		     * This method launches the location engine.
+		     * It is called before the marker is updated,
+		     * event if it does not mean that the event will be ready.
+		     *
+		     * Override it if you want to add more functionalities.
+		     * It should set the this._active to true and do nothing if
+		     * this._active is true.
+		     */
+		    _activate() {
+		      if (this._active || !this._map) {
+		        return;
+		      }
+
+		      this._map.locate(this.options.locateOptions);
+		      this._map.fire("locateactivate", this);
+		      this._active = true;
+
+		      // bind event listeners
+		      this._map.on("locationfound", this._onLocationFound, this);
+		      this._map.on("locationerror", this._onLocationError, this);
+		      this._map.on("dragstart", this._onDrag, this);
+		      this._map.on("zoomstart", this._onZoom, this);
+		      this._map.on("zoomend", this._onZoomEnd, this);
+		      if (this.options.showCompass) {
+		        const oriAbs = "ondeviceorientationabsolute" in window;
+		        if (oriAbs || "ondeviceorientation" in window) {
+		          const _this = this;
+		          const deviceorientation = function () {
+		            L.DomEvent.on(window, oriAbs ? "deviceorientationabsolute" : "deviceorientation", _this._onDeviceOrientation, _this);
+		          };
+		          if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === "function") {
+		            DeviceOrientationEvent.requestPermission().then(function (permissionState) {
+		              if (permissionState === "granted") {
+		                deviceorientation();
+		              }
+		            });
+		          } else {
+		            deviceorientation();
+		          }
+		        }
+		      }
+		    },
+
+		    /**
+		     * Called to stop the location engine.
+		     *
+		     * Override it to shutdown any functionalities you added on start.
+		     */
+		    _deactivate() {
+		      if (!this._active || !this._map) {
+		        return;
+		      }
+
+		      this._map.stopLocate();
+		      this._map.fire("locatedeactivate", this);
+		      this._active = false;
+
+		      if (!this.options.cacheLocation) {
+		        this._event = undefined;
+		      }
+
+		      // unbind event listeners
+		      this._map.off("locationfound", this._onLocationFound, this);
+		      this._map.off("locationerror", this._onLocationError, this);
+		      this._map.off("dragstart", this._onDrag, this);
+		      this._map.off("zoomstart", this._onZoom, this);
+		      this._map.off("zoomend", this._onZoomEnd, this);
+		      if (this.options.showCompass) {
+		        this._compassHeading = null;
+		        if ("ondeviceorientationabsolute" in window) {
+		          L.DomEvent.off(window, "deviceorientationabsolute", this._onDeviceOrientation, this);
+		        } else if ("ondeviceorientation" in window) {
+		          L.DomEvent.off(window, "deviceorientation", this._onDeviceOrientation, this);
+		        }
+		      }
+		    },
+
+		    /**
+		     * Zoom (unless we should keep the zoom level) and an to the current view.
+		     */
+		    setView() {
+		      this._drawMarker();
+		      if (this._isOutsideMapBounds()) {
+		        this._event = undefined; // clear the current location so we can get back into the bounds
+		        this.options.onLocationOutsideMapBounds(this);
+		      } else {
+		        if (this._justClicked && this.options.initialZoomLevel !== false) {
+		          var f = this.options.flyTo ? this._map.flyTo : this._map.setView;
+		          f.bind(this._map)([this._event.latitude, this._event.longitude], this.options.initialZoomLevel);
+		        } else if (this.options.keepCurrentZoomLevel) {
+		          var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
+		          f.bind(this._map)([this._event.latitude, this._event.longitude]);
+		        } else {
+		          var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
+		          // Ignore zoom events while setting the viewport as these would stop following
+		          this._ignoreEvent = true;
+		          f.bind(this._map)(this.options.getLocationBounds(this._event), {
+		            padding: this.options.circlePadding,
+		            maxZoom: this.options.initialZoomLevel || this.options.locateOptions.maxZoom
+		          });
+		          L.Util.requestAnimFrame(function () {
+		            // Wait until after the next animFrame because the flyTo can be async
+		            this._ignoreEvent = false;
+		          }, this);
+		        }
+		      }
+		    },
+
+		    /**
+		     *
+		     */
+		    _drawCompass() {
+		      if (!this._event) {
+		        return;
+		      }
+
+		      const latlng = this._event.latlng;
+
+		      if (this.options.showCompass && latlng && this._compassHeading !== null) {
+		        const cStyle = this._isFollowing() ? this.options.followCompassStyle : this.options.compassStyle;
+		        if (!this._compass) {
+		          this._compass = new this.options.compassClass(latlng, this._compassHeading, cStyle).addTo(this._layer);
+		        } else {
+		          this._compass.setLatLng(latlng);
+		          this._compass.setHeading(this._compassHeading);
+		          // If the compassClass can be updated with setStyle, update it.
+		          if (this._compass.setStyle) {
+		            this._compass.setStyle(cStyle);
+		          }
+		        }
+		        //
+		      }
+		      if (this._compass && (!this.options.showCompass || this._compassHeading === null)) {
+		        this._compass.removeFrom(this._layer);
+		        this._compass = null;
+		      }
+		    },
+
+		    /**
+		     * Draw the marker and accuracy circle on the map.
+		     *
+		     * Uses the event retrieved from onLocationFound from the map.
+		     */
+		    _drawMarker() {
+		      if (this._event.accuracy === undefined) {
+		        this._event.accuracy = 0;
+		      }
+
+		      const radius = this._event.accuracy;
+		      const latlng = this._event.latlng;
+
+		      // circle with the radius of the location's accuracy
+		      if (this.options.drawCircle) {
+		        const style = this._isFollowing() ? this.options.followCircleStyle : this.options.circleStyle;
+
+		        if (!this._circle) {
+		          this._circle = L.circle(latlng, radius, style).addTo(this._layer);
+		        } else {
+		          this._circle.setLatLng(latlng).setRadius(radius).setStyle(style);
+		        }
+		      }
+
+		      let distance;
+		      let unit;
+		      if (this.options.metric) {
+		        distance = radius.toFixed(0);
+		        unit = this.options.strings.metersUnit;
+		      } else {
+		        distance = (radius * 3.2808399).toFixed(0);
+		        unit = this.options.strings.feetUnit;
+		      }
+
+		      // small inner marker
+		      if (this.options.drawMarker) {
+		        const mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;
+		        if (!this._marker) {
+		          this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
+		        } else {
+		          this._marker.setLatLng(latlng);
+		          // If the markerClass can be updated with setStyle, update it.
+		          if (this._marker.setStyle) {
+		            this._marker.setStyle(mStyle);
+		          }
+		        }
+		      }
+
+		      this._drawCompass();
+
+		      const t = this.options.strings.popup;
+		      function getPopupText() {
+		        if (typeof t === "string") {
+		          return L.Util.template(t, { distance, unit });
+		        } else if (typeof t === "function") {
+		          return t({ distance, unit });
+		        } else {
+		          return t;
+		        }
+		      }
+		      if (this.options.showPopup && t && this._marker) {
+		        this._marker.bindPopup(getPopupText())._popup.setLatLng(latlng);
+		      }
+		      if (this.options.showPopup && t && this._compass) {
+		        this._compass.bindPopup(getPopupText())._popup.setLatLng(latlng);
+		      }
+		    },
+
+		    /**
+		     * Remove the marker from map.
+		     */
+		    _removeMarker() {
+		      this._layer.clearLayers();
+		      this._marker = undefined;
+		      this._circle = undefined;
+		    },
+
+		    /**
+		     * Unload the plugin and all event listeners.
+		     * Kind of the opposite of onAdd.
+		     */
+		    _unload() {
+		      this.stop();
+		      this._map.off("unload", this._unload, this);
+		    },
+
+		    /**
+		     * Sets the compass heading
+		     */
+		    _setCompassHeading(angle) {
+		      if (!isNaN(parseFloat(angle)) && isFinite(angle)) {
+		        angle = Math.round(angle);
+
+		        this._compassHeading = angle;
+		        L.Util.requestAnimFrame(this._drawCompass, this);
+		      } else {
+		        this._compassHeading = null;
+		      }
+		    },
+
+		    /**
+		     * If the compass fails calibration just fail safely and remove the compass
+		     */
+		    _onCompassNeedsCalibration() {
+		      this._setCompassHeading();
+		    },
+
+		    /**
+		     * Process and normalise compass events
+		     */
+		    _onDeviceOrientation(e) {
+		      if (!this._active) {
+		        return;
+		      }
+
+		      if (e.webkitCompassHeading) {
+		        // iOS
+		        this._setCompassHeading(e.webkitCompassHeading);
+		      } else if (e.absolute && e.alpha) {
+		        // Android
+		        this._setCompassHeading(360 - e.alpha);
+		      }
+		    },
+
+		    /**
+		     * Calls deactivate and dispatches an error.
+		     */
+		    _onLocationError(err) {
+		      // ignore time out error if the location is watched
+		      if (err.code == 3 && this.options.locateOptions.watch) {
+		        return;
+		      }
+
+		      this.stop();
+		      this.options.onLocationError(err, this);
+		    },
+
+		    /**
+		     * Stores the received event and updates the marker.
+		     */
+		    _onLocationFound(e) {
+		      // no need to do anything if the location has not changed
+		      if (this._event && this._event.latlng.lat === e.latlng.lat && this._event.latlng.lng === e.latlng.lng && this._event.accuracy === e.accuracy) {
+		        return;
+		      }
+
+		      if (!this._active) {
+		        // we may have a stray event
+		        return;
+		      }
+
+		      this._event = e;
+
+		      this._drawMarker();
+		      this._updateContainerStyle();
+
+		      switch (this.options.setView) {
+		        case "once":
+		          if (this._justClicked) {
+		            this.setView();
+		          }
+		          break;
+		        case "untilPan":
+		          if (!this._userPanned) {
+		            this.setView();
+		          }
+		          break;
+		        case "untilPanOrZoom":
+		          if (!this._userPanned && !this._userZoomed) {
+		            this.setView();
+		          }
+		          break;
+		        case "always":
+		          this.setView();
+		          break;
+		      }
+
+		      this._justClicked = false;
+		    },
+
+		    /**
+		     * When the user drags. Need a separate event so we can bind and unbind event listeners.
+		     */
+		    _onDrag() {
+		      // only react to drags once we have a location
+		      if (this._event && !this._ignoreEvent) {
+		        this._userPanned = true;
+		        this._updateContainerStyle();
+		        this._drawMarker();
+		      }
+		    },
+
+		    /**
+		     * When the user zooms. Need a separate event so we can bind and unbind event listeners.
+		     */
+		    _onZoom() {
+		      // only react to drags once we have a location
+		      if (this._event && !this._ignoreEvent) {
+		        this._userZoomed = true;
+		        this._updateContainerStyle();
+		        this._drawMarker();
+		      }
+		    },
+
+		    /**
+		     * After a zoom ends update the compass and handle sideways zooms
+		     */
+		    _onZoomEnd() {
+		      if (this._event) {
+		        this._drawCompass();
+		      }
+
+		      if (this._event && !this._ignoreEvent) {
+		        // If we have zoomed in and out and ended up sideways treat it as a pan
+		        if (this._marker && !this._map.getBounds().pad(-0.3).contains(this._marker.getLatLng())) {
+		          this._userPanned = true;
+		          this._updateContainerStyle();
+		          this._drawMarker();
+		        }
+		      }
+		    },
+
+		    /**
+		     * Compute whether the map is following the user location with pan and zoom.
+		     */
+		    _isFollowing() {
+		      if (!this._active) {
+		        return false;
+		      }
+
+		      if (this.options.setView === "always") {
+		        return true;
+		      } else if (this.options.setView === "untilPan") {
+		        return !this._userPanned;
+		      } else if (this.options.setView === "untilPanOrZoom") {
+		        return !this._userPanned && !this._userZoomed;
+		      }
+		    },
+
+		    /**
+		     * Check if location is in map bounds
+		     */
+		    _isOutsideMapBounds() {
+		      if (this._event === undefined) {
+		        return false;
+		      }
+		      return this._map.options.maxBounds && !this._map.options.maxBounds.contains(this._event.latlng);
+		    },
+
+		    /**
+		     * Toggles button class between following and active.
+		     */
+		    _updateContainerStyle() {
+		      if (!this._container) {
+		        return;
+		      }
+
+		      if (this._active && !this._event) {
+		        // active but don't have a location yet
+		        this._setClasses("requesting");
+		      } else if (this._isFollowing()) {
+		        this._setClasses("following");
+		      } else if (this._active) {
+		        this._setClasses("active");
+		      } else {
+		        this._cleanClasses();
+		      }
+		    },
+
+		    /**
+		     * Sets the CSS classes for the state.
+		     */
+		    _setClasses(state) {
+		      if (state == "requesting") {
+		        removeClasses(this._container, "active following");
+		        addClasses(this._container, "requesting");
+
+		        removeClasses(this._icon, this.options.icon);
+		        addClasses(this._icon, this.options.iconLoading);
+		      } else if (state == "active") {
+		        removeClasses(this._container, "requesting following");
+		        addClasses(this._container, "active");
+
+		        removeClasses(this._icon, this.options.iconLoading);
+		        addClasses(this._icon, this.options.icon);
+		      } else if (state == "following") {
+		        removeClasses(this._container, "requesting");
+		        addClasses(this._container, "active following");
+
+		        removeClasses(this._icon, this.options.iconLoading);
+		        addClasses(this._icon, this.options.icon);
+		      }
+		    },
+
+		    /**
+		     * Removes all classes from button.
+		     */
+		    _cleanClasses() {
+		      L.DomUtil.removeClass(this._container, "requesting");
+		      L.DomUtil.removeClass(this._container, "active");
+		      L.DomUtil.removeClass(this._container, "following");
+
+		      removeClasses(this._icon, this.options.iconLoading);
+		      addClasses(this._icon, this.options.icon);
+		    },
+
+		    /**
+		     * Reinitializes state variables.
+		     */
+		    _resetVariables() {
+		      // whether locate is active or not
+		      this._active = false;
+
+		      // true if the control was clicked for the first time
+		      // we need this so we can pan and zoom once we have the location
+		      this._justClicked = false;
+
+		      // true if the user has panned the map after clicking the control
+		      this._userPanned = false;
+
+		      // true if the user has zoomed the map after clicking the control
+		      this._userZoomed = false;
+		    }
+		  });
+
+		  L.control.locate = (options) => new L.Control.Locate(options);
+
+		  return LocateControl;
+		}, window); 
+	} (L_Control_Locate));
+	return L_Control_Locate.exports;
+}
+
+requireL_Control_Locate();
+
+const urlRegex = 
+// eslint-disable-next-line no-useless-escape, security/detect-unsafe-regex
+/(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
+const mailRegex = /(?<![[(])([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})(?![\])])/gi;
+function fixUrls(message) {
+    message = message.replace(urlRegex, function (url) {
+        let hyperlink = url.replace(' ', '');
+        if (!hyperlink.match('^https?://')) {
+            hyperlink = 'https://' + hyperlink;
+        }
+        return hyperlink;
+    });
+    return message;
+}
+
+/**
+ * @category Map
+ */
+const TextView = ({ item, itemId, text, truncate = false, rawText, }) => {
+    if (item) {
+        text = item.text;
+        itemId = item.id;
+    }
+    const tags = useTags();
+    const addFilterTag = useAddFilterTag();
+    let innerText = '';
+    let replacedText = '';
+    if (rawText) {
+        innerText = replacedText = rawText;
+    }
+    else if (text) {
+        innerText = text;
+    }
+    if (innerText && truncate)
+        innerText = truncateText(removeMarkdownKeepLinksAndParagraphs(innerText), 100);
+    if (innerText)
+        replacedText = fixUrls(innerText);
+    if (replacedText) {
+        replacedText = replacedText.replace(mailRegex, (url) => {
+            return `[${url}](mailto:${url})`;
+        });
+    }
+    if (replacedText) {
+        replacedText = replacedText.replace(hashTagRegex, (match) => {
+            return `[${match}](${match})`;
+        });
+    }
+    const HashTag = ({ children, tag, itemId }) => {
+        return (jsx("a", { className: 'hashtag', style: tag && {
+                color: tag.color,
+            }, onClick: (e) => {
+                e.stopPropagation();
+                addFilterTag(tag);
+            }, children: decodeTag(children) }, tag ? tag.name + itemId : itemId));
+    };
+    const Link = ({ href, children }) => {
+        // Youtube
+        if (href.startsWith('https://www.youtube.com/watch?v=')) {
+            const videoId = href?.split('v=')[1].split('&')[0];
+            const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+            return (jsx("iframe", { src: youtubeEmbedUrl, allow: 'fullscreen;  picture-in-picture', allowFullScreen: true }));
+        }
+        // Rumble
+        if (href.startsWith('https://rumble.com/embed/')) {
+            return jsx("iframe", { src: href, allow: 'fullscreen;  picture-in-picture', allowFullScreen: true });
+        }
+        // HashTag
+        if (href.startsWith('#')) {
+            const tag = tags.find((t) => t.name.toLowerCase() === decodeURI(href).slice(1).toLowerCase());
+            if (tag)
+                return (jsx(HashTag, { tag: tag, itemId: itemId, children: children }));
+            else
+                return children;
+        }
+        // Default: Link
+        return (jsx("a", { href: href, target: '_blank', rel: 'noreferrer', children: children }));
+    };
+    return (jsx(Markdown, { className: 'markdown tw:text-map tw:leading-map tw:text-sm', remarkPlugins: [remarkBreaks], components: {
+            a: Link,
+        }, children: replacedText }));
+};
+function removeMarkdownKeepLinksAndParagraphs(text) {
+    // Remove Markdown syntax using regular expressions but keep links and paragraphs
+    return text
+        .replace(/!\[.*?\]\(.*?\)/g, '') // Remove images
+        .replace(/(`{1,3})(.*?)\1/g, '$2') // Remove inline code
+        .replace(/(\*{1,2}|_{1,2})(.*?)\1/g, '$2') // Remove bold and italic
+        .replace(/(#+)\s+(.*)/g, '$2') // Remove headers
+        .replace(/>\s+(.*)/g, '$1') // Remove blockquotes
+        .replace(/^\s*\n/gm, '\n') // Preserve empty lines
+        .replace(/(\r\n|\n|\r)/gm, '\n'); // Preserve line breaks
+}
+function truncateText(text, limit) {
+    if (text.length <= limit) {
+        return text;
+    }
+    let truncated = '';
+    let length = 0;
+    // Split the text by paragraphs
+    const paragraphs = text.split('\n');
+    for (const paragraph of paragraphs) {
+        if (length + paragraph.length > limit) {
+            truncated += paragraph.slice(0, limit - length) + '...';
+            break;
+        }
+        else {
+            truncated += paragraph + '\n';
+            length += paragraph.length;
+        }
+    }
+    return truncated.trim();
+}
+
+function EllipsisVerticalIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
+  }));
+}
+const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(EllipsisVerticalIcon);
+
+/**
+ * @category Templates
+ */
+function MapOverlayPage({ children, className, backdrop, card = true, }) {
+    const closeScreen = () => {
+        navigate(`/${window.location.search ? window.location.search : ''}`);
+    };
+    const navigate = useNavigate();
+    const overlayRef = createRef();
+    const backdropRef = createRef();
+    useEffect(() => {
+        if (overlayRef.current !== null) {
+            DomEvent.disableClickPropagation(overlayRef.current);
+            DomEvent.disableScrollPropagation(overlayRef.current);
+        }
+        if (backdropRef.current !== null && backdrop) {
+            DomEvent.disableClickPropagation(backdropRef.current);
+            DomEvent.disableScrollPropagation(backdropRef.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [overlayRef, backdropRef]);
+    return (jsx("div", { className: `tw:absolute tw:h-full tw:w-full tw:m-auto ${backdrop ? 'tw:z-2000' : ''}`, children: jsx("div", { ref: backdropRef, className: `${backdrop ? 'tw:backdrop-brightness-75' : ''} tw:h-full tw:w-full tw:grid tw:place-items-center tw:m-auto`, children: jsxs("div", { ref: overlayRef, className: `${card ? 'tw:card tw:card-body tw:shadow-xl' : ''} tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`, children: [children, jsx("button", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2', onClick: () => closeScreen(), children: "\u2715" })] }) }) }));
+}
+
+/**
+ * @category Input
+ */
+function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, required = true, updateFormValue, }) {
+    const ref = useRef(null);
+    const [inputValue, setInputValue] = useState(defaultValue);
+    useEffect(() => {
+        setInputValue(defaultValue);
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxs("div", { className: `tw:form-control tw:w-full ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("textarea", { required: required, ref: ref, value: inputValue, name: dataField, className: `tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`, placeholder: placeholder ?? '', onChange: handleChange })] }));
+}
+
+/**
+ * @category Input
+ */
+function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, pattern, required = true, updateFormValue, }) {
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    useEffect(() => {
+        setInputValue(defaultValue ?? '');
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxs("div", { className: `tw:form-control ${containerStyle ?? ''}`, children: [labelTitle ? (jsx("label", { className: 'tw:label', children: jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsx("input", { required: required, pattern: pattern, type: type ?? 'text', name: dataField, value: inputValue, placeholder: placeholder ?? '', autoComplete: autocomplete, onChange: handleChange, className: `tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}` })] }));
+}
+
+/**
+ * @category Map
+ */
+const PopupStartEndInput = ({ item, showLabels = true, labelStyle, updateStartValue, updateEndValue, }) => {
+    return (jsxs("div", { className: 'tw:grid tw:grid-cols-2 tw:gap-2', children: [jsx(TextInput, { type: 'date', placeholder: 'start', dataField: 'start', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'Start' : '', labelStyle: labelStyle, defaultValue: item && item.start ? item.start.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateStartValue }), jsx(TextInput, { type: 'date', placeholder: 'end', dataField: 'end', inputStyle: 'tw:text-sm tw:px-2', labelTitle: showLabels ? 'End' : '', labelStyle: labelStyle, defaultValue: item && item.end ? item.end.substring(0, 10) : '', autocomplete: 'one-time-code', updateFormValue: updateEndValue })] }));
+};
+
+function CalendarDaysIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(CalendarDaysIcon);
+
+/**
+ * @category Map
+ */
+const StartEndView = ({ item }) => {
+    return (jsxs("div", { className: 'tw:flex tw:flex-row tw:mb-4 tw:mt-1', children: [jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$2, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.start ? item.start.substring(0, 10) : '', children: item && item.start ? new Date(item.start).toLocaleDateString() : '' })] }), jsx("div", { className: 'tw:basis-1/5 tw:place-content-center', children: jsx("span", { children: "-" }) }), jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsx(ForwardRef$2, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsx("time", { className: 'tw:align-middle', dateTime: item && item.end ? item.end.substring(0, 10) : '', children: item && item.end ? new Date(item.end).toLocaleDateString() : '' })] })] }));
+};
+
+const goldenRatioConjugate = 0.618033988749895;
+const randomColor = () => {
+    return hsvToHex((Math.random() + goldenRatioConjugate) % 1, 0.8, 0.7);
+};
+function hsvToHex(h, s, v) {
+    let r, g, b;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+}
+const rgbToHex = (r, g, b) => '#' +
+    [r, g, b]
+        .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    })
+        .join('');
+
+function PencilIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z"
+  }));
+}
+const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(PencilIcon);
+
+function TrashIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(TrashIcon);
+
+var TargetDotSVG = 'data:image/svg+xml;base64,PHN2ZwogICAgICAgICAgICAgICAgICAgICAgICAgICAgc3Ryb2tlPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWxsPSdjdXJyZW50Q29sb3InCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHJva2VXaWR0aD0nMCcKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZpZXdCb3g9JzAgMCA1MTIgNTEyJwogICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPSd3LTUgaC01JwogICAgICAgICAgICAgICAgICAgICAgICAgICAgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJwogICAgICAgICAgICAgICAgICAgICAgICAgID4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9J00yNTYgMGMxNy43IDAgMzIgMTQuMyAzMiAzMlY0Mi40YzkzLjcgMTMuOSAxNjcuNyA4OCAxODEuNiAxODEuNkg0ODBjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJINDY5LjZjLTEzLjkgOTMuNy04OCAxNjcuNy0xODEuNiAxODEuNlY0ODBjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWNDY5LjZDMTMwLjMgNDU1LjcgNTYuMyAzODEuNyA0Mi40IDI4OEgzMmMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMkg0Mi40QzU2LjMgMTMwLjMgMTMwLjMgNTYuMyAyMjQgNDIuNFYzMmMwLTE3LjcgMTQuMy0zMiAzMi0zMnpNMTA3LjQgMjg4YzEyLjUgNTguMyA1OC40IDEwNC4xIDExNi42IDExNi42VjM4NGMwLTE3LjcgMTQuMy0zMiAzMi0zMnMzMiAxNC4zIDMyIDMydjIwLjZjNTguMy0xMi41IDEwNC4xLTU4LjQgMTE2LjYtMTE2LjZIMzg0Yy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMyaDIwLjZDMzkyLjEgMTY1LjcgMzQ2LjMgMTE5LjkgMjg4IDEwNy40VjEyOGMwIDE3LjctMTQuMyAzMi0zMiAzMnMtMzItMTQuMy0zMi0zMlYxMDcuNEMxNjUuNyAxMTkuOSAxMTkuOSAxNjUuNyAxMDcuNCAyMjRIMTI4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDEwNy40ek0yNTYgMjI0YTMyIDMyIDAgMSAxIDAgNjQgMzIgMzIgMCAxIDEgMC02NHonPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=';
+
+const isClickInsideRectangle = (e, element) => {
+    const r = element.getBoundingClientRect();
+    return e.clientX > r.left && e.clientX < r.right && e.clientY > r.top && e.clientY < r.bottom;
+};
+const DialogModal = ({ title, isOpened, onClose, children, showCloseButton = true, closeOnClickOutside = true, className, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isOpened) {
+            ref.current?.showModal();
+            ref.current?.classList.remove('tw:hidden');
+            document.body.classList.add('modal-open'); // prevent bg scroll
+        }
+        else {
+            ref.current?.close();
+            ref.current?.classList.add('tw:hidden');
+            document.body.classList.remove('modal-open');
+        }
+    }, [isOpened]);
+    if (isOpened) {
+        return (jsx("dialog", { className: `${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`, ref: ref, onCancel: onClose, onClick: (e) => ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose(), children: jsxs("div", { className: 'card-body tw:p-2', children: [jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: title }), children, showCloseButton && (jsx("button", { className: 'btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2', onClick: onClose, children: "\u2715" }))] }) }));
+    }
+    else
+        return jsx(Fragment, {});
+};
+
+function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false, }) {
+    const [modalOpen, setModalOpen] = useState(false);
+    const hasUserPermission = useHasUserPermission();
+    const navigate = useNavigate();
+    const appState = useAppState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const avatar = item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160';
+    const title = item.name;
+    const subtitle = item.subname;
+    const [address] = useState('');
+    const params = new URLSearchParams(window.location.search);
+    const openDeleteModal = async (event) => {
+        setModalOpen(true);
+        event.stopPropagation();
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { className: 'tw:flex tw:flex-row', children: [jsx("div", { className: 'tw:grow tw:max-w-[calc(100%-60px)] }', children: jsxs("div", { className: 'flex items-center', children: [avatar && (jsx("div", { className: 'tw:avatar', children: jsxs("div", { className: `${big ? 'tw:w-20' : 'tw:w-10'} tw:inline tw:items-center tw:justify-center overflow-hidden`, children: [jsx("img", { className: 'tw:w-full tw:h-full tw:object-cover tw:rounded-full', src: avatar, alt: item.name + ' logo', onLoad: () => setImageLoaded(true), onError: () => setImageLoaded(false), style: { display: imageLoaded ? 'block' : 'none' } }), !imageLoaded && (jsx("div", { className: 'tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' }))] }) })), jsxs("div", { className: `${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`, children: [jsx("div", { className: `${big ? 'tw:xl:text-3xl tw:text-2xl' : 'tw:text-xl'} tw:font-semibold tw:truncate`, title: title, children: title }), showAddress && address && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:text-gray-500 ${truncateSubname && 'tw:truncate'}`, children: address })), subtitle && !hideSubname && (jsx("div", { className: `tw:text-xs  tw:opacity-50 ${truncateSubname && 'tw:truncate'}`, children: subtitle }))] })] }) }), jsx("div", { onClick: (e) => e.stopPropagation(), className: `${big ? 'tw:mt-5' : 'tw:mt-1'}`, children: (api?.deleteItem || item.layer?.api?.updateItem) &&
+                            (hasUserPermission(api?.collectionName, 'delete', item) ||
+                                hasUserPermission(api?.collectionName, 'update', item)) &&
+                            !hideMenu && (jsxs("div", { className: 'tw:dropdown tw:dropdown-bottom', children: [jsx("label", { tabIndex: 0, className: 'tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6', children: jsx(ForwardRef$3, { className: 'tw:h-5 tw:w-5' }) }), jsxs("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000', children: [api?.updateItem &&
+                                            hasUserPermission(api.collectionName, 'update', item) &&
+                                            editCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: (e) => item.layer?.customEditLink
+                                                    ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params && '?' + params}` : ''} `)
+                                                    : editCallback(e), children: jsx(ForwardRef$1, { className: 'tw:h-5 tw:w-5' }) }) })), api?.updateItem &&
+                                            hasUserPermission(api.collectionName, 'update', item) &&
+                                            setPositionCallback && (jsx("li", { children: jsx("a", { className: 'tw:text-base-content! tw:cursor-pointer', onClick: setPositionCallback, children: jsx(SVG, { src: TargetDotSVG, className: 'tw:w-5 tw:h-5' }) }) })), api?.deleteItem &&
+                                            hasUserPermission(api.collectionName, 'delete', item) &&
+                                            deleteCallback && (jsx("li", { children: jsx("a", { className: 'tw:cursor-pointer tw:text-error!', onClick: openDeleteModal, children: loading ? (jsx("span", { className: 'tw:loading tw:loading-spinner tw:loading-sm' })) : (jsx(ForwardRef, { className: 'tw:h-5 tw:w-5' })) }) }))] })] })) })] }), jsx(DialogModal, { isOpened: modalOpen, title: 'Are you sure?', showCloseButton: false, onClose: () => setModalOpen(false), children: jsxs("div", { onClick: (e) => e.stopPropagation(), children: [jsxs("span", { children: ["Do you want to delete ", jsx("b", { children: item.name }), "?"] }), jsx("div", { className: 'tw:grid', children: jsxs("div", { className: 'tw:flex tw:justify-between', children: [jsx("label", { className: 'tw:btn tw:mt-4 tw:btn-error', onClick: (e) => {
+                                            deleteCallback(e);
+                                            setModalOpen(false);
+                                        }, children: "Yes" }), jsx("label", { className: 'tw:btn tw:mt-4', onClick: () => setModalOpen(false), children: "No" })] }) })] }) })] }));
+}
+
+// in miliseconds
+const units = [
+    { label: 'year', seconds: 31536000 },
+    { label: 'month', seconds: 2592000 },
+    { label: 'week', seconds: 604800 },
+    { label: 'day', seconds: 86400 },
+    { label: 'hour', seconds: 3600 },
+    { label: 'minute', seconds: 60 },
+    { label: 'second', seconds: 1 },
+];
+const timeAgo = (date) => {
+    const time = Math.floor((new Date().valueOf() - new Date(date).valueOf()) / 1000);
+    const { interval, unit } = calculateTimeDifference(time);
+    const suffix = interval === 1 ? '' : 's';
+    return `${interval} ${unit}${suffix} ago`;
+};
+const calculateTimeDifference = (time) => {
+    for (const { label, seconds } of units) {
+        const interval = Math.floor(time / seconds);
+        if (interval >= 1) {
+            return {
+                interval,
+                unit: label,
+            };
+        }
+    }
+    return {
+        interval: 0,
+        unit: '',
+    };
+};
+
+const TagView = ({ tag, heighlight, onClick, count, }) => {
+    return (
+    // Use your imagination to render suggestions.
+    jsxs("div", { onClick: onClick, className: `tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`, style: { backgroundColor: tag.color ? tag.color : '#666' }, children: [jsx("b", { children: decodeTag(tag.name) }), count && jsxs("span", { className: 'tw:ml-2', children: ["(", count, ")"] })] }, tag.name));
+};
+
+export { useRemoveItem as $, AppStateProvider as A, TextView as B, ClusterRefProvider as C, useResetFilterTags as D, useSetItemsApi as E, FilterProvider as F, useSetItemsData as G, useAddTag as H, ItemsProvider as I, useSetTagData as J, useSetTagApi as K, LayersProvider as L, useSetPermissionData as M, useSetPermissionApi as N, useSetAdminRole as O, PermissionsProvider as P, ForwardRef$3 as Q, MapOverlayPage as R, SelectPositionProvider as S, TagsProvider as T, TextAreaInput as U, TextInput as V, useGetItemTags as W, timeAgo as X, HeaderView as Y, StartEndView as Z, useAddItem as _, LeafletRefsProvider as a, PopupStartEndInput as a0, hashTagRegex as a1, randomColor as a2, TagView as a3, useUpdateItem as a4, useAddMarker as a5, useAddPopup as a6, useAllTagsLoaded as a7, useAllItemsLoaded as a8, useSetMarkerClicked as a9, encodeTag as aa, AuthProvider as ab, DialogModal as ac, ForwardRef as ad, useHasUserPermission as b, useAddVisibleGroupType as c, useIsGroupTypeVisible as d, useToggleVisibleGroupType as e, useVisibleGroupType as f, useAuth as g, useIsLayerVisible as h, useToggleVisibleLayer as i, useAppState as j, useSetAppState as k, useWindowDimensions as l, useTags as m, useItems as n, useLeafletRefs as o, useAddFilterTag as p, decodeTag as q, useFilterTags as r, useRemoveFilterTag as s, useSelectPosition as t, useLayers as u, useSetSelectPosition as v, useSetClusterRef as w, useClusterRef as x, useSetMapClicked as y, useAddVisibleLayer as z };
+//# sourceMappingURL=TagView-C6Dx0Dh8.js.map