@bpd-library/components 1.2.5-beta.4 → 1.2.6-beta.0

package/dist/lib/molecules/map/utilities/mapbox/search/search.js

@@ -0,0 +1,172 @@
+import { h } from '@atomify/jsx';
+import { calculateBoundingBoxCenter, debounce, environment, expandBoundingBox, getCountryBoundingBox, useClickOutside, withinBoundingBox, } from '@bpd-library/utilities';
+import mapboxgl from 'mapbox-gl';
+import { clearSearchResult, getMapboxData, mapStore, updateSearchIsMoving, updateSearchResult, } from '../../../store/map';
+import { fitBounds } from '../../fit-bounds';
+import getCityAlternativeSuggestions from './alternative-city-suggestions';
+const MIN_KM_PADDING = 10;
+const search = async (map, { hook, kmPadding = MIN_KM_PADDING, onSearchSuggestion }, { searchCountryIsoCodes = ['nl', 'de'], language = 'nl' }) => {
+    const element = document.querySelector(hook);
+    const bounds = getCountryBoundingBox(searchCountryIsoCodes);
+    if (!element) {
+        if (environment.isLocal)
+            console.error(`Search element can't be found: ${hook}`);
+        return;
+    }
+    const inputElement = element.querySelector('[js-hook-map-search-input]');
+    const form = inputElement.closest('form');
+    const suggestionsElement = element.querySelector('[js-hook-map-search-suggestions]');
+    const buttonElement = element.querySelector('[js-hook-map-search-button]');
+    let geocoder;
+    let suggestions;
+    init();
+    async function init() {
+        const { default: MapboxGeocoder } = await import('@mapbox/mapbox-gl-geocoder');
+        geocoder = new MapboxGeocoder({
+            accessToken: mapboxgl.accessToken,
+            mapboxgl,
+            countries: searchCountryIsoCodes.join(',').toUpperCase(),
+            types: 'region,district,place,neighborhood',
+            localGeocoder,
+            language,
+            enableEventLogging: false,
+            marker: false,
+        });
+        map.addControl(geocoder);
+        bindEvents();
+        subscribe();
+    }
+    function bindEvents() {
+        const debouncedOnKeyDown = debounce(onKeyDown, 300);
+        inputElement.addEventListener('keydown', debouncedOnKeyDown);
+        buttonElement.addEventListener('click', handleButtonClick);
+        form === null || form === void 0 ? void 0 : form.addEventListener('submit', (e) => e.preventDefault());
+        useClickOutside(inputElement, handleClickOutside);
+        geocoder.on('results', (results) => {
+            suggestions = results;
+            renderSuggestions(suggestions);
+        });
+    }
+    function subscribe() {
+        handleManualSearch(mapStore.getState());
+        mapStore.subscribe(handleManualSearch, ['manualSearch']);
+    }
+    function handleManualSearch({ manualSearch }) {
+        if (manualSearch) {
+            geocoder.setInput(manualSearch).on('results', function handleResults(results) {
+                suggestions = results;
+                submitFirstSuggestion();
+                geocoder.off('results', handleResults);
+            });
+        }
+    }
+    function handleClickOutside() {
+        clearSuggestionsContainer();
+    }
+    function handleFitBounds() {
+        return fitBounds(map, bounds);
+    }
+    function onKeyDown(e) {
+        const { value } = inputElement;
+        if (e.key === 'Enter') {
+            if (!value) {
+                clearAll();
+                return;
+            }
+            else {
+                geocoder.on('results', function handleEnter() {
+                    submitFirstSuggestion();
+                    inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+                    geocoder.off('results', handleEnter);
+                });
+            }
+        }
+        if (value.length >= 3) {
+            geocoder.setInput(value);
+        }
+        else {
+            suggestions = undefined;
+            handleFitBounds();
+            clearSuggestionsContainer();
+            clearSearchResult();
+        }
+    }
+    function handleButtonClick() {
+        const { value } = inputElement;
+        if (!value) {
+            clearAll();
+        }
+        else {
+            submitFirstSuggestion();
+        }
+    }
+    function submitFirstSuggestion() {
+        const firstSuggestion = suggestions === null || suggestions === void 0 ? void 0 : suggestions.features[0];
+        updateStore(firstSuggestion);
+        clearSuggestionsContainer();
+    }
+    function clearSuggestionsContainer() {
+        suggestionsElement.innerHTML = '';
+    }
+    function clearAll() {
+        suggestions = undefined;
+        handleFitBounds();
+        clearSuggestionsContainer();
+        clearSearchResult();
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
+    }
+    function localGeocoder(query) {
+        const createSuggestion = ({ title, bbox, type, id }) => {
+            const center = calculateBoundingBoxCenter(bbox);
+            return {
+                place_name: title,
+                bbox,
+                center,
+                type,
+                id,
+            };
+        };
+        const customSuggestions = onSearchSuggestion
+            ? onSearchSuggestion(query.toLowerCase()).map(createSuggestion)
+            : [];
+        const cityAlternatives = getCityAlternativeSuggestions(query.toLowerCase()).map(createSuggestion);
+        return [...customSuggestions, ...cityAlternatives].slice(0, 4);
+    }
+    function updateStore(result) {
+        if (!result) {
+            updateSearchResult({
+                items: [],
+                result: false,
+            });
+            handleFitBounds();
+            return;
+        }
+        const expandedBoundingBox = expandBoundingBox(result.bbox, kmPadding);
+        const originalBoundingBox = result.bbox;
+        const mapData = getMapboxData();
+        const filteredData = mapData.filter((item) => withinBoundingBox(item.coordinates, expandedBoundingBox));
+        map.fitBounds(expandedBoundingBox);
+        updateSearchIsMoving(true);
+        map.once('moveend', () => {
+            updateSearchIsMoving(false);
+        });
+        updateSearchResult({
+            items: filteredData,
+            result,
+            originalBoundingBox,
+            expandedBoundingBox,
+        });
+    }
+    function handleSuggestionClick(feature) {
+        inputElement.value = feature.place_name;
+        clearSuggestionsContainer();
+        updateStore(feature);
+    }
+    function renderSuggestions(suggestions) {
+        clearSuggestionsContainer();
+        suggestionsElement.append(h("ul", { class: "map-search__suggestions" }, suggestions.features.map((feature) => (h("li", { class: "map-search__suggestion" },
+            h("button", { onClick: () => handleSuggestionClick(feature) }, feature.place_name))))));
+    }
+};
+export default search;
+//# sourceMappingURL=search.js.map

