utopia-ui 3.0.99 → 3.0.100

package/dist/TagView-VEMo7xsv.js

@@ -0,0 +1,2535 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactToastify = require('react-toastify');
+var require$$0 = require('leaflet');
+var Markdown = require('react-markdown');
+var remarkBreaks = require('remark-breaks');
+var reactRouterDom = require('react-router-dom');
+var SVG = require('react-inlinesvg');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ClusterRefContext = React.createContext({
+    clusterRef: {},
+    setClusterRef: () => { },
+});
+function useClusterRefManager() {
+    const [clusterRef, setClusterRef] = React.useState({});
+    return { clusterRef, setClusterRef };
+}
+const ClusterRefProvider = ({ children }) => (jsxRuntime.jsx(ClusterRefContext.Provider, { value: useClusterRefManager(), children: children }));
+const useClusterRef = () => {
+    const { clusterRef } = React.useContext(ClusterRefContext);
+    return clusterRef;
+};
+const useSetClusterRef = () => {
+    const { setClusterRef } = React.useContext(ClusterRefContext);
+    return setClusterRef;
+};
+
+const LayerContext = React.createContext({
+    layers: [],
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    addLayer: () => { },
+});
+function useLayerManager(initialLayers) {
+    const [layers, dispatch] = React.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 = React.useCallback((layer) => {
+        dispatch({
+            type: 'ADD LAYER',
+            layer,
+        });
+    }, []);
+    return { layers, addLayer };
+}
+const LayersProvider = ({ initialLayers, children }) => (jsxRuntime.jsx(LayerContext.Provider, { value: useLayerManager(initialLayers), children: children }));
+const useLayers = () => {
+    const { layers } = React.useContext(LayerContext);
+    return layers;
+};
+const useAddLayer = () => {
+    const { addLayer } = React.useContext(LayerContext);
+    return addLayer;
+};
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
+    React.useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowDimensions;
+}
+
+const FilterContext = React.createContext({
+    filterTags: [],
+    searchPhrase: '',
+    visibleLayers: [],
+    visibleGroupTypes: [],
+    addFilterTag: () => { },
+    removeFilterTag: () => { },
+    resetFilterTags: () => { },
+    setSearchPhrase: () => { },
+    addVisibleLayer: () => { },
+    toggleVisibleLayer: () => { },
+    resetVisibleLayers: () => { },
+    isLayerVisible: () => true,
+    addVisibleGroupType: () => { },
+    toggleVisibleGroupType: () => { },
+    isGroupTypeVisible: () => true,
+});
+function useFilterManager(initialTags) {
+    const [filterTags, dispatchTags] = React.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 = reactRouterDom.useNavigate();
+    const windowDimensions = useWindowDimensions();
+    const [visibleLayers, dispatchLayers] = React.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();
+    React.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] = React.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] = React.useState('');
+    const addFilterTag = React.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 = React.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 = React.useCallback(() => {
+        dispatchTags({
+            type: 'RESET_TAGS',
+        });
+    }, []);
+    const addVisibleLayer = (layer) => {
+        dispatchLayers({
+            type: 'ADD_LAYER',
+            layer,
+        });
+    };
+    const toggleVisibleLayer = (layer) => {
+        dispatchLayers({
+            type: 'TOGGLE_LAYER',
+            layer,
+        });
+    };
+    const resetVisibleLayers = React.useCallback(() => {
+        dispatchLayers({
+            type: 'RESET_LAYERS',
+        });
+    }, []);
+    const isLayerVisible = React.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 = React.useCallback((groupType) => {
+        return visibleGroupTypes.some((gt) => gt === groupType);
+    }, [visibleGroupTypes]);
+    const setSearchPhrase = React.useCallback((phrase) => {
+        searchPhraseSet(phrase);
+    }, []);
+    return {
+        filterTags,
+        addFilterTag,
+        removeFilterTag,
+        resetFilterTags,
+        setSearchPhrase,
+        searchPhrase,
+        visibleLayers,
+        toggleVisibleLayer,
+        resetVisibleLayers,
+        isLayerVisible,
+        addVisibleLayer,
+        visibleGroupTypes,
+        addVisibleGroupType,
+        toggleVisibleGroupType,
+        isGroupTypeVisible,
+    };
+}
+const FilterProvider = ({ initialTags, children }) => (jsxRuntime.jsx(FilterContext.Provider, { value: useFilterManager(initialTags), children: children }));
+const useFilterTags = () => {
+    const { filterTags } = React.useContext(FilterContext);
+    return filterTags;
+};
+const useAddFilterTag = () => {
+    const { addFilterTag } = React.useContext(FilterContext);
+    return addFilterTag;
+};
+const useRemoveFilterTag = () => {
+    const { removeFilterTag } = React.useContext(FilterContext);
+    return removeFilterTag;
+};
+const useResetFilterTags = () => {
+    const { resetFilterTags } = React.useContext(FilterContext);
+    return resetFilterTags;
+};
+const useAddVisibleLayer = () => {
+    const { addVisibleLayer } = React.useContext(FilterContext);
+    return addVisibleLayer;
+};
+const useToggleVisibleLayer = () => {
+    const { toggleVisibleLayer } = React.useContext(FilterContext);
+    return toggleVisibleLayer;
+};
+const useIsLayerVisible = () => {
+    const { isLayerVisible } = React.useContext(FilterContext);
+    return isLayerVisible;
+};
+const useAddVisibleGroupType = () => {
+    const { addVisibleGroupType } = React.useContext(FilterContext);
+    return addVisibleGroupType;
+};
+const useToggleVisibleGroupType = () => {
+    const { toggleVisibleGroupType } = React.useContext(FilterContext);
+    return toggleVisibleGroupType;
+};
+const useIsGroupTypeVisible = () => {
+    const { isGroupTypeVisible } = React.useContext(FilterContext);
+    return isGroupTypeVisible;
+};
+const useVisibleGroupType = () => {
+    const { visibleGroupTypes } = React.useContext(FilterContext);
+    return visibleGroupTypes;
+};
+
+const ItemContext = React.createContext({
+    items: [],
+    addItem: () => { },
+    updateItem: () => { },
+    removeItem: () => { },
+    resetItems: () => { },
+    setItemsApi: () => { },
+    setItemsData: () => { },
+    allItemsLoaded: false,
+});
+function useItemsManager(initialItems) {
+    const addLayer = useAddLayer();
+    const [allItemsLoaded, setallItemsLoaded] = React.useState(false);
+    const [items, dispatch] = React.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 = React.useCallback(async (layer) => {
+        addLayer(layer);
+        const result = await reactToastify.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 = React.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 = React.useCallback(async (item) => {
+        dispatch({
+            type: 'ADD',
+            item,
+        });
+    }, []);
+    const updateItem = React.useCallback(async (item) => {
+        dispatch({
+            type: 'UPDATE',
+            item,
+        });
+    }, []);
+    const removeItem = React.useCallback((item) => {
+        dispatch({
+            type: 'REMOVE',
+            item,
+        });
+    }, []);
+    const resetItems = React.useCallback((layer) => {
+        dispatch({
+            type: 'RESET',
+            layer,
+        });
+    }, []);
+    return {
+        items,
+        updateItem,
+        addItem,
+        removeItem,
+        resetItems,
+        setItemsApi,
+        setItemsData,
+        allItemsLoaded,
+    };
+}
+const ItemsProvider = ({ initialItems, children }) => (jsxRuntime.jsx(ItemContext.Provider, { value: useItemsManager(initialItems), children: children }));
+const useItems = () => {
+    const { items } = React.useContext(ItemContext);
+    return items;
+};
+const useAddItem = () => {
+    const { addItem } = React.useContext(ItemContext);
+    return addItem;
+};
+const useUpdateItem = () => {
+    const { updateItem } = React.useContext(ItemContext);
+    return updateItem;
+};
+const useRemoveItem = () => {
+    const { removeItem } = React.useContext(ItemContext);
+    return removeItem;
+};
+const useSetItemsApi = () => {
+    const { setItemsApi } = React.useContext(ItemContext);
+    return setItemsApi;
+};
+const useSetItemsData = () => {
+    const { setItemsData } = React.useContext(ItemContext);
+    return setItemsData;
+};
+const useAllItemsLoaded = () => {
+    const { allItemsLoaded } = React.useContext(ItemContext);
+    return allItemsLoaded;
+};
+
+const LeafletRefsContext = React.createContext({
+    leafletRefs: {},
+    addMarker: () => { },
+    addPopup: () => { },
+});
+function useLeafletRefsManager(initialLeafletRefs) {
+    const [leafletRefs, dispatch] = React.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 = React.useCallback((item, marker) => {
+        dispatch({
+            type: 'ADD_MARKER',
+            item,
+            marker,
+        });
+    }, []);
+    const addPopup = React.useCallback((item, popup) => {
+        dispatch({
+            type: 'ADD_POPUP',
+            item,
+            popup,
+        });
+    }, []);
+    return { leafletRefs, addMarker, addPopup };
+}
+const LeafletRefsProvider = ({ initialLeafletRefs, children }) => (jsxRuntime.jsx(LeafletRefsContext.Provider, { value: useLeafletRefsManager(initialLeafletRefs), children: children }));
+const useLeafletRefs = () => {
+    const { leafletRefs } = React.useContext(LeafletRefsContext);
+    return leafletRefs;
+};
+const useAddMarker = () => {
+    const { addMarker } = React.useContext(LeafletRefsContext);
+    return addMarker;
+};
+const useAddPopup = () => {
+    const { addPopup } = React.useContext(LeafletRefsContext);
+    return addPopup;
+};
+
+const AuthContext = React.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] = React.useState(null);
+    const [token, setToken] = React.useState();
+    const [loading, setLoading] = React.useState(false);
+    const isAuthenticated = !!user;
+    React.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 (jsxRuntime.jsx(AuthContext.Provider, { value: {
+            isAuthenticated,
+            user,
+            login,
+            register,
+            loading,
+            logout,
+            updateUser,
+            token,
+            requestPasswordReset,
+            passwordReset,
+        }, children: children }));
+};
+const useAuth = () => React.useContext(AuthContext);
+
+const PermissionContext = React.createContext({
+    permissions: [],
+    setPermissionApi: () => { },
+    setPermissionData: () => { },
+    setAdminRole: () => { },
+    hasUserPermission: () => true,
+});
+function usePermissionsManager(initialPermissions) {
+    const [permissions, dispatch] = React.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] = React.useState(null);
+    const { user } = useAuth();
+    const setPermissionApi = React.useCallback(async (api) => {
+        const result = await api.getItems();
+        result.map((permission) => {
+            dispatch({ type: 'ADD', permission });
+            return null;
+        });
+    }, []);
+    const setPermissionData = React.useCallback((data) => {
+        data.map((permission) => {
+            dispatch({ type: 'ADD', permission });
+            return null;
+        });
+    }, []);
+    const hasUserPermission = React.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, }) => (jsxRuntime.jsx(PermissionContext.Provider, { value: usePermissionsManager(initialPermissions), children: children }));
+const useSetPermissionApi = () => {
+    const { setPermissionApi } = React.useContext(PermissionContext);
+    return setPermissionApi;
+};
+const useSetPermissionData = () => {
+    const { setPermissionData } = React.useContext(PermissionContext);
+    return setPermissionData;
+};
+const useHasUserPermission = () => {
+    const { hasUserPermission } = React.useContext(PermissionContext);
+    return hasUserPermission;
+};
+const useSetAdminRole = () => {
+    const { setAdminRole } = React.useContext(PermissionContext);
+    return setAdminRole;
+};
+
+const SelectPositionContext = React.createContext({
+    selectPosition: null,
+    setSelectPosition: () => { },
+    setMarkerClicked: () => { },
+    setMapClicked: () => { },
+});
+function useSelectPositionManager() {
+    const [selectPosition, setSelectPosition] = React.useState(null);
+    const [markerClicked, setMarkerClicked] = React.useState();
+    const [mapClicked, setMapClicked] = React.useState();
+    const updateItem = useUpdateItem();
+    const hasUserPermission = useHasUserPermission();
+    React.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]);
+    React.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;
+            reactToastify.toast.loading('Updating item position');
+            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
+                reactToastify.toast.error(error.toString());
+            }
+            if (success) {
+                await updateItem({ ...updatedItem, parent: updatedItem.parent, position: undefined });
+                await linkItem(updatedItem.id);
+                reactToastify.toast.success('Item position updated');
+                setSelectPosition(null);
+                setMarkerClicked(null);
+            }
+        }
+        else {
+            setSelectPosition(null);
+            reactToastify.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
+            reactToastify.toast.error(error.toString());
+        }
+        if (success) {
+            updateItem(updatedItem);
+            reactToastify.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
+                    reactToastify.toast.error(error.toString());
+                }
+                if (success) {
+                    updateItem({ ...markerClicked, relations: newRelations });
+                    reactToastify.toast.success('Item linked');
+                }
+            }
+        }
+    };
+    return { selectPosition, setSelectPosition, setMarkerClicked, setMapClicked };
+}
+const SelectPositionProvider = ({ children }) => (jsxRuntime.jsx(SelectPositionContext.Provider, { value: useSelectPositionManager(), children: children }));
+const useSelectPosition = () => {
+    const { selectPosition } = React.useContext(SelectPositionContext);
+    return selectPosition;
+};
+const useSetSelectPosition = () => {
+    const { setSelectPosition } = React.useContext(SelectPositionContext);
+    return setSelectPosition;
+};
+const useSetMarkerClicked = () => {
+    const { setMarkerClicked } = React.useContext(SelectPositionContext);
+    return setMarkerClicked;
+};
+const useSetMapClicked = () => {
+    const { setMapClicked } = React.useContext(SelectPositionContext);
+    return setMapClicked;
+};
+
+const hashTagRegex = /(#+[a-zA-Z0-9À-ÖØ-öø-ʸ_-]{1,})/g;
+
+const TagContext = React.createContext({
+    tags: [],
+    addTag: () => { },
+    setTagApi: () => { },
+    setTagData: () => { },
+    getItemTags: () => [],
+    allTagsLoaded: false,
+});
+function useTagsManager(initialTags) {
+    const [allTagsLoaded, setallTagsLoaded] = React.useState(false);
+    const [tagCount, setTagCount] = React.useState(0);
+    const [tags, dispatch] = React.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] = React.useState({});
+    const setTagApi = React.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 = React.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 = React.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 }) => (jsxRuntime.jsx(TagContext.Provider, { value: useTagsManager(initialTags), children: children }));
+const useTags = () => {
+    const { tags } = React.useContext(TagContext);
+    return tags;
+};
+const useAddTag = () => {
+    const { addTag } = React.useContext(TagContext);
+    return addTag;
+};
+const useSetTagApi = () => {
+    const { setTagApi } = React.useContext(TagContext);
+    return setTagApi;
+};
+const useSetTagData = () => {
+    const { setTagData } = React.useContext(TagContext);
+    return setTagData;
+};
+const useGetItemTags = () => {
+    const { getItemTags } = React.useContext(TagContext);
+    return getItemTags;
+};
+const useAllTagsLoaded = () => {
+    const { allTagsLoaded } = React.useContext(TagContext);
+    return allTagsLoaded;
+};
+
+const initialAppState = {
+    assetsApi: {},
+    sideBarOpen: false,
+    sideBarSlim: false,
+    showThemeControl: false,
+    embedded: false,
+    openCollectiveApiKey: '',
+};
+const AppContext = React.createContext({
+    state: initialAppState,
+    setAppState: () => { },
+});
+function useAppManager() {
+    const [state, setState] = React.useState(initialAppState);
+    const setAppState = React.useCallback((newState) => {
+        setState((prevState) => ({
+            ...prevState,
+            ...newState,
+        }));
+    }, []);
+    return { state, setAppState };
+}
+const AppStateProvider = ({ children }) => jsxRuntime.jsx(AppContext.Provider, { value: useAppManager(), children: children });
+const useAppState = () => {
+    const { state } = React.useContext(AppContext);
+    return state;
+};
+const useSetAppState = () => {
+    const { setAppState } = React.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 (jsxRuntime.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 (jsxRuntime.jsx("iframe", { src: youtubeEmbedUrl, allow: 'fullscreen;  picture-in-picture', allowFullScreen: true }));
+        }
+        // Rumble
+        if (href.startsWith('https://rumble.com/embed/')) {
+            return jsxRuntime.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 (jsxRuntime.jsx(HashTag, { tag: tag, itemId: itemId, children: children }));
+            else
+                return children;
+        }
+        // Default: Link
+        return (jsxRuntime.jsx("a", { href: href, target: '_blank', rel: 'noreferrer', children: children }));
+    };
+    return (jsxRuntime.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__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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$4 = /*#__PURE__*/ React__namespace.forwardRef(EllipsisVerticalIcon);
+
+/**
+ * @category Templates
+ */
+function MapOverlayPage({ children, className, backdrop, card = true, }) {
+    const closeScreen = () => {
+        navigate(`/${window.location.search ? window.location.search : ''}`);
+    };
+    const navigate = reactRouterDom.useNavigate();
+    const overlayRef = React.createRef();
+    const backdropRef = React.createRef();
+    React.useEffect(() => {
+        if (overlayRef.current !== null) {
+            require$$0.DomEvent.disableClickPropagation(overlayRef.current);
+            require$$0.DomEvent.disableScrollPropagation(overlayRef.current);
+        }
+        if (backdropRef.current !== null && backdrop) {
+            require$$0.DomEvent.disableClickPropagation(backdropRef.current);
+            require$$0.DomEvent.disableScrollPropagation(backdropRef.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [overlayRef, backdropRef]);
+    return (jsxRuntime.jsx("div", { className: `tw:absolute tw:h-full tw:w-full tw:m-auto ${backdrop ? 'tw:z-2000' : ''}`, children: jsxRuntime.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: jsxRuntime.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, jsxRuntime.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 = React.useRef(null);
+    const [inputValue, setInputValue] = React.useState(defaultValue);
+    React.useEffect(() => {
+        setInputValue(defaultValue);
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: `tw:form-control tw:w-full ${containerStyle ?? ''}`, children: [labelTitle ? (jsxRuntime.jsx("label", { className: 'tw:label', children: jsxRuntime.jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsxRuntime.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] = React.useState(defaultValue ?? '');
+    React.useEffect(() => {
+        setInputValue(defaultValue ?? '');
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: `tw:form-control ${containerStyle ?? ''}`, children: [labelTitle ? (jsxRuntime.jsx("label", { className: 'tw:label', children: jsxRuntime.jsx("span", { className: `tw:label-text tw:text-base-content ${labelStyle ?? ''}`, children: labelTitle }) })) : null, jsxRuntime.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 (jsxRuntime.jsxs("div", { className: 'tw:grid tw:grid-cols-2 tw:gap-2', children: [jsxRuntime.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 }), jsxRuntime.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__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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__namespace.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$3 = /*#__PURE__*/ React__namespace.forwardRef(CalendarDaysIcon);
+
+/**
+ * @category Map
+ */
+const StartEndView = ({ item }) => {
+    return (jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-row tw:mb-4 tw:mt-1', children: [jsxRuntime.jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsxRuntime.jsx(ForwardRef$3, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsxRuntime.jsx("time", { className: 'tw:align-middle', dateTime: item && item.start ? item.start.substring(0, 10) : '', children: item && item.start ? new Date(item.start).toLocaleDateString() : '' })] }), jsxRuntime.jsx("div", { className: 'tw:basis-1/5 tw:place-content-center', children: jsxRuntime.jsx("span", { children: "-" }) }), jsxRuntime.jsxs("div", { className: 'tw:basis-2/5 tw:flex tw:flex-row', children: [jsxRuntime.jsx(ForwardRef$3, { className: 'tw:h-4 tw:w-4 tw:mr-2' }), jsxRuntime.jsx("time", { className: 'tw:align-middle', dateTime: item && item.end ? item.end.substring(0, 10) : '', children: item && item.end ? new Date(item.end).toLocaleDateString() : '' })] })] }));
+};
+
+function PlusIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M12 4.5v15m7.5-7.5h-15"
+  }));
+}
+const ForwardRef$2 = /*#__PURE__*/ React__namespace.forwardRef(PlusIcon);
+
+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__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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__namespace.forwardRef(PencilIcon);
+
+function TrashIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.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__namespace.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 = React.useRef(null);
+    React.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 (jsxRuntime.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: jsxRuntime.jsxs("div", { className: 'card-body tw:p-2', children: [jsxRuntime.jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: title }), children, showCloseButton && (jsxRuntime.jsx("button", { className: 'btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2', onClick: onClose, children: "\u2715" }))] }) }));
+    }
+    else
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+
+function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false, }) {
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const hasUserPermission = useHasUserPermission();
+    const navigate = reactRouterDom.useNavigate();
+    const appState = useAppState();
+    const [imageLoaded, setImageLoaded] = React.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] = React.useState('');
+    const params = new URLSearchParams(window.location.search);
+    const openDeleteModal = async (event) => {
+        setModalOpen(true);
+        event.stopPropagation();
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-row', children: [jsxRuntime.jsx("div", { className: 'tw:grow tw:max-w-[calc(100%-60px)] }', children: jsxRuntime.jsxs("div", { className: 'flex items-center', children: [avatar && (jsxRuntime.jsx("div", { className: 'tw:avatar', children: jsxRuntime.jsxs("div", { className: `${big ? 'tw:w-20' : 'tw:w-10'} tw:inline tw:items-center tw:justify-center overflow-hidden`, children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: 'tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' }))] }) })), jsxRuntime.jsxs("div", { className: `${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`, children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: `tw:text-xs  tw:text-gray-500 ${truncateSubname && 'tw:truncate'}`, children: address })), subtitle && !hideSubname && (jsxRuntime.jsx("div", { className: `tw:text-xs  tw:opacity-50 ${truncateSubname && 'tw:truncate'}`, children: subtitle }))] })] }) }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: 'tw:dropdown tw:dropdown-bottom', children: [jsxRuntime.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: jsxRuntime.jsx(ForwardRef$4, { className: 'tw:h-5 tw:w-5' }) }), jsxRuntime.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 && (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: 'tw:text-base-content! tw:tooltip tw:tooltip-right tw:cursor-pointer', "data-tip": 'Edit', onClick: (e) => item.layer?.customEditLink
+                                                    ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${item.id}${params && '?' + params}` : ''} `)
+                                                    : editCallback(e), children: jsxRuntime.jsx(ForwardRef$1, { className: 'tw:h-5 tw:w-5' }) }) })), api?.updateItem &&
+                                            hasUserPermission(api.collectionName, 'update', item) &&
+                                            setPositionCallback && (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: 'tw:text-base-content! tw:tooltip tw:tooltip-right tw:cursor-pointer', "data-tip": 'Set position', onClick: setPositionCallback, children: jsxRuntime.jsx(SVG, { src: TargetDotSVG, className: 'tw:w-5 tw:h-5' }) }) })), api?.deleteItem &&
+                                            hasUserPermission(api.collectionName, 'delete', item) &&
+                                            deleteCallback && (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: 'tw:text-error! tw:tooltip tw:tooltip-right tw:cursor-pointer', "data-tip": 'Delete', onClick: openDeleteModal, children: loading ? (jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner tw:loading-sm' })) : (jsxRuntime.jsx(ForwardRef, { className: 'tw:h-5 tw:w-5' })) }) }))] })] })) })] }), jsxRuntime.jsx(DialogModal, { isOpened: modalOpen, title: 'Are you sure?', showCloseButton: false, onClose: () => setModalOpen(false), children: jsxRuntime.jsxs("div", { onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("span", { children: ["Do you want to delete ", jsxRuntime.jsx("b", { children: item.name }), "?"] }), jsxRuntime.jsx("div", { className: 'tw:grid', children: jsxRuntime.jsxs("div", { className: 'tw:flex tw:justify-between', children: [jsxRuntime.jsx("label", { className: 'tw:btn tw:mt-4 tw:btn-error', onClick: (e) => {
+                                            deleteCallback(e);
+                                            setModalOpen(false);
+                                        }, children: "Yes" }), jsxRuntime.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.
+    jsxRuntime.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: [jsxRuntime.jsx("b", { children: decodeTag(tag.name) }), count && jsxRuntime.jsxs("span", { className: 'tw:ml-2', children: ["(", count, ")"] })] }, tag.name));
+};
+
+exports.AppStateProvider = AppStateProvider;
+exports.AuthProvider = AuthProvider;
+exports.ClusterRefProvider = ClusterRefProvider;
+exports.DialogModal = DialogModal;
+exports.FilterProvider = FilterProvider;
+exports.ForwardRef = ForwardRef$4;
+exports.ForwardRef$1 = ForwardRef$2;
+exports.ForwardRef$2 = ForwardRef;
+exports.HeaderView = HeaderView;
+exports.ItemsProvider = ItemsProvider;
+exports.LayersProvider = LayersProvider;
+exports.LeafletRefsProvider = LeafletRefsProvider;
+exports.MapOverlayPage = MapOverlayPage;
+exports.PermissionsProvider = PermissionsProvider;
+exports.PopupStartEndInput = PopupStartEndInput;
+exports.SelectPositionProvider = SelectPositionProvider;
+exports.StartEndView = StartEndView;
+exports.TagView = TagView;
+exports.TagsProvider = TagsProvider;
+exports.TextAreaInput = TextAreaInput;
+exports.TextInput = TextInput;
+exports.TextView = TextView;
+exports.decodeTag = decodeTag;
+exports.encodeTag = encodeTag;
+exports.hashTagRegex = hashTagRegex;
+exports.randomColor = randomColor;
+exports.timeAgo = timeAgo;
+exports.useAddFilterTag = useAddFilterTag;
+exports.useAddItem = useAddItem;
+exports.useAddMarker = useAddMarker;
+exports.useAddPopup = useAddPopup;
+exports.useAddTag = useAddTag;
+exports.useAddVisibleGroupType = useAddVisibleGroupType;
+exports.useAddVisibleLayer = useAddVisibleLayer;
+exports.useAllItemsLoaded = useAllItemsLoaded;
+exports.useAllTagsLoaded = useAllTagsLoaded;
+exports.useAppState = useAppState;
+exports.useAuth = useAuth;
+exports.useClusterRef = useClusterRef;
+exports.useFilterTags = useFilterTags;
+exports.useGetItemTags = useGetItemTags;
+exports.useHasUserPermission = useHasUserPermission;
+exports.useIsGroupTypeVisible = useIsGroupTypeVisible;
+exports.useIsLayerVisible = useIsLayerVisible;
+exports.useItems = useItems;
+exports.useLayers = useLayers;
+exports.useLeafletRefs = useLeafletRefs;
+exports.useRemoveFilterTag = useRemoveFilterTag;
+exports.useRemoveItem = useRemoveItem;
+exports.useResetFilterTags = useResetFilterTags;
+exports.useSelectPosition = useSelectPosition;
+exports.useSetAdminRole = useSetAdminRole;
+exports.useSetAppState = useSetAppState;
+exports.useSetClusterRef = useSetClusterRef;
+exports.useSetItemsApi = useSetItemsApi;
+exports.useSetItemsData = useSetItemsData;
+exports.useSetMapClicked = useSetMapClicked;
+exports.useSetMarkerClicked = useSetMarkerClicked;
+exports.useSetPermissionApi = useSetPermissionApi;
+exports.useSetPermissionData = useSetPermissionData;
+exports.useSetSelectPosition = useSetSelectPosition;
+exports.useSetTagApi = useSetTagApi;
+exports.useSetTagData = useSetTagData;
+exports.useTags = useTags;
+exports.useToggleVisibleGroupType = useToggleVisibleGroupType;
+exports.useToggleVisibleLayer = useToggleVisibleLayer;
+exports.useUpdateItem = useUpdateItem;
+exports.useVisibleGroupType = useVisibleGroupType;
+exports.useWindowDimensions = useWindowDimensions;
+//# sourceMappingURL=TagView-VEMo7xsv.js.map