@bpd-library/components 1.2.8-beta.9 → 1.2.8

package/dist/esm/atoms/button/button.js

@@ -0,0 +1,33 @@
+import { h } from '@atomify/jsx';
+
+const createClassName = (data) => {
+    let className = data.variant ? `c-button--${data.variant}` : 'c-button';
+    className += data.icon ? ' button--icon' : '';
+    className += data.size ? ` button--${data.size}` : '';
+    className += data.classes ? ` ${data.classes}` : '';
+    return className;
+};
+const createAttributes = (data) => {
+    const attributes = Object.assign(Object.assign({}, data.attr), { [`js-hook-${data.hook}`]: data.hook, onClick: data.onClick, ariaControls: data.controls, href: data.url });
+    return attributes;
+};
+const Button = (data) => {
+    const className = createClassName(data);
+    const attributes = createAttributes(data);
+    attributes.type = data.type || 'button';
+    return (h("button", Object.assign({ class: className }, attributes),
+        data.icon && (h("span", { class: "button__icon" },
+            h("bpd-svg", { name: data.icon }))),
+        h("span", { class: "button__label" }, data.label)));
+};
+const ButtonA = (data) => {
+    const className = createClassName(data);
+    const attributes = createAttributes(data);
+    return (h("a", Object.assign({ class: className }, attributes, { target: data.target }),
+        data.icon && (h("span", { class: "button__icon" },
+            h("bpd-svg", { name: data.icon }))),
+        h("span", { class: "button__label" }, data.label)));
+};
+
+export { Button, ButtonA };
+//# sourceMappingURL=button.js.map