package/dist/lib/molecules/map/utilities/mapbox/search/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../../../../src/molecules/map/utilities/mapbox/search/search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@atomify/jsx';\nimport { BoundingBox, MapOptions, MapSearchOptions, MapSearchSuggestion } from '@bpd-library/types';\nimport {\n    calculateBoundingBoxCenter,\n    debounce,\n    environment,\n    expandBoundingBox,\n    getCountryBoundingBox,\n    useClickOutside,\n    withinBoundingBox,\n} from '@bpd-library/utilities';\nimport mapboxgl from 'mapbox-gl';\n\nimport {\n    clearSearchResult,\n    getMapboxData,\n    MapState,\n    mapStore,\n    updateSearchIsMoving,\n    updateSearchResult,\n} from '../../../store/map';\nimport { fitBounds } from '../../fit-bounds';\nimport getCityAlternativeSuggestions from './alternative-city-suggestions';\n\nconst MIN_KM_PADDING = 10;\n\nconst search = async (\n    map: mapboxgl.Map,\n    { hook, kmPadding = MIN_KM_PADDING, onSearchSuggestion }: MapSearchOptions,\n    { searchCountryIsoCodes = ['nl', 'de'], language = 'nl' }: MapOptions,\n) => {\n    const element = document.querySelector(hook);\n    const bounds = getCountryBoundingBox(searchCountryIsoCodes);\n\n    if (!element) {\n        if (environment.isLocal) console.error(`Search element can't be found: ${hook}`);\n        return;\n    }\n\n    const inputElement = element.querySelector('[js-hook-map-search-input]') as HTMLInputElement;\n    const form = inputElement.closest<HTMLFormElement>('form');\n    const suggestionsElement = element.querySelector(\n        '[js-hook-map-search-suggestions]',\n    ) as HTMLElement;\n    const buttonElement = element.querySelector('[js-hook-map-search-button]') as HTMLButtonElement;\n\n    let geocoder: any | undefined;\n    let suggestions: any | undefined;\n\n    init();\n\n    async function init() {\n        // Dynamically import geocoder library\n        const { default: MapboxGeocoder } = await import('@mapbox/mapbox-gl-geocoder');\n\n        geocoder = new MapboxGeocoder({\n            accessToken: mapboxgl.accessToken,\n            mapboxgl,\n            countries: searchCountryIsoCodes.join(',').toUpperCase(),\n            types: 'region,district,place,neighborhood',\n            localGeocoder,\n            language,\n            enableEventLogging: false,\n            marker: false,\n        });\n\n        map.addControl(geocoder);\n\n        bindEvents();\n        subscribe();\n    }\n\n    function bindEvents() {\n        const debouncedOnKeyDown = debounce(onKeyDown, 300);\n\n        inputElement.addEventListener('keydown', debouncedOnKeyDown);\n        buttonElement.addEventListener('click', handleButtonClick);\n        form?.addEventListener('submit', (e) => e.preventDefault());\n\n        useClickOutside(inputElement!, handleClickOutside);\n\n        geocoder.on('results', (results: any) => {\n            suggestions = results;\n\n            renderSuggestions(suggestions);\n        });\n    }\n\n    function subscribe() {\n        handleManualSearch(mapStore.getState());\n        mapStore.subscribe(handleManualSearch, ['manualSearch']);\n    }\n\n    function handleManualSearch({ manualSearch }: MapState) {\n        if (manualSearch) {\n            geocoder.setInput(manualSearch).on('results', function handleResults(results: any) {\n                suggestions = results;\n\n                submitFirstSuggestion();\n\n                geocoder.off('results', handleResults);\n            });\n        }\n    }\n\n    function handleClickOutside() {\n        clearSuggestionsContainer();\n    }\n\n    function handleFitBounds() {\n        return fitBounds(map, bounds);\n    }\n\n    function onKeyDown(e: KeyboardEvent) {\n        const { value } = inputElement!;\n\n        if (e.key === 'Enter') {\n            if (!value) {\n                clearAll();\n                return;\n            } else {\n                geocoder.on('results', function handleEnter() {\n                    submitFirstSuggestion();\n                    inputElement?.blur();\n\n                    geocoder.off('results', handleEnter);\n                });\n            }\n        }\n\n        if (value.length >= 3) {\n            geocoder.setInput(value);\n        } else {\n            suggestions = undefined;\n            handleFitBounds();\n            clearSuggestionsContainer();\n            clearSearchResult();\n        }\n    }\n\n    function handleButtonClick() {\n        const { value } = inputElement!;\n\n        if (!value) {\n            clearAll();\n        } else {\n            submitFirstSuggestion();\n        }\n    }\n\n    function submitFirstSuggestion() {\n        const firstSuggestion = suggestions?.features[0];\n\n        updateStore(firstSuggestion);\n        clearSuggestionsContainer();\n    }\n\n    function clearSuggestionsContainer() {\n        suggestionsElement.innerHTML = '';\n    }\n\n    function clearAll() {\n        suggestions = undefined;\n        handleFitBounds();\n        clearSuggestionsContainer();\n        clearSearchResult();\n        inputElement?.blur();\n    }\n\n    function localGeocoder(query: string) {\n        const createSuggestion = ({ title, bbox, type, id }: MapSearchSuggestion) => {\n            const center = calculateBoundingBoxCenter(bbox);\n\n            return {\n                place_name: title,\n                bbox,\n                center,\n                type,\n                id,\n            };\n        };\n\n        const customSuggestions = onSearchSuggestion\n            ? onSearchSuggestion(query.toLowerCase()).map(createSuggestion)\n            : [];\n        const cityAlternatives = getCityAlternativeSuggestions(query.toLowerCase()).map(\n            createSuggestion,\n        );\n\n        return [...customSuggestions, ...cityAlternatives].slice(0, 4);\n    }\n\n    function updateStore(result: any) {\n        if (!result) {\n            updateSearchResult({\n                items: [],\n                result: false,\n            });\n\n            handleFitBounds();\n\n            return;\n        }\n\n        const expandedBoundingBox = expandBoundingBox(result.bbox as BoundingBox, kmPadding);\n        const originalBoundingBox = result.bbox as BoundingBox;\n\n        const mapData = getMapboxData();\n        const filteredData = mapData.filter((item) =>\n            withinBoundingBox(item.coordinates, expandedBoundingBox),\n        );\n\n        map.fitBounds(expandedBoundingBox);\n\n        // Update searchIsMoving boolean in store. Is used to block other focus interactions when searched.\n        updateSearchIsMoving(true);\n\n        map.once('moveend', () => {\n            updateSearchIsMoving(false);\n        });\n\n        updateSearchResult({\n            items: filteredData,\n            result,\n            originalBoundingBox,\n            expandedBoundingBox,\n        });\n    }\n\n    function handleSuggestionClick(feature: any) {\n        inputElement.value = feature.place_name;\n\n        clearSuggestionsContainer();\n        updateStore(feature);\n    }\n\n    function renderSuggestions(suggestions: any) {\n        clearSuggestionsContainer();\n\n        suggestionsElement.append(\n            <ul class=\"map-search__suggestions\">\n                {suggestions.features.map((feature: any) => (\n                    <li class=\"map-search__suggestion\">\n                        <button onClick={() => handleSuggestionClick(feature)}>\n                            {feature.place_name}\n                        </button>\n                    </li>\n                ))}\n            </ul>,\n        );\n    }\n};\n\nexport default search;\n"]}

package/dist/lib/molecules/map/utilities/mapbox/tooltip.js

@@ -0,0 +1,24 @@
+import { h } from '@atomify/jsx';
+import { calculateCenter } from '@bpd-library/utilities';
+import { Popup } from 'mapbox-gl';
+import { Tooltip } from '../../../tooltip';
+let currentTooltip;
+const addTooltip = (map, coordinates, mapDataItem, openInTab) => {
+    removeTooltip();
+    const { tooltip, url } = mapDataItem;
+    if (!tooltip)
+        return;
+    const center = calculateCenter(coordinates);
+    currentTooltip = new Popup({
+        closeButton: false,
+        offset: 20,
+    })
+        .setLngLat(center)
+        .setDOMContent(h(Tooltip, Object.assign({}, tooltip, { url: url, openInTab: openInTab })))
+        .addTo(map);
+};
+const removeTooltip = () => {
+    currentTooltip === null || currentTooltip === void 0 ? void 0 : currentTooltip.remove();
+};
+export { addTooltip, removeTooltip };
+//# sourceMappingURL=tooltip.js.map

package/dist/lib/molecules/map/utilities/mapbox/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,cAA0C,CAAC;AAE/C,MAAM,UAAU,GAAG,CACf,GAAiB,EACjB,WAAwB,EACxB,WAAwB,EACxB,SAAmB,EACrB,EAAE;IACA,aAAa,EAAE,CAAC;IAEhB,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO;IAErB,MAAM,MAAM,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE5C,cAAc,GAAG,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,EAAE;KACb,CAAC;SACG,SAAS,CAAC,MAAM,CAAC;SACjB,aAAa,CAAC,EAAC,OAAO,oBAAK,OAAO,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,IAAI,CAAC;SACvE,KAAK,CAAC,GAAG,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE;IACvB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,GAAG;AAC7B,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import { h } from '@atomify/jsx';\nimport { Coordinates, MapDataItem } from '@bpd-library/types';\nimport { calculateCenter } from '@bpd-library/utilities';\nimport { Popup } from 'mapbox-gl';\n\nimport { Tooltip } from '../../../tooltip';\n\nlet currentTooltip: mapboxgl.Popup | undefined;\n\nconst addTooltip = (\n    map: mapboxgl.Map,\n    coordinates: Coordinates,\n    mapDataItem: MapDataItem,\n    openInTab?: boolean,\n) => {\n    removeTooltip();\n\n    const { tooltip, url } = mapDataItem;\n\n    if (!tooltip) return;\n\n    const center = calculateCenter(coordinates);\n\n    currentTooltip = new Popup({\n        closeButton: false,\n        offset: 20,\n    })\n        .setLngLat(center)\n        .setDOMContent(<Tooltip {...tooltip} url={url} openInTab={openInTab} />)\n        .addTo(map);\n};\n\nconst removeTooltip = () => {\n    currentTooltip?.remove();\n};\n\nexport { addTooltip, removeTooltip };\n"]}

package/dist/lib/molecules/tooltip/index.js

@@ -0,0 +1,2 @@
+export * from './tooltip';
+//# sourceMappingURL=index.js.map

package/dist/lib/molecules/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/molecules/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './tooltip';\n"]}

package/dist/lib/molecules/tooltip/tooltip.js

@@ -0,0 +1,11 @@
+import { h } from '@atomify/jsx';
+import { ButtonA } from '../../atoms/button';
+import { Image } from '../../atoms/image';
+export const Tooltip = ({ title, image, tags, buttonLabel, url, openInTab }) => (h("div", { class: "c-tooltip" },
+    image && (h("div", { class: "tooltip__image" },
+        h(Image, { image: image, preload: { width: 180, height: 100 }, alt: title }))),
+    h("div", { class: "tooltip__wrapper" },
+        h("h3", { class: "tooltip__title" }, title), tags === null || tags === void 0 ? void 0 :
+        tags.map((tag) => (h("span", { class: "tooltip__meta" }, tag))),
+        url && buttonLabel && (h(ButtonA, { classes: "tooltip__button", url: url, target: openInTab ? '_blank' : '_self', label: buttonLabel, size: "small" })))));
+//# sourceMappingURL=tooltip.js.map

package/dist/lib/molecules/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/molecules/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAGjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAO1C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAW,EAAE,EAAE,CAAC,CACrF,WAAK,KAAK,EAAC,WAAW;IACjB,KAAK,IAAI,CACN,WAAK,KAAK,EAAC,gBAAgB;QACvB,EAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,KAAK,GAAI,CACvE,CACT;IACD,WAAK,KAAK,EAAC,kBAAkB;QACzB,UAAI,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAM,EACtC,IAAI,aAAJ,IAAI;QAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChB,YAAM,KAAK,EAAC,eAAe,IAAE,GAAG,CAAQ,CAC3C;QAEA,GAAG,IAAI,WAAW,IAAI,CACnB,EAAC,OAAO,IACJ,OAAO,EAAC,iBAAiB,EACzB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACtC,KAAK,EAAE,WAAW,EAClB,IAAI,EAAC,OAAO,GACd,CACL,CACC,CACJ,CACT,CAAC","sourcesContent":["import { h } from '@atomify/jsx';\nimport { MapTooltip } from '@bpd-library/types';\n\nimport { ButtonA } from '../../atoms/button';\nimport { Image } from '../../atoms/image';\n\ninterface Tooltip extends MapTooltip {\n    url?: string | null;\n    openInTab?: boolean;\n}\n\nexport const Tooltip = ({ title, image, tags, buttonLabel, url, openInTab }: Tooltip) => (\n    <div class=\"c-tooltip\">\n        {image && (\n            <div class=\"tooltip__image\">\n                <Image image={image} preload={{ width: 180, height: 100 }} alt={title} />\n            </div>\n        )}\n        <div class=\"tooltip__wrapper\">\n            <h3 class=\"tooltip__title\">{title}</h3>\n            {tags?.map((tag) => (\n                <span class=\"tooltip__meta\">{tag}</span>\n            ))}\n\n            {url && buttonLabel && (\n                <ButtonA\n                    classes=\"tooltip__button\"\n                    url={url}\n                    target={openInTab ? '_blank' : '_self'}\n                    label={buttonLabel}\n                    size=\"small\"\n                />\n            )}\n        </div>\n    </div>\n);\n"]}

package/dist/molecules/map/utilities/mapbox/directions/directions.js

@@ -33,9 +33,10 @@ const addDirections = async (map, directionsOptions) => {
                     ],
                 });
                 const middlePoint = geometry.coordinates[~~(geometry.coordinates.length / 2)];
+                const transformedDuration = transformDuration(duration);
                 startPopup = addPopup(start, startLabel());
                 endPopup = addPopup(end, endLabel());
-                durationPopup = addPopup(middlePoint, durationLabel(duration));
+                durationPopup = addPopup(middlePoint, durationLabel(transformedDuration));
                 fitApiResultBounds(geometry);
                 onInitialized && onInitialized();
             }
@@ -46,6 +47,15 @@ const addDirections = async (map, directionsOptions) => {
             }
         }
     }
+    function transformDuration(seconds) {
+        const totalHours = seconds / 60 / 60;
+        const hours = Math.floor(totalHours);
+        const minutes = Math.round((totalHours - hours) * 0.6 * 100);
+        return {
+            hours,
+            minutes,
+        };
+    }
     function setupSource() {
         map.addSource(DIRECTIONS_SOURCE, {
             type: 'geojson',
@@ -65,7 +75,7 @@ const addDirections = async (map, directionsOptions) => {
         });
     }
     function addPopup(location, labelNode, options) {
-        return new Popup(Object.assign({ closeButton: false, closeOnClick: false, offset: 5 }, options))
+        return new Popup(Object.assign({ closeButton: false, closeOnClick: false, offset: 5, focusAfterOpen: false }, options))
             .setLngLat(location)
             .setDOMContent(labelNode)
             .addTo(map);

package/dist/molecules/map/utilities/mapbox/directions/directions.js.map

@@ -1 +1 @@
-{"version":3,"file":"directions.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/directions/directions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Coordinate,\n    Coordinates,\n    DirectionsAPIRoute,\n    MapDirectionsSetting,\n} from '@bpd-library/types';\nimport { calculateBoundingBox, environment } from '@bpd-library/utilities';\nimport mapboxgl, { Popup } from 'mapbox-gl';\n\ninterface DirectionsAPIResult {\n    routes: DirectionsAPIRoute[];\n}\n\nconst DIRECTIONS_SOURCE = 'directions';\n\nlet startPopup: Popup | undefined;\nlet endPopup: Popup | undefined;\nlet durationPopup: Popup | undefined;\n\nconst addDirections = async (map: mapboxgl.Map, directionsOptions: MapDirectionsSetting) => {\n    await init();\n\n    async function init() {\n        startPopup?.remove();\n        endPopup?.remove();\n        durationPopup?.remove();\n\n        if (!map.getSource(DIRECTIONS_SOURCE)) {\n            setupSource();\n            setupLayer();\n        }\n\n        const { profile, start, end, startLabel, endLabel, durationLabel, onInitialized } =\n            directionsOptions;\n\n        const accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;\n\n        try {\n            const url = `https://api.mapbox.com/directions/v5/mapbox/${profile}/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson&access_token=${accessToken}`;\n            const {\n                routes: [route],\n            } = (await fetch(url).then((r) => r.json())) as DirectionsAPIResult;\n\n            if (route) {\n                const { geometry, duration } = route;\n\n                const source = map.getSource(DIRECTIONS_SOURCE) as\n                    | mapboxgl.GeoJSONSource\n                    | undefined;\n                source?.setData({\n                    type: 'FeatureCollection',\n                    features: [\n                        {\n                            type: 'Feature',\n                            geometry: geometry,\n                            properties: null,\n                        },\n                    ],\n                });\n\n                const middlePoint = geometry.coordinates[\n                    ~~(geometry.coordinates.length / 2)\n                ] as Coordinate;\n\n                // TODO: find better middle point - the one that lies on the line that passes between the start and end point\n                // possibly use turf but definitely something like this:\n                //\n                // - for each coordinate on the route (except start and end)\n                // -     calculate distance between start and end\n                // -     divide (coord -> start) and (coord -> end)\n                //\n                // the point that has that division closest to 1 lies on that middle line and should be a good approximation\n\n                startPopup = addPopup(start, startLabel());\n                endPopup = addPopup(end, endLabel());\n                durationPopup = addPopup(middlePoint, durationLabel(duration));\n\n                fitApiResultBounds(geometry);\n\n                onInitialized && onInitialized();\n            }\n        } catch (e) {\n            if (environment.isLocal) {\n                console.error(e);\n            }\n        }\n    }\n\n    function setupSource() {\n        map.addSource(DIRECTIONS_SOURCE, {\n            type: 'geojson',\n            data: {\n                type: 'FeatureCollection',\n                features: [],\n            },\n        });\n    }\n\n    function setupLayer() {\n        map.addLayer({\n            id: 'directionsStroke',\n            type: 'line',\n            source: DIRECTIONS_SOURCE,\n            layout: {},\n            paint: {\n                'line-color': '#32C1DE',\n                'line-width': 4,\n                ...directionsOptions.linePaintOptions,\n            },\n        });\n    }\n\n    // function getMiddlePoint(start: Coordinates, end: Coordinates, points: Position[]) {\n    //     //\n    // }\n\n    function addPopup(location: Coordinate, labelNode: Node, options?: mapboxgl.PopupOptions) {\n        return new Popup({\n            closeButton: false,\n            closeOnClick: false,\n            offset: 5,\n            ...options,\n        })\n            .setLngLat(location)\n            .setDOMContent(labelNode)\n            .addTo(map);\n    }\n\n    function fitApiResultBounds(geometry: GeoJSON.LineString) {\n        const coordinates = [geometry.coordinates] as Coordinates;\n        const boundingBox = calculateBoundingBox(coordinates);\n\n        map.fitBounds(boundingBox, {\n            padding: directionsOptions.boundsPadding || 50,\n            animate: true,\n            duration: 1000,\n        });\n    }\n};\n\nfunction removeDirections(map: mapboxgl.Map) {\n    const source = map.getSource(DIRECTIONS_SOURCE) as mapboxgl.GeoJSONSource | undefined;\n\n    if (!source) return;\n\n    source.setData({\n        type: 'FeatureCollection',\n        features: [],\n    });\n\n    startPopup?.remove();\n    endPopup?.remove();\n    durationPopup?.remove();\n}\n\nexport { addDirections, removeDirections };\n"]}
+{"version":3,"file":"directions.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/directions/directions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Coordinate,\n    Coordinates,\n    DirectionsAPIRoute,\n    MapDirectionsDuration,\n    MapDirectionsSetting,\n} from '@bpd-library/types';\nimport { calculateBoundingBox, environment } from '@bpd-library/utilities';\nimport mapboxgl, { Popup } from 'mapbox-gl';\n\ninterface DirectionsAPIResult {\n    routes: DirectionsAPIRoute[];\n}\n\nconst DIRECTIONS_SOURCE = 'directions';\n\nlet startPopup: Popup | undefined;\nlet endPopup: Popup | undefined;\nlet durationPopup: Popup | undefined;\n\nconst addDirections = async (map: mapboxgl.Map, directionsOptions: MapDirectionsSetting) => {\n    await init();\n\n    async function init() {\n        startPopup?.remove();\n        endPopup?.remove();\n        durationPopup?.remove();\n\n        if (!map.getSource(DIRECTIONS_SOURCE)) {\n            setupSource();\n            setupLayer();\n        }\n\n        const { profile, start, end, startLabel, endLabel, durationLabel, onInitialized } =\n            directionsOptions;\n\n        const accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;\n\n        try {\n            const url = `https://api.mapbox.com/directions/v5/mapbox/${profile}/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson&access_token=${accessToken}`;\n            const {\n                routes: [route],\n            } = (await fetch(url).then((r) => r.json())) as DirectionsAPIResult;\n\n            if (route) {\n                const { geometry, duration } = route;\n\n                const source = map.getSource(DIRECTIONS_SOURCE) as\n                    | mapboxgl.GeoJSONSource\n                    | undefined;\n                source?.setData({\n                    type: 'FeatureCollection',\n                    features: [\n                        {\n                            type: 'Feature',\n                            geometry: geometry,\n                            properties: null,\n                        },\n                    ],\n                });\n\n                const middlePoint = geometry.coordinates[\n                    ~~(geometry.coordinates.length / 2)\n                ] as Coordinate;\n\n                // TODO: find better middle point - the one that lies on the line that passes between the start and end point\n                // possibly use turf but definitely something like this:\n                //\n                // - for each coordinate on the route (except start and end)\n                // -     calculate distance between start and end\n                // -     divide (coord -> start) and (coord -> end)\n                //\n                // the point that has that division closest to 1 lies on that middle line and should be a good approximation\n\n                const transformedDuration = transformDuration(duration);\n\n                startPopup = addPopup(start, startLabel());\n                endPopup = addPopup(end, endLabel());\n                durationPopup = addPopup(middlePoint, durationLabel(transformedDuration));\n\n                fitApiResultBounds(geometry);\n\n                onInitialized && onInitialized();\n            }\n        } catch (e) {\n            if (environment.isLocal) {\n                console.error(e);\n            }\n        }\n    }\n\n    function transformDuration(seconds: number): MapDirectionsDuration {\n        const totalHours = seconds / 60 / 60;\n        const hours = Math.floor(totalHours);\n        const minutes = Math.round((totalHours - hours) * 0.6 * 100);\n\n        return {\n            hours,\n            minutes,\n        };\n    }\n\n    function setupSource() {\n        map.addSource(DIRECTIONS_SOURCE, {\n            type: 'geojson',\n            data: {\n                type: 'FeatureCollection',\n                features: [],\n            },\n        });\n    }\n\n    function setupLayer() {\n        map.addLayer({\n            id: 'directionsStroke',\n            type: 'line',\n            source: DIRECTIONS_SOURCE,\n            layout: {},\n            paint: {\n                'line-color': '#32C1DE',\n                'line-width': 4,\n                ...directionsOptions.linePaintOptions,\n            },\n        });\n    }\n\n    // function getMiddlePoint(start: Coordinates, end: Coordinates, points: Position[]) {\n    //     //\n    // }\n\n    function addPopup(location: Coordinate, labelNode: Node, options?: mapboxgl.PopupOptions) {\n        return new Popup({\n            closeButton: false,\n            closeOnClick: false,\n            offset: 5,\n            focusAfterOpen: false,\n            ...options,\n        })\n            .setLngLat(location)\n            .setDOMContent(labelNode)\n            .addTo(map);\n    }\n\n    function fitApiResultBounds(geometry: GeoJSON.LineString) {\n        const coordinates = [geometry.coordinates] as Coordinates;\n        const boundingBox = calculateBoundingBox(coordinates);\n\n        map.fitBounds(boundingBox, {\n            padding: directionsOptions.boundsPadding || 50,\n            animate: true,\n            duration: 1000,\n        });\n    }\n};\n\nfunction removeDirections(map: mapboxgl.Map) {\n    const source = map.getSource(DIRECTIONS_SOURCE) as mapboxgl.GeoJSONSource | undefined;\n\n    if (!source) return;\n\n    source.setData({\n        type: 'FeatureCollection',\n        features: [],\n    });\n\n    startPopup?.remove();\n    endPopup?.remove();\n    durationPopup?.remove();\n}\n\nexport { addDirections, removeDirections };\n"]}

