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

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 (200) hide show
  1. package/dist/atoms/form-elements/range-slider/range-slider.d.ts +4 -1
  2. package/dist/atoms/form-elements/range-slider/range-slider.js +11 -4
  3. package/dist/atoms/form-elements/range-slider/range-slider.js.map +1 -1
  4. package/dist/atoms/form-elements/utilities/range-slider.js +49 -11
  5. package/dist/atoms/form-elements/utilities/range-slider.js.map +1 -1
  6. package/dist/esm/atoms/button/button.js +33 -0
  7. package/dist/esm/atoms/button/button.js.map +1 -0
  8. package/dist/esm/atoms/col/col.js +22 -0
  9. package/dist/esm/atoms/col/col.js.map +1 -0
  10. package/dist/esm/atoms/container/container.js +6 -0
  11. package/dist/esm/atoms/container/container.js.map +1 -0
  12. package/dist/esm/atoms/form-elements/range-slider/range-slider.js +21 -0
  13. package/dist/esm/atoms/form-elements/range-slider/range-slider.js.map +1 -0
  14. package/dist/esm/atoms/form-elements/utilities/range-slider.js +100 -0
  15. package/dist/esm/atoms/form-elements/utilities/range-slider.js.map +1 -0
  16. package/dist/esm/atoms/image/image.js +18 -0
  17. package/dist/esm/atoms/image/image.js.map +1 -0
  18. package/dist/esm/atoms/image/utilities/create-image-url.js +15 -0
  19. package/dist/esm/atoms/image/utilities/create-image-url.js.map +1 -0
  20. package/dist/esm/atoms/row/row.js +6 -0
  21. package/dist/esm/atoms/row/row.js.map +1 -0
  22. package/dist/esm/atoms/svg/svg.js +25 -0
  23. package/dist/esm/atoms/svg/svg.js.map +1 -0
  24. package/dist/esm/index.js +14 -0
  25. package/dist/esm/index.js.map +1 -0
  26. package/dist/esm/molecules/infobox/infobox.js +20 -0
  27. package/dist/esm/molecules/infobox/infobox.js.map +1 -0
  28. package/dist/esm/molecules/map/map.js +256 -0
  29. package/dist/esm/molecules/map/map.js.map +1 -0
  30. package/dist/esm/molecules/map/store/map/store.js +150 -0
  31. package/dist/esm/molecules/map/store/map/store.js.map +1 -0
  32. package/dist/esm/molecules/map/utilities/fit-bounds.js +4 -0
  33. package/dist/esm/molecules/map/utilities/fit-bounds.js.map +1 -0
  34. package/dist/esm/molecules/map/utilities/mapbox/add-data.js +54 -0
  35. package/dist/esm/molecules/map/utilities/mapbox/add-data.js.map +1 -0
  36. package/dist/esm/molecules/map/utilities/mapbox/center.js +15 -0
  37. package/dist/esm/molecules/map/utilities/mapbox/center.js.map +1 -0
  38. package/dist/esm/molecules/map/utilities/mapbox/constants.js +5 -0
  39. package/dist/esm/molecules/map/utilities/mapbox/constants.js.map +1 -0
  40. package/dist/esm/molecules/map/utilities/mapbox/index.js +3 -0
  41. package/dist/esm/molecules/map/utilities/mapbox/index.js.map +1 -0
  42. package/dist/esm/molecules/map/utilities/mapbox/mapbox.js +27 -0
  43. package/dist/esm/molecules/map/utilities/mapbox/mapbox.js.map +1 -0
  44. package/dist/esm/molecules/map/utilities/mapbox/parse-feature-properties.js +18 -0
  45. package/dist/esm/molecules/map/utilities/mapbox/parse-feature-properties.js.map +1 -0
  46. package/dist/esm/molecules/map/utilities/mapbox/pointers/setup-pointers.js +151 -0
  47. package/dist/esm/molecules/map/utilities/mapbox/pointers/setup-pointers.js.map +1 -0
  48. package/dist/esm/molecules/map/utilities/mapbox/polygons/feature-state.js +11 -0
  49. package/dist/esm/molecules/map/utilities/mapbox/polygons/feature-state.js.map +1 -0
  50. package/dist/esm/molecules/map/utilities/mapbox/polygons/geojson.js +10 -0
  51. package/dist/esm/molecules/map/utilities/mapbox/polygons/geojson.js.map +1 -0
  52. package/dist/esm/molecules/map/utilities/mapbox/polygons/interaction.js +34 -0
  53. package/dist/esm/molecules/map/utilities/mapbox/polygons/interaction.js.map +1 -0
  54. package/dist/esm/molecules/map/utilities/mapbox/polygons/layer.js +110 -0
  55. package/dist/esm/molecules/map/utilities/mapbox/polygons/layer.js.map +1 -0
  56. package/dist/esm/molecules/map/utilities/mapbox/raster.js +43 -0
  57. package/dist/esm/molecules/map/utilities/mapbox/raster.js.map +1 -0
  58. package/dist/esm/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js +27 -0
  59. package/dist/esm/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js.map +1 -0
  60. package/dist/esm/molecules/map/utilities/mapbox/search/search.js +174 -0
  61. package/dist/esm/molecules/map/utilities/mapbox/search/search.js.map +1 -0
  62. package/dist/esm/molecules/map/utilities/mapbox/tooltip.js +26 -0
  63. package/dist/esm/molecules/map/utilities/mapbox/tooltip.js.map +1 -0
  64. package/dist/esm/molecules/tooltip/tooltip.js +14 -0
  65. package/dist/esm/molecules/tooltip/tooltip.js.map +1 -0
  66. package/dist/esm/node_modules/tslib/tslib.es6.js +24 -0
  67. package/dist/esm/node_modules/tslib/tslib.es6.js.map +1 -0
  68. package/dist/lib/atoms/button/button.js +31 -0
  69. package/dist/lib/atoms/button/button.js.map +1 -0
  70. package/dist/lib/atoms/button/index.js +2 -0
  71. package/dist/lib/atoms/button/index.js.map +1 -0
  72. package/dist/lib/atoms/col/col.js +19 -0
  73. package/dist/lib/atoms/col/col.js.map +1 -0
  74. package/dist/lib/atoms/container/container.js +3 -0
  75. package/dist/lib/atoms/container/container.js.map +1 -0
  76. package/dist/lib/atoms/form-elements/range-slider/range-slider.js +18 -0
  77. package/dist/lib/atoms/form-elements/range-slider/range-slider.js.map +1 -0
  78. package/dist/lib/atoms/form-elements/utilities/range-slider.js +97 -0
  79. package/dist/lib/atoms/form-elements/utilities/range-slider.js.map +1 -0
  80. package/dist/lib/atoms/image/image.js +15 -0
  81. package/dist/lib/atoms/image/image.js.map +1 -0
  82. package/dist/lib/atoms/image/index.js +2 -0
  83. package/dist/lib/atoms/image/index.js.map +1 -0
  84. package/dist/lib/atoms/image/utilities/create-image-url.js +14 -0
  85. package/dist/lib/atoms/image/utilities/create-image-url.js.map +1 -0
  86. package/dist/lib/atoms/image/utilities/detect-responsive-images.js +24 -0
  87. package/dist/lib/atoms/image/utilities/detect-responsive-images.js.map +1 -0
  88. package/dist/lib/atoms/image/utilities/image.js +86 -0
  89. package/dist/lib/atoms/image/utilities/image.js.map +1 -0
  90. package/dist/lib/atoms/image/utilities/object-fit.js +35 -0
  91. package/dist/lib/atoms/image/utilities/object-fit.js.map +1 -0
  92. package/dist/lib/atoms/row/row.js +3 -0
  93. package/dist/lib/atoms/row/row.js.map +1 -0
  94. package/dist/lib/atoms/svg/svg.js +23 -0
  95. package/dist/lib/atoms/svg/svg.js.map +1 -0
  96. package/dist/lib/index.js +12 -0
  97. package/dist/lib/index.js.map +1 -0
  98. package/dist/lib/molecules/infobox/index.js +2 -0
  99. package/dist/lib/molecules/infobox/index.js.map +1 -0
  100. package/dist/lib/molecules/infobox/infobox.js +17 -0
  101. package/dist/lib/molecules/infobox/infobox.js.map +1 -0
  102. package/dist/lib/molecules/map/hooks/use-style-loaded.js +14 -0
  103. package/dist/lib/molecules/map/hooks/use-style-loaded.js.map +1 -0
  104. package/dist/lib/molecules/map/index.js +4 -0
  105. package/dist/lib/molecules/map/index.js.map +1 -0
  106. package/dist/lib/molecules/map/map.js +256 -0
  107. package/dist/lib/molecules/map/map.js.map +1 -0
  108. package/dist/lib/molecules/map/store/map/index.js +2 -0
  109. package/dist/lib/molecules/map/store/map/index.js.map +1 -0
  110. package/dist/lib/molecules/map/store/map/store.js +147 -0
  111. package/dist/lib/molecules/map/store/map/store.js.map +1 -0
  112. package/dist/lib/molecules/map/storybook/themes.js +54 -0
  113. package/dist/lib/molecules/map/storybook/themes.js.map +1 -0
  114. package/dist/lib/molecules/map/utilities/fit-bounds.js +2 -0
  115. package/dist/lib/molecules/map/utilities/fit-bounds.js.map +1 -0
  116. package/dist/lib/molecules/map/utilities/mapbox/add-data.js +52 -0
  117. package/dist/lib/molecules/map/utilities/mapbox/add-data.js.map +1 -0
  118. package/dist/lib/molecules/map/utilities/mapbox/center.js +13 -0
  119. package/dist/lib/molecules/map/utilities/mapbox/center.js.map +1 -0
  120. package/dist/lib/molecules/map/utilities/mapbox/constants.js +3 -0
  121. package/dist/lib/molecules/map/utilities/mapbox/constants.js.map +1 -0
  122. package/dist/lib/molecules/map/utilities/mapbox/index.js +3 -0
  123. package/dist/lib/molecules/map/utilities/mapbox/index.js.map +1 -0
  124. package/dist/lib/molecules/map/utilities/mapbox/mapbox.js +25 -0
  125. package/dist/lib/molecules/map/utilities/mapbox/mapbox.js.map +1 -0
  126. package/dist/lib/molecules/map/utilities/mapbox/parse-feature-properties.js +16 -0
  127. package/dist/lib/molecules/map/utilities/mapbox/parse-feature-properties.js.map +1 -0
  128. package/dist/lib/molecules/map/utilities/mapbox/pointers/setup-pointers.js +151 -0
  129. package/dist/lib/molecules/map/utilities/mapbox/pointers/setup-pointers.js.map +1 -0
  130. package/dist/lib/molecules/map/utilities/mapbox/polygons/feature-state.js +10 -0
  131. package/dist/lib/molecules/map/utilities/mapbox/polygons/feature-state.js.map +1 -0
  132. package/dist/lib/molecules/map/utilities/mapbox/polygons/geojson.js +9 -0
  133. package/dist/lib/molecules/map/utilities/mapbox/polygons/geojson.js.map +1 -0
  134. package/dist/lib/molecules/map/utilities/mapbox/polygons/interaction.js +32 -0
  135. package/dist/lib/molecules/map/utilities/mapbox/polygons/interaction.js.map +1 -0
  136. package/dist/lib/molecules/map/utilities/mapbox/polygons/layer.js +109 -0
  137. package/dist/lib/molecules/map/utilities/mapbox/polygons/layer.js.map +1 -0
  138. package/dist/lib/molecules/map/utilities/mapbox/raster.js +42 -0
  139. package/dist/lib/molecules/map/utilities/mapbox/raster.js.map +1 -0
  140. package/dist/lib/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js +26 -0
  141. package/dist/lib/molecules/map/utilities/mapbox/search/alternative-city-suggestions.js.map +1 -0
  142. package/dist/lib/molecules/map/utilities/mapbox/search/search.js +172 -0
  143. package/dist/lib/molecules/map/utilities/mapbox/search/search.js.map +1 -0
  144. package/dist/lib/molecules/map/utilities/mapbox/tooltip.js +24 -0
  145. package/dist/lib/molecules/map/utilities/mapbox/tooltip.js.map +1 -0
  146. package/dist/lib/molecules/tooltip/index.js +2 -0
  147. package/dist/lib/molecules/tooltip/index.js.map +1 -0
  148. package/dist/lib/molecules/tooltip/tooltip.js +11 -0
  149. package/dist/lib/molecules/tooltip/tooltip.js.map +1 -0
  150. package/dist/molecules/map/index.d.ts +1 -0
  151. package/dist/molecules/map/index.js +1 -0
  152. package/dist/molecules/map/index.js.map +1 -1
  153. package/dist/molecules/map/store/map/store.d.ts +7 -1
  154. package/dist/molecules/map/store/map/store.js +32 -0
  155. package/dist/molecules/map/store/map/store.js.map +1 -1
  156. package/dist/molecules/map/utilities/mapbox/search/search.d.ts +1 -0
  157. package/dist/molecules/map/utilities/mapbox/search/search.js +6 -3
  158. package/dist/molecules/map/utilities/mapbox/search/search.js.map +1 -1
  159. package/dist/types/atoms/button/button.d.ts +17 -0
  160. package/dist/types/atoms/button/index.d.ts +1 -0
  161. package/dist/types/atoms/col/col.d.ts +11 -0
  162. package/dist/types/atoms/container/container.d.ts +6 -0
  163. package/dist/types/atoms/form-elements/range-slider/range-slider.d.ts +11 -0
  164. package/dist/types/atoms/form-elements/utilities/range-slider.d.ts +7 -0
  165. package/dist/types/atoms/image/image.d.ts +14 -0
  166. package/dist/types/atoms/image/index.d.ts +1 -0
  167. package/dist/types/atoms/image/utilities/create-image-url.d.ts +6 -0
  168. package/dist/types/atoms/image/utilities/detect-responsive-images.d.ts +7 -0
  169. package/dist/types/atoms/image/utilities/image.d.ts +18 -0
  170. package/dist/types/atoms/image/utilities/object-fit.d.ts +7 -0
  171. package/dist/types/atoms/row/row.d.ts +6 -0
  172. package/dist/types/atoms/svg/svg.d.ts +4 -0
  173. package/dist/types/index.d.ts +11 -0
  174. package/dist/types/molecules/infobox/index.d.ts +1 -0
  175. package/dist/types/molecules/infobox/infobox.d.ts +7 -0
  176. package/dist/types/molecules/map/hooks/use-style-loaded.d.ts +2 -0
  177. package/dist/types/molecules/map/index.d.ts +3 -0
  178. package/dist/types/molecules/map/map.d.ts +2 -0
  179. package/dist/types/molecules/map/store/map/index.d.ts +1 -0
  180. package/dist/types/molecules/map/store/map/store.d.ts +60 -0
  181. package/dist/types/molecules/map/storybook/themes.d.ts +3 -0
  182. package/dist/types/molecules/map/utilities/fit-bounds.d.ts +3 -0
  183. package/dist/types/molecules/map/utilities/mapbox/add-data.d.ts +3 -0
  184. package/dist/types/molecules/map/utilities/mapbox/center.d.ts +3 -0
  185. package/dist/types/molecules/map/utilities/mapbox/constants.d.ts +2 -0
  186. package/dist/types/molecules/map/utilities/mapbox/index.d.ts +2 -0
  187. package/dist/types/molecules/map/utilities/mapbox/mapbox.d.ts +16 -0
  188. package/dist/types/molecules/map/utilities/mapbox/parse-feature-properties.d.ts +6 -0
  189. package/dist/types/molecules/map/utilities/mapbox/pointers/setup-pointers.d.ts +3 -0
  190. package/dist/types/molecules/map/utilities/mapbox/polygons/feature-state.d.ts +2 -0
  191. package/dist/types/molecules/map/utilities/mapbox/polygons/geojson.d.ts +3 -0
  192. package/dist/types/molecules/map/utilities/mapbox/polygons/interaction.d.ts +3 -0
  193. package/dist/types/molecules/map/utilities/mapbox/polygons/layer.d.ts +3 -0
  194. package/dist/types/molecules/map/utilities/mapbox/raster.d.ts +3 -0
  195. package/dist/types/molecules/map/utilities/mapbox/search/alternative-city-suggestions.d.ts +3 -0
  196. package/dist/types/molecules/map/utilities/mapbox/search/search.d.ts +4 -0
  197. package/dist/types/molecules/map/utilities/mapbox/tooltip.d.ts +4 -0
  198. package/dist/types/molecules/tooltip/index.d.ts +1 -0
  199. package/dist/types/molecules/tooltip/tooltip.d.ts +7 -0
  200. package/package.json +4 -4
