cmspageblocks 1.0.14 → 1.0.19

package/build/index.js

@@ -1178,6 +1178,16 @@ function Button(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", null, "Button");
 }
 
+function Embed (_ref) {
+  var options = _ref.options;
+  return /*#__PURE__*/React__default["default"].createElement("embed", {
+    src: 'https://cms.burobork.nl/images/' + options.content[0].reference,
+    width: options.embedWidth,
+    height: options.embedHeight,
+    type: options.embedType
+  });
+}
+
 function Image (_ref) {
   var options = _ref.options;
   return /*#__PURE__*/React__default["default"].createElement("img", {
@@ -3090,7 +3100,7 @@ function _taggedTemplateLiteral(strings, raw) {
 }
 
 var _templateObject$2;
-var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n  ul li {\n    padding: 0 !important;\n  }\n  div img {\n    object-fit: cover;\n  }\n  .carousel .thumbs-wrapper {\n    margin: 16px;\n  }\n  max-width: 100%;\n  width: 100%;\n  .carousel .thumbs {\n    padding: 0;\n  }\n\n"])));
+var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\nwidth: 100%;\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n  ul li {\n    padding: 0 !important;\n  }\n  div img {\n    object-fit: cover;\n  }\n  .carousel .thumbs-wrapper {\n    margin: 16px;\n  }\n  max-width: 100%;\n  width: 100%;\n  .carousel .thumbs {\n    padding: 0;\n  }\n\n"])));
 
 function ImageGallery(_ref) {
   var options = _ref.options;
@@ -3114,24 +3124,29 @@ function ImageGallery(_ref) {
 
 function ImageSlider(_ref) {
   var options = _ref.options;
+  console.debug({
+    sliderOptions: options
+  });
+  var content = options.content;
   return /*#__PURE__*/React__default["default"].createElement(SliderContainer, null, /*#__PURE__*/React__default["default"].createElement(js.Carousel, {
     showThumbs: false,
     swipeable: true,
     showStatus: false,
-    dynamicHeight: true,
-    width: "100%"
+    dynamicHeight: false,
+    width: "100%",
+    showIndicators: content.length > 1 ? true : false
   }, options.content.map(function (slide) {
     if (!slide.active) return;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: slide.image[0].reference,
       style: {
-        height: 600
+        height: options.height ? parseInt(options.height) : 600
       }
     }, /*#__PURE__*/React__default["default"].createElement("img", {
       src: slide ? 'https://cdn.burobork.nl/' + slide.image[0].reference : null,
       alt: slide.title,
       style: {
-        height: 600
+        height: options.height ? parseInt(options.height) : 600
       }
     }));
   })));
@@ -4106,7 +4121,11 @@ function GoogleMap(_ref) {
 }
 
 var Marker = function Marker() {
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "Marke");
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: "https://cms.burobork.nl/marker.svg",
+    height: 16,
+    width: 16
+  }));
 };
 
 var build = {exports: {}};