package/dist/esm/atoms/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../../src/atoms/button/button.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\ninterface ButtonInterface {\n    label: string | Text;\n    variant?: string;\n    icon?: string;\n    size?: string;\n    classes?: string;\n    type?: string;\n    url?: string;\n    hook?: string;\n    controls?: string;\n    onClick?: Function;\n    target?: string;\n    attr?: {};\n}\n\nconst createClassName = (data: ButtonInterface) => {\n    let className = data.variant ? `c-button--${data.variant}` : 'c-button';\n\n    className += data.icon ? ' button--icon' : '';\n    className += data.size ? ` button--${data.size}` : '';\n    className += data.classes ? ` ${data.classes}` : '';\n\n    return className;\n};\n\nconst createAttributes = (data: ButtonInterface) => {\n    const attributes: any = {\n        ...data.attr,\n        [`js-hook-${data.hook}`]: data.hook,\n        onClick: data.onClick,\n        ariaControls: data.controls,\n        href: data.url,\n    };\n\n    return attributes;\n};\n\n/*\n    <button> element\n*/\nconst Button = (data: ButtonInterface) => {\n    const className = createClassName(data);\n    const attributes = createAttributes(data);\n\n    attributes.type = data.type || 'button';\n\n    return (\n        <button class={className} {...attributes}>\n            {data.icon && (\n                <span class=\"button__icon\">\n                    <bpd-svg name={data.icon}></bpd-svg>\n                </span>\n            )}\n\n            <span class=\"button__label\">{data.label}</span>\n        </button>\n    );\n};\n\n/*\n    <a> element\n*/\nconst ButtonA = (data: ButtonInterface) => {\n    const className = createClassName(data);\n    const attributes = createAttributes(data);\n\n    return (\n        <a class={className} {...attributes} target={data.target}>\n            {data.icon && (\n                <span class=\"button__icon\">\n                    <bpd-svg name={data.icon}></bpd-svg>\n                </span>\n            )}\n\n            <span class=\"button__label\">{data.label}</span>\n        </a>\n    );\n};\n\nexport { Button, ButtonA };\n"],"names":[],"mappings":";;AAiBA,MAAM,eAAe,GAAG,CAAC,IAAqB;IAC1C,IAAI,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,aAAa,IAAI,CAAC,OAAO,EAAE,GAAG,UAAU,CAAC;IAExE,SAAS,IAAI,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE,CAAC;IAC9C,SAAS,IAAI,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IACtD,SAAS,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC;IAEpD,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAqB;IAC3C,MAAM,UAAU,mCACT,IAAI,CAAC,IAAI,KACZ,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EACnC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,GAAG,GACjB,CAAC;IAEF,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;MAKI,MAAM,GAAG,CAAC,IAAqB;IACjC,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE1C,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;IAExC,QACI,4BAAQ,KAAK,EAAE,SAAS,IAAM,UAAU;QACnC,IAAI,CAAC,IAAI,KACN,YAAM,KAAK,EAAC,cAAc;YACtB,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CACjC,CACV;QAED,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,EACX;AACN,EAAE;MAKI,OAAO,GAAG,CAAC,IAAqB;IAClC,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE1C,QACI,uBAAG,KAAK,EAAE,SAAS,IAAM,UAAU,IAAE,MAAM,EAAE,IAAI,CAAC,MAAM;QACnD,IAAI,CAAC,IAAI,KACN,YAAM,KAAK,EAAC,cAAc;YACtB,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CACjC,CACV;QAED,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/C,EACN;AACN;;;;"}

package/dist/esm/atoms/col/col.js

@@ -0,0 +1,22 @@
+import { h } from '@atomify/jsx';
+
+const breakpoints = ['xs', 'sm', 'md', 'lg', 'xlg'];
+const createClasses = (prefix, cols) => {
+    return cols.reduce((classes, col, i) => {
+        classes.push(i === 0 ? `${prefix}-${col}` : `${prefix}-${col}--${breakpoints[i]}`);
+        return classes;
+    }, []);
+};
+const Col = ({ extraClass = '', children, cols = [], push = [], pull = [], pre = [], post = [], }) => {
+    const classes = [
+        ...createClasses('o-col', cols),
+        ...createClasses('u-push', push),
+        ...createClasses('u-pull', pull),
+        ...createClasses('u-pre', pre),
+        ...createClasses('u-post', post),
+    ].join(' ');
+    return h("div", { class: `${classes} ${extraClass}` }, children);
+};
+
+export { Col };
+//# sourceMappingURL=col.js.map

package/dist/esm/atoms/col/col.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.js","sources":["../../../../src/atoms/col/col.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\nconst breakpoints: string[] = ['xs', 'sm', 'md', 'lg', 'xlg'];\n\nconst createClasses = (prefix: string, cols: (number | undefined)[]) => {\n    return cols.reduce((classes: string[], col, i) => {\n        classes.push(i === 0 ? `${prefix}-${col}` : `${prefix}-${col}--${breakpoints[i]}`);\n\n        return classes;\n    }, []);\n};\n\ninterface ColInterface {\n    extraClass?: string;\n    children?: NodeList;\n    cols?: (number | undefined)[];\n    push?: (number | undefined)[];\n    pull?: (number | undefined)[];\n    pre?: (number | undefined)[];\n    post?: (number | undefined)[];\n}\n\n/**\n * @param {ColInterface} {\n *     extraClass = '',\n *     children,\n *     cols = [],\n *     push = [],\n *     pull = [],\n *     pre = [],\n *     post = [],\n * }\n * @returns {Node}\n */\nexport const Col = ({\n    extraClass = '',\n    children,\n    cols = [],\n    push = [],\n    pull = [],\n    pre = [],\n    post = [],\n}: ColInterface) => {\n    const classes: string = [\n        ...createClasses('o-col', cols),\n        ...createClasses('u-push', push),\n        ...createClasses('u-pull', pull),\n        ...createClasses('u-pre', pre),\n        ...createClasses('u-post', post),\n    ].join(' ');\n\n    return <div class={`${classes} ${extraClass}`}>{children}</div>;\n};\n"],"names":[],"mappings":";;AAEA,MAAM,WAAW,GAAa,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE9D,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,IAA4B;IAC/D,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,OAAiB,EAAE,GAAG,EAAE,CAAC;QACzC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,IAAI,GAAG,EAAE,GAAG,GAAG,MAAM,IAAI,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAEnF,OAAO,OAAO,CAAC;KAClB,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC;MAwBW,GAAG,GAAG,CAAC,EAChB,UAAU,GAAG,EAAE,EACf,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,EAAE,EACT,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,EAAE,GACE;IACX,MAAM,OAAO,GAAW;QACpB,GAAG,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC;QAC/B,GAAG,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC;QAChC,GAAG,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC;QAChC,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC;QAC9B,GAAG,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC;KACnC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,WAAK,KAAK,EAAE,GAAG,OAAO,IAAI,UAAU,EAAE,IAAG,QAAQ,CAAO,CAAC;AACpE;;;;"}

package/dist/esm/atoms/container/container.js

@@ -0,0 +1,6 @@
+import { h } from '@atomify/jsx';
+
+const Container = ({ extraClass = '', children }) => (h("div", { class: `o-container ${extraClass}` }, children));
+
+export { Container };
+//# sourceMappingURL=container.js.map

package/dist/esm/atoms/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sources":["../../../../src/atoms/container/container.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\ninterface ContainerInterface {\n    extraClass?: string;\n    children?: NodeList;\n}\n\nexport const Container = ({ extraClass = '', children }: ContainerInterface) => (\n    <div class={`o-container ${extraClass}`}>{children}</div>\n);\n"],"names":[],"mappings":";;MAOa,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,QAAQ,EAAsB,MACvE,WAAK,KAAK,EAAE,eAAe,UAAU,EAAE,IAAG,QAAQ,CAAO;;;;"}

package/dist/esm/atoms/form-elements/range-slider/range-slider.js

@@ -0,0 +1,21 @@
+import { h } from '@atomify/jsx';
+
+const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, }) => {
+    const inputClasses = {
+        ['c-range-slider']: true,
+        ['form__item']: true,
+        ['form__item--disabled']: disabled,
+    };
+    return (h("div", { class: inputClasses },
+        h("bpd-range-slider", { min: min, max: max, increment: increment, start: start, onRangeValuesChanged: onChange, class: classes },
+            h("div", { class: "range-slider__container" },
+                h("div", { "js-hook-slider-container": true }),
+                h("div", { class: "range-slider__values" },
+                    h("span", { class: "range-slider__values-item", "js-hook-slider-min": true }),
+                    h("span", { class: "range-slider__values-item", "js-hook-slider-max": true }),
+                    h("input", { type: "number", id: `${name}-0`, name: name, value: start[0], "js-hook-slider-min-value": true }),
+                    h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))));
+};
+
+export { RangeSliderElement };
+//# sourceMappingURL=range-slider.js.map

package/dist/esm/atoms/form-elements/range-slider/range-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sources":["../../../../../src/atoms/form-elements/range-slider/range-slider.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\nexport interface RangeSliderProps {\n    min: number;\n    max: number;\n    increment: number;\n    start: number[];\n    onChange: (e: CustomEvent) => void;\n    name: string;\n    classes?: string;\n    disabled?: boolean;\n}\n\nexport const RangeSliderElement = ({\n    classes,\n    disabled,\n    min,\n    max,\n    increment,\n    start,\n    name,\n    onChange,\n}: RangeSliderProps) => {\n    const inputClasses = {\n        ['c-range-slider']: true,\n        ['form__item']: true,\n        ['form__item--disabled']: disabled,\n    };\n\n    return (\n        <div class={inputClasses}>\n            <bpd-range-slider\n                min={min}\n                max={max}\n                increment={increment}\n                start={start}\n                onRangeValuesChanged={onChange}\n                class={classes}>\n                <div class=\"range-slider__container\">\n                    <div js-hook-slider-container></div>\n                    <div class=\"range-slider__values\">\n                        <span class=\"range-slider__values-item\" js-hook-slider-min></span>\n                        <span class=\"range-slider__values-item\" js-hook-slider-max></span>\n                        <input\n                            type=\"number\"\n                            id={`${name}-0`}\n                            name={name}\n                            value={start[0]}\n                            js-hook-slider-min-value\n                        />\n                        <input\n                            type=\"number\"\n                            id={`${name}-1`}\n                            name={name}\n                            value={start[1]}\n                            js-hook-slider-max-value\n                        />\n                    </div>\n                </div>\n            </bpd-range-slider>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;MAaa,kBAAkB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,GACO;IACf,MAAM,YAAY,GAAG;QACjB,CAAC,gBAAgB,GAAG,IAAI;QACxB,CAAC,YAAY,GAAG,IAAI;QACpB,CAAC,sBAAsB,GAAG,QAAQ;KACrC,CAAC;IAEF,QACI,WAAK,KAAK,EAAE,YAAY;QACpB,wBACI,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,oBAAoB,EAAE,QAAQ,EAC9B,KAAK,EAAE,OAAO;YACd,WAAK,KAAK,EAAC,yBAAyB;gBAChC,8CAAoC;gBACpC,WAAK,KAAK,EAAC,sBAAsB;oBAC7B,YAAM,KAAK,EAAC,2BAA2B,+BAA2B;oBAClE,YAAM,KAAK,EAAC,2BAA2B,+BAA2B;oBAClE,aACI,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,IAAI,IAAI,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qCAEjB;oBACF,aACI,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,GAAG,IAAI,IAAI,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qCAEjB,CACA,CACJ,CACS,CACjB,EACR;AACN;;;;"}

package/dist/esm/atoms/form-elements/utilities/range-slider.js

@@ -0,0 +1,100 @@
+import { defineElement, useProp, useElement, useEvent, useBindMethod, onDidLoad } from '@atomify/hooks';
+import { toCurrency } from '@bpd-library/utilities';
+import noUiSlider from 'nouislider';
+
+const RangeSlider = ({ element }) => {
+    const [min] = useProp('min', 0);
+    const [max] = useProp('max', 0);
+    const [increment] = useProp('increment', 0);
+    const [hasChanged, setHasChanged] = useProp('hasChanged', false);
+    const [, setStart, watchStart] = useProp('start', [0, 0]);
+    const [, setBindValue] = useProp('bindValue', [0, 0]);
+    const sliderContainer = useElement('[js-hook-slider-container]');
+    const sliderMin = useElement('[js-hook-slider-min]');
+    const sliderMax = useElement('[js-hook-slider-max]');
+    const sliderMinValue = useElement('[js-hook-slider-min-value]');
+    const sliderMaxValue = useElement('[js-hook-slider-max-value]');
+    const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });
+    useBindMethod('resetState', resetState);
+    onDidLoad(() => {
+        const hasZeroValues = element.start.every((item) => item === 0);
+        const settings = {
+            start: hasZeroValues ? [min, max] : element.start,
+            step: increment,
+            connect: true,
+            documentElement: sliderContainer.current,
+            range: {
+                min,
+                max,
+            },
+        };
+        noUiSlider.create(sliderContainer.current, settings);
+        sliderContainer.current.noUiSlider.on('update', (values) => {
+            const generatedValues = values.map((value) => parseInt(value));
+            setStart([...generatedValues]);
+        });
+        sliderContainer.current.noUiSlider.on('change', onChangeHandler);
+        setMinMaxValues();
+    });
+    watchStart(setMinMaxValues);
+    function setMinMaxValues() {
+        const { minValue, maxValue } = getValues();
+        sliderMin.current.innerHTML = `${toCurrency(minValue)}`.replace(',', '.');
+        sliderMax.current.innerHTML = `${toCurrency(maxValue)}`.replace(',', '.');
+    }
+    function onChangeHandler() {
+        const { minValue, maxValue } = getValues();
+        sliderMinValue.current.value = `${minValue}`;
+        sliderMaxValue.current.value = `${maxValue}`;
+        sliderMinValue.current.checked = true;
+        sliderMaxValue.current.checked = true;
+        sliderMinValue.current.dispatchEvent(new Event('change'));
+        sliderMaxValue.current.dispatchEvent(new Event('change'));
+        rangeValuesChanged.emit({ minValue, maxValue, hasChanged });
+    }
+    function getValues() {
+        const hasZeroValues = element.start.every((item) => item === 0);
+        const minValue = hasZeroValues ? min : element.start[0];
+        const maxValue = hasZeroValues ? max : element.start[1];
+        setBindValue(element.start);
+        setHasChanged(JSON.stringify(element.start) !== JSON.stringify([min, max]));
+        return {
+            minValue,
+            maxValue,
+        };
+    }
+    function resetState() {
+        sliderContainer.current.noUiSlider.set([min, max]);
+        setStart([0, 0]);
+        setHasChanged(false);
+    }
+};
+RangeSlider.props = {
+    min: {
+        type: Number,
+        reflectToAttr: true,
+    },
+    max: {
+        type: Number,
+        reflectToAttr: true,
+    },
+    increment: {
+        type: Number,
+        reflectToAttr: true,
+    },
+    hasChanged: {
+        type: Boolean,
+        reflectToAttr: true,
+    },
+    start: {
+        type: Array,
+        reflectToAttr: true,
+    },
+    bindValue: {
+        type: Array,
+    },
+};
+defineElement('bpd-range-slider', RangeSlider);
+
+export { RangeSlider };
+//# sourceMappingURL=range-slider.js.map