@@ -7,5 +7,8 @@ export interface RangeSliderProps {
7
7
  name: string;
8
8
  classes?: string;
9
9
  disabled?: boolean;
10
+ enableInputControls?: boolean;
11
+ minLabel?: Text | string;
12
+ maxLabel?: Text | string;
10
13
  }
11
- export declare const RangeSliderElement: ({ classes, disabled, min, max, increment, start, name, onChange, }: RangeSliderProps) => any;
14
+ export declare const RangeSliderElement: ({ classes, disabled, min, max, increment, start, name, onChange, enableInputControls, minLabel, maxLabel, }: RangeSliderProps) => any;
@@ -1,5 +1,5 @@
1
- import { h } from '@atomify/jsx';
2
- export const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, }) => {
1
+ import { Fragment, h } from '@atomify/jsx';
2
+ export const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, enableInputControls, minLabel, maxLabel, }) => {
3
3
  const inputClasses = {
4
4
  ['c-range-slider']: true,
5
5
  ['form__item']: true,
@@ -9,10 +9,17 @@ export const RangeSliderElement = ({ classes, disabled, min, max, increment, sta
9
9
  h("bpd-range-slider", { min: min, max: max, increment: increment, start: start, onRangeValuesChanged: onChange, class: classes },
10
10
  h("div", { class: "range-slider__container" },
11
11
  h("div", { "js-hook-slider-container": true }),
12
- h("div", { class: "range-slider__values" },
12
+ h("div", { class: "range-slider__values" }, enableInputControls ? (h(Fragment, null,
13
+ h("div", { class: "range-slider__value-input-container" },
14
+ h("span", { class: "range-slider__value-input-label" }, minLabel),
15
+ h("input", { type: "text", class: "range-slider__value-input", "js-hook-slider-min": true })),
16
+ h("div", { class: "range-slider__value-input-container" },
17
+ h("span", { class: "range-slider__value-input-label" }, maxLabel),
18
+ h("input", { type: "text", class: "range-slider__value-input", "js-hook-slider-max": true })),
19
+ h("input", { type: "text", id: name, name: name, class: "u-sr-only", "js-hook-slider-min-max-value": true }))) : (h(Fragment, null,
13
20
  h("span", { class: "range-slider__values-item", "js-hook-slider-min": true }),
14
21
  h("span", { class: "range-slider__values-item", "js-hook-slider-max": true }),
15
22
  h("input", { type: "number", id: `${name}-0`, name: name, value: start[0], "js-hook-slider-min-value": true }),
16
- h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))));
23
+ h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))))));
17
24
  };