@@ -53997,17 +54016,22 @@ var MEDIA = Object.keys(BREAKPOINTS).reduce(function (acc, label) {
   return acc;
 }, {});
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var BlockContainer = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n  text-align: center;\n}\nul {\n  list-style: initial;\n  list-style-position: outside;\n  padding: 0 0 0 16px;\n  li {\n    font-size: 1.6rem;\n    line-height: 2.4rem;\n    padding: 4px 0;\n  }\n}\nh1 {\n  font-size: 2.8rem;\n  line-height: 3.4rem;\n  padding: 24px 0 16px;\n}\nh2 {\n  font-size: 2.2rem;\n  line-height: 2.8rem;\n  padding: 16px 0 8px;\n}\np {\n  font-size: 1.6rem;\n  line-height: 2.4rem;\n  max-width: 75ch;\n  margin: 0;\n}\ndiv {\n  box-sizing: border-box;\n}\nimg {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  /* position: absolute; */\n}\n.half {\n  width: 50%;\n  ", ";\n}\n.col {\n  &-12 {\n    width: 100%;\n  }\n  &-1 {\n    width: calc(1 / 12 * 100%);\n  }\n  &-2 {\n    width: calc(2 / 12 * 100%);\n  }\n  &-3 {\n    width: calc(3 / 12 * 100%);\n  }\n  &-4 {\n    width: calc(4 / 12 * 100%);\n  }\n  &-5 {\n    width: calc(5 / 12 * 100%);\n  }\n  &-6 {\n    width: calc(50%);\n  }\n  &-7 {\n    width: calc(7 / 12 * 100%);\n  }\n  &-8 {\n    width: calc(8 / 12 * 100%);\n  }\n  &-9 {\n    width: calc(9 / 12 * 100%);\n  }\n  &-10 {\n    width: calc(10 / 12 * 100%);\n  }\n  &-11 {\n    width: calc(11 / 12 * 100%);\n  }\n}\n.center {\n  margin: 0 auto;\n}\n", ";\na {\n  /* padding: 2px 0; */\n  color: ", " !important;\n  text-decoration: none;\n  position: relative;\n  &:before {\n    transition: 0.2s all ease-in;\n    position: absolute;\n    content: '';\n    height: 1px;\n    width: 20px;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n  }\n  &:hover {\n    &:before {\n      width: 100%;\n    }\n  }\n}\n.image-gallery-fullscreen-button.active {\n  top: 0;\n  bottom: auto;\n  background-color: #000;\n  &:before {\n    content: '\\274c';\n  }\n}\n.image-gallery-content {\n  .image-gallery-image {\n    img {\n      max-height: 500px;\n      height: 500px;\n      ", ";\n    }\n  }\n}\n.image-gallery-content.fullscreen {\n  .image-gallery-image {\n    img {\n      /* max-height: 75vh; */\n      width: auto;\n      margin: 0 auto;\n    }\n  }\n}\n\n.image-gallery {\n  max-width: 100%;\n  overflow: hidden;\n}\n.page_row {\n    max-width: 1240px;\n    width: 100%;\n    margin: 0px auto;\n    padding: 16px;\n    width: 100%;\n    flex-direction: column;\n    @media (min-width: 676px) {\n      // flex-direction: row;\n    }\n    &.full-width {\n      max-width: 100%;\n      padding: 0;\n    }\n\n    &.container-width {\n      margin: 0 auto;\n      @media (min-width: 676px) {\n        max-width: 640px;\n      }\n\n      @media (min-width: 868px) {\n        max-width: 820px;\n      }\n\n      @media (min-width: 992px) {\n        max-width: 960px;\n      }\n\n      @media (min-width: 1290px) {\n        max-width: 1260px;\n      }\n    }\n  }\n"], ["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n  text-align: center;\n}\nul {\n  list-style: initial;\n  list-style-position: outside;\n  padding: 0 0 0 16px;\n  li {\n    font-size: 1.6rem;\n    line-height: 2.4rem;\n    padding: 4px 0;\n  }\n}\nh1 {\n  font-size: 2.8rem;\n  line-height: 3.4rem;\n  padding: 24px 0 16px;\n}\nh2 {\n  font-size: 2.2rem;\n  line-height: 2.8rem;\n  padding: 16px 0 8px;\n}\np {\n  font-size: 1.6rem;\n  line-height: 2.4rem;\n  max-width: 75ch;\n  margin: 0;\n}\ndiv {\n  box-sizing: border-box;\n}\nimg {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  /* position: absolute; */\n}\n.half {\n  width: 50%;\n  ", ";\n}\n.col {\n  &-12 {\n    width: 100%;\n  }\n  &-1 {\n    width: calc(1 / 12 * 100%);\n  }\n  &-2 {\n    width: calc(2 / 12 * 100%);\n  }\n  &-3 {\n    width: calc(3 / 12 * 100%);\n  }\n  &-4 {\n    width: calc(4 / 12 * 100%);\n  }\n  &-5 {\n    width: calc(5 / 12 * 100%);\n  }\n  &-6 {\n    width: calc(50%);\n  }\n  &-7 {\n    width: calc(7 / 12 * 100%);\n  }\n  &-8 {\n    width: calc(8 / 12 * 100%);\n  }\n  &-9 {\n    width: calc(9 / 12 * 100%);\n  }\n  &-10 {\n    width: calc(10 / 12 * 100%);\n  }\n  &-11 {\n    width: calc(11 / 12 * 100%);\n  }\n}\n.center {\n  margin: 0 auto;\n}\n", ";\na {\n  /* padding: 2px 0; */\n  color: ", " !important;\n  text-decoration: none;\n  position: relative;\n  &:before {\n    transition: 0.2s all ease-in;\n    position: absolute;\n    content: '';\n    height: 1px;\n    width: 20px;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n  }\n  &:hover {\n    &:before {\n      width: 100%;\n    }\n  }\n}\n.image-gallery-fullscreen-button.active {\n  top: 0;\n  bottom: auto;\n  background-color: #000;\n  &:before {\n    content: '\\\\274c';\n  }\n}\n.image-gallery-content {\n  .image-gallery-image {\n    img {\n      max-height: 500px;\n      height: 500px;\n      ", ";\n    }\n  }\n}\n.image-gallery-content.fullscreen {\n  .image-gallery-image {\n    img {\n      /* max-height: 75vh; */\n      width: auto;\n      margin: 0 auto;\n    }\n  }\n}\n\n.image-gallery {\n  max-width: 100%;\n  overflow: hidden;\n}\n.page_row {\n    max-width: 1240px;\n    width: 100%;\n    margin: 0px auto;\n    padding: 16px;\n    width: 100%;\n    flex-direction: column;\n    @media (min-width: 676px) {\n      // flex-direction: row;\n    }\n    &.full-width {\n      max-width: 100%;\n      padding: 0;\n    }\n\n    &.container-width {\n      margin: 0 auto;\n      @media (min-width: 676px) {\n        max-width: 640px;\n      }\n\n      @media (min-width: 868px) {\n        max-width: 820px;\n      }\n\n      @media (min-width: 992px) {\n        max-width: 960px;\n      }\n\n      @media (min-width: 1290px) {\n        max-width: 1260px;\n      }\n    }\n  }\n"])), MEDIA.PHONE(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 100%;\n      "]))), MEDIA.TABLET(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {\n      width: 100%;\n  }\n      "]))), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var BlockContainer = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n  text-align: center;\n}\nul {\n  list-style: initial;\n  list-style-position: outside;\n  padding: 0 0 0 16px;\n  li {\n    font-size: 1.6rem;\n    line-height: 2.4rem;\n    padding: 4px 0;\n  }\n}\nh1 {\n  font-size: 2.8rem;\n  line-height: 3.4rem;\n  padding: 24px 0 16px;\n}\nh2 {\n  font-size: 2.2rem;\n  line-height: 2.8rem;\n  padding: 16px 0 8px;\n}\np {\n  font-size: 1.6rem;\n  line-height: 2.4rem;\n  max-width: 75ch;\n  margin: 0;\n}\ndiv {\n  box-sizing: border-box;\n}\nimg {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  /* position: absolute; */\n}\n.half {\n  width: 50%;\n  ", ";\n}\n.col {\n  &-12 {\n    width: 100%;\n  }\n  &-1 {\n    width: calc(1 / 12 * 100%);\n  }\n  &-2 {\n    width: calc(2 / 12 * 100%);\n  }\n  &-3 {\n    width: calc(3 / 12 * 100%);\n  }\n  &-4 {\n    width: calc(4 / 12 * 100%);\n  }\n  &-5 {\n    width: calc(5 / 12 * 100%);\n  }\n  &-6 {\n    width: calc(50%);\n  }\n  &-7 {\n    width: calc(7 / 12 * 100%);\n  }\n  &-8 {\n    width: calc(8 / 12 * 100%);\n  }\n  &-9 {\n    width: calc(9 / 12 * 100%);\n  }\n  &-10 {\n    width: calc(10 / 12 * 100%);\n  }\n  &-11 {\n    width: calc(11 / 12 * 100%);\n  }\n}\n.center {\n  margin: 0 auto;\n}\n", ";\na {\n  /* padding: 2px 0; */\n  color: ", " !important;\n  text-decoration: none;\n  position: relative;\n  &:before {\n    transition: 0.2s all ease-in;\n    position: absolute;\n    content: '';\n    height: 1px;\n    width: 20px;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n  }\n  &:hover {\n    &:before {\n      width: 100%;\n    }\n  }\n}\n.image-gallery-fullscreen-button.active {\n  top: 0;\n  bottom: auto;\n  background-color: #000;\n  &:before {\n    content: '\\274c';\n  }\n}\n.image-gallery-content {\n  .image-gallery-image {\n    img {\n      max-height: 500px;\n      height: 500px;\n      ", ";\n    }\n  }\n}\n.image-gallery-content.fullscreen {\n  .image-gallery-image {\n    img {\n      /* max-height: 75vh; */\n      width: auto;\n      margin: 0 auto;\n    }\n  }\n}\n\n.image-gallery {\n  max-width: 100%;\n  overflow: hidden;\n}\n.page_row {\n    max-width: 1240px;\n    width: 100%;\n    margin: 0px auto;\n    padding: 16px;\n    width: 100%;\n    flex-direction: column;\n    @media (min-width: 676px) {\n      flex-direction: row;\n    }\n    &.full-width {\n      max-width: 100%;\n      padding: 0;\n    }\n\n    &.container-width {\n      margin: 0 auto;\n      @media (min-width: 676px) {\n        max-width: 640px;\n      }\n\n      @media (min-width: 868px) {\n        max-width: 820px;\n      }\n\n      @media (min-width: 992px) {\n        max-width: 960px;\n      }\n\n      @media (min-width: 1290px) {\n        max-width: 1260px;\n      }\n    }\n  }\n"], ["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n  text-align: center;\n}\nul {\n  list-style: initial;\n  list-style-position: outside;\n  padding: 0 0 0 16px;\n  li {\n    font-size: 1.6rem;\n    line-height: 2.4rem;\n    padding: 4px 0;\n  }\n}\nh1 {\n  font-size: 2.8rem;\n  line-height: 3.4rem;\n  padding: 24px 0 16px;\n}\nh2 {\n  font-size: 2.2rem;\n  line-height: 2.8rem;\n  padding: 16px 0 8px;\n}\np {\n  font-size: 1.6rem;\n  line-height: 2.4rem;\n  max-width: 75ch;\n  margin: 0;\n}\ndiv {\n  box-sizing: border-box;\n}\nimg {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  /* position: absolute; */\n}\n.half {\n  width: 50%;\n  ", ";\n}\n.col {\n  &-12 {\n    width: 100%;\n  }\n  &-1 {\n    width: calc(1 / 12 * 100%);\n  }\n  &-2 {\n    width: calc(2 / 12 * 100%);\n  }\n  &-3 {\n    width: calc(3 / 12 * 100%);\n  }\n  &-4 {\n    width: calc(4 / 12 * 100%);\n  }\n  &-5 {\n    width: calc(5 / 12 * 100%);\n  }\n  &-6 {\n    width: calc(50%);\n  }\n  &-7 {\n    width: calc(7 / 12 * 100%);\n  }\n  &-8 {\n    width: calc(8 / 12 * 100%);\n  }\n  &-9 {\n    width: calc(9 / 12 * 100%);\n  }\n  &-10 {\n    width: calc(10 / 12 * 100%);\n  }\n  &-11 {\n    width: calc(11 / 12 * 100%);\n  }\n}\n.center {\n  margin: 0 auto;\n}\n", ";\na {\n  /* padding: 2px 0; */\n  color: ", " !important;\n  text-decoration: none;\n  position: relative;\n  &:before {\n    transition: 0.2s all ease-in;\n    position: absolute;\n    content: '';\n    height: 1px;\n    width: 20px;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n  }\n  &:hover {\n    &:before {\n      width: 100%;\n    }\n  }\n}\n.image-gallery-fullscreen-button.active {\n  top: 0;\n  bottom: auto;\n  background-color: #000;\n  &:before {\n    content: '\\\\274c';\n  }\n}\n.image-gallery-content {\n  .image-gallery-image {\n    img {\n      max-height: 500px;\n      height: 500px;\n      ", ";\n    }\n  }\n}\n.image-gallery-content.fullscreen {\n  .image-gallery-image {\n    img {\n      /* max-height: 75vh; */\n      width: auto;\n      margin: 0 auto;\n    }\n  }\n}\n\n.image-gallery {\n  max-width: 100%;\n  overflow: hidden;\n}\n.page_row {\n    max-width: 1240px;\n    width: 100%;\n    margin: 0px auto;\n    padding: 16px;\n    width: 100%;\n    flex-direction: column;\n    @media (min-width: 676px) {\n      flex-direction: row;\n    }\n    &.full-width {\n      max-width: 100%;\n      padding: 0;\n    }\n\n    &.container-width {\n      margin: 0 auto;\n      @media (min-width: 676px) {\n        max-width: 640px;\n      }\n\n      @media (min-width: 868px) {\n        max-width: 820px;\n      }\n\n      @media (min-width: 992px) {\n        max-width: 960px;\n      }\n\n      @media (min-width: 1290px) {\n        max-width: 1260px;\n      }\n    }\n  }\n"])), MEDIA.PHONE(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 100%;\n      "]))), MEDIA.TABLET(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {\n      width: 100%;\n  }\n      "]))), function (props) {
   return props.theme.linkColor;
 }, function (props) {
   return props.theme.primaryColor;
 }, MEDIA.TABLET(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: auto;\n      "]))));
+var BlockSelf = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 
 function Block(_ref) {
   var pageBlock = _ref.pageBlock;
   var options = pageBlock.options;
 
+  if (options == null) {
+    return null;
+  }
+
   switch (options.type) {
     case 'button':
       return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
@@ -54072,6 +54096,14 @@ function Block(_ref) {
         options: options
       }));
 
+    case 'embed':
+      return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+        options: options,
+        key: pageBlock.id
+      }, /*#__PURE__*/React__default["default"].createElement(Embed, {
+        options: options
+      }));
+
     default:
       return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
         options: options,