package/dist/types/atoms/button/button.d.ts

@@ -0,0 +1,17 @@
+interface ButtonInterface {
+    label: string | Text;
+    variant?: string;
+    icon?: string;
+    size?: string;
+    classes?: string;
+    type?: string;
+    url?: string;
+    hook?: string;
+    controls?: string;
+    onClick?: Function;
+    target?: string;
+    attr?: {};
+}
+declare const Button: (data: ButtonInterface) => any;
+declare const ButtonA: (data: ButtonInterface) => any;
+export { Button, ButtonA };

package/dist/types/atoms/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/types/atoms/col/col.d.ts

@@ -0,0 +1,11 @@
+interface ColInterface {
+    extraClass?: string;
+    children?: NodeList;
+    cols?: (number | undefined)[];
+    push?: (number | undefined)[];
+    pull?: (number | undefined)[];
+    pre?: (number | undefined)[];
+    post?: (number | undefined)[];
+}
+export declare const Col: ({ extraClass, children, cols, push, pull, pre, post, }: ColInterface) => any;
+export {};

package/dist/types/atoms/container/container.d.ts

@@ -0,0 +1,6 @@
+interface ContainerInterface {
+    extraClass?: string;
+    children?: NodeList;
+}
+export declare const Container: ({ extraClass, children }: ContainerInterface) => any;
+export {};