18
25
  //# sourceMappingURL=range-slider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/range-slider/range-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAajC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG;QACjB,CAAC,gBAAgB,CAAC,EAAE,IAAI;QACxB,CAAC,YAAY,CAAC,EAAE,IAAI;QACpB,CAAC,sBAAsB,CAAC,EAAE,QAAQ;KACrC,CAAC;IAEF,OAAO,CACH,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,CACT,CAAC;AACN,CAAC,CAAC","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"]}
1
+ {"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/range-slider/range-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAgB3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,GAAG,EACH,GAAG,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG;QACjB,CAAC,gBAAgB,CAAC,EAAE,IAAI;QACxB,CAAC,YAAY,CAAC,EAAE,IAAI;QACpB,CAAC,sBAAsB,CAAC,EAAE,QAAQ;KACrC,CAAC;IAEF,OAAO,CACH,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,IAC5B,mBAAmB,CAAC,CAAC,CAAC,CACnB,EAAC,QAAQ;oBACL,WAAK,KAAK,EAAC,qCAAqC;wBAC5C,YAAM,KAAK,EAAC,iCAAiC,IAAE,QAAQ,CAAQ;wBAC/D,aACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,2BAA2B,+BAEnC,CACA;oBACN,WAAK,KAAK,EAAC,qCAAqC;wBAC5C,YAAM,KAAK,EAAC,iCAAiC,IAAE,QAAQ,CAAQ;wBAC/D,aACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,2BAA2B,+BAEnC,CACA;oBACN,aACI,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,WAAW,yCAEnB,CACK,CACd,CAAC,CAAC,CAAC,CACA,EAAC,QAAQ;oBACL,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,CACK,CACd,CACC,CACJ,CACS,CACjB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Fragment, 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 enableInputControls?: boolean;\n minLabel?: Text | string;\n maxLabel?: Text | string;\n}\n\nexport const RangeSliderElement = ({\n classes,\n disabled,\n min,\n max,\n increment,\n start,\n name,\n onChange,\n enableInputControls,\n minLabel,\n maxLabel,\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 {enableInputControls ? (\n <Fragment>\n <div class=\"range-slider__value-input-container\">\n <span class=\"range-slider__value-input-label\">{minLabel}</span>\n <input\n type=\"text\"\n class=\"range-slider__value-input\"\n js-hook-slider-min\n />\n </div>\n <div class=\"range-slider__value-input-container\">\n <span class=\"range-slider__value-input-label\">{maxLabel}</span>\n <input\n type=\"text\"\n class=\"range-slider__value-input\"\n js-hook-slider-max\n />\n </div>\n <input\n type=\"text\"\n id={name}\n name={name}\n class=\"u-sr-only\"\n js-hook-slider-min-max-value\n />\n </Fragment>\n ) : (\n <Fragment>\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 </Fragment>\n )}\n </div>\n </div>\n </bpd-range-slider>\n </div>\n );\n};\n"]}
@@ -1,6 +1,7 @@
1
- import { defineElement, onDidLoad, useBindMethod, useElement, useEvent, useProp, } from '@atomify/hooks';
1
+ import { defineElement, onDidLoad, useBindMethod, useElement, useEvent, useListen, useProp, } from '@atomify/hooks';
2
2
  import { toCurrency } from '@bpd-library/utilities';