@@ -54087,13 +54119,13 @@ Block.propTypes = {
 function Wrapper(_ref2) {
   var children = _ref2.children,
       options = _ref2.options;
-  var classes = '';
+  var classes = "bu_cpb_".concat(options.type);
   Object.entries(options.classes).forEach(function (element) {
-    classes += '';
+    classes += ' ';
     classes += element[1];
   });
   classes = classNames(classes, options.classes.width, options.className);
-  return /*#__PURE__*/React__default["default"].createElement(BlockContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(BlockSelf, {
     className: classes,
     style: options.style
   }, children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.14",
+  "version": "1.0.19",
   "description": "",
   "main": "build/index.js",
   "repository": {

package/src/Main.css.js

@@ -157,7 +157,7 @@ a {
     width: 100%;
     flex-direction: column;
     @media (min-width: 676px) {
-      // flex-direction: row;
+      flex-direction: row;
     }
     &.full-width {
       max-width: 100%;
@@ -184,3 +184,8 @@ a {
     }
   }
 `;
+
+
+export const BlockSelf = styled.div`
+  width: 100%;
+`

package/src/components/Block.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal} from './BlockTypes';
-import { BlockContainer } from '../Main.css'
+import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal, Embed} from './BlockTypes';
+import { BlockSelf } from '../Main.css'
 
 function Block({pageBlock}) {
   const { options } = pageBlock;
 
+  if (options == null) {
+    return null;
+  }
+
   switch(options.type) {
     case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
     case 'map': return <Wrapper options={options} key={pageBlock.id}><Map options={options} /></Wrapper>
@@ -16,6 +20,7 @@ function Block({pageBlock}) {
     case 'image_slider': return <Wrapper options={options} key={pageBlock.id}><ImageSlider options={options} /></Wrapper>
     case 'imageGallery': return <Wrapper options={options} key={pageBlock.id}><ImageGallery options={options} /></Wrapper>
     case 'bukazu_portal': return <Wrapper options={options} key={pageBlock.id}><Portal options={options} /></Wrapper>
+    case 'embed': return <Wrapper options={options} key={pageBlock.id}><Embed options={options} /></Wrapper>
     default: return <Wrapper options={options} key={pageBlock.id}>{options.type}</Wrapper>
   }
 
@@ -26,17 +31,17 @@ Block.propTypes = {
 }
 
 function Wrapper({ children, options }) {
-  let classes = '';
+  let classes = `bu_cpb_${options.type}`;
   Object.entries(options.classes).forEach(element => {
-    classes += '';
+    classes += ' ';
     classes += element[1];
   });
 
   classes = classNames(classes, options.classes.width, options.className);
 
-  return <BlockContainer className={classes} style={options.style}>
+  return <BlockSelf className={classes} style={options.style}>
     {children}
-  </BlockContainer>
+  </BlockSelf>
 }
 
 export default Block

package/src/components/BlockTypes/Embed.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function({options}) {
+  return (
+    <embed
+      src={'https://cms.burobork.nl/images/' + options.content[0].reference}
+      width={options.embedWidth}
+      height={options.embedHeight}
+      type={options.embedType}
+    />
+  )
+}

package/src/components/BlockTypes/ImageSlide.css.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 export const SliderContainer = styled.div`
+width: 100%;
 .carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}
   ul li {
     padding: 0 !important;

package/src/components/BlockTypes/ImageSlider.js

@@ -2,25 +2,29 @@ import React from 'react'
 import { Carousel } from 'react-responsive-carousel'
 import { SliderContainer } from './ImageSlide.css'
 
-export default function ImageSlider({options}) {
+export default function ImageSlider({ options }) {
+  console.debug({ sliderOptions: options })
+  const { content } = options
   return (
     <SliderContainer>
-    <Carousel showThumbs={false} swipeable={true} showStatus={false} dynamicHeight={true} width="100%">
-      {options.content.map(slide => {
-      if (!slide.active) return;
-       return ( <div key={slide.image[0].reference} style={{ height: 600 }}>
-        <img
-              src={
-                slide
-                ? 'https://cdn.burobork.nl/' + slide.image[0].reference
-                : null
-              }
-              alt={slide.title}
-              style={{ height: 600 }}
+      <Carousel showThumbs={false} swipeable={true} showStatus={false} dynamicHeight={false} width="100%" showIndicators={content.length > 1 ? true : false}>
+        {options.content.map(slide => {
+        if (!slide.active) return;
+          return (
+            <div key={slide.image[0].reference} style={{ height: options.height ? parseInt(options.height) : 600 }}>
+              <img
+                    src={
+                      slide
+                      ? 'https://cdn.burobork.nl/' + slide.image[0].reference
+                      : null
+                    }
+                    alt={slide.title}
+                    style={{ height: options.height ? parseInt(options.height) : 600 }}
               />
-</div>)
-      })}
-          </Carousel>
-          </SliderContainer>
+            </div>
+          )
+        })}
+      </Carousel>
+    </SliderContainer>
   )
 }

package/src/components/BlockTypes/Map.js

@@ -27,6 +27,6 @@ export default function GoogleMap({ options }) {
 
 const Marker = () => (
 	<>
-		Marke
+		<img src='https://cms.burobork.nl/marker.svg' height={16} width={16} />
 	</>
 );

package/src/components/BlockTypes/index.js

@@ -1,4 +1,5 @@
 import Button from './Button'
+import Embed from './Embed'
 // import Form from './Form'
 import Iframe from './Iframe'
 import Image from './Image'
@@ -11,6 +12,7 @@ import Text from './Text'
 
 export {
   Button,
+  Embed,
   Image,
   ImageGallery,
   ImageSlider,