package/dist/esm/atoms/form-elements/utilities/range-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sources":["../../../../../src/atoms/form-elements/utilities/range-slider.ts"],"sourcesContent":["import {\n    Component,\n    defineElement,\n    FC,\n    onDidLoad,\n    useBindMethod,\n    useElement,\n    useEvent,\n    useProp,\n} from '@atomify/hooks';\nimport { toCurrency } from '@bpd-library/utilities';\nimport noUiSlider from 'nouislider';\n\nexport interface BPDRange extends Component {\n    bindValue: number[];\n    start: number[];\n    resetState: () => void;\n}\n\nexport const RangeSlider: FC<BPDRange> = ({ element }) => {\n    const [min] = useProp<number>('min', 0);\n    const [max] = useProp<number>('max', 0);\n    const [increment] = useProp<number>('increment', 0);\n    const [hasChanged, setHasChanged] = useProp<boolean>('hasChanged', false);\n    const [, setStart, watchStart] = useProp<number[]>('start', [0, 0]);\n    const [, setBindValue] = useProp<number[]>('bindValue', [0, 0]);\n\n    const sliderContainer = useElement<HTMLDivElement>('[js-hook-slider-container]');\n    const sliderMin = useElement<HTMLDivElement>('[js-hook-slider-min]');\n    const sliderMax = useElement<HTMLDivElement>('[js-hook-slider-max]');\n    const sliderMinValue = useElement<HTMLInputElement>('[js-hook-slider-min-value]');\n    const sliderMaxValue = useElement<HTMLInputElement>('[js-hook-slider-max-value]');\n\n    const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });\n\n    useBindMethod('resetState', resetState);\n\n    onDidLoad(() => {\n        const hasZeroValues = element.start.every((item) => item === 0);\n\n        const settings = {\n            start: hasZeroValues ? [min, max] : element.start,\n            step: increment,\n            connect: true,\n            documentElement: sliderContainer.current,\n            range: {\n                min,\n                max,\n            },\n        };\n\n        noUiSlider.create(sliderContainer.current!, settings);\n\n        (sliderContainer.current as any).noUiSlider.on('update', (values: string[]) => {\n            const generatedValues = values.map((value) => parseInt(value));\n            setStart([...generatedValues]);\n        });\n\n        (sliderContainer.current as any).noUiSlider.on('change', onChangeHandler);\n\n        setMinMaxValues();\n    });\n\n    watchStart(setMinMaxValues);\n\n    function setMinMaxValues() {\n        const { minValue, maxValue } = getValues();\n\n        sliderMin.current!.innerHTML = `${toCurrency(minValue)}`.replace(',', '.');\n        sliderMax.current!.innerHTML = `${toCurrency(maxValue)}`.replace(',', '.');\n    }\n\n    function onChangeHandler() {\n        const { minValue, maxValue } = getValues();\n\n        sliderMinValue.current!.value = `${minValue}`;\n        sliderMaxValue.current!.value = `${maxValue}`;\n\n        sliderMinValue.current!.checked = true;\n        sliderMaxValue.current!.checked = true;\n\n        sliderMinValue.current!.dispatchEvent(new Event('change'));\n        sliderMaxValue.current!.dispatchEvent(new Event('change'));\n\n        rangeValuesChanged.emit({ minValue, maxValue, hasChanged });\n    }\n\n    function getValues() {\n        const hasZeroValues = element.start.every((item) => item === 0);\n        const minValue = hasZeroValues ? min : element.start[0];\n        const maxValue = hasZeroValues ? max : element.start[1];\n\n        setBindValue(element.start);\n        setHasChanged(JSON.stringify(element.start) !== JSON.stringify([min, max]));\n\n        return {\n            minValue,\n            maxValue,\n        };\n    }\n\n    function resetState() {\n        (sliderContainer.current as any).noUiSlider.set([min, max]);\n        setStart([0, 0]);\n        setHasChanged(false);\n    }\n};\n\nRangeSlider.props = {\n    min: {\n        type: Number,\n        reflectToAttr: true,\n    },\n    max: {\n        type: Number,\n        reflectToAttr: true,\n    },\n    increment: {\n        type: Number,\n        reflectToAttr: true,\n    },\n    hasChanged: {\n        type: Boolean,\n        reflectToAttr: true,\n    },\n    start: {\n        type: Array,\n        reflectToAttr: true,\n    },\n    bindValue: {\n        type: Array,\n    },\n};\n\ndefineElement('bpd-range-slider', RangeSlider);\n"],"names":[],"mappings":"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"}