package/dist/types/atoms/form-elements/range-slider/range-slider.d.ts

@@ -0,0 +1,11 @@
+export interface RangeSliderProps {
+    min: number;
+    max: number;
+    increment: number;
+    start: number[];
+    onChange: (e: CustomEvent) => void;
+    name: string;
+    classes?: string;
+    disabled?: boolean;
+}
+export declare const RangeSliderElement: ({ classes, disabled, min, max, increment, start, name, onChange, }: RangeSliderProps) => any;

package/dist/types/atoms/form-elements/utilities/range-slider.d.ts

@@ -0,0 +1,7 @@
+import { Component, FC } from '@atomify/hooks';
+export interface BPDRange extends Component {
+    bindValue: number[];
+    start: number[];
+    resetState: () => void;
+}
+export declare const RangeSlider: FC<BPDRange>;

package/dist/types/atoms/image/image.d.ts

@@ -0,0 +1,14 @@
+import { Setting, Settings } from './utilities/image';
+export interface ImageInterface {
+    image: string;
+    alt: string;
+    settings?: Settings;
+    preload?: Setting;
+    srcset?: string;
+    classes?: string;
+    caption?: string;
+    hidden?: boolean;
+    objectFit?: boolean | 'contain';
+    disableCrossFade?: boolean;
+}
+export declare const Image: (data: ImageInterface) => any;