3
3
  import noUiSlider from 'nouislider';
4
+ const formatValue = (value) => toCurrency(value).replace(',', '.');
4
5
  export const RangeSlider = ({ element }) => {
5
6
  const [min] = useProp('min', 0);
6
7
  const [max] = useProp('max', 0);
@@ -13,8 +14,11 @@ export const RangeSlider = ({ element }) => {
13
14
  const sliderMax = useElement('[js-hook-slider-max]');
14
15
  const sliderMinValue = useElement('[js-hook-slider-min-value]');
15
16
  const sliderMaxValue = useElement('[js-hook-slider-max-value]');
17
+ const sliderMinMaxInput = useElement('[js-hook-slider-min-max-value]');
16
18
  const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });
17
19
  useBindMethod('resetState', resetState);
20
+ useListen(sliderMin, 'change', changeValuesManually);
21
+ useListen(sliderMax, 'change', changeValuesManually);
18
22
  onDidLoad(() => {
19
23
  const hasZeroValues = element.start.every((item) => item === 0);
20
24
  const settings = {
@@ -32,23 +36,57 @@ export const RangeSlider = ({ element }) => {
32
36
  const generatedValues = values.map((value) => parseInt(value));
33
37
  setStart([...generatedValues]);
34
38
  });
35
- sliderContainer.current.noUiSlider.on('change', onChangeHandler);
39
+ sliderContainer.current.noUiSlider.on('change', () => onChangeHandler('slider'));
36
40
  setMinMaxValues();
37
41
  });