package/dist/esm/atoms/image/image.js

@@ -0,0 +1,18 @@
+import { h } from '@atomify/jsx';
+import createImageUrl from './utilities/create-image-url.js';
+
+const Image = (data) => {
+    const preload = data.preload ? createImageUrl(data.image, data.preload) : false;
+    return (h("bpd-image", { class: `c-image ${data.classes ? data.classes : ''}` },
+        h("figure", Object.assign({}, { 'js-hook-objectfit-container': data.objectFit }),
+            h("img", Object.assign({ class: `${data.disableCrossFade ? '' : ' image__default'}`, "data-image": data.image, alt: data.alt }, {
+                src: preload ? preload : false,
+                'data-settings': JSON.stringify(data.settings),
+                'js-hook-objectfit-img': data.objectFit,
+                hidden: data.hidden,
+            }))),
+        data.caption && h("figcaption", { class: "image__caption" }, data.caption)));
+};
+
+export { Image };
+//# sourceMappingURL=image.js.map

package/dist/esm/atoms/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../../../src/atoms/image/image.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\nimport createImageUrl from './utilities/create-image-url';\nimport { Setting, Settings } from './utilities/image';\n\nexport interface ImageInterface {\n    image: string;\n    alt: string;\n\n    settings?: Settings;\n    preload?: Setting;\n\n    // Remove after settings is implemented\n    srcset?: string;\n\n    classes?: string;\n    caption?: string;\n\n    hidden?: boolean;\n    objectFit?: boolean | 'contain';\n    disableCrossFade?: boolean;\n}\n\nexport const Image = (data: ImageInterface) => {\n    const preload = data.preload ? createImageUrl(data.image, data.preload) : false;\n\n    return (\n        <bpd-image class={`c-image ${data.classes ? data.classes : ''}`}>\n            <figure {...{ 'js-hook-objectfit-container': data.objectFit }}>\n                <img\n                    class={`${data.disableCrossFade ? '' : ' image__default'}`}\n                    data-image={data.image}\n                    alt={data.alt}\n                    {...{\n                        src: preload ? preload : false,\n                        'data-settings': JSON.stringify(data.settings),\n                        'js-hook-objectfit-img': data.objectFit,\n                        hidden: data.hidden,\n                    }}\n                />\n            </figure>\n\n            {data.caption && <figcaption class=\"image__caption\">{data.caption}</figcaption>}\n        </bpd-image>\n    );\n};\n"],"names":[],"mappings":";;;MAuBa,KAAK,GAAG,CAAC,IAAoB;IACtC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;IAEhF,QACI,iBAAW,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,EAAE;QAC3D,8BAAY,EAAE,6BAA6B,EAAE,IAAI,CAAC,SAAS,EAAE;YACzD,yBACI,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,iBAAiB,EAAE,gBAC9C,IAAI,CAAC,KAAK,EACtB,GAAG,EAAE,IAAI,CAAC,GAAG,IACT;gBACA,GAAG,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK;gBAC9B,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC9C,uBAAuB,EAAE,IAAI,CAAC,SAAS;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM;aACtB,EACH,CACG;QAER,IAAI,CAAC,OAAO,IAAI,kBAAY,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAc,CACvE,EACd;AACN;;;;"}

package/dist/esm/atoms/image/utilities/create-image-url.js

@@ -0,0 +1,15 @@
+const addUrlParameter = (url, key, value) => {
+    const separator = url.indexOf('?') > -1 ? '&' : '?';
+    return `${url}${separator}${key}=${value}`;
+};
+const createImageUrl = (image, { width, height }) => {
+    let url = addUrlParameter(image, 'mode', 'crop');
+    if (width)
+        url = addUrlParameter(url, 'width', width);
+    if (height)
+        url = addUrlParameter(url, 'height', height);
+    return url;
+};
+
+export { createImageUrl as default };
+//# sourceMappingURL=create-image-url.js.map

package/dist/esm/atoms/image/utilities/create-image-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-image-url.js","sources":["../../../../../src/atoms/image/utilities/create-image-url.ts"],"sourcesContent":["interface Setting {\n    width?: number;\n    height?: number;\n}\n\nconst addUrlParameter = (url: string, key: string, value: string | number) => {\n    const separator = url.indexOf('?') > -1 ? '&' : '?';\n\n    return `${url}${separator}${key}=${value}`;\n};\n\nconst createImageUrl = (image: string, { width, height }: Setting) => {\n    let url = addUrlParameter(image, 'mode', 'crop');\n\n    if (width) url = addUrlParameter(url, 'width', width);\n    if (height) url = addUrlParameter(url, 'height', height);\n\n    return url;\n};\n\nexport default createImageUrl;\n"],"names":[],"mappings":"AAKA,MAAM,eAAe,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,KAAsB;IACrE,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;IAEpD,OAAO,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;AAC/C,CAAC,CAAC;MAEI,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,KAAK,EAAE,MAAM,EAAW;IAC7D,IAAI,GAAG,GAAG,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAEjD,IAAI,KAAK;QAAE,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IACtD,IAAI,MAAM;QAAE,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAC;AACf;;;;"}

package/dist/esm/atoms/row/row.js

@@ -0,0 +1,6 @@
+import { h } from '@atomify/jsx';
+
+const Row = ({ extraClass = '', children }) => (h("div", { class: `o-grid ${extraClass}` }, children));
+
+export { Row };
+//# sourceMappingURL=row.js.map

package/dist/esm/atoms/row/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sources":["../../../../src/atoms/row/row.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\n\ninterface RowInterface {\n    extraClass?: string;\n    children?: NodeList;\n}\n\nexport const Row = ({ extraClass = '', children }: RowInterface) => (\n    <div class={`o-grid ${extraClass}`}>{children}</div>\n);\n"],"names":[],"mappings":";;MAOa,GAAG,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,QAAQ,EAAgB,MAC3D,WAAK,KAAK,EAAE,UAAU,UAAU,EAAE,IAAG,QAAQ,CAAO;;;;"}

package/dist/esm/atoms/svg/svg.js

@@ -0,0 +1,25 @@
+import { __decorate } from '../../node_modules/tslib/tslib.es6.js';
+import { Prop, Component } from '@atomify/core';
+import { h } from '@atomify/jsx';
+
+let BPDSvg = class BPDSvg extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+    }
+    render() {
+        return (h("svg", { class: `svg svg-${this.name}` },
+            h("use", { xlinkHref: `#svg-${this.name}` })));
+    }
+};
+__decorate([
+    Prop()
+], BPDSvg.prototype, "name", void 0);
+BPDSvg = __decorate([
+    Component({
+        tag: 'bpd-svg',
+    })
+], BPDSvg);
+
+export { BPDSvg };
+//# sourceMappingURL=svg.js.map