package/dist/types/atoms/image/index.d.ts

@@ -0,0 +1 @@
+export * from './image';

package/dist/types/atoms/image/utilities/create-image-url.d.ts

@@ -0,0 +1,6 @@
+interface Setting {
+    width?: number;
+    height?: number;
+}
+declare const createImageUrl: (image: string, { width, height }: Setting) => string;
+export default createImageUrl;

package/dist/types/atoms/image/utilities/detect-responsive-images.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    srcset: boolean;
+    currentSrc: boolean;
+    sizes: boolean;
+    picture: boolean;
+};
+export default _default;

package/dist/types/atoms/image/utilities/image.d.ts

@@ -0,0 +1,18 @@
+export interface Setting {
+    width?: number;
+    height?: number;
+    src?: boolean | undefined;
+}
+export interface Settings {
+    [key: string]: Setting;
+}
+export declare class BPDImage extends HTMLElement {
+    img: HTMLImageElement;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private parseSettings;
+    private generateSrc;
+    private generateSrcset;
+    private loadImage;
+    private renderImage;
+}

package/dist/types/atoms/image/utilities/object-fit.d.ts

@@ -0,0 +1,7 @@
+declare type ImageElement = HTMLImageElement | HTMLImageElement[];
+export default class ObjectFit {
+    static polyfillObjectFit(element: ImageElement): void;
+    static getObjectfitImages(element: ImageElement): HTMLImageElement[];
+    private static polyfillImage;
+}
+export {};

