` }} />);\n\t\t}\n\n\t\tsrc =\n\t\t\t`https://www.youtube${hasCookieConsent\n\t\t\t\t? \"\"\n\t\t\t\t: \"-nocookie\"\n\t\t\t}.com/embed/${videoID}?modestbranding=1&rel=0&showinfo=0&autohide=1&autoplay=${autoplay\n\t\t\t\t? \"1\"\n\t\t\t\t: \"0\"\n\t\t\t}&output=embed&enablejsapi=${enableApi ? \"1\" : \"0\"}`;\n\t} else {\n\t\tsrc = fullUrl;\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n});\n\nexport default YoutubeEmbed;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _image = _interopRequireDefault(require(\"./lib/image\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nvar _default = exports.default = _image.default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _background = _interopRequireDefault(require(\"./lib/background\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nvar _default = exports.default = _background.default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _blocklist = _interopRequireDefault(require(\"./lib/blocklist\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nvar _default = exports.default = _blocklist.default;","\"use strict\";\n\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _render = _interopRequireDefault(require(\"../utils/render\"));\nvar _image = require(\"../utils/image\");\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nvar FrontComponent = function FrontComponent(_ref) {\n var doc = _ref.doc,\n name = _ref.name,\n thumb = _ref.thumb,\n children = _ref.children,\n _ref$tagName = _ref.tagName,\n tagName = _ref$tagName === void 0 ? \"div\" : _ref$tagName,\n _ref$defaultValue = _ref.defaultValue,\n defaultValue = _ref$defaultValue === void 0 ? \"\" : _ref$defaultValue,\n frontProps = _ref.frontProps;\n var value = doc[name];\n var src = value && value.src || defaultValue;\n var style = {};\n if (src || value) {\n if (thumb && src) {\n var thumbParams = Object.assign(new Array(4).fill(null), thumb);\n src = _image.getThumb.apply(void 0, [value].concat(_toConsumableArray(thumbParams), [true]));\n } else if (value && value.relation) {\n src = value.relation.url || src;\n }\n if (src && src.indexOf(\"url(\") !== 0) {\n src = \"url(\\\"\".concat(src, \"\\\")\");\n }\n style = {\n backgroundImage: src\n };\n }\n var Tag = tagName;\n var props = _objectSpread({}, frontProps);\n delete props.tagName;\n return /*#__PURE__*/_react.default.createElement(Tag, _extends({\n style: style\n }, props), children);\n};\nvar Background = function Background(props) {\n return (0, _render.default)(\"Background\", props, FrontComponent);\n};\nBackground.displayName = \"Background\";\nvar _default = exports.default = Background;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _render = _interopRequireDefault(require(\"../utils/render\"));\nvar _image = require(\"../utils/image\");\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nvar FrontComponent = function FrontComponent(_ref) {\n var doc = _ref.doc,\n name = _ref.name,\n thumb = _ref.thumb,\n _ref$defaultValue = _ref.defaultValue,\n defaultValue = _ref$defaultValue === void 0 ? \"\" : _ref$defaultValue,\n frontProps = _ref.frontProps;\n var value = doc[name];\n if (!value) {\n return null;\n }\n var src = value.src || defaultValue;\n if (thumb && src) {\n var thumbParams = Object.assign(new Array(4).fill(null), thumb);\n src = _image.getThumb.apply(void 0, [value].concat(_toConsumableArray(thumbParams)));\n } else if (value && value.relation) {\n src = value.relation.url || src;\n }\n return /*#__PURE__*/_react.default.createElement(\"img\", _extends({\n src: src,\n alt: value.alt\n }, frontProps, {\n ref: function ref(node) {\n if (node && node.complete && frontProps.onLoad) {\n frontProps.onLoad({\n complete: true,\n currentTarget: node,\n target: node\n });\n }\n }\n }));\n};\nvar Image = function Image(props) {\n return (0, _render.default)(\"Image\", props, FrontComponent);\n};\nImage.displayName = \"Image\";\nImage.defaultProps = {\n extensions: [\"png\", \"gif\", \"jpg\", \"jpeg\", \"svg\"]\n};\nvar _default = exports.default = Image;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _react = _interopRequireWildcard(require(\"react\"));\nvar _render = _interopRequireWildcard(require(\"../utils/render\"));\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != _typeof(e) && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nvar FrontComponent = function FrontComponent(_ref) {\n var doc = _ref.doc,\n name = _ref.name,\n blocks = _ref.blocks,\n mainDoc = _ref.mainDoc;\n var value = doc[name];\n if (!value || !Array.isArray(value)) {\n return null;\n }\n return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, value.map(function (item, index) {\n var block = mainDoc[item];\n if (!block || _typeof(block) !== \"object\") {\n return null;\n }\n if (!block.type) {\n console.warn(\"Undefined block type\");\n return null;\n }\n if (!blocks[block.type]) {\n console.warn(\"Unrecognized block type\", block.type);\n return null;\n }\n block.$$index = index;\n var Block = blocks[block.type];\n return /*#__PURE__*/_react.default.createElement(_render.ItemContext.Provider, {\n key: name + item,\n value: block\n }, /*#__PURE__*/_react.default.createElement(Block, {\n item: block\n }));\n }));\n};\nvar Blocklist = function Blocklist(props) {\n return (0, _render.default)(\"Blocklist\", props, FrontComponent);\n};\nBlocklist.displayName = \"Blocklist\";\nvar _default = exports.default = Blocklist;","import styled from 'styled-components';\nimport { textStyles, fluidSize } from '@utils/style-utils';\n\n\nexport const Content = styled.div`\n\tmargin: 0 auto;\n\tmax-width: 896px;\n\n\t${ fluidSize('margin-bottom', '320px', '1920px', '60px', '120px') }\n\n\th1 {\n\t\t${ textStyles.H1 }\n\t\t${ fluidSize('margin-bottom', '320px', '1920px', '30px', '60px') }\n\t}\n\th2 {\n\t\t${ textStyles.H2 }\n\t\t${ fluidSize('margin-bottom', '320px', '1920px', '20px', '40px') }\n\t}\n\th3 {\n\t\t${ textStyles.H3 }\n\t\t${ fluidSize('margin-bottom', '320px', '1920px', '14px', '30px') }\n\t}\n\tp {\n\t\t${ textStyles.PMedium }\n\t}\n\ta {\n\t\t${ textStyles.AInline }\n\t}\n`\n","import React from \"react\";\nimport { Wrapper, Container } from \"@components/Grid\";\nimport Editor from \"wake-react-components/editor\";\nimport Text from \"wake-react-components/text\";\nimport { getAssetUrl } from \"@utils/index\";\nimport { Content } from \"./styles\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport isEmpty from \"lodash-es/isEmpty\";\n\nconst TextContent = (props: any) => {\n\tconst {\n\t\titem: { elementID },\n\t\t...restProps\n\t} = props;\n\n\tif (elementID) {\n\t\trestProps[\"id\"] = elementID;\n\t}\n\n\tif (!isAdmin && isEmpty(props.item.textContentText)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nTextContent.settings = () => (\n\t\n\t\t\n\t\t\tElementin ID (esim ankkuriksi) \n\t\t\n\t\t\n\t
\n);\n\nTextContent.thumb = () => (\n\t\n\t\t
})
\n\t\t
Tekstialue
\n\t
\n);\n\nexport default TextContent;\n","import styled, { keyframes } from \"styled-components\";\nimport { color } from \"@utils/style-utils\";\n\nexport const MapContainer = styled.div.attrs(props => ({\n\tclassName: props.className ? props.className + \" google-map\" : \"google-map\",\n\tid: props.id || \"google-map\",\n}))`\n\tbackground: ${color(\"grey\", 6)};\n\tborder: 1px solid ${color(\"grey\", 5)};\n\theight: 100%;\n\toverflow: hidden;\n\tposition: relative;\n\tpadding-bottom: 95%;\n\twidth: 100%;\n`;\n\nconst pulse = keyframes`\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0.5;\n\t}\n`;\n\nexport const MapLoader = styled.div`\n\tanimation: ${pulse} 1s linear infinite;\n\tbackground: ${color(\"grey\", 7)};\n\theight: 100%;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n`;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Map, Marker, GoogleApiWrapper } from \"google-maps-react\";\nimport { MapContainer, MapLoader } from \"./styles\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { getAssetUrl } from \"@utils/index\";\n\nconst isDevEnv = process.env.NODE_ENV !== \"production\";\n\nconst apiKey = isDevEnv ? \"\" : \"AIzaSyB_h_r6Y-l_wPS4lgVmwynh8yxJUoOGzo0\";\n\nconst centerOfFinland = {\n\tlat: 64.180708,\n\tlng: 25.803222,\n};\n\ninterface IProps {\n\tforcedBounds?: Array<{ lat: number | string; lng: number | string }>;\n\tgoogle: any;\n\tinitialCenter?: { lat: number; lng: number };\n\t/** markers: provide agency / property key with lat & lng coordinates */\n\tmarkers?: Array<{ key: string; lat: number | string; lng: number | string }>;\n\tonMarkerClicked?: (e: any) => void;\n\taddBounds?: boolean;\n\tzoom?: number;\n\t[key: string]: any;\n}\n\nconst GoogleMap = (props: IProps) => {\n\tconst {\n\t\taddBounds = true,\n\t\tforcedBounds,\n\t\tgoogle,\n\t\tid = \"google-map\",\n\t\tinitialCenter = centerOfFinland,\n\t\tmarkers,\n\t\tonMarkerClicked,\n\t\tzoom = 4,\n\t} = props;\n\tconst [mapBounds, setMapBounds] = useState(null);\n\tconst mapRef = useRef(null);\n\n\tuseEffect(() => {\n\t\tif (addBounds) {\n\t\t\tconst bounds = new google.maps.LatLngBounds();\n\n\t\t\tif (markers && markers.length > 0) {\n\t\t\t\tmarkers.forEach(({ lat, lng }) => bounds.extend(new google.maps.LatLng(Number(lat), Number(lng))));\n\t\t\t\tsetMapBounds(bounds);\n\t\t\t}\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\ttry {\n\t\t\tconst bounds = new google.maps.LatLngBounds();\n\n\t\t\tif (forcedBounds && forcedBounds.length > 0) {\n\t\t\t\tforcedBounds.forEach(({ lat, lng }) => bounds.extend({ lat: Number(lat), lng: Number(lng) }));\n\n\t\t\t\tif (isEmpty(bounds)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst northEast = bounds.getNorthEast();\n\t\t\t\tconst southWest = bounds.getSouthWest();\n\n\t\t\t\t/* prevent zooming too close on single markers */\n\t\t\t\tif (northEast.equals(southWest)) {\n\t\t\t\t\tconst extendPoint1 = new google.maps.LatLng(northEast.lat() + 0.01, northEast.lng() + 0.01);\n\t\t\t\t\tconst extendPoint2 = new google.maps.LatLng(northEast.lat() - 0.01, northEast.lng() - 0.01);\n\t\t\t\t\tbounds.extend(extendPoint1);\n\t\t\t\t\tbounds.extend(extendPoint2);\n\t\t\t\t}\n\n\t\t\t\tsetMapBounds(bounds);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tconsole.log(e);\n\t\t}\n\t}, [forcedBounds]);\n\n\tconst onMarkerClick = ({ name: key, ...rest }: any) => {\n\t\tif (typeof onMarkerClicked === \"function\") {\n\t\t\tonMarkerClicked({ key, ...rest });\n\t\t}\n\t};\n\n\ttry {\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t} catch (e) {\n\t\tconsole.log(e);\n\t\treturn null;\n\t}\n};\n\nexport default GoogleApiWrapper({\n\tLoadingContainer: MapLoader,\n\tapiKey,\n\tlanguage: \"fi\",\n})(GoogleMap);\n","import styled, { css } from \"styled-components\";\nimport { color } from \"@utils/style-utils\";\n\nexport const StickyWrapper = styled.div`\n\theight: 1px;\n\tmargin-top: -1px;\n\tposition: relative;\n\twidth: 100%;\n\tz-index: 989;\n\n\t${props =>\n\t\tprops.sticky &&\n\t\tcss`\n\t\t\theight: auto;\n\t\t\tmargin-top: -65px;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\n\t\t\t> div {\n\t\t\t\tposition: relative !important;\n\t\t\t}\n\t\t`}\n`;\n\nexport const StickyElement = styled.div`\n\talign-items: center;\n\tbackground: ${color(\"white\")};\n\tborder-bottom: 1px solid ${color(\"grey\", 5)};\n\tdisplay: flex;\n\tjustify-content: center;\n\tleft: 0;\n\topacity: 0;\n\tpadding: 15px;\n\tposition: fixed;\n\ttop: 0;\n\ttransform: translateY(-100%);\n\ttransition: transform 200ms ease-in-out, opacity 200ms;\n\twidth: 100%;\n\tz-index: 990;\n\n\t.is-sticky & {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n\n\t.header-pinned & {\n\t\ttransform: translateY(56px);\n\n\t\t@media (min-width: 531px) {\n\t\t\ttransform: translateY(64px);\n\t\t}\n\t}\n`;\n","import React, { useEffect, useRef } from \"react\";\nimport throttle from \"lodash-es/throttle\";\nimport { StickyWrapper, StickyElement } from \"./styles\";\nimport { hasWindow } from \"@utils\";\n\nconst StickyContactBar = ({ children, sticky = false }) => {\n\tconst stickRef = useRef(null);\n\n\tconst onScroll = throttle(event => {\n\t\tconst stickyElem = stickRef.current;\n\t\tif (!stickyElem) {\n\t\t\treturn;\n\t\t}\n\t\tconst { top } = stickyElem.getBoundingClientRect();\n\n\t\tif (top > 0) {\n\t\t\tstickyElem.classList.remove(\"is-sticky\");\n\t\t} else if (top <= 0) {\n\t\t\tstickyElem.classList.add(\"is-sticky\");\n\t\t}\n\t}, 200);\n\n\tuseEffect(() => {\n\t\tif (hasWindow) {\n\t\t\twindow.addEventListener(\"scroll\", onScroll);\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener(\"scroll\", onScroll);\n\t\t\t};\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport default StickyContactBar;\n","import styled from \"styled-components\";\nimport { color, media } from \"@utils/style-utils\";\n\nexport const Articles = styled.div`\n\tmargin-bottom: 60px;\n\n\t${media.md`\n\t\tmargin-bottom: 80px;\n\t`}\n\n\t${media.lg`\n\t\tmargin-bottom: 100px;\n\t`}\n\n\t${media.xl`\n\t\tmargin-bottom: 120px;\n\t`}\n`;\n\nexport const ArticlesTitle = styled.div`\n\talign-items: baseline;\n\tdisplay: flex;\n\tposition: relative;\n\tmargin-bottom: 30px;\n\n\t${media.lg`\n\t\tmargin-bottom: 48px;\n\t`}\n\n\th2 {\n\t\tmargin: 0 24px 0 0;\n\t}\n\n\tspan.line {\n\t\tbackground: ${color(\"grey\", 5)};\n\t\tdisplay: inline-block;\n\t\theight: 1px;\n\t\tflex-grow: 10;\n\t}\n`;\n","import styled from \"styled-components\";\nimport { color } from \"@utils/style-utils\";\nimport { Container } from \"@components/Grid\";\n\nexport const AdminControls = styled.div`\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n\tjustify-content: flex-start;\n\tmargin-bottom: 3em;\n`;\n\nexport const AdminControlButtons = styled.div`\n\talign-items: center;\n\tdisplay: flex;\n\tgap: 20px;\n\tjustify-content: flex-start;\n`;\n\nexport const AdminTrack = styled.div`\n\talign-items: flex-start;\n\tbackground: ${color(\"beige\", 4)};\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tgap: 1em;\n\tjustify-content: flex-start;\n\toverflow-x: auto;\n\tpadding: 1em;\n\twidth: 100%;\n`;\n\nexport const AdminTrackItem = styled.div`\n\talign-items: flex-start;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\tjustify-content: center;\n\tpadding: 5px;\n\twidth: 20vw;\n\n\timg {\n\t\theight: auto;\n\t\twidth: 100%;\n\t}\n\n\t.yt-embed {\n\t\theight: auto;\n\t\tmin-height: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const AdminTrackItemControls = styled.div`\n\talign-items: center;\n\tdisplay: flex;\n\tgap: 1em;\n\tjustify-content: space-evenly;\n\twidth: 100%;\n\n\tbutton[disabled] {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const Carousel = styled(Container)`\n\theight: 503px;\n\tmargin-bottom: 9em;\n\tmax-width: min(100%, 896px);\n\n\t.carousel-swiper, .carousel-swiper > div, .swiper-container {\n\t\theight: 503px;\n\t\twidth: 100%;\n\t}\n\n\t.swiper-slide {\n\t\theight: auto !important;\n\t\twidth: 100%;\n\n\t\t> div {\n\t\t\theight: 100%;\n\t\t}\n\n\t\timg {\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\t.swiper-button-next,\n\t.swiper-button-prev {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const CarouselButtons = styled.div`\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\n\tbutton {\n\t\talign-items: center;\n\t\tborder: 0;\n\t\tbackground: rgba(255, 255, 255, 0);\n\t\tcolor: ${color(\"greenBright\", 1)};\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-size: 20px;\n\t\theight: 30px;\n\t\tmargin: 0 0 0 20px;\n\t\toutline: 0;\n\t\tpadding: 0;\n\t\twidth: 20px;\n\n\t\tsvg {\n\t\t\tmax-width: 20px;\n\t\t\ttransform: scale(1);\n\t\t\ttransition: transform 150ms;\n\t\t}\n\n\t\t+ button {\n\t\t\tmargin-left: 5px;\n\t\t}\n\n\t\t&.media-carousel-next,\n\t\t&.media-carousel-prev {\n\t\t\tjustify-content: flex-end;\n\t\t}\n\n\t\t&.swiper-button-disabled {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tsvg {\n\t\t\t\ttransform: scale(1.2);\n\t\t\t}\n\t\t}\n\t}\n`;\n\nexport const CarouselCounter = styled.div`\n\tcolor: ${color(\"greenBright\", 1)};\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { getAssetUrl, hasWindow } from \"@utils\";\nimport { Container } from \"@components/Grid\";\nimport { getID } from \"@components/ContentBlocks/Base\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport Image from \"wake-react-components/image\";\nimport Text from \"wake-react-components/text\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport {\n\tAdminControlButtons,\n\tAdminControls,\n\tAdminTrack,\n\tAdminTrackItem,\n\tAdminTrackItemControls,\n\tCarousel,\n\tCarouselButtons,\n\tCarouselCounter,\n} from \"./styles\";\nimport YoutubeEmbed from \"@components/Embeds/Youtube\";\nimport { Slide, Swiper } from \"react-dynamic-swiper\";\nimport { FontAwesomeIcon as FaIcon } from \"@fortawesome/react-fontawesome\";\nimport { getYoutubeID } from \"@utils/string-utils\";\n\nconst MediaCarousel = (props: any) => {\n\n\tconst { item } = props;\n\n\tconst [ addingImage, setAddingImage ] = useState(false);\n\tconst [ addingVideo, setAddingVideo ] = useState(false);\n\tconst [ mediaBlocks, setMediaBlocks ] = useState([]);\n\tconst [ currentSlide, setCurrentSlide ] = useState(1);\n\tconst swiperRef = useRef(null);\n\n\tuseEffect(() => {\n\t\tsetMediaBlocks(Array.isArray(item.mediaBlocks) ? item.mediaBlocks || [] : []);\n\t}, [item]);\n\n\tconst swiperOptions: any = {\n\t\tgrabCursor: true,\n\t\tloop: true,\n\t\tnavigation: {\n\t\t\tnextEl: \".media-carousel-next\",\n\t\t\tprevEl: \".media-carousel-prev\",\n\t\t},\n\t\tpagination: false,\n\t\tslidesPerGroup: 1,\n\t\tslidesPerView: 1,\n\t\tspaceBetween: 40,\n\t};\n\n\tif (!isAdmin && (!Array.isArray(mediaBlocks) || mediaBlocks.length === 0)) {\n\t\treturn null;\n\t}\n\n\tconst handleAdd = () => {\n\t\tif (addingImage && !isEmpty(item.addImage) && !isEmpty(item.addImage.src)) {\n\t\t\tsetMediaBlocks((currentBlocks: any) => {\n\t\t\t\tconst newBlocks = [\n\t\t\t\t\t...currentBlocks,\n\t\t\t\t\t{\n\t\t\t\t\t\tcontent: item.addImage,\n\t\t\t\t\t\ttype: \"image\",\n\t\t\t\t\t},\n\t\t\t\t];\n\t\t\t\titem.mediaBlocks = newBlocks;\n\t\t\t\treturn newBlocks;\n\t\t\t});\n\t\t\tdelete item.addImage;\n\t\t\tsetAddingImage(false);\n\t\t} else if (addingVideo && !isEmpty(item.addVideo)) {\n\t\t\tsetMediaBlocks((currentBlocks: any) => {\n\t\t\t\tconst newBlocks = [\n\t\t\t\t\t...currentBlocks,\n\t\t\t\t\t{\n\t\t\t\t\t\tcontent: item.addVideo.includes(\"://\") ? getYoutubeID(item.addVideo) : item.addVideo,\n\t\t\t\t\t\ttype: \"youtube\",\n\t\t\t\t\t},\n\t\t\t\t];\n\t\t\t\titem.mediaBlocks = newBlocks;\n\t\t\t\treturn newBlocks;\n\t\t\t});\n\t\t\tdelete item.addVideo;\n\t\t\tsetAddingVideo(false);\n\t\t}\n\t};\n\n\tconst moveItem = (index: number, direction: number) => {\n\t\tif (mediaBlocks[ index ] === undefined || mediaBlocks[ index + direction ] === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tsetMediaBlocks((currentBlocks: any) => {\n\t\t\tconst newBlocks = [ ...currentBlocks ];\n\t\t\tnewBlocks[ index ] = newBlocks[ index + direction ];\n\t\t\tnewBlocks[ index + direction ] = currentBlocks[ index ];\n\t\t\titem.mediaBlocks = newBlocks;\n\t\t\treturn newBlocks;\n\t\t});\n\t};\n\n\tconst deleteItem = (index: number) => {\n\t\tsetMediaBlocks((currentBlocks: any) => {\n\t\t\tconst newBlocks = [ ...currentBlocks ];\n\t\t\tnewBlocks.splice(index, 1);\n\t\t\titem.mediaBlocks = newBlocks;\n\t\t\treturn newBlocks;\n\t\t});\n\t};\n\n\t/**\n\t * Reset all YouTube iframe src's, effectively stopping video playback and resetting the video to start. This,\n\t * unfortunately, causes each video to \"blink\" when slide is loaded. The Correct Way™ would be using IFrame API to\n\t * create players and enable controlling them instead.\n\t */\n\tconst onSlideChange = () => {\n\t\tif (hasWindow) {\n\t\t\tArray.from(document.getElementsByTagName(\"iframe\")).forEach((iframe: any) => {\n\t\t\t\tif (iframe.src.includes(\"youtube\")) {\n\t\t\t\t\t// noinspection SillyAssignmentJS\n\t\t\t\t\tiframe.src = iframe.src;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\tif (swiperRef.current) {\n\t\t\tsetCurrentSlide(swiperRef.current.realIndex + 1);\n\t\t}\n\t};\n\n\tconst id = getID(item);\n\treturn \n\t\t{isAdmin && \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t{addingImage && \n\t\t\t\t\n\t\t\t
}\n\t\t\t{addingVideo && \n\t\t\t\t
YouTube-videon ID
\n\t\t\t\t
\n\t\t\t
}\n\t\t\t{!!(addingImage || addingVideo) && }\n\t\t\t{mediaBlocks.length > 0 && \n\t\t\t\t{mediaBlocks.map((mediaBlock: any, index: number) => {\n\t\t\t\t\treturn \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t{mediaBlock.type === \"image\" &&
}\n\t\t\t\t\t\t{mediaBlock.type === \"youtube\" && <>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tYouTube: {mediaBlock.content}
\n\t\t\t\t\t\t>}\n\t\t\t\t\t;\n\t\t\t\t})}\n\t\t\t}\n\t\t}\n\n\t\t{mediaBlocks.length > 0 && \n\t\t\t{mediaBlocks.length > 1 && \n\t\t\t\t{currentSlide}/{mediaBlocks.length}\n\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t\t\n\t\t\t\t
swiperRef.current = swiper}\n\t\t\t\t\tslideChange={onSlideChange}\n\t\t\t\t\tswiperOptions={swiperOptions}\n\t\t\t\t>\n\t\t\t\t\t{mediaBlocks.map((mediaBlock: any, index: number) => {\n\t\t\t\t\t\treturn \n\t\t\t\t\t\t\t{mediaBlock.type === \"image\" &&\n\t\t\t\t\t\t\t\t
}\n\t\t\t\t\t\t\t{mediaBlock.type === \"youtube\" && }\n\t\t\t\t\t\t;\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t
\n\t\t}\n\t;\n\n};\n\nMediaCarousel.thumb = () => (\n\t\n\t\t
})
\n\t\t
Mediakaruselli
\n\t
\n);\n\nMediaCarousel.settings = () => (\n\t\n\t\t\n\t\t\tElementin ID (esim. ankkuriksi) \n\t\t\n\t\t\n\t
\n);\n\nexport default MediaCarousel;\n"],"sourceRoot":""}