package/dist/esm/atoms/svg/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sources":["../../../../src/atoms/svg/svg.tsx"],"sourcesContent":["import { Component, Prop } from '@atomify/core';\nimport { h } from '@atomify/jsx';\n\n@Component({\n    tag: 'bpd-svg',\n})\nexport class BPDSvg extends HTMLElement {\n    @Prop() name: string = '';\n\n    render() {\n        return (\n            <svg class={`svg svg-${this.name}`}>\n                <use xlinkHref={`#svg-${this.name}`}></use>\n            </svg>\n        );\n    }\n}\n"],"names":[],"mappings":";;;;IAMa,MAAM,GAAnB,MAAa,MAAO,SAAQ,WAAW;IAAvC;;QACY,SAAI,GAAW,EAAE,CAAC;KAS7B;IAPG,MAAM;QACF,QACI,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;YAC9B,WAAK,SAAS,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAQ,CACzC,EACR;KACL;EACJ;AATW;IAAP,IAAI,EAAE;oCAAmB;AADjB,MAAM;IAHlB,SAAS,CAAC;QACP,GAAG,EAAE,SAAS;KACjB,CAAC;GACW,MAAM,CAUlB;;;;"}

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+export { Button, ButtonA } from './atoms/button/button.js';
+export { Col } from './atoms/col/col.js';
+export { Container } from './atoms/container/container.js';
+export { RangeSliderElement } from './atoms/form-elements/range-slider/range-slider.js';
+export { RangeSlider } from './atoms/form-elements/utilities/range-slider.js';
+export { Image } from './atoms/image/image.js';
+export { Row } from './atoms/row/row.js';
+export { BPDSvg } from './atoms/svg/svg.js';
+export { Infobox } from './molecules/infobox/infobox.js';
+export { fitBounds } from './molecules/map/utilities/fit-bounds.js';
+export { clearFilter, clearFocus, clearHover, clearSearchResult, getHover, getMapInstance, getMapboxData, getSearchIsMoving, manualSearch, mapStore, setFilter, setFocus, setLayerRaster, setMapInstance, updateClick, updateHover, updateMapData, updateSearchIsMoving, updateSearchResult } from './molecules/map/store/map/store.js';
+export { Map } from './molecules/map/map.js';
+export { Tooltip } from './molecules/tooltip/tooltip.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/esm/molecules/infobox/infobox.js