package/dist/types/atoms/row/row.d.ts

@@ -0,0 +1,6 @@
+interface RowInterface {
+    extraClass?: string;
+    children?: NodeList;
+}
+export declare const Row: ({ extraClass, children }: RowInterface) => any;
+export {};

package/dist/types/atoms/svg/svg.d.ts

@@ -0,0 +1,4 @@
+export declare class BPDSvg extends HTMLElement {
+    name: string;
+    render(): any;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export * from './atoms/button';
+export * from './atoms/col/col';
+export * from './atoms/container/container';
+export * from './atoms/form-elements/range-slider/range-slider';
+export * from './atoms/form-elements/utilities/range-slider';
+export * from './atoms/image';
+export * from './atoms/row/row';
+export * from './atoms/svg/svg';
+export * from './molecules/infobox';
+export * from './molecules/map';
+export * from './molecules/tooltip';

package/dist/types/molecules/infobox/index.d.ts

@@ -0,0 +1 @@
+export * from './infobox';

package/dist/types/molecules/infobox/infobox.d.ts

@@ -0,0 +1,7 @@
+import { MapInfobox } from '@bpd-library/types';
+interface InfoboxInterface extends MapInfobox {
+    onClose: () => void;
+    openInTab?: boolean;
+}
+export declare const Infobox: ({ title, image, tags, description, link, onClose, openInTab, }: InfoboxInterface) => any;
+export {};

package/dist/types/molecules/map/hooks/use-style-loaded.d.ts

@@ -0,0 +1,2 @@
+declare const useStyleLoaded: (map: mapboxgl.Map, cb: Function) => void;
+export default useStyleLoaded;

package/dist/types/molecules/map/index.d.ts

@@ -0,0 +1,3 @@
+export * from './utilities/fit-bounds';
+export * from './store/map';
+export * from './map';

package/dist/types/molecules/map/map.d.ts

@@ -0,0 +1,2 @@
+import { FC } from '@atomify/hooks';
+export declare const Map: FC;

package/dist/types/molecules/map/store/map/index.d.ts

@@ -0,0 +1 @@
+export * from './store';

package/dist/types/molecules/map/store/map/store.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="mapbox-gl" />
+import { BoundingBox, MapDataItem } from '@bpd-library/types';
+export declare type SearchResult = {
+    items: MapDataItem[];
+    result: any;
+    originalBoundingBox?: BoundingBox;
+    expandedBoundingBox?: BoundingBox;
+};
+interface MapFocusOptions {
+    zoom?: boolean;
+    toggleTooltip?: boolean;
+    static?: boolean;
+}
+export interface MapLayerRasterSettings {
+    layerRaster: string;
+    minzoom?: number;
+    maxzoom?: number;
+}
+export interface MapState {
+    data: MapDataItem[];
+    mapInstance?: mapboxgl.Map;
+    hover: {
+        current?: MapDataItem;
+        previous?: MapDataItem;
+    };
+    filter?: MapDataItem[];
+    click?: MapDataItem;
+    focus: {
+        current?: MapDataItem[];
+        previous?: MapDataItem[];
+        options?: MapFocusOptions;
+    };
+    searchResult?: SearchResult;
+    searchIsMoving: boolean;
+    manualSearch?: string;
+    layerRasterSettings?: MapLayerRasterSettings;
+}
+export declare const mapStore: import("@atomify/kit/dist/utilities/store/store.types").Store<MapState>;
+export declare const updateMapData: (data: MapDataItem[]) => void;
+export declare const clearHover: () => void;
+export declare const updateHover: (hover: MapDataItem) => void;
+export declare const updateClick: (click: MapDataItem) => void;
+export declare const setFocus: (ids: string[], options?: MapFocusOptions) => void;
+export declare const clearFocus: () => void;
+export declare const updateSearchResult: (searchResult: SearchResult) => void;
+export declare const clearSearchResult: () => void;
+export declare const setFilter: (data: MapDataItem[]) => void;
+export declare const clearFilter: () => void;
+export declare const setMapInstance: (mapInstance: mapboxgl.Map) => void;
+export declare const manualSearch: (query: string) => void;
+export declare const updateSearchIsMoving: (isMoving: boolean) => void;
+export declare const setLayerRaster: (layerRasterSettings: MapLayerRasterSettings) => void;
+export declare const getMapboxData: () => MapDataItem[];
+export declare const getHover: () => {
+    current?: MapDataItem | undefined;
+    previous?: MapDataItem | undefined;
+};
+export declare const getMapInstance: () => import("mapbox-gl").Map | undefined;
+export declare const getSearchIsMoving: () => boolean;
+export {};

package/dist/types/molecules/map/storybook/themes.d.ts

@@ -0,0 +1,3 @@
+import { MapTheme } from '@bpd-library/types';
+declare const THEME: MapTheme;
+export default THEME;

package/dist/types/molecules/map/utilities/fit-bounds.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="mapbox-gl" />
+import { BoundingBox } from '@bpd-library/types';
+export declare const fitBounds: (map: mapboxgl.Map, boundingBox: BoundingBox) => import("mapbox-gl").Map;

package/dist/types/molecules/map/utilities/mapbox/add-data.d.ts

@@ -0,0 +1,3 @@
+import { MapData, MapTheme } from '@bpd-library/types';
+declare const addData: (map: mapboxgl.Map, data: MapData, theme: MapTheme) => Promise<void>;
+export default addData;

package/dist/types/molecules/map/utilities/mapbox/center.d.ts

@@ -0,0 +1,3 @@
+import { Coordinates } from '@bpd-library/types';
+declare const center: (map: mapboxgl.Map, coordinates: Coordinates) => void;
+export default center;

package/dist/types/molecules/map/utilities/mapbox/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAP_FLY_DURATION = 1000;
+export declare const MAP_FLY_EASING_FUNCTION: (t: number) => number;

package/dist/types/molecules/map/utilities/mapbox/index.d.ts

@@ -0,0 +1,2 @@
+import mapbox from './mapbox';
+export default mapbox;

package/dist/types/molecules/map/utilities/mapbox/mapbox.d.ts

@@ -0,0 +1,16 @@
+import { Coordinates, MapData, MapDataItem, MapOptions, MapSearchOptions, MapTheme, PolygonThemeSetting } from '@bpd-library/types';
+import { MapLayerRasterSettings } from '../../store/map';
+declare const mapbox: (map: mapboxgl.Map, options: MapOptions, theme: MapTheme) => {
+    raster: (settings: MapLayerRasterSettings) => void;
+    geojson: (setting: PolygonThemeSetting) => void;
+    layer: (setting: PolygonThemeSetting) => void;
+    interaction: (setting: PolygonThemeSetting) => void;
+    center: (coordinates: Coordinates) => void;
+    setupPointers: (element: HTMLElement) => void;
+    addData: (data: MapData) => Promise<void>;
+    addTooltip: (coordinates: Coordinates, mapDataItem: MapDataItem) => void;
+    removeTooltip: () => void;
+    setFeatureState: (variant: string, id: string, type: 'hover' | 'focus', hover: boolean) => void;
+    search: (searchOptions: MapSearchOptions) => Promise<void>;
+};
+export default mapbox;