@bpd-library/components 1.3.2-beta.8 → 1.3.2-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/dist/atoms/form-elements/utilities/range-slider.d.ts +1 -0
  2. package/dist/atoms/form-elements/utilities/range-slider.js +17 -0
  3. package/dist/atoms/form-elements/utilities/range-slider.js.map +1 -1
  4. package/dist/molecules/map/store/map/store.d.ts +1 -7
  5. package/dist/molecules/map/store/map/store.js +0 -32
  6. package/dist/molecules/map/store/map/store.js.map +1 -1
  7. package/package.json +4 -4
  8. package/dist/esm/atoms/button/button.js +0 -33
  9. package/dist/esm/atoms/button/button.js.map +0 -1
  10. package/dist/esm/atoms/col/col.js +0 -22
  11. package/dist/esm/atoms/col/col.js.map +0 -1
  12. package/dist/esm/atoms/container/container.js +0 -6
  13. package/dist/esm/atoms/container/container.js.map +0 -1
  14. package/dist/esm/atoms/form-elements/range-slider/range-slider.js +0 -21
  15. package/dist/esm/atoms/form-elements/range-slider/range-slider.js.map +0 -1
  16. package/dist/esm/atoms/form-elements/utilities/range-slider.js +0 -100
  17. package/dist/esm/atoms/form-elements/utilities/range-slider.js.map +0 -1
  18. package/dist/esm/atoms/image/image.js +0 -18
  19. package/dist/esm/atoms/image/image.js.map +0 -1
  20. package/dist/esm/atoms/image/utilities/create-image-url.js +0 -15
  21. package/dist/esm/atoms/image/utilities/create-image-url.js.map +0 -1
  22. package/dist/esm/atoms/row/row.js +0 -6
  23. package/dist/esm/atoms/row/row.js.map +0 -1
  24. package/dist/esm/atoms/svg/svg.js +0 -25
  25. package/dist/esm/atoms/svg/svg.js.map +0 -1
  26. package/dist/esm/index.js +0 -14
  27. package/dist/esm/index.js.map +0 -1
  28. package/dist/esm/molecules/infobox/infobox.js +0 -20
  29. package/dist/esm/molecules/infobox/infobox.js.map +0 -1
  30. package/dist/esm/molecules/map/map.js +0 -256
  31. package/dist/esm/molecules/map/map.js.map +0 -1
  32. package/dist/esm/molecules/map/store/map/store.js +0 -150
  33. package/dist/esm/molecules/map/store/map/store.js.map +0 -1
  34. package/dist/esm/molecules/map/utilities/fit-bounds.js +0 -4
  35. package/dist/esm/molecules/map/utilities/fit-bounds.js.map +0 -1
  36. package/dist/esm/molecules/map/utilities/mapbox/add-data.js +0 -54
  37. package/dist/esm/molecules/map/utilities/mapbox/add-data.js.map +0 -1
  38. package/dist/esm/molecules/map/utilities/mapbox/center.js +0 -15
  39. package/dist/esm/molecules/map/utilities/mapbox/center.js.map +0 -1
  40. package/dist/esm/molecules/map/utilities/mapbox/constants.js +0 -5
  41. package/dist/esm/molecules/map/utilities/mapbox/constants.js.map +0 -1
  42. package/dist/esm/molecules/map/utilities/mapbox/index.js +0 -3
  43. package/dist/esm/molecules/map/utilities/mapbox/index.js.map +0 -1
  44. package/dist/esm/molecules/map/utilities/mapbox/mapbox.js +0 -27
  45. package/dist/esm/molecules/map/utilities/mapbox/mapbox.js.map +0 -1
  46. package/dist/esm/molecules/map/utilities/mapbox/parse-feature-properties.js +0 -18
  47. package/dist/esm/molecules/map/utilities/mapbox/parse-feature-properties.js.map +0 -1
  48. package/dist/esm/molecules/map/utilities/mapbox/pointers/setup-pointers.js +0 -151
  49. package/dist/esm/molecules/map/utilities/mapbox/pointers/setup-pointers.js.map +0 -1
  50. package/dist/esm/molecules/map/utilities/mapbox/polygons/feature-state.js +0 -11
  51. package/dist/esm/molecules/map/utilities/mapbox/polygons/feature-state.js.map +0 -1
  52. package/dist/esm/molecules/map/utilities/mapbox/polygons/geojson.js +0 -10
  53. package/dist/esm/molecules/map/utilities/mapbox/polygons/geojson.js.map +0 -1
  54. package/dist/esm/molecules/map/utilities/mapbox/polygons/interaction.js +0 -34
  55. package/dist/esm/molecules/map/utilities/mapbox/polygons/interaction.js.map +0 -1
  56. package/dist/esm/molecules/map/utilities/mapbox/polygons/layer.js +0 -110
  57. package/dist/esm/molecules/map/utilities/mapbox/polygons/layer.js.map +0 -1
  58. package/dist/esm/molecules/map/utilities/mapbox/raster.js +0 -43
  59. package/dist/esm/molecules/map/utilities/mapbox/raster.js.map +0 -1
  60. package/dist/esm/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js +0 -27
  61. package/dist/esm/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js.map +0 -1
  62. package/dist/esm/molecules/map/utilities/mapbox/search/search.js +0 -174
  63. package/dist/esm/molecules/map/utilities/mapbox/search/search.js.map +0 -1
  64. package/dist/esm/molecules/map/utilities/mapbox/tooltip.js +0 -26
  65. package/dist/esm/molecules/map/utilities/mapbox/tooltip.js.map +0 -1
  66. package/dist/esm/molecules/tooltip/tooltip.js +0 -14
  67. package/dist/esm/molecules/tooltip/tooltip.js.map +0 -1
  68. package/dist/esm/node_modules/tslib/tslib.es6.js +0 -24
  69. package/dist/esm/node_modules/tslib/tslib.es6.js.map +0 -1
  70. package/dist/lib/atoms/button/button.js +0 -31
  71. package/dist/lib/atoms/button/button.js.map +0 -1
  72. package/dist/lib/atoms/button/index.js +0 -2
  73. package/dist/lib/atoms/button/index.js.map +0 -1
  74. package/dist/lib/atoms/col/col.js +0 -19
  75. package/dist/lib/atoms/col/col.js.map +0 -1
  76. package/dist/lib/atoms/container/container.js +0 -3
  77. package/dist/lib/atoms/container/container.js.map +0 -1
  78. package/dist/lib/atoms/form-elements/range-slider/range-slider.js +0 -18
  79. package/dist/lib/atoms/form-elements/range-slider/range-slider.js.map +0 -1
  80. package/dist/lib/atoms/form-elements/utilities/range-slider.js +0 -97
  81. package/dist/lib/atoms/form-elements/utilities/range-slider.js.map +0 -1
  82. package/dist/lib/atoms/image/image.js +0 -15
  83. package/dist/lib/atoms/image/image.js.map +0 -1
  84. package/dist/lib/atoms/image/index.js +0 -2
  85. package/dist/lib/atoms/image/index.js.map +0 -1
  86. package/dist/lib/atoms/image/utilities/create-image-url.js +0 -14
  87. package/dist/lib/atoms/image/utilities/create-image-url.js.map +0 -1
  88. package/dist/lib/atoms/image/utilities/detect-responsive-images.js +0 -24
  89. package/dist/lib/atoms/image/utilities/detect-responsive-images.js.map +0 -1
  90. package/dist/lib/atoms/image/utilities/image.js +0 -86
  91. package/dist/lib/atoms/image/utilities/image.js.map +0 -1
  92. package/dist/lib/atoms/image/utilities/object-fit.js +0 -35
  93. package/dist/lib/atoms/image/utilities/object-fit.js.map +0 -1
  94. package/dist/lib/atoms/row/row.js +0 -3
  95. package/dist/lib/atoms/row/row.js.map +0 -1
  96. package/dist/lib/atoms/svg/svg.js +0 -23
  97. package/dist/lib/atoms/svg/svg.js.map +0 -1
  98. package/dist/lib/index.js +0 -12
  99. package/dist/lib/index.js.map +0 -1
  100. package/dist/lib/molecules/infobox/index.js +0 -2
  101. package/dist/lib/molecules/infobox/index.js.map +0 -1
  102. package/dist/lib/molecules/infobox/infobox.js +0 -17
  103. package/dist/lib/molecules/infobox/infobox.js.map +0 -1
  104. package/dist/lib/molecules/map/hooks/use-style-loaded.js +0 -14
  105. package/dist/lib/molecules/map/hooks/use-style-loaded.js.map +0 -1
  106. package/dist/lib/molecules/map/index.js +0 -4
  107. package/dist/lib/molecules/map/index.js.map +0 -1
  108. package/dist/lib/molecules/map/map.js +0 -256
  109. package/dist/lib/molecules/map/map.js.map +0 -1
  110. package/dist/lib/molecules/map/store/map/index.js +0 -2
  111. package/dist/lib/molecules/map/store/map/index.js.map +0 -1
  112. package/dist/lib/molecules/map/store/map/store.js +0 -147
  113. package/dist/lib/molecules/map/store/map/store.js.map +0 -1
  114. package/dist/lib/molecules/map/storybook/themes.js +0 -54
  115. package/dist/lib/molecules/map/storybook/themes.js.map +0 -1
  116. package/dist/lib/molecules/map/utilities/fit-bounds.js +0 -2
  117. package/dist/lib/molecules/map/utilities/fit-bounds.js.map +0 -1
  118. package/dist/lib/molecules/map/utilities/mapbox/add-data.js +0 -52
  119. package/dist/lib/molecules/map/utilities/mapbox/add-data.js.map +0 -1
  120. package/dist/lib/molecules/map/utilities/mapbox/center.js +0 -13
  121. package/dist/lib/molecules/map/utilities/mapbox/center.js.map +0 -1
  122. package/dist/lib/molecules/map/utilities/mapbox/constants.js +0 -3
  123. package/dist/lib/molecules/map/utilities/mapbox/constants.js.map +0 -1
  124. package/dist/lib/molecules/map/utilities/mapbox/index.js +0 -3
  125. package/dist/lib/molecules/map/utilities/mapbox/index.js.map +0 -1
  126. package/dist/lib/molecules/map/utilities/mapbox/mapbox.js +0 -25
  127. package/dist/lib/molecules/map/utilities/mapbox/mapbox.js.map +0 -1
  128. package/dist/lib/molecules/map/utilities/mapbox/parse-feature-properties.js +0 -16
  129. package/dist/lib/molecules/map/utilities/mapbox/parse-feature-properties.js.map +0 -1
  130. package/dist/lib/molecules/map/utilities/mapbox/pointers/setup-pointers.js +0 -151
  131. package/dist/lib/molecules/map/utilities/mapbox/pointers/setup-pointers.js.map +0 -1
  132. package/dist/lib/molecules/map/utilities/mapbox/polygons/feature-state.js +0 -10
  133. package/dist/lib/molecules/map/utilities/mapbox/polygons/feature-state.js.map +0 -1
  134. package/dist/lib/molecules/map/utilities/mapbox/polygons/geojson.js +0 -9
  135. package/dist/lib/molecules/map/utilities/mapbox/polygons/geojson.js.map +0 -1
  136. package/dist/lib/molecules/map/utilities/mapbox/polygons/interaction.js +0 -32
  137. package/dist/lib/molecules/map/utilities/mapbox/polygons/interaction.js.map +0 -1
  138. package/dist/lib/molecules/map/utilities/mapbox/polygons/layer.js +0 -109
  139. package/dist/lib/molecules/map/utilities/mapbox/polygons/layer.js.map +0 -1
  140. package/dist/lib/molecules/map/utilities/mapbox/raster.js +0 -42
  141. package/dist/lib/molecules/map/utilities/mapbox/raster.js.map +0 -1
  142. package/dist/lib/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js +0 -26
  143. package/dist/lib/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js.map +0 -1
  144. package/dist/lib/molecules/map/utilities/mapbox/search/search.js +0 -172
  145. package/dist/lib/molecules/map/utilities/mapbox/search/search.js.map +0 -1
  146. package/dist/lib/molecules/map/utilities/mapbox/tooltip.js +0 -24
  147. package/dist/lib/molecules/map/utilities/mapbox/tooltip.js.map +0 -1
  148. package/dist/lib/molecules/tooltip/index.js +0 -2
  149. package/dist/lib/molecules/tooltip/index.js.map +0 -1
  150. package/dist/lib/molecules/tooltip/tooltip.js +0 -11
  151. package/dist/lib/molecules/tooltip/tooltip.js.map +0 -1
  152. package/dist/types/atoms/button/button.d.ts +0 -17
  153. package/dist/types/atoms/button/index.d.ts +0 -1
  154. package/dist/types/atoms/col/col.d.ts +0 -11
  155. package/dist/types/atoms/container/container.d.ts +0 -6
  156. package/dist/types/atoms/form-elements/range-slider/range-slider.d.ts +0 -11
  157. package/dist/types/atoms/form-elements/utilities/range-slider.d.ts +0 -7
  158. package/dist/types/atoms/image/image.d.ts +0 -14
  159. package/dist/types/atoms/image/index.d.ts +0 -1
  160. package/dist/types/atoms/image/utilities/create-image-url.d.ts +0 -6
  161. package/dist/types/atoms/image/utilities/detect-responsive-images.d.ts +0 -7
  162. package/dist/types/atoms/image/utilities/image.d.ts +0 -18
  163. package/dist/types/atoms/image/utilities/object-fit.d.ts +0 -7
  164. package/dist/types/atoms/row/row.d.ts +0 -6
  165. package/dist/types/atoms/svg/svg.d.ts +0 -4
  166. package/dist/types/index.d.ts +0 -11
  167. package/dist/types/molecules/infobox/index.d.ts +0 -1
  168. package/dist/types/molecules/infobox/infobox.d.ts +0 -7
  169. package/dist/types/molecules/map/hooks/use-style-loaded.d.ts +0 -2
  170. package/dist/types/molecules/map/index.d.ts +0 -3
  171. package/dist/types/molecules/map/map.d.ts +0 -2
  172. package/dist/types/molecules/map/store/map/index.d.ts +0 -1
  173. package/dist/types/molecules/map/store/map/store.d.ts +0 -60
  174. package/dist/types/molecules/map/storybook/themes.d.ts +0 -3
  175. package/dist/types/molecules/map/utilities/fit-bounds.d.ts +0 -3
  176. package/dist/types/molecules/map/utilities/mapbox/add-data.d.ts +0 -3
  177. package/dist/types/molecules/map/utilities/mapbox/center.d.ts +0 -3
  178. package/dist/types/molecules/map/utilities/mapbox/constants.d.ts +0 -2
  179. package/dist/types/molecules/map/utilities/mapbox/index.d.ts +0 -2
  180. package/dist/types/molecules/map/utilities/mapbox/mapbox.d.ts +0 -16
  181. package/dist/types/molecules/map/utilities/mapbox/parse-feature-properties.d.ts +0 -6
  182. package/dist/types/molecules/map/utilities/mapbox/pointers/setup-pointers.d.ts +0 -3
  183. package/dist/types/molecules/map/utilities/mapbox/polygons/feature-state.d.ts +0 -2
  184. package/dist/types/molecules/map/utilities/mapbox/polygons/geojson.d.ts +0 -3
  185. package/dist/types/molecules/map/utilities/mapbox/polygons/interaction.d.ts +0 -3
  186. package/dist/types/molecules/map/utilities/mapbox/polygons/layer.d.ts +0 -3
  187. package/dist/types/molecules/map/utilities/mapbox/raster.d.ts +0 -3
  188. package/dist/types/molecules/map/utilities/mapbox/search/alternative-city-suggestions.d.ts +0 -3
  189. package/dist/types/molecules/map/utilities/mapbox/search/search.d.ts +0 -4
  190. package/dist/types/molecules/map/utilities/mapbox/tooltip.d.ts +0 -4
  191. package/dist/types/molecules/tooltip/index.d.ts +0 -1
  192. package/dist/types/molecules/tooltip/tooltip.d.ts +0 -7