@@ -0,0 +1,20 @@
+import { h } from '@atomify/jsx';
+import { ButtonA } from '../../atoms/button/button.js';
+import { Image } from '../../atoms/image/image.js';
+
+const Infobox = ({ title, image, tags, description, link, onClose, openInTab, }) => (h("div", { class: "c-infobox" },
+    h("button", { class: "infobox__close", onClick: onClose },
+        h("bpd-svg", { name: "icons-close" })),
+    image && title && (h("div", { class: "infobox__image-container" },
+        h(Image, { classes: "infobox__image", image: image, alt: title, preload: {
+                width: 325,
+                height: 117,
+            } }))),
+    h("div", { class: "infobox__wrapper" },
+        title && h("h3", { class: "infobox__title" }, title),
+        tags && h("span", { class: "infobox__tags" }, tags === null || tags === void 0 ? void 0 : tags.join(', ')),
+        description && h("p", { class: "infobox__description" }, description),
+        link && (h(ButtonA, { target: openInTab ? '_blank' : '_self', url: link, label: "Bekijk het gebied" })))));
+
+export { Infobox };
+//# sourceMappingURL=infobox.js.map

package/dist/esm/molecules/infobox/infobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infobox.js","sources":["../../../../src/molecules/infobox/infobox.tsx"],"sourcesContent":["import { h } from '@atomify/jsx';\nimport { MapInfobox } from '@bpd-library/types';\n\nimport { ButtonA } from '../../atoms/button';\nimport { Image } from '../../atoms/image';\n\ninterface InfoboxInterface extends MapInfobox {\n    onClose: () => void;\n    openInTab?: boolean;\n}\n\nexport const Infobox = ({\n    title,\n    image,\n    tags,\n    description,\n    link,\n    onClose,\n    openInTab,\n}: InfoboxInterface) => (\n    <div class=\"c-infobox\">\n        <button class=\"infobox__close\" onClick={onClose}>\n            <bpd-svg name=\"icons-close\" />\n        </button>\n        {image && title && (\n            <div class=\"infobox__image-container\">\n                <Image\n                    classes=\"infobox__image\"\n                    image={image}\n                    alt={title}\n                    preload={{\n                        width: 325,\n                        height: 117,\n                    }}\n                />\n            </div>\n        )}\n        <div class=\"infobox__wrapper\">\n            {title && <h3 class=\"infobox__title\">{title}</h3>}\n            {tags && <span class=\"infobox__tags\">{tags?.join(', ')}</span>}\n            {description && <p class=\"infobox__description\">{description}</p>}\n            {link && (\n                <ButtonA\n                    target={openInTab ? '_blank' : '_self'}\n                    url={link}\n                    label=\"Bekijk het gebied\"\n                />\n            )}\n        </div>\n    </div>\n);\n"],"names":[],"mappings":";;;;MAWa,OAAO,GAAG,CAAC,EACpB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAS,GACM,MACf,WAAK,KAAK,EAAC,WAAW;IAClB,cAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,OAAO;QAC3C,eAAS,IAAI,EAAC,aAAa,GAAG,CACzB;IACR,KAAK,IAAI,KAAK,KACX,WAAK,KAAK,EAAC,0BAA0B;QACjC,EAAC,KAAK,IACF,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,EACV,OAAO,EAAE;gBACL,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;aACd,GACH,CACA,CACT;IACD,WAAK,KAAK,EAAC,kBAAkB;QACxB,KAAK,IAAI,UAAI,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAM;QAChD,IAAI,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,IAAI,EAAS;QAC7D,WAAW,IAAI,SAAG,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAK;QAChE,IAAI,KACD,EAAC,OAAO,IACJ,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,EACtC,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,mBAAmB,GAC3B,CACL,CACC,CACJ;;;;"}