38
42
  watchStart(setMinMaxValues);
43
+ function changeValuesManually() {
44
+ var _a, _b;
45
+ const sliderMinValue = `${(_a = sliderMin.current) === null || _a === void 0 ? void 0 : _a.value}`
46
+ .split('€ ')[1]
47
+ .replace(',', '')
48
+ .replace('.', '');
49
+ const sliderMaxValue = `${(_b = sliderMax.current) === null || _b === void 0 ? void 0 : _b.value}`
50
+ .split('€ ')[1]
51
+ .replace(',', '')
52
+ .replace('.', '');
53
+ setStart([Number(sliderMinValue), Number(sliderMaxValue)]);
54
+ setMinMaxValues();
55
+ onChangeHandler('input');
56
+ sliderContainer.current.noUiSlider.updateOptions({
57
+ start: [Number(sliderMinValue), Number(sliderMaxValue)],
58
+ });
59
+ }
39
60
  function setMinMaxValues() {
40
61
  const { minValue, maxValue } = getValues();
41
- sliderMin.current.innerHTML = `${toCurrency(minValue)}`.replace(',', '.');
42
- sliderMax.current.innerHTML = `${toCurrency(maxValue)}`.replace(',', '.');
62
+ if (sliderMinMaxInput.current) {
63
+ sliderMin.current.value = formatValue(minValue);
64
+ sliderMax.current.value = formatValue(maxValue);
65
+ }
66
+ else {
67
+ sliderMin.current.innerHTML = formatValue(minValue);
68
+ sliderMax.current.innerHTML = formatValue(maxValue);
69
+ }
43
70
  }