@@ -1,24 +0,0 @@
1
- const hasResponsiveImages = function () {
2
- const supports = {
3
- srcset: false,
4
- currentSrc: false,
5
- sizes: false,
6
- picture: false,
7
- };
8
- const img = new Image();
9
- if ('srcset' in img) {
10
- supports.srcset = true;
11
- }
12
- if ('currentSrc' in img) {
13
- supports.currentSrc = true;
14
- }
15
- if ('sizes' in img) {
16
- supports.sizes = true;
17
- }
18
- if ('HTMLPictureElement' in window) {
19
- supports.picture = true;
20
- }
21
- return supports;
22
- };
23
- export default hasResponsiveImages();
24
- //# sourceMappingURL=detect-responsive-images.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"detect-responsive-images.js","sourceRoot":"","sources":["../../../../../src/atoms/image/utilities/detect-responsive-images.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG;IACxB,MAAM,QAAQ,GAAG;QACb,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,KAAK;KACjB,CAAC;IAEF,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;IAExB,IAAI,QAAQ,IAAI,GAAG,EAAE;QACjB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;KAC1B;IAED,IAAI,YAAY,IAAI,GAAG,EAAE;QACrB,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC;KAC9B;IAED,IAAI,OAAO,IAAI,GAAG,EAAE;QAChB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;KACzB;IAED,IAAI,oBAAoB,IAAI,MAAM,EAAE;QAChC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;KAC3B;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,mBAAmB,EAAE,CAAC","sourcesContent":["const hasResponsiveImages = function() {\n const supports = {\n srcset: false,\n currentSrc: false,\n sizes: false,\n picture: false,\n };\n\n const img = new Image();\n\n if ('srcset' in img) {\n supports.srcset = true;\n }\n\n if ('currentSrc' in img) {\n supports.currentSrc = true;\n }\n\n if ('sizes' in img) {\n supports.sizes = true;\n }\n\n if ('HTMLPictureElement' in window) {\n supports.picture = true;\n }\n\n return supports;\n};\n\nexport default hasResponsiveImages();\n"]}
@@ -1,86 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { Component, Query } from '@atomify/core';
3
- import { inviewObserver } from '@atomify/kit';
4
- import createImageUrl from './create-image-url';
5
- import hasResponsiveImages from './detect-responsive-images';
6
- import ObjectFit from './object-fit';
7
- const LAZY_IMAGE_ANIMATE_IN_CLASS = 'image--is-loaded';
8
- const SETTINGS_ATTRIBUTE = 'data-settings';
9
- const BASE_IMAGE_ATTRIBUTE = 'data-image';
10
- const SUPPORTS_SRCSET = hasResponsiveImages.srcset || hasResponsiveImages.picture;
11
- let BPDImage = class BPDImage extends HTMLElement {
12
- componentDidLoad() {
13
- inviewObserver.observe(this, (inView) => inView && this.loadImage());
14
- }
15
- disconnectedCallback() {
16
- inviewObserver.unobserve(this);
17
- }
18
- parseSettings(json) {
19
- return JSON.parse(json) || {};
20
- }
21
- generateSrc(baseImage, settings) {
22
- const keys = Object.keys(settings);
23
- let setting = settings[keys[0]];
24
- if (keys.length > 1) {
25
- const srcKey = keys.find((key) => !!settings[key].src);
26
- setting = srcKey ? settings[srcKey] : {};
27
- }
28
- const src = createImageUrl(baseImage, setting);
29
- return src;
30
- }
31
- generateSrcset(baseImage, settings) {
32
- const keys = Object.keys(settings);
33
- const srcset = keys.reduce((srcset, key, index) => {
34
- const setting = settings[key];
35
- const url = createImageUrl(baseImage, setting);
36
- const isLast = index + 1 === keys.length;
37
- return `${srcset} ${url} ${key}${isLast ? '' : ','}`;
38
- }, '');
39
- return srcset;
40
- }
41
- loadImage() {
42
- const image = this.img;
43
- if (!image)
44
- return;
45
- inviewObserver.unobserve(this);
46
- const baseImage = image.getAttribute(BASE_IMAGE_ATTRIBUTE);
47
- const settingsAttribute = image.getAttribute(SETTINGS_ATTRIBUTE);
48
- if (settingsAttribute) {
49
- const settings = this.parseSettings(settingsAttribute);
50
- const src = this.generateSrc(baseImage, settings);
51
- const srcset = this.generateSrcset(baseImage, settings);
52
- if (!src) {
53
- this.renderImage(this);
54
- return;
55
- }
56
- if (SUPPORTS_SRCSET && srcset) {
57
- image.srcset = srcset;
58
- }
59
- image.src = src;
60
- image.onload = () => this.renderImage(this);
61
- }
62
- else {
63
- this.renderImage(this);
64
- }
65
- }
66
- renderImage(element) {
67
- const image = this.img;
68
- element.classList.add(LAZY_IMAGE_ANIMATE_IN_CLASS);
69
- image.removeAttribute(SETTINGS_ATTRIBUTE);
70
- image.removeAttribute(BASE_IMAGE_ATTRIBUTE);
71
- if (!hasResponsiveImages.currentSrc) {
72
- image.currentSrc = `${image.src}`;
73
- }
74
- ObjectFit.polyfillObjectFit(image);
75
- }
76
- };
77
- __decorate([
78
- Query('img')
79
- ], BPDImage.prototype, "img", void 0);
80
- BPDImage = __decorate([
81
- Component({
82
- tag: 'bpd-image',
83
- })
84
- ], BPDImage);
85
- export { BPDImage };
86
- //# sourceMappingURL=image.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"image.js","sourceRoot":"","sources":["../../../../../src/atoms/image/utilities/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,2BAA2B,GAAG,kBAAkB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAC3C,MAAM,oBAAoB,GAAG,YAAY,CAAC;AAY1C,MAAM,eAAe,GAAG,mBAAmB,CAAC,MAAM,IAAI,mBAAmB,CAAC,OAAO,CAAC;AAKlF,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,WAAW;IAGrC,gBAAgB;QACZ,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,oBAAoB;QAChB,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAEO,aAAa,CAAC,IAAY;QAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;IAEO,WAAW,CAAC,SAAiB,EAAE,QAAkB;QACrD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAGnC,IAAI,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAGhC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACjB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEvD,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,EAAc,CAAC;SACzD;QAED,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAE/C,OAAO,GAAG,CAAC;IACf,CAAC;IAEO,cAAc,CAAC,SAAiB,EAAE,QAAkB;QACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEnC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC9B,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAC/C,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC;YAEzC,OAAO,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,MAAM,CAAC;IAClB,CAAC;IAEO,SAAS;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QAEvB,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAE/B,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAW,CAAC;QACrE,MAAM,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QAEjE,IAAI,iBAAiB,EAAE;YACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YAEvD,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YAClD,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YAGxD,IAAI,CAAC,GAAG,EAAE;gBACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACvB,OAAO;aACV;YAED,IAAI,eAAe,IAAI,MAAM,EAAE;gBAC3B,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACzB;YAED,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAChB,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC/C;aAAM;YACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC1B;IACL,CAAC;IAEO,WAAW,CAAC,OAAoB;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QAEvB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACnD,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC1C,KAAK,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;QAE5C,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE;YAChC,KAAa,CAAC,UAAU,GAAG,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;SAC9C;QAED,SAAS,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;CACJ,CAAA;AA5FiB;IAAb,KAAK,CAAC,KAAK,CAAC;qCAAuB;AAD3B,QAAQ;IAHpB,SAAS,CAAC;QACP,GAAG,EAAE,WAAW;KACnB,CAAC;GACW,QAAQ,CA6FpB;SA7FY,QAAQ","sourcesContent":["import { Component, Query } from '@atomify/core';\nimport { inviewObserver } from '@atomify/kit';\n\nimport createImageUrl from './create-image-url';\nimport hasResponsiveImages from './detect-responsive-images';\nimport ObjectFit from './object-fit';\n\nconst LAZY_IMAGE_ANIMATE_IN_CLASS = 'image--is-loaded';\n\nconst SETTINGS_ATTRIBUTE = 'data-settings';\nconst BASE_IMAGE_ATTRIBUTE = 'data-image';\n\nexport interface Setting {\n width?: number;\n height?: number;\n src?: boolean | undefined;\n}\n\nexport interface Settings {\n [key: string]: Setting;\n}\n\nconst SUPPORTS_SRCSET = hasResponsiveImages.srcset || hasResponsiveImages.picture;\n\n@Component({\n tag: 'bpd-image',\n})\nexport class BPDImage extends HTMLElement {\n @Query('img') img: HTMLImageElement;\n\n componentDidLoad() {\n inviewObserver.observe(this, (inView) => inView && this.loadImage());\n }\n\n disconnectedCallback() {\n inviewObserver.unobserve(this);\n }\n\n private parseSettings(json: string) {\n return JSON.parse(json) || {};\n }\n\n private generateSrc(baseImage: string, settings: Settings) {\n const keys = Object.keys(settings);\n\n // Set setting to first one by default\n let setting = settings[keys[0]];\n\n // Overwrite when a setting is found with scr: true\n if (keys.length > 1) {\n const srcKey = keys.find((key) => !!settings[key].src);\n\n setting = srcKey ? settings[srcKey] : ({} as Setting);\n }\n\n const src = createImageUrl(baseImage, setting);\n\n return src;\n }\n\n private generateSrcset(baseImage: string, settings: Settings) {\n const keys = Object.keys(settings);\n\n const srcset = keys.reduce((srcset, key, index) => {\n const setting = settings[key];\n const url = createImageUrl(baseImage, setting);\n const isLast = index + 1 === keys.length;\n\n return `${srcset} ${url} ${key}${isLast ? '' : ','}`;\n }, '');\n\n return srcset;\n }\n\n private loadImage() {\n const image = this.img;\n\n if (!image) return;\n\n inviewObserver.unobserve(this);\n\n const baseImage = image.getAttribute(BASE_IMAGE_ATTRIBUTE) as string;\n const settingsAttribute = image.getAttribute(SETTINGS_ATTRIBUTE);\n\n if (settingsAttribute) {\n const settings = this.parseSettings(settingsAttribute);\n\n const src = this.generateSrc(baseImage, settings);\n const srcset = this.generateSrcset(baseImage, settings);\n\n // // If there is no data-src set just render the element.\n if (!src) {\n this.renderImage(this);\n return;\n }\n\n if (SUPPORTS_SRCSET && srcset) {\n image.srcset = srcset;\n }\n\n image.src = src;\n image.onload = () => this.renderImage(this);\n } else {\n this.renderImage(this);\n }\n }\n\n private renderImage(element: HTMLElement) {\n const image = this.img;\n\n element.classList.add(LAZY_IMAGE_ANIMATE_IN_CLASS);\n image.removeAttribute(SETTINGS_ATTRIBUTE);\n image.removeAttribute(BASE_IMAGE_ATTRIBUTE);\n\n if (!hasResponsiveImages.currentSrc) {\n (image as any).currentSrc = `${image.src}`;\n }\n\n ObjectFit.polyfillObjectFit(image);\n }\n}\n"]}
@@ -1,35 +0,0 @@
1
- import { elements } from '@bpd-library/utilities';
2
- const HAS_POLYFILL_CLASS = 'has--object-fit-polyfill';
3
- const OBJECT_FIT_IMAGE_HOOK = 'js-hook-objectfit-img';
4
- const OBJECT_FIT_CONTAINER_HOOK = 'js-hook-objectfit-container';
5
- export default class ObjectFit {
6
- static polyfillObjectFit(element) {
7
- if ('objectFit' in document.documentElement.style) {
8
- return;
9
- }
10
- const images = ObjectFit.getObjectfitImages(element);
11
- elements.html.classList.add(HAS_POLYFILL_CLASS);
12
- images.forEach((image) => ObjectFit.polyfillImage(image));
13
- }
14
- static getObjectfitImages(element) {
15
- let images = [];
16
- if (!Array.isArray(element)) {
17
- if (typeof element.getAttribute(OBJECT_FIT_IMAGE_HOOK) === 'undefined' ||
18
- element.getAttribute(OBJECT_FIT_IMAGE_HOOK) === null) {
19
- return images;
20
- }
21
- images.push(element);
22
- }
23
- else {
24
- const queriedImages = document.querySelectorAll(`[${OBJECT_FIT_IMAGE_HOOK}]`);
25
- images = [...queriedImages];
26
- }
27
- return images;
28
- }
29
- static polyfillImage(image) {
30
- const container = image.closest(`[${OBJECT_FIT_CONTAINER_HOOK}]`);
31
- if (container)
32
- container.setAttribute('style', `background-image: url(${image.currentSrc});`);
33
- }
34
- }
35
- //# sourceMappingURL=object-fit.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"object-fit.js","sourceRoot":"","sources":["../../../../../src/atoms/image/utilities/object-fit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,kBAAkB,GAAG,0BAA0B,CAAC;AACtD,MAAM,qBAAqB,GAAG,uBAAuB,CAAC;AACtD,MAAM,yBAAyB,GAAG,6BAA6B,CAAC;AAIhE,MAAM,CAAC,OAAO,OAAO,SAAS;IACnB,MAAM,CAAC,iBAAiB,CAAC,OAAqB;QACjD,IAAI,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,EAAE;YAC/C,OAAO;SACV;QAED,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACrD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChD,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,CAAC;IAEM,MAAM,CAAC,kBAAkB,CAAC,OAAqB;QAClD,IAAI,MAAM,GAAiB,EAAE,CAAC;QAE9B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAEzB,IACI,OAAO,OAAO,CAAC,YAAY,CAAC,qBAAqB,CAAC,KAAK,WAAW;gBAClE,OAAO,CAAC,YAAY,CAAC,qBAAqB,CAAC,KAAK,IAAI,EACtD;gBACE,OAAO,MAAM,CAAC;aACjB;YACD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACxB;aAAM;YACH,MAAM,aAAa,GAAG,QAAQ,CAAC,gBAAgB,CAAC,IAAI,qBAAqB,GAAG,CAAC,CAAC;YAC9E,MAAM,GAAG,CAAC,GAAI,aAAqB,CAAC,CAAC;SACxC;QAED,OAAO,MAAM,CAAC;IAClB,CAAC;IAEO,MAAM,CAAC,aAAa,CAAC,KAAuB;QAChD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,yBAAyB,GAAG,CAAC,CAAC;QAClE,IAAI,SAAS;YACT,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,yBAAyB,KAAK,CAAC,UAAU,IAAI,CAAC,CAAC;IACvF,CAAC;CACJ","sourcesContent":["import { elements } from '@bpd-library/utilities';\n\nconst HAS_POLYFILL_CLASS = 'has--object-fit-polyfill';\nconst OBJECT_FIT_IMAGE_HOOK = 'js-hook-objectfit-img';\nconst OBJECT_FIT_CONTAINER_HOOK = 'js-hook-objectfit-container';\n\ntype ImageElement = HTMLImageElement | HTMLImageElement[];\n\nexport default class ObjectFit {\n public static polyfillObjectFit(element: ImageElement) {\n if ('objectFit' in document.documentElement.style) {\n return;\n }\n\n const images = ObjectFit.getObjectfitImages(element);\n elements.html.classList.add(HAS_POLYFILL_CLASS);\n images.forEach((image) => ObjectFit.polyfillImage(image));\n }\n\n public static getObjectfitImages(element: ImageElement) {\n let images: ImageElement = [];\n\n if (!Array.isArray(element)) {\n // If element without hook is passed in, ignore it.\n if (\n typeof element.getAttribute(OBJECT_FIT_IMAGE_HOOK) === 'undefined' ||\n element.getAttribute(OBJECT_FIT_IMAGE_HOOK) === null\n ) {\n return images;\n }\n images.push(element);\n } else {\n const queriedImages = document.querySelectorAll(`[${OBJECT_FIT_IMAGE_HOOK}]`);\n images = [...(queriedImages as any)];\n }\n\n return images;\n }\n\n private static polyfillImage(image: HTMLImageElement) {\n const container = image.closest(`[${OBJECT_FIT_CONTAINER_HOOK}]`);\n if (container)\n container.setAttribute('style', `background-image: url(${image.currentSrc});`);\n }\n}\n"]}
@@ -1,3 +0,0 @@
1
- import { h } from '@atomify/jsx';
2
- export const Row = ({ extraClass = '', children }) => (h("div", { class: `o-grid ${extraClass}` }, children));
3
- //# sourceMappingURL=row.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/atoms/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAOjC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,QAAQ,EAAgB,EAAE,EAAE,CAAC,CAChE,WAAK,KAAK,EAAE,UAAU,UAAU,EAAE,IAAG,QAAQ,CAAO,CACvD,CAAC","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"]}
@@ -1,23 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { Component, Prop } from '@atomify/core';
3
- import { h } from '@atomify/jsx';
4
- let BPDSvg = class BPDSvg extends HTMLElement {
5
- constructor() {
6
- super(...arguments);
7
- this.name = '';
8
- }
9
- render() {
10
- return (h("svg", { class: `svg svg-${this.name}` },
11
- h("use", { xlinkHref: `#svg-${this.name}` })));
12
- }
13
- };
14
- __decorate([
15
- Prop()
16
- ], BPDSvg.prototype, "name", void 0);
17
- BPDSvg = __decorate([
18
- Component({
19
- tag: 'bpd-svg',
20
- })
21
- ], BPDSvg);
22
- export { BPDSvg };
23
- //# sourceMappingURL=svg.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"svg.js","sourceRoot":"","sources":["../../../../src/atoms/svg/svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAKjC,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,WAAW;IAAvC;;QACY,SAAI,GAAW,EAAE,CAAC;IAS9B,CAAC;IAPG,MAAM;QACF,OAAO,CACH,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;YAC9B,WAAK,SAAS,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAQ,CACzC,CACT,CAAC;IACN,CAAC;CACJ,CAAA;AATW;IAAP,IAAI,EAAE;oCAAmB;AADjB,MAAM;IAHlB,SAAS,CAAC;QACP,GAAG,EAAE,SAAS;KACjB,CAAC;GACW,MAAM,CAUlB;SAVY,MAAM","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"]}
package/dist/lib/index.js DELETED
@@ -1,12 +0,0 @@
1
- export * from './atoms/button';
2
- export * from './atoms/col/col';
3
- export * from './atoms/container/container';
4
- export * from './atoms/form-elements/range-slider/range-slider';
5
- export * from './atoms/form-elements/utilities/range-slider';
6
- export * from './atoms/image';
7
- export * from './atoms/row/row';
8
- export * from './atoms/svg/svg';
9
- export * from './molecules/infobox';
10
- export * from './molecules/map';
11
- export * from './molecules/tooltip';
12
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAKhC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * Atoms\n */\nexport * from './atoms/button';\nexport * from './atoms/col/col';\nexport * from './atoms/container/container';\nexport * from './atoms/form-elements/range-slider/range-slider';\nexport * from './atoms/form-elements/utilities/range-slider';\nexport * from './atoms/image';\nexport * from './atoms/row/row';\nexport * from './atoms/svg/svg';\n\n/**\n * Molecules\n */\nexport * from './molecules/infobox';\nexport * from './molecules/map';\nexport * from './molecules/tooltip';\n"]}
@@ -1,2 +0,0 @@
1
- export * from './infobox';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/molecules/infobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './infobox';\n"]}
@@ -1,17 +0,0 @@
1
- import { h } from '@atomify/jsx';
2
- import { ButtonA } from '../../atoms/button';
3
- import { Image } from '../../atoms/image';
4
- export const Infobox = ({ title, image, tags, description, link, onClose, openInTab, }) => (h("div", { class: "c-infobox" },
5
- h("button", { class: "infobox__close", onClick: onClose },
6
- h("bpd-svg", { name: "icons-close" })),
7
- image && title && (h("div", { class: "infobox__image-container" },
8
- h(Image, { classes: "infobox__image", image: image, alt: title, preload: {
9
- width: 325,
10
- height: 117,
11
- } }))),
12
- h("div", { class: "infobox__wrapper" },
13
- title && h("h3", { class: "infobox__title" }, title),
14
- tags && h("span", { class: "infobox__tags" }, tags === null || tags === void 0 ? void 0 : tags.join(', ')),
15
- description && h("p", { class: "infobox__description" }, description),
16
- link && (h(ButtonA, { target: openInTab ? '_blank' : '_self', url: link, label: "Bekijk het gebied" })))));
17
- //# sourceMappingURL=infobox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"infobox.js","sourceRoot":"","sources":["../../../../src/molecules/infobox/infobox.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,EACpB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAS,GACM,EAAE,EAAE,CAAC,CACpB,WAAK,KAAK,EAAC,WAAW;IAClB,cAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,OAAO;QAC3C,eAAS,IAAI,EAAC,aAAa,GAAG,CACzB;IACR,KAAK,IAAI,KAAK,IAAI,CACf,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,IAAI,CACL,EAAC,OAAO,IACJ,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACtC,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,mBAAmB,GAC3B,CACL,CACC,CACJ,CACT,CAAC","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"]}
@@ -1,14 +0,0 @@
1
- const useStyleLoaded = (map, cb) => {
2
- if (map.isStyleLoaded()) {
3
- cb();
4
- return;
5
- }
6
- let isCalled = false;
7
- map.on('styledata', () => {
8
- if (!isCalled)
9
- cb();
10
- isCalled = true;
11
- });
12
- };
13
- export default useStyleLoaded;
14
- //# sourceMappingURL=use-style-loaded.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-style-loaded.js","sourceRoot":"","sources":["../../../../../src/molecules/map/hooks/use-style-loaded.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,CAAC,GAAiB,EAAE,EAAY,EAAE,EAAE;IACvD,IAAI,GAAG,CAAC,aAAa,EAAE,EAAE;QACrB,EAAE,EAAE,CAAC;QACL,OAAO;KACV;IAED,IAAI,QAAQ,GAAY,KAAK,CAAC;IAE9B,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE;QACrB,IAAI,CAAC,QAAQ;YAAE,EAAE,EAAE,CAAC;QACpB,QAAQ,GAAG,IAAI,CAAC;IACpB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["const useStyleLoaded = (map: mapboxgl.Map, cb: Function) => {\n if (map.isStyleLoaded()) {\n cb();\n return;\n }\n\n let isCalled: boolean = false;\n\n map.on('styledata', () => {\n if (!isCalled) cb();\n isCalled = true;\n });\n};\n\nexport default useStyleLoaded;\n"]}
@@ -1,4 +0,0 @@
1
- export * from './utilities/fit-bounds';
2
- export * from './store/map';
3
- export * from './map';
4
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/molecules/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC","sourcesContent":["export * from './utilities/fit-bounds';\nexport * from './store/map';\nexport * from './map';\n"]}
@@ -1,256 +0,0 @@
1
- import { defineElement, onDidLoad, useElement, useProp } from '@atomify/hooks';
2
- import { Fragment, h } from '@atomify/jsx';
3
- import { calculateMapDataBoundingBox, calculateMapDataCenter, detectTouch, expandBoundingBox, functionIsTrue, getCountryBoundingBox, } from '@bpd-library/utilities';
4
- import MapboxLanguage from '@mapbox/mapbox-gl-language';
5
- import mapboxgl from 'mapbox-gl';
6
- import { Button } from '../../atoms/button';
7
- import { Infobox } from '../infobox';
8
- import { clearHover, mapStore, setMapInstance } from './store/map';
9
- import mapbox from './utilities/mapbox';
10
- const DEFAULT_OPTIONS = {
11
- zoomButtons: true,
12
- mobileToggle: false,
13
- tooltipMode: 'hover',
14
- openInTab: false,
15
- autoOpenUrl: true,
16
- language: window.__ENVIRONMENT_DETAILS__.language || 'nl',
17
- searchCountryIsoCodes: ['nl', 'de'],
18
- };
19
- const CONTAINER_VISIBLE = 'map--is-visible';
20
- const MOBILE_TOGGLE_CLASS = 'map--mobile-toggle';
21
- const MAP_HOVERING_CLASS = 'map--hovering';
22
- const POINTER_FOCUS_CLASS = 'map__pointer--focus';
23
- export const Map = () => {
24
- let [options] = useProp('options', {});
25
- const [theme] = useProp('theme');
26
- const container = useElement('[js-hook-map-container]');
27
- const infoboxWrapper = useElement('[js-hook-infobox-wrapper]');
28
- const element = useElement('[js-hook-map]');
29
- let map;
30
- let mapboxHelpers;
31
- let focusTimeout;
32
- onDidLoad(async () => {
33
- if (options.mobileToggle)
34
- element.current.classList.add(MOBILE_TOGGLE_CLASS);
35
- options = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
36
- map = createMapboxInstance();
37
- mapboxHelpers = mapbox(map, options, theme);
38
- setMapInstance(map);
39
- await setupMapbox();
40
- subscribe();
41
- if (options.search)
42
- options.search.forEach((e) => mapboxHelpers.search(e));
43
- });
44
- function subscribe() {
45
- const { filter, data } = mapStore.getState();
46
- const { addData } = mapboxHelpers;
47
- addData(filter ? filter : data);
48
- mapStore.subscribe(({ data }) => addData(data), ['data']);
49
- mapStore.subscribe(handleHover, ['hover']);
50
- mapStore.subscribe(handleClick, ['click']);
51
- mapStore.subscribe(handleFocus, ['focus']);
52
- mapStore.subscribe(({ filter, data }) => addData(filter ? filter : data), ['filter']);
53
- mapStore.subscribe(({ layerRasterSettings }) => layerRasterSettings && mapboxHelpers.raster(layerRasterSettings), ['layerRasterSettings']);
54
- }
55
- function handleHover({ hover }) {
56
- const { current, previous } = hover;
57
- const canvasStyle = map.getCanvas().style;
58
- const { setFeatureState, addTooltip, removeTooltip } = mapboxHelpers;
59
- if (options.tooltipMode === 'hover') {
60
- if ((current === null || current === void 0 ? void 0 : current.tooltip) && !detectTouch.touch)
61
- addTooltip(current.coordinates, current);
62
- if (!current && !detectTouch.touch)
63
- removeTooltip();
64
- }
65
- if (hasHoverTheme()) {
66
- if (current)
67
- setFeatureState(current.variant, current.id, 'hover', true);
68
- if (previous)
69
- setFeatureState(previous.variant, previous.id, 'hover', false);
70
- }
71
- canvasStyle.cursor = current ? 'pointer' : '';
72
- }
73
- function handleClick({ click }) {
74
- if (!click)
75
- return;
76
- const { addTooltip } = mapboxHelpers;
77
- const { infobox, coordinates, tooltip, url } = click;
78
- clearHover();
79
- if (options.tooltipMode === 'click' && tooltip) {
80
- addTooltip(coordinates, click);
81
- }
82
- if (options.tooltipMode === 'hover') {
83
- if (url && !detectTouch.touch && options.autoOpenUrl) {
84
- window.open(url, options.openInTab ? '_blank' : '_self');
85
- }
86
- else if ((url && tooltip) || (detectTouch.touch && !url && tooltip)) {
87
- addTooltip(coordinates, click);
88
- }
89
- }
90
- if (infobox) {
91
- showInfobox(infobox);
92
- }
93
- else {
94
- clearInfobox();
95
- }
96
- }
97
- function handleFocus({ focus }) {
98
- const { current, previous, options } = focus;
99
- const { setFeatureState, center, addTooltip, removeTooltip } = mapboxHelpers;
100
- if (focusTimeout)
101
- clearTimeout(focusTimeout);
102
- if (previous) {
103
- previous.forEach(({ id, variant }) => {
104
- if (hasHoverTheme())
105
- setFeatureState(variant, id, 'focus', false);
106
- pointerFocusToggle(id, 'remove');
107
- });
108
- }
109
- if (current) {
110
- current.forEach((item) => {
111
- const { variant, id, coordinates, tooltip } = item;
112
- function handleTooltip() {
113
- const showTooltip = (options === null || options === void 0 ? void 0 : options.toggleTooltip) && tooltip;
114
- if (theme.polygon || pointerExists(id)) {
115
- if (showTooltip)
116
- addTooltip(coordinates, item);
117
- pointerFocusToggle(id, 'add');
118
- }
119
- }
120
- if (theme.polygon) {
121
- if (hasHoverTheme())
122
- setFeatureState(variant, id, 'focus', true);
123
- }
124
- if (pointerExists(id)) {
125
- handleTooltip();
126
- }
127
- else {
128
- map.once('idle', handleTooltip);
129
- }
130
- });
131
- if (options === null || options === void 0 ? void 0 : options.zoom) {
132
- let bounds = calculateMapDataBoundingBox(current);
133
- bounds = expandBoundingBox(bounds, 0.05);
134
- map.fitBounds(bounds);
135
- }
136
- else if (!(options === null || options === void 0 ? void 0 : options.static)) {
137
- center([[calculateMapDataCenter(current)]]);
138
- }
139
- }
140
- else {
141
- removeTooltip();
142
- }
143
- }
144
- function pointerFocusToggle(id, action) {
145
- const pointer = getPointerElementById(id);
146
- if (pointer) {
147
- pointer.classList[action](POINTER_FOCUS_CLASS);
148
- element.current.classList[action](MAP_HOVERING_CLASS);
149
- }
150
- }
151
- function showInfobox(infobox) {
152
- clearInfobox();
153
- infoboxWrapper.current.appendChild(h(Infobox, Object.assign({}, infobox, { onClose: clearInfobox, openInTab: options.openInTab })));
154
- }
155
- function clearInfobox() {
156
- infoboxWrapper.current.innerHTML = '';
157
- }
158
- function toggleMap() {
159
- element.current.classList.toggle(CONTAINER_VISIBLE);
160
- map.resize();
161
- }
162
- function hasHoverTheme() {
163
- return theme.polygon && theme.polygon.settings[0].hover;
164
- }
165
- function createMapboxInstance() {
166
- mapboxgl.accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;
167
- const mapboxOptions = {
168
- container: container.current,
169
- style: `mapbox://styles/${window.__ENVIRONMENT_DETAILS__.mapbox.style}`,
170
- minZoom: 4,
171
- maxZoom: 30,
172
- dragPan: true,
173
- scrollZoom: false,
174
- };
175
- if (options.center)
176
- mapboxOptions.center = options.center;
177
- if (options.zoom)
178
- mapboxOptions.zoom = options.zoom;
179
- if (options.boundingBox)
180
- mapboxOptions.bounds = options.boundingBox;
181
- if (!options.zoom && !options.center && !options.boundingBox) {
182
- mapboxOptions.bounds = getCountryBoundingBox(['nl']);
183
- }
184
- return new mapboxgl.Map(mapboxOptions);
185
- }
186
- function getMapboxLanguageString() {
187
- let language;
188
- if (options.language) {
189
- language = options.language.substr(0, 2);
190
- }
191
- language = !language || language === 'nl' ? 'mul' : language;
192
- return language;
193
- }
194
- async function setupMapbox() {
195
- const { raster, geojson, layer, interaction, setupPointers } = mapboxHelpers;
196
- await functionIsTrue(() => map.isStyleLoaded());
197
- const languageControl = new MapboxLanguage({
198
- defaultLanguage: getMapboxLanguageString(),
199
- });
200
- map.addControl(languageControl);
201
- const optionsLayerRaster = options.layerRaster
202
- ? { layerRaster: options.layerRaster }
203
- : undefined;
204
- const storeLayerRaster = mapStore.getState().layerRasterSettings;
205
- if (optionsLayerRaster) {
206
- raster(optionsLayerRaster);
207
- }
208
- else if (storeLayerRaster) {
209
- raster(storeLayerRaster);
210
- }
211
- if (theme.polygon) {
212
- theme.polygon.settings.forEach((setting) => {
213
- geojson(setting);
214
- layer(setting);
215
- interaction(setting);
216
- });
217
- }
218
- if (theme.pointer) {
219
- setupPointers(element.current);
220
- }
221
- map.resize();
222
- }
223
- function getPointerElementById(id) {
224
- return element.current.querySelector(`#pointer-${id}`);
225
- }
226
- function pointerExists(id) {
227
- return !!getPointerElementById(id);
228
- }
229
- return (h(Fragment, null,
230
- h("div", { class: "c-map", "js-hook-map": true },
231
- h("div", { className: "map__container", "js-hook-map-container": true },
232
- options.zoomButtons && (h("div", { class: "map__navigation" },
233
- h("button", { class: "map__button", onClick: () => map.zoomIn() },
234
- h("bpd-svg", { name: "icons-plus" })),
235
- h("button", { class: "map__button", onClick: () => map.zoomOut() },
236
- h("span", { class: "map__minus" })))),
237
- options.mobileToggle && (h("button", { type: "button", class: "map__close", onClick: toggleMap },
238
- h("bpd-svg", { name: "icons-close" }))),
239
- h("div", { class: "map__infobox-wrapper", "js-hook-infobox-wrapper": true }))),
240
- options.mobileToggle && (h(Fragment, null,
241
- h(Button, { variant: "bg", label: options.mobileToggleLabel || 'Toon kaart', classes: "map__open", onClick: toggleMap })))));
242
- };
243
- Map.props = {
244
- options: {
245
- type: Object,
246
- },
247
- theme: {
248
- type: Object,
249
- required: true,
250
- },
251
- zoomButtons: {
252
- type: Boolean,
253
- },
254
- };
255
- defineElement('bpd-map', Map);
256
- //# sourceMappingURL=map.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"map.js","sourceRoot":"","sources":["../../../../src/molecules/map/map.tsx"],"names":[],"mappings":"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","sourcesContent":["import { defineElement, FC, onDidLoad, useElement, useProp } from '@atomify/hooks';\nimport { Fragment, h } from '@atomify/jsx';\nimport { MapInfobox, MapOptions, MapSearchOptions, MapTheme } from '@bpd-library/types';\nimport {\n calculateMapDataBoundingBox,\n calculateMapDataCenter,\n detectTouch,\n expandBoundingBox,\n functionIsTrue,\n getCountryBoundingBox,\n} from '@bpd-library/utilities';\nimport MapboxLanguage from '@mapbox/mapbox-gl-language';\nimport mapboxgl from 'mapbox-gl';\n\nimport { Button } from '../../atoms/button';\nimport { Infobox } from '../infobox';\nimport { clearHover, MapState, mapStore, setMapInstance } from './store/map';\nimport mapbox from './utilities/mapbox';\n\nconst DEFAULT_OPTIONS: MapOptions = {\n zoomButtons: true,\n mobileToggle: false,\n tooltipMode: 'hover',\n openInTab: false,\n autoOpenUrl: true,\n language: window.__ENVIRONMENT_DETAILS__.language || 'nl',\n searchCountryIsoCodes: ['nl', 'de'],\n};\n\nconst CONTAINER_VISIBLE = 'map--is-visible';\nconst MOBILE_TOGGLE_CLASS = 'map--mobile-toggle';\nconst MAP_HOVERING_CLASS = 'map--hovering';\nconst POINTER_FOCUS_CLASS = 'map__pointer--focus';\n\nexport const Map: FC = () => {\n let [options] = useProp<MapOptions>('options', {});\n const [theme] = useProp<MapTheme>('theme');\n const container = useElement<HTMLDivElement>('[js-hook-map-container]');\n const infoboxWrapper = useElement<HTMLDivElement>('[js-hook-infobox-wrapper]');\n const element = useElement<HTMLDivElement>('[js-hook-map]');\n\n let map: mapboxgl.Map;\n let mapboxHelpers: ReturnType<typeof mapbox>;\n let focusTimeout: ReturnType<typeof setTimeout> | undefined;\n\n onDidLoad(async () => {\n if (options.mobileToggle) element.current!.classList.add(MOBILE_TOGGLE_CLASS);\n options = { ...DEFAULT_OPTIONS, ...options };\n\n map = createMapboxInstance();\n mapboxHelpers = mapbox(map, options, theme);\n setMapInstance(map);\n\n await setupMapbox();\n\n subscribe();\n\n if (options.search)\n options.search.forEach((e: MapSearchOptions) => mapboxHelpers.search(e));\n });\n\n function subscribe() {\n const { filter, data } = mapStore.getState();\n const { addData } = mapboxHelpers;\n\n addData(filter ? filter : data);\n\n mapStore.subscribe(({ data }) => addData(data), ['data']);\n mapStore.subscribe(handleHover, ['hover']);\n mapStore.subscribe(handleClick, ['click']);\n mapStore.subscribe(handleFocus, ['focus']);\n mapStore.subscribe(({ filter, data }) => addData(filter ? filter : data), ['filter']);\n mapStore.subscribe(\n ({ layerRasterSettings }) =>\n layerRasterSettings && mapboxHelpers.raster(layerRasterSettings),\n ['layerRasterSettings'],\n );\n }\n\n function handleHover({ hover }: MapState) {\n const { current, previous } = hover;\n const canvasStyle = map.getCanvas().style;\n const { setFeatureState, addTooltip, removeTooltip } = mapboxHelpers;\n\n /*\n Add / Remove tooltip\n */\n if (options.tooltipMode === 'hover') {\n if (current?.tooltip && !detectTouch.touch) addTooltip(current.coordinates, current);\n if (!current && !detectTouch.touch) removeTooltip();\n }\n\n /*\n Set hover state\n */\n if (hasHoverTheme()) {\n if (current) setFeatureState(current.variant, current.id, 'hover', true);\n if (previous) setFeatureState(previous.variant, previous.id, 'hover', false);\n }\n\n canvasStyle.cursor = current ? 'pointer' : '';\n }\n\n function handleClick({ click }: MapState) {\n if (!click) return;\n\n const { addTooltip } = mapboxHelpers;\n const { infobox, coordinates, tooltip, url } = click;\n\n clearHover();\n\n if (options.tooltipMode === 'click' && tooltip) {\n addTooltip(coordinates, click);\n }\n\n if (options.tooltipMode === 'hover') {\n if (url && !detectTouch.touch && options.autoOpenUrl) {\n window.open(url, options.openInTab ? '_blank' : '_self');\n } else if ((url && tooltip) || (detectTouch.touch && !url && tooltip)) {\n addTooltip(coordinates, click);\n }\n }\n\n if (infobox) {\n showInfobox(infobox);\n } else {\n clearInfobox();\n }\n }\n\n function handleFocus({ focus }: MapState) {\n const { current, previous, options } = focus;\n const { setFeatureState, center, addTooltip, removeTooltip } = mapboxHelpers;\n\n if (focusTimeout) clearTimeout(focusTimeout);\n\n if (previous) {\n previous.forEach(({ id, variant }) => {\n if (hasHoverTheme()) setFeatureState(variant, id, 'focus', false);\n pointerFocusToggle(id, 'remove');\n });\n }\n\n if (current) {\n current.forEach((item) => {\n const { variant, id, coordinates, tooltip } = item;\n\n function handleTooltip() {\n const showTooltip = options?.toggleTooltip && tooltip;\n\n if (theme.polygon || pointerExists(id)) {\n if (showTooltip) addTooltip(coordinates, item);\n\n pointerFocusToggle(id, 'add');\n }\n }\n\n if (theme.polygon) {\n if (hasHoverTheme()) setFeatureState(variant, id, 'focus', true);\n }\n\n if (pointerExists(id)) {\n handleTooltip();\n } else {\n /*\n If a pointer doesn't exist, it means it's inside a cluster or outside of the view.\n When the map is idle, all newly centered pointers are drawn and the tooltip can be shown. (if not in a cluster)\n */\n map.once('idle', handleTooltip);\n }\n });\n\n if (options?.zoom) {\n let bounds = calculateMapDataBoundingBox(current);\n bounds = expandBoundingBox(bounds, 0.05);\n\n map.fitBounds(bounds);\n } else if (!options?.static) {\n center([[calculateMapDataCenter(current)]]);\n }\n } else {\n removeTooltip();\n }\n }\n\n function pointerFocusToggle(id: string, action: 'add' | 'remove') {\n const pointer = getPointerElementById(id);\n\n if (pointer) {\n pointer.classList[action](POINTER_FOCUS_CLASS);\n element.current!.classList[action](MAP_HOVERING_CLASS);\n }\n }\n\n function showInfobox(infobox: MapInfobox) {\n clearInfobox();\n infoboxWrapper.current!.appendChild(\n <Infobox {...infobox} onClose={clearInfobox} openInTab={options.openInTab} />,\n );\n }\n\n function clearInfobox() {\n infoboxWrapper.current!.innerHTML = '';\n }\n\n function toggleMap() {\n element.current!.classList.toggle(CONTAINER_VISIBLE);\n map.resize();\n }\n\n function hasHoverTheme() {\n return theme.polygon && theme.polygon.settings[0].hover;\n }\n\n function createMapboxInstance() {\n mapboxgl.accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;\n\n const mapboxOptions: mapboxgl.MapboxOptions = {\n container: container.current!,\n style: `mapbox://styles/${window.__ENVIRONMENT_DETAILS__.mapbox.style}`,\n minZoom: 4,\n maxZoom: 30,\n dragPan: true,\n scrollZoom: false,\n };\n\n if (options.center) mapboxOptions.center = options.center;\n if (options.zoom) mapboxOptions.zoom = options.zoom;\n if (options.boundingBox) mapboxOptions.bounds = options.boundingBox;\n\n if (!options.zoom && !options.center && !options.boundingBox) {\n mapboxOptions.bounds = getCountryBoundingBox(['nl']);\n }\n\n return new mapboxgl.Map(mapboxOptions);\n }\n\n function getMapboxLanguageString(): string {\n let language: string | undefined;\n\n // If language could be nl-NL etc., make sure to strip first two characters\n if (options.language) {\n language = options.language.substr(0, 2);\n }\n\n // nl is not supported, use multilanguage instead\n language = !language || language === 'nl' ? 'mul' : language;\n\n return language;\n }\n\n async function setupMapbox() {\n const { raster, geojson, layer, interaction, setupPointers } = mapboxHelpers;\n\n await functionIsTrue(() => map.isStyleLoaded());\n\n // Setup Mapbox Language\n const languageControl = new MapboxLanguage({\n defaultLanguage: getMapboxLanguageString(),\n });\n map.addControl(languageControl);\n\n // Setup Layer Raster\n // Layer raster can be set via the store and options attribute\n const optionsLayerRaster = options.layerRaster\n ? { layerRaster: options.layerRaster }\n : undefined;\n const storeLayerRaster = mapStore.getState().layerRasterSettings;\n\n if (optionsLayerRaster) {\n raster(optionsLayerRaster);\n } else if (storeLayerRaster) {\n raster(storeLayerRaster);\n }\n\n // Setup in case of polygons\n if (theme.polygon) {\n theme.polygon.settings.forEach((setting) => {\n geojson(setting);\n layer(setting);\n interaction(setting);\n });\n }\n\n // Setup in case of pointers\n if (theme.pointer) {\n setupPointers(element.current!);\n }\n\n map.resize();\n }\n\n function getPointerElementById(id: string) {\n return element.current!.querySelector(`#pointer-${id}`);\n }\n\n function pointerExists(id: string) {\n return !!getPointerElementById(id);\n }\n\n return (\n <Fragment>\n <div class=\"c-map\" js-hook-map>\n <div className=\"map__container\" js-hook-map-container>\n {options.zoomButtons && (\n <div class=\"map__navigation\">\n <button class=\"map__button\" onClick={() => map.zoomIn()}>\n <bpd-svg name=\"icons-plus\"></bpd-svg>\n </button>\n <button class=\"map__button\" onClick={() => map.zoomOut()}>\n <span class=\"map__minus\"></span>\n </button>\n </div>\n )}\n\n {options.mobileToggle && (\n <button type=\"button\" class=\"map__close\" onClick={toggleMap}>\n <bpd-svg name=\"icons-close\" />\n </button>\n )}\n\n <div class=\"map__infobox-wrapper\" js-hook-infobox-wrapper></div>\n </div>\n </div>\n\n {options.mobileToggle && (\n <Fragment>\n <Button\n variant=\"bg\"\n label={options.mobileToggleLabel || 'Toon kaart'}\n classes=\"map__open\"\n onClick={toggleMap}></Button>\n </Fragment>\n )}\n </Fragment>\n );\n};\n\nMap.props = {\n options: {\n type: Object,\n },\n theme: {\n type: Object,\n required: true,\n },\n zoomButtons: {\n type: Boolean,\n },\n};\n\ndefineElement('bpd-map', Map);\n"]}
@@ -1,2 +0,0 @@
1
- export * from './store';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/store/map/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './store';\n"]}