package/dist/esm/molecules/map/map.js

@@ -0,0 +1,256 @@
+import { defineElement, useProp, useElement, onDidLoad } from '@atomify/hooks';
+import { h, Fragment } from '@atomify/jsx';
+import { detectTouch, calculateMapDataBoundingBox, expandBoundingBox, calculateMapDataCenter, getCountryBoundingBox, functionIsTrue } from '@bpd-library/utilities';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import mapboxgl from 'mapbox-gl';
+import { Button } from '../../atoms/button/button.js';
+import { Infobox } from '../infobox/infobox.js';
+import { setMapInstance, mapStore, clearHover } from './store/map/store.js';
+import mapbox from './utilities/mapbox/mapbox.js';
+
+const DEFAULT_OPTIONS = {
+    zoomButtons: true,
+    mobileToggle: false,
+    tooltipMode: 'hover',
+    openInTab: false,
+    autoOpenUrl: true,
+    language: window.__ENVIRONMENT_DETAILS__.language || 'nl',
+    searchCountryIsoCodes: ['nl', 'de'],
+};
+const CONTAINER_VISIBLE = 'map--is-visible';
+const MOBILE_TOGGLE_CLASS = 'map--mobile-toggle';
+const MAP_HOVERING_CLASS = 'map--hovering';
+const POINTER_FOCUS_CLASS = 'map__pointer--focus';
+const Map = () => {
+    let [options] = useProp('options', {});
+    const [theme] = useProp('theme');
+    const container = useElement('[js-hook-map-container]');
+    const infoboxWrapper = useElement('[js-hook-infobox-wrapper]');
+    const element = useElement('[js-hook-map]');
+    let map;
+    let mapboxHelpers;
+    onDidLoad(async () => {
+        if (options.mobileToggle)
+            element.current.classList.add(MOBILE_TOGGLE_CLASS);
+        options = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+        map = createMapboxInstance();
+        mapboxHelpers = mapbox(map, options, theme);
+        setMapInstance(map);
+        await setupMapbox();
+        subscribe();
+        if (options.search)
+            options.search.forEach((e) => mapboxHelpers.search(e));
+    });
+    function subscribe() {
+        const { filter, data } = mapStore.getState();
+        const { addData } = mapboxHelpers;
+        addData(filter ? filter : data);
+        mapStore.subscribe(({ data }) => addData(data), ['data']);
+        mapStore.subscribe(handleHover, ['hover']);
+        mapStore.subscribe(handleClick, ['click']);
+        mapStore.subscribe(handleFocus, ['focus']);
+        mapStore.subscribe(({ filter, data }) => addData(filter ? filter : data), ['filter']);
+        mapStore.subscribe(({ layerRasterSettings }) => layerRasterSettings && mapboxHelpers.raster(layerRasterSettings), ['layerRasterSettings']);
+    }
+    function handleHover({ hover }) {
+        const { current, previous } = hover;
+        const canvasStyle = map.getCanvas().style;
+        const { setFeatureState, addTooltip, removeTooltip } = mapboxHelpers;
+        if (options.tooltipMode === 'hover') {
+            if ((current === null || current === void 0 ? void 0 : current.tooltip) && !detectTouch.touch)
+                addTooltip(current.coordinates, current);
+            if (!current && !detectTouch.touch)
+                removeTooltip();
+        }
+        if (hasHoverTheme()) {
+            if (current)
+                setFeatureState(current.variant, current.id, 'hover', true);
+            if (previous)
+                setFeatureState(previous.variant, previous.id, 'hover', false);
+        }
+        canvasStyle.cursor = current ? 'pointer' : '';
+    }
+    function handleClick({ click }) {
+        if (!click)
+            return;
+        const { addTooltip } = mapboxHelpers;
+        const { infobox, coordinates, tooltip, url } = click;
+        clearHover();
+        if (options.tooltipMode === 'click' && tooltip) {
+            addTooltip(coordinates, click);
+        }
+        if (options.tooltipMode === 'hover') {
+            if (url && !detectTouch.touch && options.autoOpenUrl) {
+                window.open(url, options.openInTab ? '_blank' : '_self');
+            }
+            else if ((url && tooltip) || (detectTouch.touch && !url && tooltip)) {
+                addTooltip(coordinates, click);
+            }
+        }
+        if (infobox) {
+            showInfobox(infobox);
+        }
+        else {
+            clearInfobox();
+        }
+    }
+    function handleFocus({ focus }) {
+        const { current, previous, options } = focus;
+        const { setFeatureState, center, addTooltip, removeTooltip } = mapboxHelpers;
+        if (previous) {
+            previous.forEach(({ id, variant }) => {
+                if (hasHoverTheme())
+                    setFeatureState(variant, id, 'focus', false);
+                pointerFocusToggle(id, 'remove');
+            });
+        }
+        if (current) {
+            current.forEach((item) => {
+                const { variant, id, coordinates, tooltip } = item;
+                function handleTooltip() {
+                    const showTooltip = (options === null || options === void 0 ? void 0 : options.toggleTooltip) && tooltip;
+                    if (theme.polygon || pointerExists(id)) {
+                        if (showTooltip)
+                            addTooltip(coordinates, item);
+                        pointerFocusToggle(id, 'add');
+                    }
+                }
+                if (theme.polygon) {
+                    if (hasHoverTheme())
+                        setFeatureState(variant, id, 'focus', true);
+                }
+                if (pointerExists(id)) {
+                    handleTooltip();
+                }
+                else {
+                    map.once('idle', handleTooltip);
+                }
+            });
+            if (options === null || options === void 0 ? void 0 : options.zoom) {
+                let bounds = calculateMapDataBoundingBox(current);
+                bounds = expandBoundingBox(bounds, 0.05);
+                map.fitBounds(bounds);
+            }
+            else if (!(options === null || options === void 0 ? void 0 : options.static)) {
+                center([[calculateMapDataCenter(current)]]);
+            }
+        }
+        else {
+            removeTooltip();
+        }
+    }
+    function pointerFocusToggle(id, action) {
+        const pointer = getPointerElementById(id);
+        if (pointer) {
+            pointer.classList[action](POINTER_FOCUS_CLASS);
+            element.current.classList[action](MAP_HOVERING_CLASS);
+        }
+    }
+    function showInfobox(infobox) {
+        clearInfobox();
+        infoboxWrapper.current.appendChild(h(Infobox, Object.assign({}, infobox, { onClose: clearInfobox, openInTab: options.openInTab })));
+    }
+    function clearInfobox() {
+        infoboxWrapper.current.innerHTML = '';
+    }
+    function toggleMap() {
+        element.current.classList.toggle(CONTAINER_VISIBLE);
+        map.resize();
+    }
+    function hasHoverTheme() {
+        return theme.polygon && theme.polygon.settings[0].hover;
+    }
+    function createMapboxInstance() {
+        mapboxgl.accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;
+        const mapboxOptions = {
+            container: container.current,
+            style: `mapbox://styles/${window.__ENVIRONMENT_DETAILS__.mapbox.style}`,
+            minZoom: 4,
+            maxZoom: 30,
+            dragPan: true,
+            scrollZoom: false,
+        };
+        if (options.center)
+            mapboxOptions.center = options.center;
+        if (options.zoom)
+            mapboxOptions.zoom = options.zoom;
+        if (options.boundingBox)
+            mapboxOptions.bounds = options.boundingBox;
+        if (!options.zoom && !options.center && !options.boundingBox) {
+            mapboxOptions.bounds = getCountryBoundingBox(['nl']);
+        }
+        return new mapboxgl.Map(mapboxOptions);
+    }
+    function getMapboxLanguageString() {
+        let language;
+        if (options.language) {
+            language = options.language.substr(0, 2);
+        }
+        language = !language || language === 'nl' ? 'mul' : language;
+        return language;
+    }
+    async function setupMapbox() {
+        const { raster, geojson, layer, interaction, setupPointers } = mapboxHelpers;
+        await functionIsTrue(() => map.isStyleLoaded());
+        const languageControl = new MapboxLanguage({
+            defaultLanguage: getMapboxLanguageString(),
+        });
+        map.addControl(languageControl);
+        const optionsLayerRaster = options.layerRaster
+            ? { layerRaster: options.layerRaster }
+            : undefined;
+        const storeLayerRaster = mapStore.getState().layerRasterSettings;
+        if (optionsLayerRaster) {
+            raster(optionsLayerRaster);
+        }
+        else if (storeLayerRaster) {
+            raster(storeLayerRaster);
+        }
+        if (theme.polygon) {
+            theme.polygon.settings.forEach((setting) => {
+                geojson(setting);
+                layer(setting);
+                interaction(setting);
+            });
+        }
+        if (theme.pointer) {
+            setupPointers(element.current);
+        }
+        map.resize();
+    }
+    function getPointerElementById(id) {
+        return element.current.querySelector(`#pointer-${id}`);
+    }
+    function pointerExists(id) {
+        return !!getPointerElementById(id);
+    }
+    return (h(Fragment, null,
+        h("div", { class: "c-map", "js-hook-map": true },
+            h("div", { className: "map__container", "js-hook-map-container": true },
+                options.zoomButtons && (h("div", { class: "map__navigation" },
+                    h("button", { class: "map__button", onClick: () => map.zoomIn() },
+                        h("bpd-svg", { name: "icons-plus" })),
+                    h("button", { class: "map__button", onClick: () => map.zoomOut() },
+                        h("span", { class: "map__minus" })))),
+                options.mobileToggle && (h("button", { type: "button", class: "map__close", onClick: toggleMap },
+                    h("bpd-svg", { name: "icons-close" }))),
+                h("div", { class: "map__infobox-wrapper", "js-hook-infobox-wrapper": true }))),
+        options.mobileToggle && (h(Fragment, null,
+            h(Button, { variant: "bg", label: options.mobileToggleLabel || 'Toon kaart', classes: "map__open", onClick: toggleMap })))));
+};
+Map.props = {
+    options: {
+        type: Object,
+    },
+    theme: {
+        type: Object,
+        required: true,
+    },
+    zoomButtons: {
+        type: Boolean,
+    },
+};
+defineElement('bpd-map', Map);
+
+export { Map };
+//# sourceMappingURL=map.js.map