44
- function onChangeHandler() {
71
+ function onChangeHandler(rangeOrigin) {
45
72
  const { minValue, maxValue } = getValues();
46
- sliderMinValue.current.value = `${minValue}`;
47
- sliderMaxValue.current.value = `${maxValue}`;
48
- sliderMinValue.current.checked = true;
49
- sliderMaxValue.current.checked = true;
50
- sliderMinValue.current.dispatchEvent(new Event('change'));
51
- sliderMaxValue.current.dispatchEvent(new Event('change'));
73
+ if (sliderMinValue.current && sliderMaxValue.current) {
74
+ sliderMinValue.current.value = `${minValue}`;
75
+ sliderMaxValue.current.value = `${maxValue}`;
76
+ sliderMinValue.current.checked = true;
77
+ sliderMaxValue.current.checked = true;
78
+ sliderMin.current.innerHTML = formatValue(minValue);
79
+ sliderMax.current.innerHTML = formatValue(maxValue);
80
+ sliderMinValue.current.dispatchEvent(new Event('change'));
81
+ sliderMaxValue.current.dispatchEvent(new Event('change'));
82
+ }
83
+ if (sliderMinMaxInput.current) {
84
+ sliderMinMaxInput.current.value = `${minValue},${maxValue}`;
85
+ sliderMinMaxInput.current.checked = true;
86
+ if (rangeOrigin === 'slider') {
87
+ sliderMinMaxInput.current.dispatchEvent(new Event('change', { bubbles: true }));
88
+ }
89
+ }
52
90
  rangeValuesChanged.emit({ minValue, maxValue, hasChanged });
53
91
  }
54
92
  function getValues() {
@@ -1 +1 @@
1
- {"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/utilities/range-slider.ts"],"names":[],"mappings":"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","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"]}
1
+ {"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../src/atoms/form-elements/utilities/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n defineElement,\n FC,\n onDidLoad,\n useBindMethod,\n useElement,\n useEvent,\n useListen,\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\nconst formatValue = (value: number) => toCurrency(value).replace(',', '.');\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<HTMLInputElement | HTMLSpanElement>('[js-hook-slider-min]');\n const sliderMax = useElement<HTMLInputElement | HTMLSpanElement>('[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 const sliderMinMaxInput = useElement<HTMLInputElement>('[js-hook-slider-min-max-value]');\n\n const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });\n\n useBindMethod('resetState', resetState);\n useListen(sliderMin, 'change', changeValuesManually);\n useListen(sliderMax, 'change', changeValuesManually);\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('slider'));\n\n setMinMaxValues();\n });\n\n watchStart(setMinMaxValues);\n\n function changeValuesManually() {\n const sliderMinValue = `${(sliderMin.current as HTMLInputElement)?.value}`\n .split('€ ')[1]\n .replace(',', '')\n .replace('.', '');\n const sliderMaxValue = `${(sliderMax.current as HTMLInputElement)?.value}`\n .split('€ ')[1]\n .replace(',', '')\n .replace('.', '');\n\n setStart([Number(sliderMinValue), Number(sliderMaxValue)]);\n setMinMaxValues();\n onChangeHandler('input');\n (sliderContainer.current as any).noUiSlider.updateOptions({\n start: [Number(sliderMinValue), Number(sliderMaxValue)],\n });\n }\n\n function setMinMaxValues() {\n const { minValue, maxValue } = getValues();\n\n if (sliderMinMaxInput.current) {\n (sliderMin.current as HTMLInputElement).value = formatValue(minValue);\n (sliderMax.current as HTMLInputElement).value = formatValue(maxValue);\n } else {\n (sliderMin.current as HTMLSpanElement)!.innerHTML = formatValue(minValue);\n (sliderMax.current as HTMLSpanElement)!.innerHTML = formatValue(maxValue);\n }\n }\n\n function onChangeHandler(rangeOrigin?: 'slider' | 'input') {\n const { minValue, maxValue } = getValues();\n\n if (sliderMinValue.current && sliderMaxValue.current) {\n sliderMinValue.current.value = `${minValue}`;\n sliderMaxValue.current.value = `${maxValue}`;\n sliderMinValue.current.checked = true;\n sliderMaxValue.current.checked = true;\n (sliderMin.current as HTMLSpanElement)!.innerHTML = formatValue(minValue);\n (sliderMax.current as HTMLSpanElement)!.innerHTML = formatValue(maxValue);\n\n sliderMinValue.current!.dispatchEvent(new Event('change'));\n sliderMaxValue.current!.dispatchEvent(new Event('change'));\n }\n\n if (sliderMinMaxInput.current) {\n sliderMinMaxInput.current.value = `${minValue},${maxValue}`;\n sliderMinMaxInput.current.checked = true;\n\n if (rangeOrigin === 'slider') {\n sliderMinMaxInput.current.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\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"]}
@@ -0,0 +1,33 @@
1
+ import { h } from '@atomify/jsx';
2
+
3
+ const createClassName = (data) => {
4
+ let className = data.variant ? `c-button--${data.variant}` : 'c-button';
5
+ className += data.icon ? ' button--icon' : '';
6
+ className += data.size ? ` button--${data.size}` : '';
7
+ className += data.classes ? ` ${data.classes}` : '';
8
+ return className;
9
+ };
10
+ const createAttributes = (data) => {
11
+ const attributes = Object.assign(Object.assign({}, data.attr), { [`js-hook-${data.hook}`]: data.hook, onClick: data.onClick, ariaControls: data.controls, href: data.url });
12
+ return attributes;
13
+ };
14
+ const Button = (data) => {
15
+ const className = createClassName(data);
16
+ const attributes = createAttributes(data);
17
+ attributes.type = data.type || 'button';
18
+ return (h("button", Object.assign({ class: className }, attributes),
19
+ data.icon && (h("span", { class: "button__icon" },
20
+ h("bpd-svg", { name: data.icon }))),
21
+ h("span", { class: "button__label" }, data.label)));
22
+ };
23
+ const ButtonA = (data) => {
24
+ const className = createClassName(data);
25
+ const attributes = createAttributes(data);
26
+ return (h("a", Object.assign({ class: className }, attributes, { target: data.target }),
27
+ data.icon && (h("span", { class: "button__icon" },
28
+ h("bpd-svg", { name: data.icon }))),
29
+ h("span", { class: "button__label" }, data.label)));
30
+ };
31
+
32
+ export { Button, ButtonA };
33
+ //# sourceMappingURL=button.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,22 @@
1
+ import { h } from '@atomify/jsx';
2
+
3
+ const breakpoints = ['xs', 'sm', 'md', 'lg', 'xlg'];
4
+ const createClasses = (prefix, cols) => {
5
+ return cols.reduce((classes, col, i) => {
6
+ classes.push(i === 0 ? `${prefix}-${col}` : `${prefix}-${col}--${breakpoints[i]}`);
7
+ return classes;
8
+ }, []);
9
+ };
10
+ const Col = ({ extraClass = '', children, cols = [], push = [], pull = [], pre = [], post = [], }) => {
11
+ const classes = [
12
+ ...createClasses('o-col', cols),
13
+ ...createClasses('u-push', push),
14
+ ...createClasses('u-pull', pull),
15
+ ...createClasses('u-pre', pre),
16
+ ...createClasses('u-post', post),
17
+ ].join(' ');
18
+ return h("div", { class: `${classes} ${extraClass}` }, children);
19
+ };
20
+
21
+ export { Col };
22
+ //# sourceMappingURL=col.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,6 @@
1
+ import { h } from '@atomify/jsx';
2
+
3
+ const Container = ({ extraClass = '', children }) => (h("div", { class: `o-container ${extraClass}` }, children));
4
+
5
+ export { Container };
6
+ //# sourceMappingURL=container.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,21 @@
1
+ import { h } from '@atomify/jsx';
2
+
3
+ const RangeSliderElement = ({ classes, disabled, min, max, increment, start, name, onChange, }) => {
4
+ const inputClasses = {
5
+ ['c-range-slider']: true,
6
+ ['form__item']: true,
7
+ ['form__item--disabled']: disabled,
8
+ };
9
+ return (h("div", { class: inputClasses },
10
+ h("bpd-range-slider", { min: min, max: max, increment: increment, start: start, onRangeValuesChanged: onChange, class: classes },
11
+ h("div", { class: "range-slider__container" },
12
+ h("div", { "js-hook-slider-container": true }),
13
+ h("div", { class: "range-slider__values" },
14
+ h("span", { class: "range-slider__values-item", "js-hook-slider-min": true }),
15
+ h("span", { class: "range-slider__values-item", "js-hook-slider-max": true }),
16
+ h("input", { type: "number", id: `${name}-0`, name: name, value: start[0], "js-hook-slider-min-value": true }),
17
+ h("input", { type: "number", id: `${name}-1`, name: name, value: start[1], "js-hook-slider-max-value": true }))))));
18
+ };
19
+
20
+ export { RangeSliderElement };
21
+ //# sourceMappingURL=range-slider.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,100 @@
1
+ import { defineElement, useProp, useElement, useEvent, useBindMethod, onDidLoad } from '@atomify/hooks';
2
+ import { toCurrency } from '@bpd-library/utilities';
3
+ import noUiSlider from 'nouislider';
4
+
5
+ const RangeSlider = ({ element }) => {
6
+ const [min] = useProp('min', 0);
7
+ const [max] = useProp('max', 0);
8
+ const [increment] = useProp('increment', 0);
9
+ const [hasChanged, setHasChanged] = useProp('hasChanged', false);
10
+ const [, setStart, watchStart] = useProp('start', [0, 0]);
11
+ const [, setBindValue] = useProp('bindValue', [0, 0]);
12
+ const sliderContainer = useElement('[js-hook-slider-container]');
13
+ const sliderMin = useElement('[js-hook-slider-min]');
14
+ const sliderMax = useElement('[js-hook-slider-max]');
15
+ const sliderMinValue = useElement('[js-hook-slider-min-value]');
16
+ const sliderMaxValue = useElement('[js-hook-slider-max-value]');
17
+ const rangeValuesChanged = useEvent({ eventName: 'rangevalueschanged' });
18
+ useBindMethod('resetState', resetState);
19
+ onDidLoad(() => {
20
+ const hasZeroValues = element.start.every((item) => item === 0);
21
+ const settings = {
22
+ start: hasZeroValues ? [min, max] : element.start,
23
+ step: increment,
24
+ connect: true,
25
+ documentElement: sliderContainer.current,
26
+ range: {
27
+ min,
28
+ max,
29
+ },
30
+ };
31
+ noUiSlider.create(sliderContainer.current, settings);
32
+ sliderContainer.current.noUiSlider.on('update', (values) => {
33
+ const generatedValues = values.map((value) => parseInt(value));
34
+ setStart([...generatedValues]);
35
+ });
36
+ sliderContainer.current.noUiSlider.on('change', onChangeHandler);
37
+ setMinMaxValues();
38
+ });
39
+ watchStart(setMinMaxValues);
40
+ function setMinMaxValues() {
41
+ const { minValue, maxValue } = getValues();
42
+ sliderMin.current.innerHTML = `${toCurrency(minValue)}`.replace(',', '.');
43
+ sliderMax.current.innerHTML = `${toCurrency(maxValue)}`.replace(',', '.');
44
+ }
45
+ function onChangeHandler() {
46
+ const { minValue, maxValue } = getValues();
47
+ sliderMinValue.current.value = `${minValue}`;
48
+ sliderMaxValue.current.value = `${maxValue}`;
49
+ sliderMinValue.current.checked = true;
50
+ sliderMaxValue.current.checked = true;
51
+ sliderMinValue.current.dispatchEvent(new Event('change'));
52
+ sliderMaxValue.current.dispatchEvent(new Event('change'));
53
+ rangeValuesChanged.emit({ minValue, maxValue, hasChanged });
54
+ }
55
+ function getValues() {
56
+ const hasZeroValues = element.start.every((item) => item === 0);
57
+ const minValue = hasZeroValues ? min : element.start[0];
58
+ const maxValue = hasZeroValues ? max : element.start[1];
59
+ setBindValue(element.start);
60
+ setHasChanged(JSON.stringify(element.start) !== JSON.stringify([min, max]));
61
+ return {
62
+ minValue,
63
+ maxValue,
64
+ };
65
+ }
66
+ function resetState() {
67
+ sliderContainer.current.noUiSlider.set([min, max]);
68
+ setStart([0, 0]);
69
+ setHasChanged(false);
70
+ }
71
+ };
72
+ RangeSlider.props = {
73
+ min: {
74
+ type: Number,
75
+ reflectToAttr: true,
76
+ },
77
+ max: {
78
+ type: Number,
79
+ reflectToAttr: true,
80
+ },
81
+ increment: {
82
+ type: Number,
83
+ reflectToAttr: true,
84
+ },
85
+ hasChanged: {
86
+ type: Boolean,
87
+ reflectToAttr: true,
88
+ },
89
+ start: {
90
+ type: Array,
91
+ reflectToAttr: true,
92
+ },
93
+ bindValue: {
94
+ type: Array,
95
+ },
96
+ };
97
+ defineElement('bpd-range-slider', RangeSlider);
98
+
99
+ export { RangeSlider };
100
+ //# sourceMappingURL=range-slider.js.map
@@ -0,0 +1 @@
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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"}
@@ -0,0 +1,18 @@
1
+ import { h } from '@atomify/jsx';
2
+ import createImageUrl from './utilities/create-image-url.js';
3
+
4
+ const Image = (data) => {
5
+ const preload = data.preload ? createImageUrl(data.image, data.preload) : false;
6
+ return (h("bpd-image", { class: `c-image ${data.classes ? data.classes : ''}` },
7
+ h("figure", Object.assign({}, { 'js-hook-objectfit-container': data.objectFit }),
8
+ h("img", Object.assign({ class: `${data.disableCrossFade ? '' : ' image__default'}`, "data-image": data.image, alt: data.alt }, {
9
+ src: preload ? preload : false,
10
+ 'data-settings': JSON.stringify(data.settings),
11
+ 'js-hook-objectfit-img': data.objectFit,
12
+ hidden: data.hidden,
13
+ }))),
14
+ data.caption && h("figcaption", { class: "image__caption" }, data.caption)));
15
+ };
16
+
17
+ export { Image };
18
+ //# sourceMappingURL=image.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,15 @@
1
+ const addUrlParameter = (url, key, value) => {
2
+ const separator = url.indexOf('?') > -1 ? '&' : '?';
3
+ return `${url}${separator}${key}=${value}`;
4
+ };
5
+ const createImageUrl = (image, { width, height }) => {
6
+ let url = addUrlParameter(image, 'mode', 'crop');
7
+ if (width)
8
+ url = addUrlParameter(url, 'width', width);
9
+ if (height)
10
+ url = addUrlParameter(url, 'height', height);
11
+ return url;
12
+ };
13
+
14
+ export { createImageUrl as default };
15
+ //# sourceMappingURL=create-image-url.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,6 @@
1
+ import { h } from '@atomify/jsx';
2
+
3
+ const Row = ({ extraClass = '', children }) => (h("div", { class: `o-grid ${extraClass}` }, children));
4
+
5
+ export { Row };
6
+ //# sourceMappingURL=row.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,25 @@
1
+ import { __decorate } from '../../node_modules/tslib/tslib.es6.js';
2
+ import { Prop, Component } from '@atomify/core';
3
+ import { h } from '@atomify/jsx';
4
+
5
+ let BPDSvg = class BPDSvg extends HTMLElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.name = '';
9
+ }
10
+ render() {
11
+ return (h("svg", { class: `svg svg-${this.name}` },
12
+ h("use", { xlinkHref: `#svg-${this.name}` })));
13
+ }
14
+ };
15
+ __decorate([
16
+ Prop()
17
+ ], BPDSvg.prototype, "name", void 0);
18
+ BPDSvg = __decorate([
19
+ Component({
20
+ tag: 'bpd-svg',
21
+ })
22
+ ], BPDSvg);
23
+
24
+ export { BPDSvg };
25
+ //# sourceMappingURL=svg.js.map
@@ -0,0 +1 @@
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;;;;"}
@@ -0,0 +1,14 @@
1
+ export { Button, ButtonA } from './atoms/button/button.js';
2
+ export { Col } from './atoms/col/col.js';
3
+ export { Container } from './atoms/container/container.js';
4
+ export { RangeSliderElement } from './atoms/form-elements/range-slider/range-slider.js';
5
+ export { RangeSlider } from './atoms/form-elements/utilities/range-slider.js';
6
+ export { Image } from './atoms/image/image.js';
7
+ export { Row } from './atoms/row/row.js';
8
+ export { BPDSvg } from './atoms/svg/svg.js';
9
+ export { Infobox } from './molecules/infobox/infobox.js';
10
+ export { fitBounds } from './molecules/map/utilities/fit-bounds.js';
11
+ 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';
12
+ export { Map } from './molecules/map/map.js';
13
+ export { Tooltip } from './molecules/tooltip/tooltip.js';
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
@@ -0,0 +1,20 @@
1
+ import { h } from '@atomify/jsx';
2
+ import { ButtonA } from '../../atoms/button/button.js';
3
+ import { Image } from '../../atoms/image/image.js';
4
+
5
+ const Infobox = ({ title, image, tags, description, link, onClose, openInTab, }) => (h("div", { class: "c-infobox" },
6
+ h("button", { class: "infobox__close", onClick: onClose },
7
+ h("bpd-svg", { name: "icons-close" })),
8
+ image && title && (h("div", { class: "infobox__image-container" },
9
+ h(Image, { classes: "infobox__image", image: image, alt: title, preload: {
10
+ width: 325,
11
+ height: 117,
12
+ } }))),
13
+ h("div", { class: "infobox__wrapper" },
14
+ title && h("h3", { class: "infobox__title" }, title),
15
+ tags && h("span", { class: "infobox__tags" }, tags === null || tags === void 0 ? void 0 : tags.join(', ')),
16
+ description && h("p", { class: "infobox__description" }, description),
17
+ link && (h(ButtonA, { target: openInTab ? '_blank' : '_self', url: link, label: "Bekijk het gebied" })))));
18
+
19
+ export { Infobox };
20
+ //# sourceMappingURL=infobox.js.map
@@ -0,0 +1 @@
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;;;;"}