waygo-maps 1.1.63 → 1.1.65

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 (2) hide show
  1. package/dist/bundle.js +5 -5
  2. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -581,7 +581,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
581
581
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
582
582
 
583
583
  "use strict";
584
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_ContentPlacementView_ContentDetails__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/ContentPlacementView/ContentDetails */ \"./src/components/ContentPlacementView/ContentDetails.js\");\n/* harmony import */ var _components_SelectionView_SelectionContentView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/SelectionView/SelectionContentView */ \"./src/components/SelectionView/SelectionContentView.js\");\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\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); }\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 _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ContentPlacementControl = /*#__PURE__*/function (_Control) {\n function ContentPlacementControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, ContentPlacementControl);\n _this = _callSuper(this, ContentPlacementControl, [options]);\n _this.map = null;\n _this.contentPlacementIds = [];\n _this.currentContentPlacement = null;\n _this.contentPlacementView = null;\n _this.selectionContentView = null;\n _this.selectedPlacements = [];\n _this.currentTop = window.innerHeight;\n _this.startingY = 0;\n _this.scrollConfiguration = {\n initialHeight: 0.5,\n // percent of the map container height\n minDistFromBottom: 110 // 185 // in px\n };\n _this.isDragging = false;\n _this.isAtTop = false;\n _this.velocity = 0;\n _this.decelerationFactor = 0.95;\n _this.minVelocity = 0.1;\n return _this;\n }\n _inherits(ContentPlacementControl, _Control);\n return _createClass(ContentPlacementControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'content-details-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.hide();\n return this.container;\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(ContentPlacementControl, \"onRemove\", this, 3)([]);\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('state:setup', this._handleSetupState.bind(this));\n this.map.on('state:selection', this._handleSelectionState.bind(this));\n this.map.on('selection:featureSelected', this._handleSelectionFeatureSelected.bind(this));\n this.map.on('selection:featureDeselected', this._handleSelectionFeatureDeselected.bind(this));\n this.map.on('selection:featureSelectedOptimistic', this._handleSelectionFeatureSelectedOptimistic.bind(this));\n this.map.on('selection:changed', this._handleSelectionChanged.bind(this));\n this.map.on('initiate:back', this._handleMapInitiateBack.bind(this));\n this.map.map.on('mousedown', this._handleMapFocus.bind(this));\n this.map.map.on('touchstart', this._handleMapFocus.bind(this));\n this.container.addEventListener('mousedown', function (e) {\n return e.stopPropagation();\n });\n this.container.addEventListener('click', function (e) {\n return e.stopPropagation();\n });\n this.container.addEventListener('dblclick', function (e) {\n return e.stopPropagation();\n });\n // this.container.addEventListener('touchstart', (e) => e.stopPropagation());\n\n this.container.addEventListener('touchstart', this.handleTouchStart.bind(this));\n this.container.addEventListener('touchmove', this.handleTouchMove.bind(this));\n this.container.addEventListener('touchend', this.handleTouchEnd.bind(this));\n this.container.addEventListener('wheel', this.handleWheelScroll.bind(this));\n\n // Add loading state event listeners\n // this.map.on('loading:start', this._handleLoadingStart.bind(this));\n // this.map.on('loading:end', this._handleLoadingEnd.bind(this));\n }\n }, {\n key: \"_handleSelectionFeatureSelectedOptimistic\",\n value:\n // _handleLoadingStart(data) {\n // const { type } = data;\n\n // if (type === 'content') {\n // // Show loading indicator for content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView.showLoading();\n // }\n // } else if (type === 'directions') {\n // // Show loading indicator for directions\n // if (this.contentPlacementView) {\n // this.contentPlacementView.showDirectionsLoading();\n // }\n // }\n // }\n\n // _handleLoadingEnd(data) {\n // const { type } = data;\n\n // if (type === 'content') {\n // // Hide loading indicator for content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView.hideLoading();\n // }\n // } else if (type === 'directions') {\n // // Hide loading indicator for directions\n // if (this.contentPlacementView) {\n // this.contentPlacementView.hideDirectionsLoading();\n // }\n // }\n // }\n\n // Add new method to handle optimistic selection\n function _handleSelectionFeatureSelectedOptimistic(data) {\n var feature = data.feature;\n var placementId = feature.properties.placement_id;\n console.log('🔵 Handling optimistic selection for feature:', placementId);\n\n // SINGLE-SELECT MODE: Clear everything immediately\n if (!this.map.multiSelect) {\n console.log('🔵 Single-select mode: Clearing all previous selections');\n this.selectedPlacements = [];\n\n // Clear the side panel completely\n if (this.selectionContentView) {\n this.selectionContentView.contentItems = [];\n this.selectionContentView._render();\n }\n }\n\n // Add optimistic item to selection view immediately\n if (this.selectionContentView) {\n this.selectionContentView.addOptimisticItem(feature);\n }\n\n // Show the panel\n this.show();\n }\n\n // Add new method to handle optimistic deselection (on error)\n }, {\n key: \"_handleMapFocus\",\n value: function _handleMapFocus(e) {\n if (this.currentViewType === 'desktop') return;\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length === 0) {\n this.scrollToMin(true);\n }\n }\n }, {\n key: \"handleTouchStart\",\n value: function handleTouchStart(event) {\n event.stopPropagation();\n this.startingY = event.touches[0].clientY;\n this.isDragging = true;\n this.velocity = 0;\n }\n }, {\n key: \"handleScrolling\",\n value: function handleScrolling(scrollAmount) {\n var element = this.contentPlacementView.getElement();\n var elementHeight = element.offsetHeight;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var containerBottom = rect.bottom;\n var newTop = null;\n if (scrollAmount <= 0) {\n newTop = Math.max(containerBottom - elementHeight - rect.top, this.currentTop + scrollAmount);\n } else if (scrollAmount > 0) {\n newTop = Math.min(containerBottom - this.scrollConfiguration.minDistFromBottom - rect.top, this.currentTop + scrollAmount);\n }\n this.scrollTo(newTop);\n }\n }, {\n key: \"handleTouchMove\",\n value: function handleTouchMove(event) {\n if (this.currentViewType === 'desktop') return;\n if (!this.isDragging) return;\n var touchY = event.touches[0].clientY;\n var scrollAmount = -1 * (this.startingY - touchY);\n this.velocity = scrollAmount;\n this.handleScrolling(scrollAmount);\n this.startingY = touchY;\n }\n }, {\n key: \"handleTouchEnd\",\n value: function handleTouchEnd() {\n this.isDragging = false;\n this._applyInertia();\n }\n }, {\n key: \"_applyInertia\",\n value: function _applyInertia() {\n var _this2 = this;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var element = this.contentPlacementView.getElement();\n var elementHeight = element.offsetHeight;\n var containerBottom = rect.bottom;\n var upperLimit = containerBottom - elementHeight - rect.top; // Upper scroll boundary\n var lowerLimit = containerBottom - this.scrollConfiguration.minDistFromBottom - rect.top;\n var initialVelocity = this.velocity;\n var duration = 400; // Duration of inertia in milliseconds (tweak this value)\n var startTime = performance.now(); // Start time of the inertia\n\n var _inertia = function inertia() {\n var currentTime = performance.now();\n var elapsedTime = currentTime - startTime;\n if (elapsedTime >= duration || Math.abs(_this2.velocity) < _this2.minVelocity) {\n _this2.velocity = 0;\n return;\n }\n ; // Stop when velocity is too low\n\n var progress = elapsedTime / duration; // Normalize time to [0, 1]\n var easingFactor = 1 - Math.pow(1 - progress, 2);\n _this2.velocity = initialVelocity * (1 - easingFactor);\n var newTop = _this2.currentTop + _this2.velocity;\n if (newTop <= upperLimit) {\n _this2.scrollTo(upperLimit);\n _this2.velocity = 0; // Stop inertia\n return;\n } else if (newTop >= lowerLimit) {\n _this2.scrollTo(lowerLimit);\n _this2.velocity = 0; // Stop inertia\n return;\n }\n\n // this.velocity *= this.decelerationFactor; // Apply deceleration\n // const easingFactor = Math.max(0.1, 1 - time / 100); // Easing factor decreases over time (clamped at 0.1)\n // this.velocity *= this.decelerationFactor * easingFactor;\n\n _this2.scrollTo(newTop); // Update position\n\n // time++;\n requestAnimationFrame(_inertia);\n };\n _inertia();\n }\n }, {\n key: \"handleWheelScroll\",\n value: function handleWheelScroll(event) {\n if (this.currentViewType === 'desktop') return;\n var scrollAmount = -event.deltaY;\n this.handleScrolling(scrollAmount);\n }\n\n // handleScroll() {\n // if (this.container.classList.contains('mobile-view')) {\n // // Get current scroll position\n // const scrollAmount = this.container.scrollTop;\n\n // // Adjust bottom position based on scroll amount\n // // As the user scrolls up, the container moves up (increase the bottom offset)\n // this.container.style.bottom = `${Math.min(45 + scrollAmount / 10, 100)}%`;\n\n // // If you want the container to reset to the bottom when done scrolling, add this:\n // clearTimeout(this.isScrolling);\n // this.isScrolling = setTimeout(() => {\n // this.container.style.bottom = '0px'; // Reset position when scrolling stops\n // }, 200);\n // }\n // }\n }, {\n key: \"_renderDesktopView\",\n value: function _renderDesktopView() {\n if (!this.contentPlacementView) {\n return;\n }\n var element = this.contentPlacementView.getElement();\n this.container.appendChild(element);\n this.container.classList.remove('mobile-view');\n this.container.classList.add('desktop-view');\n }\n }, {\n key: \"_renderMobileView\",\n value: function _renderMobileView() {\n if (!this.contentPlacementView) {\n return;\n }\n var element = this.contentPlacementView.getElement();\n this.container.appendChild(element);\n this.container.classList.remove('desktop-view');\n this.container.classList.add('mobile-view');\n }\n }, {\n key: \"_handleMapInitiateBack\",\n value: function _handleMapInitiateBack() {\n var currentState = this.map._stateCoordinator.state;\n if (currentState === 'selectedContent') {\n if (this.contentPlacementIds.length === 0) return;else if (this.contentPlacementIds.length === 1) {\n var stateHistory = this.map._stateCoordinator.stateHistory;\n var previousMapState = stateHistory[stateHistory.length - 2];\n stateHistory.pop();\n stateHistory.pop();\n if (previousMapState === 'search') {\n this.map.initiateSetToSearchState();\n } else {\n this.map.setToDefaultState();\n }\n } else {\n this.contentPlacementIds.pop();\n this.map.setToSelectedContentState(this.contentPlacementIds);\n }\n } else if (currentState === 'directions') {\n this.map.setToSelectedContentState(this.contentPlacementIds);\n } else if (currentState === 'selection') {\n // In selection state, hide the content panel but stay in selection state\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n }\n }\n }, {\n key: \"_handleSelectChildContentPlacement\",\n value: function _handleSelectChildContentPlacement(data) {\n var placementId = data.placementId;\n this.contentPlacementIds.push(placementId);\n this.map.setToSelectedContentState(this.contentPlacementIds);\n }\n }, {\n key: \"_handleDefaultState\",\n value: function () {\n var _handleDefaultState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n this.container.classList.remove('selection-mode');\n // this.hide();\n // this.contentPlacementIds = [];\n // this.currentContentPlacement = null;\n // this._clearViews();\n if (!(this.currentViewType === 'mobile')) {\n _context.next = 4;\n break;\n }\n _context.next = 4;\n return this._scrollToBottom(true, {\n duration: 50\n });\n case 4:\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n case 8:\n case \"end\":\n return _context.stop();\n }\n }, _callee, this);\n }));\n function _handleDefaultState() {\n return _handleDefaultState2.apply(this, arguments);\n }\n return _handleDefaultState;\n }()\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(_) {\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n if (this.currentViewType === 'mobile') {\n this._scrollToBottom();\n }\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n this.contentPlacementIds = contentPlacementIds;\n this.currentContentPlacement = selectedContentPlacement;\n this._updateContentViews();\n this.show();\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(_) {\n this.hide();\n }\n }, {\n key: \"_handleSetupState\",\n value: function _handleSetupState() {\n this.hide();\n }\n }, {\n key: \"_handleSelectionState\",\n value: function _handleSelectionState(data) {\n // In selection mode, prepare for selection confirmation workflow\n // Initialize empty selection view\n this.selectedPlacements = [];\n this._clearViews();\n this.map.clearSelectionLayers();\n\n // Show the panel even with no selections to guide users\n this._updateSelectionView();\n this.show();\n }\n\n // _clearViews() {\n // // Clear existing content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView = null;\n // }\n\n // // Clear existing selection content view\n // if (this.selectionContentView) {\n // this.selectionContentView = null;\n // }\n\n // // Clear container\n // this.container.innerHTML = '';\n // }\n\n // _handleSelectionFeatureSelected(data) {\n // const { feature, contentPlacement } = data;\n\n // // Add to selected placements if not already present\n // const alreadySelected = this.selectedPlacements.some(\n // p => p.placement_id === contentPlacement.placement_id\n // );\n\n // if (!alreadySelected) {\n // this.selectedPlacements.push(contentPlacement);\n // }\n\n // // Update the selection view\n // this._updateSelectionView();\n // this.show();\n // }\n }, {\n key: \"_handleSelectionFeatureSelected\",\n value: function _handleSelectionFeatureSelected(data) {\n var feature = data.feature,\n contentPlacement = data.contentPlacement;\n\n // Check if already selected\n var alreadySelected = this.selectedPlacements.some(function (p) {\n return p.placement_id === contentPlacement.placement_id;\n });\n if (!alreadySelected) {\n // Add to map's confirmed selection layers\n var clearExisting = !this.map.multiSelect;\n this.map.addConfirmedSelectionFeature(feature, clearExisting);\n\n // If single-select mode, clear our local array first\n if (!this.map.multiSelect) {\n this.selectedPlacements = [];\n }\n\n // Add to selected placements\n this.selectedPlacements.push(contentPlacement);\n\n // Update optimistic item with real data\n if (this.selectionContentView) {\n this.selectionContentView.updateOptimisticItem(contentPlacement.placement_id, contentPlacement);\n }\n }\n\n // Update the selection view\n this._updateSelectionView();\n this.show();\n }\n }, {\n key: \"_handleSelectionFeatureDeselected\",\n value: function _handleSelectionFeatureDeselected(data) {\n var feature = data.feature,\n placementId = data.placementId;\n console.log('🔵 Handling deselection for placement:', placementId);\n\n // Remove from map's confirmed selection layers\n this.map.removeConfirmedSelectionFeature(placementId);\n\n // Remove from selected placements\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n\n // Update the view\n this._updateSelectionView();\n\n // If no more selections, hide the control\n // if (this.selectedPlacements.length === 0) {\n // this.hide();\n // }\n }\n }, {\n key: \"_updateSelectionView\",\n value: function _updateSelectionView() {\n var _this3 = this;\n // Clear existing content\n this.container.innerHTML = '';\n\n // Ensure the container has the proper view classes\n if (this.currentViewType === 'desktop') {\n this.container.classList.add('desktop-view');\n this.container.classList.remove('mobile-view');\n } else {\n this.container.classList.add('mobile-view');\n this.container.classList.remove('desktop-view');\n }\n\n // Create selection content view if it doesn't exist\n if (!this.selectionContentView) {\n this.selectionContentView = new _components_SelectionView_SelectionContentView__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n\n // Set up event listeners\n this.selectionContentView.on('deselect:feature', function (data) {\n _this3._handleDeselectFeature(data);\n });\n this.selectionContentView.on('selectPhotos', function (data) {\n _this3._handleSelectPhotos(data);\n });\n }\n\n // Update the selection view with current selections\n this.selectionContentView.updateSelections(this.selectedPlacements);\n\n // Add the selection view directly to the main container\n this.container.appendChild(this.selectionContentView.getElement());\n }\n }, {\n key: \"_handleDeselectFeature\",\n value: function _handleDeselectFeature(data) {\n var placementId = data.placementId;\n\n // Remove from map's confirmed selection layers FIRST\n this.map.removeConfirmedSelectionFeature(placementId);\n\n // Remove from selected placements\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n\n // Update the view\n this._updateSelectionView();\n\n // Remove the hide() call - keep the panel visible to show empty state\n // if (this.selectedPlacements.length === 0) {\n // this.hide();\n // }\n }\n }, {\n key: \"_handleSelectionChanged\",\n value: function _handleSelectionChanged(data) {\n var selection = data.selection;\n\n // Update selected placements based on current map selection\n // This ensures the view stays in sync with map selections\n this._updateSelectionView();\n }\n }, {\n key: \"_handleSelectDirectionsButton\",\n value: function () {\n var _handleSelectDirectionsButton2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {\n var placementId;\n return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n placementId = data.placementId;\n _context2.next = 3;\n return this.map.setToDirectionsState(null, placementId);\n case 3:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2, this);\n }));\n function _handleSelectDirectionsButton(_x) {\n return _handleSelectDirectionsButton2.apply(this, arguments);\n }\n return _handleSelectDirectionsButton;\n }()\n }, {\n key: \"_handleSelectShareButton\",\n value: function () {\n var _handleSelectShareButton2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {\n var _this4 = this;\n var placementId, floor, accountId, mapId, mapViewId, center, longitude, latitude, pitch, bearing, zoom, textToCopy;\n return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n placementId = data.placementId;\n floor = this.map.getCurrentFloor();\n accountId = this.map.mapData.account_id;\n mapId = this.map.mapData.map_id;\n mapViewId = this.map.mapData.map_view_id;\n center = this.map.map.getCenter(); // Returns a LngLat object\n longitude = center.lng.toFixed(6);\n latitude = center.lat.toFixed(6);\n pitch = this.map.map.getPitch().toFixed(2); // Returns the pitch (tilt angle)\n bearing = this.map.map.getBearing().toFixed(2); // Returns the bearing (rotation angle)\n zoom = this.map.map.getZoom().toFixed(2);\n textToCopy = \"https://maps.waygomaps.com/\".concat(mapId, \"/\").concat(mapViewId, \"/selected-content/\").concat(placementId, \"/f\").concat(floor, \"@\").concat(longitude, \",\").concat(latitude, \",\").concat(zoom, \",\").concat(pitch, \",\").concat(bearing);\n navigator.clipboard.writeText(textToCopy).then(function () {\n _this4.contentPlacementView.showCopyPopup();\n })[\"catch\"](function (err) {\n return console.error('Failed to copy text:', err);\n });\n case 13:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3, this);\n }));\n function _handleSelectShareButton(_x2) {\n return _handleSelectShareButton2.apply(this, arguments);\n }\n return _handleSelectShareButton;\n }()\n }, {\n key: \"_handleSelectPhotos\",\n value: function _handleSelectPhotos(data) {\n var _this5 = this;\n var placementId = data.placementId,\n images = data.images;\n var currentImageIndex = 0;\n var totalImages = images.length;\n if (this.currentViewType === 'desktop' || this.currentViewType === 'mobile') {\n this.map.showModal(\"\\n <div class=\\\"waygo-map-modal-content photo-modal\\\">\\n <button class=\\\"modal-close-button\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n </svg>\\n </button>\\n \\n <div class=\\\"modal-counter\\\">\\n <span id=\\\"imageCounter\\\">\".concat(currentImageIndex + 1, \" / \").concat(totalImages, \"</span>\\n </div>\\n \\n <div class=\\\"modal-image-container\\\">\\n <button id=\\\"prevButton\\\" class=\\\"modal-nav-button prev\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M15.75 19.5L8.25 12l7.5-7.5\\\" />\\n </svg>\\n </button>\\n \\n <div class=\\\"modal-image-wrapper\\\">\\n <img id=\\\"modalImage\\\" src=\\\"\").concat(images[currentImageIndex], \"\\\" class=\\\"modal-image\\\">\\n </div>\\n \\n <button id=\\\"nextButton\\\" class=\\\"modal-nav-button next\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M8.25 4.5l7.5 7.5-7.5 7.5\\\" />\\n </svg>\\n </button>\\n </div>\\n </div>\\n \"));\n\n // Add close button listener\n var closeButton = document.querySelector('.modal-close-button');\n closeButton.addEventListener('click', function () {\n return _this5.map.hideModal();\n });\n } else {\n this.map.showModal(\"\\n <div class=\\\"waygo-map-modal-content photo-modal\\\">\\n <img src=\\\"\".concat(images[currentImageIndex], \"\\\" class=\\\"modal-image\\\">\\n </div>\\n \"));\n }\n\n // Add event listeners after modal is shown\n var modalImage = document.getElementById('modalImage');\n var prevButton = document.getElementById('prevButton');\n var nextButton = document.getElementById('nextButton');\n var imageCounter = document.getElementById('imageCounter');\n prevButton.onclick = function () {\n currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;\n modalImage.src = images[currentImageIndex];\n imageCounter.textContent = \"\".concat(currentImageIndex + 1, \" / \").concat(totalImages);\n };\n nextButton.onclick = function () {\n currentImageIndex = (currentImageIndex + 1) % images.length;\n modalImage.src = images[currentImageIndex];\n imageCounter.textContent = \"\".concat(currentImageIndex + 1, \" / \").concat(totalImages);\n };\n }\n }, {\n key: \"_updateContentViews\",\n value: function _updateContentViews() {\n this._clearViews();\n this._render();\n }\n }, {\n key: \"hide\",\n value: function hide() {\n this.container.scrollTop = 0;\n if (!this.container) {\n return;\n }\n this.container.style.display = 'none';\n }\n }, {\n key: \"scrollTo\",\n value: function scrollTo(targetHeight) {\n var _this6 = this;\n var animation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var animationOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var defaultAnimationOptions = {\n duration: 150,\n easing: 'easeInOut'\n };\n var options = _objectSpread(_objectSpread({}, defaultAnimationOptions), animationOptions);\n var startHeight = this.currentTop;\n var distance = targetHeight - startHeight;\n var startTime = null;\n\n // Easing functions\n var easingFunctions = {\n linear: function linear(t) {\n return t;\n },\n easeInOut: function easeInOut(t) {\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n },\n easeIn: function easeIn(t) {\n return t * t;\n },\n easeOut: function easeOut(t) {\n return t * (2 - t);\n }\n };\n\n // Choose easing function\n var easingFunction = easingFunctions[options.easing] || easingFunctions.easeInOut;\n var duration = options.duration;\n return new Promise(function (resolve) {\n if (!animation) {\n _this6.currentTop = targetHeight; // Set the target height immediately\n _this6.container.style.top = \"\".concat(_this6.currentTop, \"px\");\n _this6.container.style.height = \"calc(100vh - \".concat(_this6.currentTop, \"px)\"); // Update height\n resolve();\n return; // Exit the function early\n }\n\n // Animate function using requestAnimationFrame\n var _animate = function animate(currentTime) {\n if (startTime === null) startTime = currentTime;\n var elapsed = currentTime - startTime;\n var progress = Math.min(elapsed / duration, 1); // Ensure progress doesn't exceed 1\n\n // Calculate current top position based on easing function\n var easedProgress = easingFunction(progress);\n var newHeight = startHeight + easedProgress * distance;\n\n // Update the container's top position and height\n _this6.currentTop = newHeight;\n _this6.container.style.top = \"\".concat(_this6.currentTop, \"px\");\n _this6.container.style.height = \"calc(100vh - \".concat(_this6.currentTop, \"px)\");\n if (progress < 1) {\n requestAnimationFrame(_animate); // Continue animating\n } else {\n resolve();\n }\n };\n\n // Start the animation\n requestAnimationFrame(_animate);\n });\n\n // if (!animation) {\n // this.currentTop = targetHeight; // Set the target height immediately\n // this.container.style.top = `${this.currentTop}px`;\n // this.container.style.height = `calc(100vh - ${this.currentTop}px)`; // Update height\n // return; // Exit the function early\n // }\n\n // // Animate function using requestAnimationFrame\n // const animate = (currentTime) => {\n // if (startTime === null) startTime = currentTime;\n // const elapsed = currentTime - startTime;\n // const progress = Math.min(elapsed / duration, 1); // Ensure progress doesn't exceed 1\n\n // // Calculate current top position based on easing function\n // const easedProgress = easingFunction(progress);\n // const newHeight = startHeight + easedProgress * distance;\n\n // // Update the container's top position and height\n // this.currentTop = newHeight;\n // this.container.style.top = `${this.currentTop}px`;\n // this.container.style.height = `calc(100vh - ${this.currentTop}px)`;\n\n // if (progress < 1) {\n // requestAnimationFrame(animate); // Continue animating\n // }\n // };\n\n // // Start the animation\n // requestAnimationFrame(animate);\n }\n }, {\n key: \"_resetScroll\",\n value: function _resetScroll() {\n var _this7 = this;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var height = this.map.mapContainer.offsetHeight;\n if (this.currentTop < rect.top) {\n this.scrollTo(rect.bottom);\n }\n var viableKeys = this.contentPlacementView.findViableAdditionalData(this.currentContentPlacement);\n var viableKeyCount = Object.keys(viableKeys).length;\n var childCount = Object.keys(this.currentContentPlacement.children).length;\n var pixelHeight = height * (1 - this.scrollConfiguration.initialHeight);\n if (viableKeyCount === 0 && childCount === 0) {\n setTimeout(function () {\n if (_this7.contentPlacementView && _this7.contentPlacementView.contentPlacementHeader) {\n var headerElem = _this7.contentPlacementView.header;\n var headerHeight = headerElem.offsetHeight;\n pixelHeight = height - headerHeight - 20;\n }\n _this7.scrollTo(pixelHeight, true);\n }, 50); // Delay by 100 milliseconds\n } else {\n this.scrollTo(pixelHeight, true);\n }\n }\n }, {\n key: \"_scrollToBottom\",\n value: function _scrollToBottom() {\n var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var animationOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var rect = this.map.mapContainer.getBoundingClientRect();\n return this.scrollTo(rect.bottom, animate, animationOptions);\n }\n }, {\n key: \"scrollToMin\",\n value: function scrollToMin() {\n var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var rect = this.map.mapContainer.getBoundingClientRect();\n this.scrollTo(rect.bottom - this.scrollConfiguration.minDistFromBottom, animate);\n }\n }, {\n key: \"_render\",\n value: function _render() {\n if (this.contentPlacementIds.length === 0 || this.currentContentPlacement === null) return;\n\n // if (this.currentViewType === 'mobile') {\n // this._resetScroll();\n // }\n this.contentPlacementView = new _components_ContentPlacementView_ContentDetails__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n var isSelectionMode = this.map.getCurrentState() === 'selection';\n var isKioskMode = this.map.location !== null; // Add this line\n this.contentPlacementView.updateView(this.currentContentPlacement, isSelectionMode, isKioskMode); // Pass isKioskMode\n this.contentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));\n this.contentPlacementView.on('selectDirectionsButton', this._handleSelectDirectionsButton.bind(this));\n this.contentPlacementView.on('selectShareButton', this._handleSelectShareButton.bind(this));\n this.contentPlacementView.on('selectPhotos', this._handleSelectPhotos.bind(this));\n this._initialize();\n if (this.currentViewType === 'mobile') {\n this._resetScroll();\n }\n }\n }, {\n key: \"_handleSelectionFeatureDeselectedOptimistic\",\n value: function _handleSelectionFeatureDeselectedOptimistic(data) {\n var placementId = data.placementId;\n console.log('🔵 Handling optimistic deselection for placement:', placementId);\n\n // Remove optimistic item from side panel\n if (this.selectionContentView) {\n this.selectionContentView.removeOptimisticItem(placementId);\n }\n }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ContentPlacementControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/ContentPlacementControl.js?");
584
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_ContentPlacementView_ContentDetails__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/ContentPlacementView/ContentDetails */ \"./src/components/ContentPlacementView/ContentDetails.js\");\n/* harmony import */ var _components_SelectionView_SelectionContentView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/SelectionView/SelectionContentView */ \"./src/components/SelectionView/SelectionContentView.js\");\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\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); }\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 _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ContentPlacementControl = /*#__PURE__*/function (_Control) {\n function ContentPlacementControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, ContentPlacementControl);\n _this = _callSuper(this, ContentPlacementControl, [options]);\n _this.map = null;\n _this.contentPlacementIds = [];\n _this.currentContentPlacement = null;\n _this.contentPlacementView = null;\n _this.selectionContentView = null;\n _this.selectedPlacements = [];\n _this.currentTop = window.innerHeight;\n _this.startingY = 0;\n _this.scrollConfiguration = {\n initialHeight: 0.5,\n // percent of the map container height\n minDistFromBottom: 110 // 185 // in px\n };\n _this.isDragging = false;\n _this.isAtTop = false;\n _this.velocity = 0;\n _this.decelerationFactor = 0.95;\n _this.minVelocity = 0.1;\n return _this;\n }\n _inherits(ContentPlacementControl, _Control);\n return _createClass(ContentPlacementControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'content-details-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.hide();\n return this.container;\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(ContentPlacementControl, \"onRemove\", this, 3)([]);\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('state:setup', this._handleSetupState.bind(this));\n this.map.on('state:selection', this._handleSelectionState.bind(this));\n this.map.on('selection:featureSelected', this._handleSelectionFeatureSelected.bind(this));\n this.map.on('selection:featureDeselected', this._handleSelectionFeatureDeselected.bind(this));\n this.map.on('selection:featureSelectedOptimistic', this._handleSelectionFeatureSelectedOptimistic.bind(this));\n this.map.on('selection:changed', this._handleSelectionChanged.bind(this));\n this.map.on('initiate:back', this._handleMapInitiateBack.bind(this));\n this.map.map.on('mousedown', this._handleMapFocus.bind(this));\n this.map.map.on('touchstart', this._handleMapFocus.bind(this));\n this.container.addEventListener('mousedown', function (e) {\n return e.stopPropagation();\n });\n this.container.addEventListener('click', function (e) {\n return e.stopPropagation();\n });\n this.container.addEventListener('dblclick', function (e) {\n return e.stopPropagation();\n });\n // this.container.addEventListener('touchstart', (e) => e.stopPropagation());\n\n this.container.addEventListener('touchstart', this.handleTouchStart.bind(this));\n this.container.addEventListener('touchmove', this.handleTouchMove.bind(this));\n this.container.addEventListener('touchend', this.handleTouchEnd.bind(this));\n this.container.addEventListener('wheel', this.handleWheelScroll.bind(this));\n\n // Add loading state event listeners\n // this.map.on('loading:start', this._handleLoadingStart.bind(this));\n // this.map.on('loading:end', this._handleLoadingEnd.bind(this));\n }\n }, {\n key: \"_handleSelectionFeatureSelectedOptimistic\",\n value:\n // _handleLoadingStart(data) {\n // const { type } = data;\n\n // if (type === 'content') {\n // // Show loading indicator for content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView.showLoading();\n // }\n // } else if (type === 'directions') {\n // // Show loading indicator for directions\n // if (this.contentPlacementView) {\n // this.contentPlacementView.showDirectionsLoading();\n // }\n // }\n // }\n\n // _handleLoadingEnd(data) {\n // const { type } = data;\n\n // if (type === 'content') {\n // // Hide loading indicator for content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView.hideLoading();\n // }\n // } else if (type === 'directions') {\n // // Hide loading indicator for directions\n // if (this.contentPlacementView) {\n // this.contentPlacementView.hideDirectionsLoading();\n // }\n // }\n // }\n\n // Add new method to handle optimistic selection\n function _handleSelectionFeatureSelectedOptimistic(data) {\n var feature = data.feature;\n var placementId = feature.properties.placement_id;\n\n // SINGLE-SELECT MODE: Clear everything immediately\n if (!this.map.multiSelect) {\n this.selectedPlacements = [];\n\n // Clear the side panel completely\n if (this.selectionContentView) {\n this.selectionContentView.contentItems = [];\n this.selectionContentView._render();\n }\n }\n\n // Add optimistic item to selection view immediately\n if (this.selectionContentView) {\n this.selectionContentView.addOptimisticItem(feature);\n }\n\n // Show the panel\n this.show();\n }\n\n // Add new method to handle optimistic deselection (on error)\n }, {\n key: \"_handleMapFocus\",\n value: function _handleMapFocus(e) {\n if (this.currentViewType === 'desktop') return;\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length === 0) {\n this.scrollToMin(true);\n }\n }\n }, {\n key: \"handleTouchStart\",\n value: function handleTouchStart(event) {\n event.stopPropagation();\n this.startingY = event.touches[0].clientY;\n this.isDragging = true;\n this.velocity = 0;\n }\n }, {\n key: \"handleScrolling\",\n value: function handleScrolling(scrollAmount) {\n var element = this.contentPlacementView.getElement();\n var elementHeight = element.offsetHeight;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var containerBottom = rect.bottom;\n var newTop = null;\n if (scrollAmount <= 0) {\n newTop = Math.max(containerBottom - elementHeight - rect.top, this.currentTop + scrollAmount);\n } else if (scrollAmount > 0) {\n newTop = Math.min(containerBottom - this.scrollConfiguration.minDistFromBottom - rect.top, this.currentTop + scrollAmount);\n }\n this.scrollTo(newTop);\n }\n }, {\n key: \"handleTouchMove\",\n value: function handleTouchMove(event) {\n if (this.currentViewType === 'desktop') return;\n if (!this.isDragging) return;\n var touchY = event.touches[0].clientY;\n var scrollAmount = -1 * (this.startingY - touchY);\n this.velocity = scrollAmount;\n this.handleScrolling(scrollAmount);\n this.startingY = touchY;\n }\n }, {\n key: \"handleTouchEnd\",\n value: function handleTouchEnd() {\n this.isDragging = false;\n this._applyInertia();\n }\n }, {\n key: \"_applyInertia\",\n value: function _applyInertia() {\n var _this2 = this;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var element = this.contentPlacementView.getElement();\n var elementHeight = element.offsetHeight;\n var containerBottom = rect.bottom;\n var upperLimit = containerBottom - elementHeight - rect.top; // Upper scroll boundary\n var lowerLimit = containerBottom - this.scrollConfiguration.minDistFromBottom - rect.top;\n var initialVelocity = this.velocity;\n var duration = 400; // Duration of inertia in milliseconds (tweak this value)\n var startTime = performance.now(); // Start time of the inertia\n\n var _inertia = function inertia() {\n var currentTime = performance.now();\n var elapsedTime = currentTime - startTime;\n if (elapsedTime >= duration || Math.abs(_this2.velocity) < _this2.minVelocity) {\n _this2.velocity = 0;\n return;\n }\n ; // Stop when velocity is too low\n\n var progress = elapsedTime / duration; // Normalize time to [0, 1]\n var easingFactor = 1 - Math.pow(1 - progress, 2);\n _this2.velocity = initialVelocity * (1 - easingFactor);\n var newTop = _this2.currentTop + _this2.velocity;\n if (newTop <= upperLimit) {\n _this2.scrollTo(upperLimit);\n _this2.velocity = 0; // Stop inertia\n return;\n } else if (newTop >= lowerLimit) {\n _this2.scrollTo(lowerLimit);\n _this2.velocity = 0; // Stop inertia\n return;\n }\n\n // this.velocity *= this.decelerationFactor; // Apply deceleration\n // const easingFactor = Math.max(0.1, 1 - time / 100); // Easing factor decreases over time (clamped at 0.1)\n // this.velocity *= this.decelerationFactor * easingFactor;\n\n _this2.scrollTo(newTop); // Update position\n\n // time++;\n requestAnimationFrame(_inertia);\n };\n _inertia();\n }\n }, {\n key: \"handleWheelScroll\",\n value: function handleWheelScroll(event) {\n if (this.currentViewType === 'desktop') return;\n var scrollAmount = -event.deltaY;\n this.handleScrolling(scrollAmount);\n }\n\n // handleScroll() {\n // if (this.container.classList.contains('mobile-view')) {\n // // Get current scroll position\n // const scrollAmount = this.container.scrollTop;\n\n // // Adjust bottom position based on scroll amount\n // // As the user scrolls up, the container moves up (increase the bottom offset)\n // this.container.style.bottom = `${Math.min(45 + scrollAmount / 10, 100)}%`;\n\n // // If you want the container to reset to the bottom when done scrolling, add this:\n // clearTimeout(this.isScrolling);\n // this.isScrolling = setTimeout(() => {\n // this.container.style.bottom = '0px'; // Reset position when scrolling stops\n // }, 200);\n // }\n // }\n }, {\n key: \"_renderDesktopView\",\n value: function _renderDesktopView() {\n if (!this.contentPlacementView) {\n return;\n }\n var element = this.contentPlacementView.getElement();\n this.container.appendChild(element);\n this.container.classList.remove('mobile-view');\n this.container.classList.add('desktop-view');\n }\n }, {\n key: \"_renderMobileView\",\n value: function _renderMobileView() {\n if (!this.contentPlacementView) {\n return;\n }\n var element = this.contentPlacementView.getElement();\n this.container.appendChild(element);\n this.container.classList.remove('desktop-view');\n this.container.classList.add('mobile-view');\n }\n }, {\n key: \"_handleMapInitiateBack\",\n value: function _handleMapInitiateBack() {\n var currentState = this.map._stateCoordinator.state;\n if (currentState === 'selectedContent') {\n if (this.contentPlacementIds.length === 0) return;else if (this.contentPlacementIds.length === 1) {\n var stateHistory = this.map._stateCoordinator.stateHistory;\n var previousMapState = stateHistory[stateHistory.length - 2];\n stateHistory.pop();\n stateHistory.pop();\n if (previousMapState === 'search') {\n this.map.initiateSetToSearchState();\n } else {\n this.map.setToDefaultState();\n }\n } else {\n this.contentPlacementIds.pop();\n this.map.setToSelectedContentState(this.contentPlacementIds);\n }\n } else if (currentState === 'directions') {\n this.map.setToSelectedContentState(this.contentPlacementIds);\n } else if (currentState === 'selection') {\n // In selection state, hide the content panel but stay in selection state\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n }\n }\n }, {\n key: \"_handleSelectChildContentPlacement\",\n value: function _handleSelectChildContentPlacement(data) {\n var placementId = data.placementId;\n this.contentPlacementIds.push(placementId);\n this.map.setToSelectedContentState(this.contentPlacementIds);\n }\n }, {\n key: \"_handleDefaultState\",\n value: function () {\n var _handleDefaultState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n this.container.classList.remove('selection-mode');\n // this.hide();\n // this.contentPlacementIds = [];\n // this.currentContentPlacement = null;\n // this._clearViews();\n if (!(this.currentViewType === 'mobile')) {\n _context.next = 4;\n break;\n }\n _context.next = 4;\n return this._scrollToBottom(true, {\n duration: 50\n });\n case 4:\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n case 8:\n case \"end\":\n return _context.stop();\n }\n }, _callee, this);\n }));\n function _handleDefaultState() {\n return _handleDefaultState2.apply(this, arguments);\n }\n return _handleDefaultState;\n }()\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(_) {\n this.hide();\n this.contentPlacementIds = [];\n this.currentContentPlacement = null;\n this._clearViews();\n if (this.currentViewType === 'mobile') {\n this._scrollToBottom();\n }\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n this.contentPlacementIds = contentPlacementIds;\n this.currentContentPlacement = selectedContentPlacement;\n this._updateContentViews();\n this.show();\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(_) {\n this.hide();\n }\n }, {\n key: \"_handleSetupState\",\n value: function _handleSetupState() {\n this.hide();\n }\n }, {\n key: \"_handleSelectionState\",\n value: function _handleSelectionState(data) {\n // In selection mode, prepare for selection confirmation workflow\n // Initialize empty selection view\n this.selectedPlacements = [];\n this._clearViews();\n this.map.clearSelectionLayers();\n\n // Show the panel even with no selections to guide users\n this._updateSelectionView();\n this.show();\n }\n\n // _clearViews() {\n // // Clear existing content placement view\n // if (this.contentPlacementView) {\n // this.contentPlacementView = null;\n // }\n\n // // Clear existing selection content view\n // if (this.selectionContentView) {\n // this.selectionContentView = null;\n // }\n\n // // Clear container\n // this.container.innerHTML = '';\n // }\n\n // _handleSelectionFeatureSelected(data) {\n // const { feature, contentPlacement } = data;\n\n // // Add to selected placements if not already present\n // const alreadySelected = this.selectedPlacements.some(\n // p => p.placement_id === contentPlacement.placement_id\n // );\n\n // if (!alreadySelected) {\n // this.selectedPlacements.push(contentPlacement);\n // }\n\n // // Update the selection view\n // this._updateSelectionView();\n // this.show();\n // }\n }, {\n key: \"_handleSelectionFeatureSelected\",\n value: function _handleSelectionFeatureSelected(data) {\n var feature = data.feature,\n contentPlacement = data.contentPlacement;\n\n // Check if already selected\n var alreadySelected = this.selectedPlacements.some(function (p) {\n return p.placement_id === contentPlacement.placement_id;\n });\n if (!alreadySelected) {\n // Add to map's confirmed selection layers\n var clearExisting = !this.map.multiSelect;\n this.map.addConfirmedSelectionFeature(feature, clearExisting);\n\n // If single-select mode, clear our local array first\n if (!this.map.multiSelect) {\n this.selectedPlacements = [];\n }\n\n // Add to selected placements\n this.selectedPlacements.push(contentPlacement);\n\n // Update optimistic item with real data\n if (this.selectionContentView) {\n this.selectionContentView.updateOptimisticItem(contentPlacement.placement_id, contentPlacement);\n }\n }\n\n // Update the selection view\n this._updateSelectionView();\n this.show();\n }\n }, {\n key: \"_handleSelectionFeatureDeselected\",\n value: function _handleSelectionFeatureDeselected(data) {\n var feature = data.feature,\n placementId = data.placementId;\n\n // Remove from map's confirmed selection layers\n this.map.removeConfirmedSelectionFeature(placementId);\n\n // Remove from selected placements\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n\n // Update the view\n this._updateSelectionView();\n\n // If no more selections, hide the control\n // if (this.selectedPlacements.length === 0) {\n // this.hide();\n // }\n }\n }, {\n key: \"_updateSelectionView\",\n value: function _updateSelectionView() {\n var _this3 = this;\n // Clear existing content\n this.container.innerHTML = '';\n\n // Ensure the container has the proper view classes\n if (this.currentViewType === 'desktop') {\n this.container.classList.add('desktop-view');\n this.container.classList.remove('mobile-view');\n } else {\n this.container.classList.add('mobile-view');\n this.container.classList.remove('desktop-view');\n }\n\n // Create selection content view if it doesn't exist\n if (!this.selectionContentView) {\n this.selectionContentView = new _components_SelectionView_SelectionContentView__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n\n // Set up event listeners\n this.selectionContentView.on('deselect:feature', function (data) {\n _this3._handleDeselectFeature(data);\n });\n this.selectionContentView.on('selectPhotos', function (data) {\n _this3._handleSelectPhotos(data);\n });\n }\n\n // Update the selection view with current selections\n this.selectionContentView.updateSelections(this.selectedPlacements);\n\n // Add the selection view directly to the main container\n this.container.appendChild(this.selectionContentView.getElement());\n }\n }, {\n key: \"_handleDeselectFeature\",\n value: function _handleDeselectFeature(data) {\n var placementId = data.placementId;\n\n // We need to find the feature in confirmed selection to get its feature_id\n var confirmedFeatures = this.map.getConfirmedSelectionFeatures();\n var featureToRemove = confirmedFeatures.find(function (f) {\n return f.properties.placement_id === placementId || f.properties.feature_id === placementId;\n });\n if (featureToRemove) {\n var featureId = featureToRemove.properties.feature_id;\n\n // Remove from map's confirmed selection layers using feature_id\n this.map.removeConfirmedSelectionFeature(featureId);\n\n // Remove from selected placements\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n\n // Update the view\n this._updateSelectionView();\n } else {\n console.warn('⚠️ Feature not found in confirmed selection for deselection:', placementId);\n }\n }\n }, {\n key: \"_handleSelectionChanged\",\n value: function _handleSelectionChanged(data) {\n var selection = data.selection;\n\n // Update selected placements based on current map selection\n // This ensures the view stays in sync with map selections\n this._updateSelectionView();\n }\n }, {\n key: \"_handleSelectDirectionsButton\",\n value: function () {\n var _handleSelectDirectionsButton2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {\n var placementId;\n return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n placementId = data.placementId;\n _context2.next = 3;\n return this.map.setToDirectionsState(null, placementId);\n case 3:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2, this);\n }));\n function _handleSelectDirectionsButton(_x) {\n return _handleSelectDirectionsButton2.apply(this, arguments);\n }\n return _handleSelectDirectionsButton;\n }()\n }, {\n key: \"_handleSelectShareButton\",\n value: function () {\n var _handleSelectShareButton2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {\n var _this4 = this;\n var placementId, floor, accountId, mapId, mapViewId, center, longitude, latitude, pitch, bearing, zoom, textToCopy;\n return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n placementId = data.placementId;\n floor = this.map.getCurrentFloor();\n accountId = this.map.mapData.account_id;\n mapId = this.map.mapData.map_id;\n mapViewId = this.map.mapData.map_view_id;\n center = this.map.map.getCenter(); // Returns a LngLat object\n longitude = center.lng.toFixed(6);\n latitude = center.lat.toFixed(6);\n pitch = this.map.map.getPitch().toFixed(2); // Returns the pitch (tilt angle)\n bearing = this.map.map.getBearing().toFixed(2); // Returns the bearing (rotation angle)\n zoom = this.map.map.getZoom().toFixed(2);\n textToCopy = \"https://maps.waygomaps.com/\".concat(mapId, \"/\").concat(mapViewId, \"/selected-content/\").concat(placementId, \"/f\").concat(floor, \"@\").concat(longitude, \",\").concat(latitude, \",\").concat(zoom, \",\").concat(pitch, \",\").concat(bearing);\n navigator.clipboard.writeText(textToCopy).then(function () {\n _this4.contentPlacementView.showCopyPopup();\n })[\"catch\"](function (err) {\n return console.error('Failed to copy text:', err);\n });\n case 13:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3, this);\n }));\n function _handleSelectShareButton(_x2) {\n return _handleSelectShareButton2.apply(this, arguments);\n }\n return _handleSelectShareButton;\n }()\n }, {\n key: \"_handleSelectPhotos\",\n value: function _handleSelectPhotos(data) {\n var _this5 = this;\n var placementId = data.placementId,\n images = data.images;\n var currentImageIndex = 0;\n var totalImages = images.length;\n if (this.currentViewType === 'desktop' || this.currentViewType === 'mobile') {\n this.map.showModal(\"\\n <div class=\\\"waygo-map-modal-content photo-modal\\\">\\n <button class=\\\"modal-close-button\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M6 18L18 6M6 6l12 12\\\" />\\n </svg>\\n </button>\\n \\n <div class=\\\"modal-counter\\\">\\n <span id=\\\"imageCounter\\\">\".concat(currentImageIndex + 1, \" / \").concat(totalImages, \"</span>\\n </div>\\n \\n <div class=\\\"modal-image-container\\\">\\n <button id=\\\"prevButton\\\" class=\\\"modal-nav-button prev\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M15.75 19.5L8.25 12l7.5-7.5\\\" />\\n </svg>\\n </button>\\n \\n <div class=\\\"modal-image-wrapper\\\">\\n <img id=\\\"modalImage\\\" src=\\\"\").concat(images[currentImageIndex], \"\\\" class=\\\"modal-image\\\">\\n </div>\\n \\n <button id=\\\"nextButton\\\" class=\\\"modal-nav-button next\\\">\\n <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\" stroke-width=\\\"1.5\\\" stroke=\\\"currentColor\\\">\\n <path stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" d=\\\"M8.25 4.5l7.5 7.5-7.5 7.5\\\" />\\n </svg>\\n </button>\\n </div>\\n </div>\\n \"));\n\n // Add close button listener\n var closeButton = document.querySelector('.modal-close-button');\n closeButton.addEventListener('click', function () {\n return _this5.map.hideModal();\n });\n } else {\n this.map.showModal(\"\\n <div class=\\\"waygo-map-modal-content photo-modal\\\">\\n <img src=\\\"\".concat(images[currentImageIndex], \"\\\" class=\\\"modal-image\\\">\\n </div>\\n \"));\n }\n\n // Add event listeners after modal is shown\n var modalImage = document.getElementById('modalImage');\n var prevButton = document.getElementById('prevButton');\n var nextButton = document.getElementById('nextButton');\n var imageCounter = document.getElementById('imageCounter');\n prevButton.onclick = function () {\n currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;\n modalImage.src = images[currentImageIndex];\n imageCounter.textContent = \"\".concat(currentImageIndex + 1, \" / \").concat(totalImages);\n };\n nextButton.onclick = function () {\n currentImageIndex = (currentImageIndex + 1) % images.length;\n modalImage.src = images[currentImageIndex];\n imageCounter.textContent = \"\".concat(currentImageIndex + 1, \" / \").concat(totalImages);\n };\n }\n }, {\n key: \"_updateContentViews\",\n value: function _updateContentViews() {\n this._clearViews();\n this._render();\n }\n }, {\n key: \"hide\",\n value: function hide() {\n this.container.scrollTop = 0;\n if (!this.container) {\n return;\n }\n this.container.style.display = 'none';\n }\n }, {\n key: \"scrollTo\",\n value: function scrollTo(targetHeight) {\n var _this6 = this;\n var animation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var animationOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var defaultAnimationOptions = {\n duration: 150,\n easing: 'easeInOut'\n };\n var options = _objectSpread(_objectSpread({}, defaultAnimationOptions), animationOptions);\n var startHeight = this.currentTop;\n var distance = targetHeight - startHeight;\n var startTime = null;\n\n // Easing functions\n var easingFunctions = {\n linear: function linear(t) {\n return t;\n },\n easeInOut: function easeInOut(t) {\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n },\n easeIn: function easeIn(t) {\n return t * t;\n },\n easeOut: function easeOut(t) {\n return t * (2 - t);\n }\n };\n\n // Choose easing function\n var easingFunction = easingFunctions[options.easing] || easingFunctions.easeInOut;\n var duration = options.duration;\n return new Promise(function (resolve) {\n if (!animation) {\n _this6.currentTop = targetHeight; // Set the target height immediately\n _this6.container.style.top = \"\".concat(_this6.currentTop, \"px\");\n _this6.container.style.height = \"calc(100vh - \".concat(_this6.currentTop, \"px)\"); // Update height\n resolve();\n return; // Exit the function early\n }\n\n // Animate function using requestAnimationFrame\n var _animate = function animate(currentTime) {\n if (startTime === null) startTime = currentTime;\n var elapsed = currentTime - startTime;\n var progress = Math.min(elapsed / duration, 1); // Ensure progress doesn't exceed 1\n\n // Calculate current top position based on easing function\n var easedProgress = easingFunction(progress);\n var newHeight = startHeight + easedProgress * distance;\n\n // Update the container's top position and height\n _this6.currentTop = newHeight;\n _this6.container.style.top = \"\".concat(_this6.currentTop, \"px\");\n _this6.container.style.height = \"calc(100vh - \".concat(_this6.currentTop, \"px)\");\n if (progress < 1) {\n requestAnimationFrame(_animate); // Continue animating\n } else {\n resolve();\n }\n };\n\n // Start the animation\n requestAnimationFrame(_animate);\n });\n\n // if (!animation) {\n // this.currentTop = targetHeight; // Set the target height immediately\n // this.container.style.top = `${this.currentTop}px`;\n // this.container.style.height = `calc(100vh - ${this.currentTop}px)`; // Update height\n // return; // Exit the function early\n // }\n\n // // Animate function using requestAnimationFrame\n // const animate = (currentTime) => {\n // if (startTime === null) startTime = currentTime;\n // const elapsed = currentTime - startTime;\n // const progress = Math.min(elapsed / duration, 1); // Ensure progress doesn't exceed 1\n\n // // Calculate current top position based on easing function\n // const easedProgress = easingFunction(progress);\n // const newHeight = startHeight + easedProgress * distance;\n\n // // Update the container's top position and height\n // this.currentTop = newHeight;\n // this.container.style.top = `${this.currentTop}px`;\n // this.container.style.height = `calc(100vh - ${this.currentTop}px)`;\n\n // if (progress < 1) {\n // requestAnimationFrame(animate); // Continue animating\n // }\n // };\n\n // // Start the animation\n // requestAnimationFrame(animate);\n }\n }, {\n key: \"_resetScroll\",\n value: function _resetScroll() {\n var _this7 = this;\n var rect = this.map.mapContainer.getBoundingClientRect();\n var height = this.map.mapContainer.offsetHeight;\n if (this.currentTop < rect.top) {\n this.scrollTo(rect.bottom);\n }\n var viableKeys = this.contentPlacementView.findViableAdditionalData(this.currentContentPlacement);\n var viableKeyCount = Object.keys(viableKeys).length;\n var childCount = Object.keys(this.currentContentPlacement.children).length;\n var pixelHeight = height * (1 - this.scrollConfiguration.initialHeight);\n if (viableKeyCount === 0 && childCount === 0) {\n setTimeout(function () {\n if (_this7.contentPlacementView && _this7.contentPlacementView.contentPlacementHeader) {\n var headerElem = _this7.contentPlacementView.header;\n var headerHeight = headerElem.offsetHeight;\n pixelHeight = height - headerHeight - 20;\n }\n _this7.scrollTo(pixelHeight, true);\n }, 50); // Delay by 100 milliseconds\n } else {\n this.scrollTo(pixelHeight, true);\n }\n }\n }, {\n key: \"_scrollToBottom\",\n value: function _scrollToBottom() {\n var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var animationOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var rect = this.map.mapContainer.getBoundingClientRect();\n return this.scrollTo(rect.bottom, animate, animationOptions);\n }\n }, {\n key: \"scrollToMin\",\n value: function scrollToMin() {\n var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var rect = this.map.mapContainer.getBoundingClientRect();\n this.scrollTo(rect.bottom - this.scrollConfiguration.minDistFromBottom, animate);\n }\n }, {\n key: \"_render\",\n value: function _render() {\n if (this.contentPlacementIds.length === 0 || this.currentContentPlacement === null) return;\n\n // if (this.currentViewType === 'mobile') {\n // this._resetScroll();\n // }\n this.contentPlacementView = new _components_ContentPlacementView_ContentDetails__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n var isSelectionMode = this.map.getCurrentState() === 'selection';\n var isKioskMode = this.map.location !== null; // Add this line\n this.contentPlacementView.updateView(this.currentContentPlacement, isSelectionMode, isKioskMode); // Pass isKioskMode\n this.contentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));\n this.contentPlacementView.on('selectDirectionsButton', this._handleSelectDirectionsButton.bind(this));\n this.contentPlacementView.on('selectShareButton', this._handleSelectShareButton.bind(this));\n this.contentPlacementView.on('selectPhotos', this._handleSelectPhotos.bind(this));\n this._initialize();\n if (this.currentViewType === 'mobile') {\n this._resetScroll();\n }\n }\n }, {\n key: \"_handleSelectionFeatureDeselectedOptimistic\",\n value: function _handleSelectionFeatureDeselectedOptimistic(data) {\n var placementId = data.placementId;\n\n // Remove optimistic item from side panel\n if (this.selectionContentView) {\n this.selectionContentView.removeOptimisticItem(placementId);\n }\n }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ContentPlacementControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/ContentPlacementControl.js?");
585
585
 
586
586
  /***/ }),
587
587
 
@@ -614,7 +614,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
614
614
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
615
615
 
616
616
  "use strict";
617
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var webpack__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! webpack */ \"./node_modules/webpack/lib/index.js\");\n/* harmony import */ var webpack__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(webpack__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\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); }\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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure 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 _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; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar InteractionControl = /*#__PURE__*/function (_Control) {\n function InteractionControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, InteractionControl);\n _this = _callSuper(this, InteractionControl, [options]);\n _this.map = null;\n _this.previouslySelectedFeature = null;\n _this.previouslySelectedIcon = null;\n _this.previouslySelectedTextColor = null;\n _this.previouslySelectedTextOffset = null;\n _this.previouslyHoveredFeature = null;\n _this.originalTextColor = null;\n _this.textColorReference = {};\n _this.currentView = null; // Can be set to 'desktop' or 'mobile'\n\n _this.selectedTextColor = '#BE2E28';\n _this.interactionEnabled = true;\n _this.selectionCriteria = null;\n _this.originalPaintProperties = {}; // Store original paint properties for selection state\n _this.selectionModeExpressions = {}; // Store selection mode color expressions for hover persistence\n _this.selectionHoverColor = '#4A90E2'; // Color for hover highlighting in selection mode\n _this.currentHoveredLayerId = null; // Track currently hovered layer in selection mode\n _this.currentHoveredFeatureId = null; // Track currently hovered feature in selection mode\n _this.selectionHoverHandler = null; // Reference to mousemove handler for selection mode\n return _this;\n }\n _inherits(InteractionControl, _Control);\n return _createClass(InteractionControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'interaction-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.createHighlightedContentLayer();\n this.createSelectedContentLayer();\n this.storeTextColorReferences();\n // this.applyHoverEffectToAllSymbolLayers();\n\n return this.container;\n }\n }, {\n key: \"_initialize\",\n value: function _initialize() {\n var containerWidth = this.map.mapContainer.offsetWidth;\n this._configureView(containerWidth);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(InteractionControl, \"onRemove\", this, 3)([]);\n }\n\n // _attachResizeListener() {\n // window.addEventListener('resize', () => {\n // const newWidth = this.map.mapContainer.offsetWidth;\n // this._configureView(newWidth);\n // });\n // }\n }, {\n key: \"_configureView\",\n value: function _configureView(width) {\n if (width > 767) {\n this._setViewForDesktop();\n } else {\n this._setViewForMobile();\n }\n }\n }, {\n key: \"_setViewForDesktop\",\n value: function _setViewForDesktop() {\n this.currentView = 'desktop';\n }\n }, {\n key: \"_setViewForMobile\",\n value: function _setViewForMobile() {\n this.currentView = 'mobile';\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n var _this2 = this;\n this.map.map.on('styleimagemissing', function (e) {\n var missingImage = e.id;\n console.warn(\"Image \\\"\".concat(missingImage, \"\\\" could not be loaded.\"));\n });\n this.map.map.on('click', function (e) {\n _this2._handleClick(e);\n });\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('state:setup', this._handleSetupState.bind(this));\n this.map.on('state:selection', this._handleSelectionState.bind(this));\n this.map.on('additionalSearchResults', this._handleAdditionalSearch.bind(this));\n this.map.on('hoverSearchResult', this._handleHoverSearchResult.bind(this));\n this.map.on('hoverEndSearchResult', this._handleHoverEndSearchResult.bind(this));\n }\n }, {\n key: \"storeTextColorReferences\",\n value: function storeTextColorReferences() {\n var _this3 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var textColor = _this3.map.map.getPaintProperty(layer.id, 'text-color');\n if (textColor !== undefined) {\n _this3.textColorReference[layer.id] = textColor; // Store the text color reference using the layer ID as the key\n }\n }\n });\n }\n }, {\n key: \"createSelectedContentLayer\",\n value: function createSelectedContentLayer() {\n this.map.map.addSource('selected-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': [] // Initially empty, you will add features dynamically\n }\n });\n\n // Add a layer that references this GeoJSON source and matches the styling in your Mapbox Studio project\n this.map.map.addLayer({\n 'id': 'selected-content-layer',\n 'type': 'symbol',\n // Or 'fill', 'line', etc. based on your needs\n 'source': 'selected-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.3, -1],\n 'icon-image': 'selected-pin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 10,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#BE2E28',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"createHighlightedContentLayer\",\n value: function createHighlightedContentLayer() {\n this.map.map.addSource('highlighted-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': []\n }\n });\n this.map.map.addLayer({\n 'id': 'highlighted-content-layer',\n 'type': 'symbol',\n 'source': 'highlighted-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.2, -0.6],\n 'icon-image': 'highlightedPin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 5,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#1E1E1E',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n\n // clearSelectedContentLayer() {\n // this.map.map.getSource('selected-content').setData({\n // 'type': 'FeatureCollection',\n // 'features': []\n // });\n // }\n\n // clearHighlightedContentLayer() {\n // this.map.map.getSource('highlighted-content').setData({\n // 'type': 'FeatureCollection',\n // 'features': []\n // });\n // }\n\n // addSelectedFeature(coordinates, properties) {\n // const source = this.map.map.getSource('selected-content');\n // const currentData = source._data;\n // const newFeature = {\n // 'type': 'Feature',\n // 'geometry': {\n // 'type': 'Point',\n // 'coordinates': coordinates\n // },\n // 'properties': properties\n // };\n // currentData.features.push(newFeature);\n // source.setData(currentData);\n // }\n\n // addHighlightedFeature(coordinates, properties) {\n // const source = this.map.map.getSource('highlighted-content');\n // const currentData = source._data;\n // const newFeature = {\n // 'type': 'Feature',\n // 'geometry': {\n // 'type': 'Point',\n // 'coordinates': coordinates\n // },\n // 'properties': properties\n // };\n // currentData.features.push(newFeature);\n // source.setData(currentData);\n\n // return newFeature;\n // }\n }, {\n key: \"_handleDefaultState\",\n value: function _handleDefaultState() {\n this.interactionEnabled = true;\n\n // Remove any selection state visuals\n this.removeSelectionVisuals();\n this.selectionCriteria = null;\n this.applyHoverEffectToAllSymbolLayers();\n this.map.clearHighlightedContentLayer();\n this.map.clearSelectedContentLayer();\n this.showSymbolLayers();\n }\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(data) {\n var query = data.query,\n results = data.results;\n this.interactionEnabled = true;\n this.applyHoverEffectToAllSymbolLayers();\n this.hideSymbolLayers();\n this.map.clearSelectedContentLayer();\n\n // Find the floor with the most results\n var floorCounts = results.reduce(function (acc, result) {\n acc[result.floor] = (acc[result.floor] || 0) + 1;\n return acc;\n }, {});\n\n // Get the floor with the highest count\n var bestFloor = Object.entries(floorCounts).reduce(function (a, b) {\n return b[1] > a[1] ? b : a;\n }, [0, 0])[0];\n\n // Only switch floors if none of the results are on the current floor\n var currentFloor = this.map.getCurrentFloor();\n var hasResultsOnCurrentFloor = results.some(function (result) {\n return result.floor === currentFloor;\n });\n var chosenFloor = currentFloor;\n if (!hasResultsOnCurrentFloor) {\n chosenFloor = bestFloor;\n this.map.updateFloor(parseInt(chosenFloor));\n }\n chosenFloor = parseInt(chosenFloor);\n this.updateLabelsForSearchResults(results, true, chosenFloor);\n }\n }, {\n key: \"_handleAdditionalSearch\",\n value: function _handleAdditionalSearch(data) {\n var results = data.results;\n this.updateLabelsForSearchResults(results, true);\n }\n }, {\n key: \"_handleHoverSearchResult\",\n value: function _handleHoverSearchResult(data) {\n var result = data.result;\n this.updateLabelForSelectedContentPlacement(result, false);\n }\n }, {\n key: \"_handleHoverEndSearchResult\",\n value: function _handleHoverEndSearchResult() {\n if (this.map.getCurrentState() === 'search') {\n this.map.clearSelectedContentLayer();\n }\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n this.interactionEnabled = true;\n this.applyHoverEffectToAllSymbolLayers();\n this.showSymbolLayers();\n this.updateLabelForSelectedContentPlacement(selectedContentPlacement);\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(data) {\n var endContentPlacement = data.endContentPlacement;\n // if (endContentPlacement) {\n // // this.updateLabelForSelectedContentPlacement(endContentPlacement);\n // }\n this.interactionEnabled = false;\n this.removeHoverEffects();\n this.showSymbolLayers();\n return;\n }\n }, {\n key: \"_handleSetupState\",\n value: function _handleSetupState() {\n this.interactionEnabled = false;\n this.removeHoverEffects();\n }\n }, {\n key: \"_handleSelectionState\",\n value: function _handleSelectionState(data) {\n console.log('🔵 SELECTION STATE - Data:', data);\n var criteria = data.criteria,\n geojson = data.geojson;\n this.selectionCriteria = criteria;\n this.interactionEnabled = true;\n console.log('🔵 GEOJSON:', geojson);\n\n // Grey out existing\n this.applySelectionModeVisuals(criteria);\n\n // Remove matching features from existing layers to avoid duplication\n this.map.removeMatchingFeaturesFromExistingLayers(criteria);\n\n // Create layers - PASS THE GEOJSON\n this.map.createSelectableContentLayers(geojson);\n\n // Hover effects\n this.applySelectableHoverEffects();\n }\n }, {\n key: \"hideSymbolLayers\",\n value: function hideSymbolLayers() {\n var _this4 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol' && layer.id !== 'selected-content-layer' && layer.id !== 'highlighted-content-layer') {\n _this4.map.map.setLayoutProperty(layer.id, 'visibility', 'none');\n }\n });\n }\n }, {\n key: \"showSymbolLayers\",\n value: function showSymbolLayers() {\n var _this5 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n _this5.map.map.setLayoutProperty(layer.id, 'visibility', 'visible');\n }\n });\n }\n }, {\n key: \"updateLabelsForSearchResults\",\n value: function updateLabelsForSearchResults(results) {\n var _this6 = this;\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n var floor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n if (floor === null) {\n floor = this.map.getCurrentFloor();\n }\n this.map.clearHighlightedContentLayer();\n var features = [];\n var featuresOnFloor = [];\n results.forEach(function (result) {\n result._floor = result.floor;\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__.convertVerticesToCoordinates)([result.location], null, 30.0);\n var coordinate = coordinates[0];\n var titleKey = result.catalog.content_title_key;\n result.name = result.content.data[titleKey];\n var feature = _this6.map.addHighlightedFeature(coordinate, result);\n features.push(feature);\n if (result.floor === floor) {\n featuresOnFloor.push(feature);\n }\n });\n if (featuresOnFloor.length && animate) {\n var bounds = new mapboxgl.LngLatBounds();\n featuresOnFloor.forEach(function (feature) {\n bounds.extend(feature.geometry.coordinates);\n });\n if (this.currentView === 'desktop') {\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 50,\n bottom: 50,\n left: 350,\n right: 50\n },\n maxZoom: 15,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var mapWidth = this.map.mapContainer.offsetWidth;\n var bottomPaddingPercent = 45;\n var sidePaddingPercent = 8;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n var sidePaddingInPixels = mapWidth * (sidePaddingPercent / 100);\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 150,\n bottom: bottomPaddingInPixels,\n left: sidePaddingInPixels,\n right: sidePaddingInPixels + 95\n },\n maxZoom: 16,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n }\n }\n }\n }, {\n key: \"updateLabelForSelectedContentPlacement\",\n value: function updateLabelForSelectedContentPlacement(result) {\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n this.map.clearSelectedContentLayer();\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__.convertVerticesToCoordinates)([result.location], null, 30.0);\n var coordinate = coordinates[0];\n result._floor = result.floor;\n if (!result.name) {\n if (result.content && result.catalog) {\n var title_key = result.catalog.content_title_key;\n var title = result.content.data[title_key];\n result.name = title;\n }\n }\n this.map.addSelectedFeature(coordinate, result);\n if (animate) {\n if (this.currentView === 'desktop') {\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: 0,\n left: 330,\n right: 0\n },\n duration: 1000\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var bottomPaddingPercent = 35;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: bottomPaddingInPixels,\n left: 0,\n right: 0\n },\n duration: 1000\n });\n }\n }\n }\n }, {\n key: \"applyHoverEffectToAllSymbolLayers\",\n value: function applyHoverEffectToAllSymbolLayers() {\n var _this7 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n var defaultTextColor = _this7.textColorReference[layerId];\n _this7.map.map.on('mouseenter', layerId, function (e) {\n var feature = e.features[0];\n var placementId = feature.properties.placement_id;\n if (!_this7.previouslySelectedFeature || _this7.previouslySelectedFeature.layer.id !== feature.layer.id) {\n _this7.originalTextColor = _this7.map.map.getPaintProperty(layerId, 'text-color');\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', defaultTextColor]);\n } else {\n _this7.originalTextColor = _this7.previouslySelectedTextColor;\n var previouslySelectedPlacementId = _this7.previouslySelectedFeature.properties.placement_id;\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this7.selectedTextColor, defaultTextColor]);\n }\n _this7.map.map.getCanvas().style.cursor = 'pointer';\n });\n _this7.map.map.on('mouseleave', layerId, function () {\n if (!_this7.previouslySelectedFeature) {\n _this7.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor);\n } else {\n // If a feature is selected, maintain its selected color\n var previouslySelectedPlacementId = _this7.previouslySelectedFeature.properties.placement_id;\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this7.selectedTextColor, defaultTextColor]);\n }\n _this7.map.map.getCanvas().style.cursor = 'default';\n });\n }\n });\n }\n }, {\n key: \"removeHoverEffects\",\n value: function removeHoverEffects() {\n var _this8 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n // Reset to default text color\n var defaultTextColor = _this8.textColorReference[layerId];\n _this8.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor);\n\n // Remove event listeners\n _this8.map.map.off('mouseenter', layerId);\n _this8.map.map.off('mouseleave', layerId);\n }\n });\n this.map.map.getCanvas().style.cursor = 'default';\n }\n }, {\n key: \"applySelectionModeVisuals\",\n value: function applySelectionModeVisuals(criteria) {\n var _this9 = this;\n var layers = this.map.map.getStyle().layers;\n\n // Clear any previous stored properties\n this.originalPaintProperties = {};\n layers.forEach(function (layer) {\n if (layer.type === 'background') {\n var layerId = layer.id;\n\n // Store original background color\n if (!_this9.originalPaintProperties[layerId]) {\n _this9.originalPaintProperties[layerId] = {};\n }\n _this9.originalPaintProperties[layerId]['background-color'] = _this9.map.map.getPaintProperty(layerId, 'background-color');\n\n // Set new background color for selection mode\n _this9.map.map.setPaintProperty(layerId, 'background-color', '#f2f2f2');\n return; // Skip the rest of the loop for background layers\n }\n if (layer.type !== 'raster' && layer.type !== 'heatmap') {\n var _layerId = layer.id;\n\n // Skip our own selectable layers - they should not be greyed out\n if (_layerId.includes('selectable-')) {\n return;\n }\n\n // Initialize storage for this layer\n if (!_this9.originalPaintProperties[_layerId]) {\n _this9.originalPaintProperties[_layerId] = {};\n }\n\n // Apply grey styling to all layer types\n if (layer.type === 'symbol') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['text-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'text-opacity');\n _this9.originalPaintProperties[_layerId]['icon-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'icon-opacity');\n\n // Apply grey styling - reduce opacity to 0.3 but preserve floors at full opacity\n var opacityExpression = ['case', ['==', ['get', 'type'], 'floor'], 1.0,\n // Keep floors at full opacity\n 0.3 // Reduce other symbols to 0.3\n ];\n _this9.map.map.setPaintProperty(_layerId, 'text-opacity', opacityExpression);\n _this9.map.map.setPaintProperty(_layerId, 'icon-opacity', opacityExpression);\n } else if (layer.type === 'fill') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['fill-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'fill-opacity');\n _this9.originalPaintProperties[_layerId]['fill-color'] = _this9.map.map.getPaintProperty(_layerId, 'fill-color');\n\n // Apply grey styling - light grey color with reduced opacity but preserve floors\n var fillOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['fill-opacity'],\n // Keep original opacity\n 0.5 // Reduce other fills to 0.5 for layering effect\n ];\n var fillColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['fill-color'],\n // Keep original color\n '#f7f7f8' // Light grey for non-floor fills\n ];\n _this9.map.map.setPaintProperty(_layerId, 'fill-color', fillColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'fill-opacity', fillOpacityExpression);\n } else if (layer.type === 'line') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['line-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'line-opacity');\n _this9.originalPaintProperties[_layerId]['line-color'] = _this9.map.map.getPaintProperty(_layerId, 'line-color');\n\n // Apply grey styling - grey color with 0.6 opacity but preserve floors\n var lineOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['line-opacity'],\n // Keep original opacity\n 0.6 // Reduce other lines to 0.6\n ];\n var lineColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['line-color'],\n // Keep original color\n '#AAAAAA' // Grey for non-floor lines\n ];\n _this9.map.map.setPaintProperty(_layerId, 'line-color', lineColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'line-opacity', lineOpacityExpression);\n } else if (layer.type === 'circle') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['circle-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'circle-opacity');\n _this9.originalPaintProperties[_layerId]['circle-color'] = _this9.map.map.getPaintProperty(_layerId, 'circle-color');\n\n // Apply grey styling - grey color with 0.5 opacity but preserve floors\n var circleOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['circle-opacity'],\n // Keep original opacity\n 0.5 // Reduce other circles to 0.5\n ];\n var circleColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['circle-color'],\n // Keep original color\n '#CCCCCC' // Grey for non-floor circles\n ];\n _this9.map.map.setPaintProperty(_layerId, 'circle-color', circleColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'circle-opacity', circleOpacityExpression);\n } else if (layer.type === 'fill-extrusion') {\n // Store original values for extrusions\n _this9.originalPaintProperties[_layerId]['fill-extrusion-color'] = _this9.map.map.getPaintProperty(_layerId, 'fill-extrusion-color');\n\n // Apply light grey styling but preserve floors at original color\n var lightGreyExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['fill-extrusion-color'],\n // Keep original\n '#e6e6e6' // Much lighter grey for non-floor extrusions\n ];\n _this9.map.map.setPaintProperty(_layerId, 'fill-extrusion-color', lightGreyExpression);\n }\n }\n });\n\n // Note: We no longer apply hover effects to existing layers in selection mode\n // The selectable features will have their own hover effects\n }\n }, {\n key: \"applySelectableHoverEffects\",\n value: function applySelectableHoverEffects() {\n var _this10 = this;\n // Remove any existing selection hover handler\n if (this.selectionHoverHandler) {\n this.map.map.off('mousemove', this.selectionHoverHandler);\n }\n\n // Create new hover handler for selectable features\n this.selectionHoverHandler = function (e) {\n if (!_this10.interactionEnabled || !_this10.selectionCriteria) return;\n\n // Query selectable fill layer\n var features = _this10.map.map.queryRenderedFeatures(e.point, {\n layers: ['selectable-fill-layer']\n });\n\n // Reset previous hover\n if (_this10.currentHoveredFeatureId) {\n _this10.map.map.setFeatureState({\n source: 'selectable-content',\n id: _this10.currentHoveredFeatureId\n }, {\n hover: false\n });\n }\n\n // Apply hover to new feature\n if (features.length > 0) {\n var feature = features[0];\n _this10.currentHoveredFeatureId = feature.id;\n _this10.map.map.setFeatureState({\n source: 'selectable-content',\n id: feature.id\n }, {\n hover: true\n });\n _this10.map.map.getCanvas().style.cursor = 'pointer';\n } else {\n _this10.currentHoveredFeatureId = null;\n _this10.map.map.getCanvas().style.cursor = 'default';\n }\n };\n\n // Add the hover handler\n this.map.map.on('mousemove', this.selectionHoverHandler);\n\n // Update fill layer paint to respond to hover state\n this.map.map.setPaintProperty('selectable-fill-layer', 'fill-color', ['case', ['boolean', ['feature-state', 'hover'], false], this.selectionHoverColor,\n // #4A90E2\n '#FFFFFF' // Default white\n ]);\n }\n }, {\n key: \"createSelectionOpacityExpression\",\n value: function createSelectionOpacityExpression(criteria) {\n // Start with a base case for non-matching features (very low opacity)\n var expression = 0.1;\n\n // First check if feature type is 'floor' - always keep at full opacity\n expression = ['case', ['==', ['get', 'type'], 'floor'], 1.0, expression];\n\n // Build conditions for matching features (full opacity)\n var _loop = function _loop() {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n property = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n if (Array.isArray(value)) {\n // Handle multiple values (e.g., size: ['10x10', '20x10'])\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n var anyMatch = ['any'].concat(_toConsumableArray(conditions));\n expression = ['case', anyMatch, 1.0, expression];\n } else {\n // Handle single value\n expression = ['case', ['==', ['get', property], value], 1.0, expression];\n }\n };\n for (var _i = 0, _Object$entries = Object.entries(criteria); _i < _Object$entries.length; _i++) {\n _loop();\n }\n return expression;\n }\n }, {\n key: \"createSelectionColorOpacityExpression\",\n value: function createSelectionColorOpacityExpression(criteria, layerId) {\n // Get the original color\n var originalColor = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n if (!originalColor) return null;\n\n // Create an expression that sets non-selectable extrusions to solid color #2A2A2A\n // For floor type, keep original color\n var expression = ['case', ['==', ['get', 'type'], 'floor'], originalColor // Keep original color for floors\n ];\n\n // Add criteria matching - keep original color\n var _loop2 = function _loop2() {\n var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),\n property = _Object$entries2$_i[0],\n value = _Object$entries2$_i[1];\n if (Array.isArray(value)) {\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n var anyMatch = ['any'].concat(_toConsumableArray(conditions));\n expression.push(anyMatch, originalColor);\n } else {\n expression.push(['==', ['get', property], value], originalColor);\n }\n };\n for (var _i2 = 0, _Object$entries2 = Object.entries(criteria); _i2 < _Object$entries2.length; _i2++) {\n _loop2();\n }\n\n // For non-matching features, set to solid color #2A2A2A\n expression.push('#2A2A2A');\n return expression;\n }\n }, {\n key: \"restoreLayerToSelectionMode\",\n value: function restoreLayerToSelectionMode(layerId) {\n // Helper method to restore a layer to its selection mode colors\n var layer = this.map.map.getStyle().layers.find(function (l) {\n return l.id === layerId;\n });\n if (!layer) return;\n if (layer.type === 'fill') {\n var originalColor = this.originalPaintProperties[layerId]['fill-color'];\n if (originalColor) {\n this.map.map.setPaintProperty(layerId, 'fill-color', originalColor);\n }\n } else if (layer.type === 'fill-extrusion') {\n // Use selection mode expression if available, otherwise fall back to original\n var colorToRestore = this.selectionModeExpressions[layerId] || this.originalPaintProperties[layerId]['fill-extrusion-color'];\n if (colorToRestore) {\n this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', colorToRestore);\n }\n }\n }\n }, {\n key: \"applyHoverToFeature\",\n value: function applyHoverToFeature(layerId, featureId, layerType) {\n // Helper method to apply hover color to a specific feature\n if (layerType === 'fill') {\n this.map.map.setPaintProperty(layerId, 'fill-color', ['case', ['==', ['id'], featureId], this.selectionHoverColor, this.originalPaintProperties[layerId]['fill-color'] || ['get', 'color'] || 0]);\n } else if (layerType === 'fill-extrusion') {\n this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', ['case', ['==', ['id'], featureId], this.selectionHoverColor, this.selectionModeExpressions[layerId] || this.originalPaintProperties[layerId]['fill-extrusion-color'] || ['get', 'color'] || 0]);\n }\n }\n }, {\n key: \"applySelectionHoverEffects\",\n value: function applySelectionHoverEffects(criteria) {\n var _this11 = this;\n // Use a single global mousemove handler instead of per-layer mouseenter/mouseleave\n // This approach continuously validates what's under the cursor and immediately invalidates stale hovers\n this.selectionHoverHandler = function (e) {\n if (!_this11.interactionEnabled || !_this11.selectionCriteria) return;\n\n // Query ALL features under the cursor\n var features = _this11.map.map.queryRenderedFeatures(e.point);\n\n // Find the first fill or fill-extrusion feature\n var fillFeature = features.find(function (f) {\n return f.layer.type === 'fill' || f.layer.type === 'fill-extrusion';\n });\n if (fillFeature) {\n var layerId = fillFeature.layer.id;\n var featureId = fillFeature.id;\n\n // Check if this is a different feature than currently hovered\n if (_this11.currentHoveredLayerId !== layerId || _this11.currentHoveredFeatureId !== featureId) {\n // INVALIDATE old hover if exists\n if (_this11.currentHoveredLayerId) {\n _this11.restoreLayerToSelectionMode(_this11.currentHoveredLayerId);\n }\n\n // Check if new feature is selectable\n if (_this11.featureMatchesCriteria(fillFeature.properties, _this11.selectionCriteria)) {\n // Apply hover to new selectable feature\n _this11.currentHoveredLayerId = layerId;\n _this11.currentHoveredFeatureId = featureId;\n _this11.applyHoverToFeature(layerId, featureId, fillFeature.layer.type);\n _this11.map.map.getCanvas().style.cursor = 'pointer';\n } else {\n // Non-selectable feature\n _this11.currentHoveredLayerId = null;\n _this11.currentHoveredFeatureId = null;\n _this11.map.map.getCanvas().style.cursor = 'default';\n }\n }\n } else {\n // No fill/extrusion features under cursor - clear any hover\n if (_this11.currentHoveredLayerId) {\n _this11.restoreLayerToSelectionMode(_this11.currentHoveredLayerId);\n _this11.currentHoveredLayerId = null;\n _this11.currentHoveredFeatureId = null;\n }\n _this11.map.map.getCanvas().style.cursor = 'default';\n }\n };\n\n // Add the single mousemove handler to the map\n this.map.map.on('mousemove', this.selectionHoverHandler);\n }\n }, {\n key: \"removeSelectionVisuals\",\n value: function removeSelectionVisuals() {\n var _this12 = this;\n // Restore all original paint properties\n for (var _i3 = 0, _Object$entries3 = Object.entries(this.originalPaintProperties); _i3 < _Object$entries3.length; _i3++) {\n var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),\n layerId = _Object$entries3$_i[0],\n properties = _Object$entries3$_i[1];\n for (var _i4 = 0, _Object$entries4 = Object.entries(properties); _i4 < _Object$entries4.length; _i4++) {\n var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i4], 2),\n property = _Object$entries4$_i[0],\n value = _Object$entries4$_i[1];\n if (value !== undefined) {\n this.map.map.setPaintProperty(layerId, property, value);\n }\n }\n }\n\n // Restore original filters for all layers\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var _layerId2 = layer.id;\n\n // Skip our own selectable layers\n if (_layerId2.includes('selectable-')) {\n return;\n }\n\n // Restore original filter\n var originalFilter = _this12.map.map.getFilter(_layerId2);\n if (originalFilter) {\n // Check if this layer had an original filter stored\n var storedOriginalFilter = _this12.map.originalFilters[_layerId2];\n if (storedOriginalFilter !== undefined) {\n _this12.map.map.setFilter(_layerId2, storedOriginalFilter);\n }\n }\n }\n });\n\n // Clear stored properties\n this.originalPaintProperties = {};\n this.selectionModeExpressions = {};\n\n // Remove selectable content layers\n this.map.removeSelectableContentLayers();\n\n // Clear hover tracking\n this.currentHoveredLayerId = null;\n this.currentHoveredFeatureId = null;\n\n // Remove the global mousemove handler\n if (this.selectionHoverHandler) {\n this.map.map.off('mousemove', this.selectionHoverHandler);\n this.selectionHoverHandler = null;\n }\n\n // Reset cursor\n this.map.map.getCanvas().style.cursor = 'default';\n }\n }, {\n key: \"_handleClick\",\n value: function _handleClick(e) {\n var _this13 = this;\n if (!this.interactionEnabled) return;\n\n // Check if we're in selection mode\n if (this.map.getCurrentState() === 'selection' && this.selectionCriteria) {\n // First, check if clicking on a confirmed selection (green layer OR checkmark icon) to deselect\n var confirmedFeatures = this.map.map.queryRenderedFeatures(e.point, {\n layers: ['confirmed-selection-fill-layer', 'confirmed-selection-outline-layer', 'confirmed-selection-icon-layer']\n });\n if (confirmedFeatures.length > 0) {\n var feature = confirmedFeatures[0];\n var placementId = feature.properties.placement_id;\n console.log('🔵 Clicked on confirmed selection, deselecting:', placementId);\n\n // Fire deselection event\n this.map.fire('selection:featureDeselected', {\n feature: feature,\n placementId: placementId\n });\n return;\n }\n\n // Then check if clicking on a selectable feature to select\n var selectableFeatures = this.map.map.queryRenderedFeatures(e.point, {\n layers: ['selectable-fill-layer']\n });\n if (selectableFeatures.length > 0) {\n var _feature = selectableFeatures[0];\n var _placementId = _feature.properties.placement_id;\n\n // SINGLE-SELECT MODE: Optimistically remove previous selection\n if (!this.map.multiSelect) {\n var currentConfirmedFeatures = this.map.getConfirmedSelectionFeatures();\n if (currentConfirmedFeatures.length > 0) {\n var previousFeature = currentConfirmedFeatures[0];\n var previousPlacementId = previousFeature.properties.placement_id;\n console.log('🔵 Single-select mode: Optimistically removing previous selection:', previousPlacementId);\n\n // Fire optimistic deselection event for previous feature\n this.map.fire('selection:featureDeselectedOptimistic', {\n placementId: previousPlacementId\n });\n }\n }\n\n // OPTIMISTIC SELECTION: Add to confirmed layers immediately for instant feedback\n console.log('🔵 Optimistically adding feature to confirmed selection:', _placementId);\n this.map.addConfirmedSelectionFeature(_feature, !this.map.multiSelect);\n\n // Fire optimistic selection event immediately\n this.map.fire('selection:featureSelectedOptimistic', {\n feature: _feature\n });\n\n // Set loading state for content placement details\n this.map._stateCoordinator.setLoading(true, 'content');\n\n // Fetch content placement details and update selection context\n this.map.getContentPlacementDetails(_placementId).then(function (details) {\n // Success - fire the full selection event to update the UI\n _this13.map.fire('selection:featureSelected', {\n feature: _feature,\n contentPlacement: details\n });\n })[\"catch\"](function (error) {\n console.error('❌ Error fetching content placement details:', error);\n\n // FAILURE - Remove from confirmed selection and show error\n console.log('🔵 Removing feature from confirmed selection due to error:', _placementId);\n _this13.map.removeConfirmedSelectionFeature(_placementId);\n\n // Fire optimistic removal event\n _this13.map.fire('selection:featureDeselectedOptimistic', {\n placementId: _placementId\n });\n })[\"finally\"](function () {\n // Reset loading state\n _this13.map._stateCoordinator.setLoading(false, 'content');\n });\n return;\n }\n } else {\n // Default behavior for other states\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length > 0) {\n var _feature2 = symbolFeatures[0];\n var _placementId2 = _feature2.properties.placement_id;\n this.map.setToSelectedContentState([_placementId2]);\n }\n }\n }\n }, {\n key: \"featureMatchesCriteria\",\n value: function featureMatchesCriteria(properties, criteria) {\n for (var _i5 = 0, _Object$entries5 = Object.entries(criteria); _i5 < _Object$entries5.length; _i5++) {\n var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i5], 2),\n property = _Object$entries5$_i[0],\n value = _Object$entries5$_i[1];\n var featureValue = properties[property];\n if (Array.isArray(value)) {\n // Check if feature value is in the array of allowed values\n if (!value.includes(featureValue)) {\n return false;\n }\n } else {\n // Check if feature value matches the single required value\n if (featureValue !== value) {\n return false;\n }\n }\n }\n return true;\n }\n }, {\n key: \"_setupCursorHandling\",\n value: function _setupCursorHandling() {\n var _this14 = this;\n // Method 1: Using mouseenter/mouseleave events (recommended)\n this.map.map.on('mouseenter', 'confirmed-selection-fill-layer', function () {\n _this14.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-fill-layer', function () {\n _this14.map.map.getCanvas().style.cursor = '';\n });\n this.map.map.on('mouseenter', 'confirmed-selection-outline-layer', function () {\n _this14.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-outline-layer', function () {\n _this14.map.map.getCanvas().style.cursor = '';\n });\n this.map.map.on('mouseenter', 'confirmed-selection-icon-layer', function () {\n _this14.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-icon-layer', function () {\n _this14.map.map.getCanvas().style.cursor = '';\n });\n }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InteractionControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/InteractionControl.js?");
617
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var webpack__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! webpack */ \"./node_modules/webpack/lib/index.js\");\n/* harmony import */ var webpack__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(webpack__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\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; }\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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar InteractionControl = /*#__PURE__*/function (_Control) {\n function InteractionControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, InteractionControl);\n _this = _callSuper(this, InteractionControl, [options]);\n _this.map = null;\n _this.previouslySelectedFeature = null;\n _this.previouslySelectedIcon = null;\n _this.previouslySelectedTextColor = null;\n _this.previouslySelectedTextOffset = null;\n _this.previouslyHoveredFeature = null;\n _this.originalTextColor = null;\n _this.textColorReference = {};\n _this.currentView = null; // Can be set to 'desktop' or 'mobile'\n\n _this.selectedTextColor = '#BE2E28';\n _this.interactionEnabled = true;\n _this.selectionCriteria = null;\n _this.originalPaintProperties = {}; // Store original paint properties for selection state\n _this.selectionModeExpressions = {}; // Store selection mode color expressions for hover persistence\n _this.selectionHoverColor = '#4A90E2'; // Color for hover highlighting in selection mode\n _this.currentHoveredLayerId = null; // Track currently hovered layer in selection mode\n _this.currentHoveredFeatureId = null; // Track currently hovered feature in selection mode\n _this.selectionHoverHandler = null; // Reference to mousemove handler for selection mode\n return _this;\n }\n _inherits(InteractionControl, _Control);\n return _createClass(InteractionControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'interaction-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.createHighlightedContentLayer();\n this.createSelectedContentLayer();\n this.storeTextColorReferences();\n // this.applyHoverEffectToAllSymbolLayers();\n\n return this.container;\n }\n }, {\n key: \"_initialize\",\n value: function _initialize() {\n var containerWidth = this.map.mapContainer.offsetWidth;\n this._configureView(containerWidth);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(InteractionControl, \"onRemove\", this, 3)([]);\n }\n\n // _attachResizeListener() {\n // window.addEventListener('resize', () => {\n // const newWidth = this.map.mapContainer.offsetWidth;\n // this._configureView(newWidth);\n // });\n // }\n }, {\n key: \"_configureView\",\n value: function _configureView(width) {\n if (width > 767) {\n this._setViewForDesktop();\n } else {\n this._setViewForMobile();\n }\n }\n }, {\n key: \"_setViewForDesktop\",\n value: function _setViewForDesktop() {\n this.currentView = 'desktop';\n }\n }, {\n key: \"_setViewForMobile\",\n value: function _setViewForMobile() {\n this.currentView = 'mobile';\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n var _this2 = this;\n this.map.map.on('styleimagemissing', function (e) {\n var missingImage = e.id;\n console.warn(\"Image \\\"\".concat(missingImage, \"\\\" could not be loaded.\"));\n });\n this.map.map.on('click', function (e) {\n _this2._handleClick(e);\n });\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('state:setup', this._handleSetupState.bind(this));\n this.map.on('state:selection', this._handleSelectionState.bind(this));\n this.map.on('additionalSearchResults', this._handleAdditionalSearch.bind(this));\n this.map.on('hoverSearchResult', this._handleHoverSearchResult.bind(this));\n this.map.on('hoverEndSearchResult', this._handleHoverEndSearchResult.bind(this));\n }\n }, {\n key: \"storeTextColorReferences\",\n value: function storeTextColorReferences() {\n var _this3 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var textColor = _this3.map.map.getPaintProperty(layer.id, 'text-color');\n if (textColor !== undefined) {\n _this3.textColorReference[layer.id] = textColor; // Store the text color reference using the layer ID as the key\n }\n }\n });\n }\n }, {\n key: \"createSelectedContentLayer\",\n value: function createSelectedContentLayer() {\n this.map.map.addSource('selected-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': [] // Initially empty, you will add features dynamically\n }\n });\n\n // Add a layer that references this GeoJSON source and matches the styling in your Mapbox Studio project\n this.map.map.addLayer({\n 'id': 'selected-content-layer',\n 'type': 'symbol',\n // Or 'fill', 'line', etc. based on your needs\n 'source': 'selected-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.3, -1],\n 'icon-image': 'selected-pin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 10,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#BE2E28',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"createHighlightedContentLayer\",\n value: function createHighlightedContentLayer() {\n this.map.map.addSource('highlighted-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': []\n }\n });\n this.map.map.addLayer({\n 'id': 'highlighted-content-layer',\n 'type': 'symbol',\n 'source': 'highlighted-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.2, -0.6],\n 'icon-image': 'highlightedPin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 5,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#1E1E1E',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n\n // clearSelectedContentLayer() {\n // this.map.map.getSource('selected-content').setData({\n // 'type': 'FeatureCollection',\n // 'features': []\n // });\n // }\n\n // clearHighlightedContentLayer() {\n // this.map.map.getSource('highlighted-content').setData({\n // 'type': 'FeatureCollection',\n // 'features': []\n // });\n // }\n\n // addSelectedFeature(coordinates, properties) {\n // const source = this.map.map.getSource('selected-content');\n // const currentData = source._data;\n // const newFeature = {\n // 'type': 'Feature',\n // 'geometry': {\n // 'type': 'Point',\n // 'coordinates': coordinates\n // },\n // 'properties': properties\n // };\n // currentData.features.push(newFeature);\n // source.setData(currentData);\n // }\n\n // addHighlightedFeature(coordinates, properties) {\n // const source = this.map.map.getSource('highlighted-content');\n // const currentData = source._data;\n // const newFeature = {\n // 'type': 'Feature',\n // 'geometry': {\n // 'type': 'Point',\n // 'coordinates': coordinates\n // },\n // 'properties': properties\n // };\n // currentData.features.push(newFeature);\n // source.setData(currentData);\n\n // return newFeature;\n // }\n }, {\n key: \"_handleDefaultState\",\n value: function _handleDefaultState() {\n this.interactionEnabled = true;\n\n // Remove any selection state visuals\n this.removeSelectionVisuals();\n this.selectionCriteria = null;\n this.applyHoverEffectToAllSymbolLayers();\n this.map.clearHighlightedContentLayer();\n this.map.clearSelectedContentLayer();\n this.showSymbolLayers();\n\n // this.removeSelectionVisuals();\n // this.selectionCriteria = null;\n\n // // Ensure symbol layers are visible before applying hover effects\n // this.showSymbolLayers();\n\n // // Apply hover effects to all symbol layers\n // this.applyHoverEffectToAllSymbolLayers();\n\n // this.map.clearHighlightedContentLayer();\n // this.map.clearSelectedContentLayer();\n }\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(data) {\n var query = data.query,\n results = data.results;\n this.interactionEnabled = true;\n this.applyHoverEffectToAllSymbolLayers();\n this.hideSymbolLayers();\n this.map.clearSelectedContentLayer();\n\n // Find the floor with the most results\n var floorCounts = results.reduce(function (acc, result) {\n acc[result.floor] = (acc[result.floor] || 0) + 1;\n return acc;\n }, {});\n\n // Get the floor with the highest count\n var bestFloor = Object.entries(floorCounts).reduce(function (a, b) {\n return b[1] > a[1] ? b : a;\n }, [0, 0])[0];\n\n // Only switch floors if none of the results are on the current floor\n var currentFloor = this.map.getCurrentFloor();\n var hasResultsOnCurrentFloor = results.some(function (result) {\n return result.floor === currentFloor;\n });\n var chosenFloor = currentFloor;\n if (!hasResultsOnCurrentFloor) {\n chosenFloor = bestFloor;\n this.map.updateFloor(parseInt(chosenFloor));\n }\n chosenFloor = parseInt(chosenFloor);\n this.updateLabelsForSearchResults(results, true, chosenFloor);\n }\n }, {\n key: \"_handleAdditionalSearch\",\n value: function _handleAdditionalSearch(data) {\n var results = data.results;\n this.updateLabelsForSearchResults(results, true);\n }\n }, {\n key: \"_handleHoverSearchResult\",\n value: function _handleHoverSearchResult(data) {\n var result = data.result;\n this.updateLabelForSelectedContentPlacement(result, false);\n }\n }, {\n key: \"_handleHoverEndSearchResult\",\n value: function _handleHoverEndSearchResult() {\n if (this.map.getCurrentState() === 'search') {\n this.map.clearSelectedContentLayer();\n }\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n this.interactionEnabled = true;\n this.applyHoverEffectToAllSymbolLayers();\n this.showSymbolLayers();\n this.updateLabelForSelectedContentPlacement(selectedContentPlacement);\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(data) {\n var endContentPlacement = data.endContentPlacement;\n // if (endContentPlacement) {\n // // this.updateLabelForSelectedContentPlacement(endContentPlacement);\n // }\n this.interactionEnabled = false;\n this.removeHoverEffects();\n this.showSymbolLayers();\n return;\n }\n }, {\n key: \"_handleSetupState\",\n value: function _handleSetupState() {\n this.interactionEnabled = false;\n this.removeHoverEffects();\n }\n }, {\n key: \"_handleSelectionState\",\n value: function _handleSelectionState(data) {\n var criteria = data.criteria,\n geojson = data.geojson;\n this.selectionCriteria = criteria;\n this.interactionEnabled = true;\n\n // Grey out existing\n this.applySelectionModeVisuals(criteria);\n\n // Remove matching features from existing layers to avoid duplication\n this.map.removeMatchingFeaturesFromExistingLayers(criteria);\n\n // Create layers - PASS THE GEOJSON\n this.map.createSelectableContentLayers(geojson);\n\n // NOW process any pending extrusion features (after sources are created)\n this.processPendingExtrusionFeatures();\n this.processPendingSymbolFeatures();\n\n // Hover effects\n this.applySelectableHoverEffects();\n }\n }, {\n key: \"hideSymbolLayers\",\n value: function hideSymbolLayers() {\n var _this4 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol' && layer.id !== 'selected-content-layer' && layer.id !== 'highlighted-content-layer') {\n _this4.map.map.setLayoutProperty(layer.id, 'visibility', 'none');\n }\n });\n }\n }, {\n key: \"showSymbolLayers\",\n value: function showSymbolLayers() {\n var _this5 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n _this5.map.map.setLayoutProperty(layer.id, 'visibility', 'visible');\n }\n });\n }\n }, {\n key: \"updateLabelsForSearchResults\",\n value: function updateLabelsForSearchResults(results) {\n var _this6 = this;\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n var floor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n if (floor === null) {\n floor = this.map.getCurrentFloor();\n }\n this.map.clearHighlightedContentLayer();\n var features = [];\n var featuresOnFloor = [];\n results.forEach(function (result) {\n result._floor = result.floor;\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__.convertVerticesToCoordinates)([result.location], null, 30.0);\n var coordinate = coordinates[0];\n var titleKey = result.catalog.content_title_key;\n result.name = result.content.data[titleKey];\n var feature = _this6.map.addHighlightedFeature(coordinate, result);\n features.push(feature);\n if (result.floor === floor) {\n featuresOnFloor.push(feature);\n }\n });\n if (featuresOnFloor.length && animate) {\n var bounds = new mapboxgl.LngLatBounds();\n featuresOnFloor.forEach(function (feature) {\n bounds.extend(feature.geometry.coordinates);\n });\n if (this.currentView === 'desktop') {\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 50,\n bottom: 50,\n left: 350,\n right: 50\n },\n maxZoom: 15,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var mapWidth = this.map.mapContainer.offsetWidth;\n var bottomPaddingPercent = 45;\n var sidePaddingPercent = 8;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n var sidePaddingInPixels = mapWidth * (sidePaddingPercent / 100);\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 150,\n bottom: bottomPaddingInPixels,\n left: sidePaddingInPixels,\n right: sidePaddingInPixels + 95\n },\n maxZoom: 16,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n }\n }\n }\n }, {\n key: \"updateLabelForSelectedContentPlacement\",\n value: function updateLabelForSelectedContentPlacement(result) {\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n this.map.clearSelectedContentLayer();\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_2__.convertVerticesToCoordinates)([result.location], null, 30.0);\n var coordinate = coordinates[0];\n result._floor = result.floor;\n if (!result.name) {\n if (result.content && result.catalog) {\n var title_key = result.catalog.content_title_key;\n var title = result.content.data[title_key];\n result.name = title;\n }\n }\n this.map.addSelectedFeature(coordinate, result);\n if (animate) {\n if (this.currentView === 'desktop') {\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: 0,\n left: 330,\n right: 0\n },\n duration: 1000\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var bottomPaddingPercent = 35;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: bottomPaddingInPixels,\n left: 0,\n right: 0\n },\n duration: 1000\n });\n }\n }\n }\n }, {\n key: \"applyHoverEffectToAllSymbolLayers\",\n value: function applyHoverEffectToAllSymbolLayers() {\n var _this7 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n var defaultTextColor = _this7.textColorReference[layerId];\n _this7.map.map.on('mouseenter', layerId, function (e) {\n var feature = e.features[0];\n var placementId = feature.properties.placement_id;\n if (!_this7.previouslySelectedFeature || _this7.previouslySelectedFeature.layer.id !== feature.layer.id) {\n _this7.originalTextColor = _this7.map.map.getPaintProperty(layerId, 'text-color');\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', defaultTextColor]);\n } else {\n _this7.originalTextColor = _this7.previouslySelectedTextColor;\n var previouslySelectedPlacementId = _this7.previouslySelectedFeature.properties.placement_id;\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this7.selectedTextColor, defaultTextColor]);\n }\n _this7.map.map.getCanvas().style.cursor = 'pointer';\n });\n _this7.map.map.on('mouseleave', layerId, function () {\n if (!_this7.previouslySelectedFeature) {\n _this7.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor);\n } else {\n // If a feature is selected, maintain its selected color\n var previouslySelectedPlacementId = _this7.previouslySelectedFeature.properties.placement_id;\n _this7.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this7.selectedTextColor, defaultTextColor]);\n }\n _this7.map.map.getCanvas().style.cursor = 'default';\n });\n }\n });\n }\n }, {\n key: \"removeHoverEffects\",\n value: function removeHoverEffects() {\n var _this8 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n // Reset to default text color\n var defaultTextColor = _this8.textColorReference[layerId];\n _this8.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor);\n\n // Remove event listeners\n _this8.map.map.off('mouseenter', layerId);\n _this8.map.map.off('mouseleave', layerId);\n }\n });\n this.map.map.getCanvas().style.cursor = 'default';\n }\n }, {\n key: \"applySelectionModeVisuals\",\n value: function applySelectionModeVisuals(criteria) {\n var _this9 = this;\n var layers = this.map.map.getStyle().layers;\n\n // Clear any previous stored properties\n this.originalPaintProperties = {};\n layers.forEach(function (layer) {\n if (layer.type === 'background') {\n var layerId = layer.id;\n\n // Store original background color\n if (!_this9.originalPaintProperties[layerId]) {\n _this9.originalPaintProperties[layerId] = {};\n }\n _this9.originalPaintProperties[layerId]['background-color'] = _this9.map.map.getPaintProperty(layerId, 'background-color');\n\n // Set new background color for selection mode\n _this9.map.map.setPaintProperty(layerId, 'background-color', '#f5f5f5');\n return; // Skip the rest of the loop for background layers\n }\n if (layer.type !== 'raster' && layer.type !== 'heatmap') {\n var _layerId = layer.id;\n\n // Skip our own selectable layers - they should not be greyed out\n if (_layerId.includes('selectable-')) {\n return;\n }\n\n // Initialize storage for this layer\n if (!_this9.originalPaintProperties[_layerId]) {\n _this9.originalPaintProperties[_layerId] = {};\n }\n\n // Apply grey styling to all layer types\n // In applySelectionModeVisuals(), replace the symbol layer section (lines 593-606) with:\n\n if (layer.type === 'symbol') {\n // Skip our own selectable/booked layers\n if (_layerId.includes('selectable-') || _layerId.includes('booked-') || _layerId.includes('confirmed-selection')) {\n return;\n }\n\n // Get the layer info BEFORE hiding it\n var symbolLayer = _this9.map.map.getLayer(_layerId);\n var sourceId = symbolLayer.source;\n var sourceLayer = symbolLayer.sourceLayer;\n var filter = symbolLayer.filter;\n\n // GET FEATURES BEFORE HIDING THE LAYER\n var features = [];\n try {\n var source = _this9.map.map.getSource(sourceId);\n if (source && source.type === 'vector' && sourceLayer) {\n features = _this9.map.map.querySourceFeatures(sourceId, {\n sourceLayer: sourceLayer,\n filter: filter\n });\n } else if (source && source.type === 'geojson') {\n features = source._data.features || [];\n }\n } catch (error) {\n console.error('❌ Error getting symbol features before layer hiding:', error);\n }\n\n // Store the layer info for restoration\n _this9.originalPaintProperties[_layerId] = {\n 'text-opacity': _this9.map.map.getPaintProperty(_layerId, 'text-opacity'),\n 'icon-opacity': _this9.map.map.getPaintProperty(_layerId, 'icon-opacity'),\n 'text-color': _this9.map.map.getPaintProperty(_layerId, 'text-color'),\n 'source': sourceId,\n 'source-layer': sourceLayer,\n 'filter': filter,\n 'features': features // Store the features we got before hiding\n };\n\n // COMPLETELY HIDE the symbol layer\n _this9.map.map.setLayoutProperty(_layerId, 'visibility', 'none');\n\n // Store features to add later (don't add them now)\n if (!_this9.pendingSymbolFeatures) {\n _this9.pendingSymbolFeatures = [];\n }\n _this9.pendingSymbolFeatures.push({\n layerId: _layerId,\n features: features\n });\n } else if (layer.type === 'fill') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['fill-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'fill-opacity');\n _this9.originalPaintProperties[_layerId]['fill-color'] = _this9.map.map.getPaintProperty(_layerId, 'fill-color');\n\n // Apply grey styling - light grey color with reduced opacity but preserve floors\n var fillOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['fill-opacity'],\n // Keep original opacity\n 0.5 // Reduce other fills to 0.5 for layering effect\n ];\n var fillColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['fill-color'],\n // Keep original color\n '#f7f7f8' // Light grey for non-floor fills\n ];\n _this9.map.map.setPaintProperty(_layerId, 'fill-color', fillColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'fill-opacity', fillOpacityExpression);\n } else if (layer.type === 'line') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['line-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'line-opacity');\n _this9.originalPaintProperties[_layerId]['line-color'] = _this9.map.map.getPaintProperty(_layerId, 'line-color');\n\n // Apply grey styling - grey color with 0.6 opacity but preserve floors\n var lineOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['line-opacity'],\n // Keep original opacity\n 0.6 // Reduce other lines to 0.6\n ];\n var lineColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['line-color'],\n // Keep original color\n '#AAAAAA' // Grey for non-floor lines\n ];\n _this9.map.map.setPaintProperty(_layerId, 'line-color', lineColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'line-opacity', lineOpacityExpression);\n } else if (layer.type === 'circle') {\n // Store original values\n _this9.originalPaintProperties[_layerId]['circle-opacity'] = _this9.map.map.getPaintProperty(_layerId, 'circle-opacity');\n _this9.originalPaintProperties[_layerId]['circle-color'] = _this9.map.map.getPaintProperty(_layerId, 'circle-color');\n\n // Apply grey styling - grey color with 0.5 opacity but preserve floors\n var circleOpacityExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['circle-opacity'] || 1.0,\n // Keep original opacity\n 0.5 // Reduce other circles to 0.5\n ];\n var circleColorExpression = ['case', ['==', ['get', 'type'], 'floor'], _this9.originalPaintProperties[_layerId]['circle-color'],\n // Keep original color\n '#CCCCCC' // Grey for non-floor circles\n ];\n _this9.map.map.setPaintProperty(_layerId, 'circle-color', circleColorExpression);\n _this9.map.map.setPaintProperty(_layerId, 'circle-opacity', circleOpacityExpression);\n } else if (layer.type === 'fill-extrusion') {\n // Get the layer info BEFORE removing it\n var extrusionLayer = _this9.map.map.getLayer(_layerId);\n var _sourceId = extrusionLayer.source;\n var _sourceLayer = extrusionLayer.sourceLayer;\n var _filter = extrusionLayer.filter;\n\n // GET FEATURES BEFORE REMOVING THE LAYER\n var _features = [];\n try {\n var _source = _this9.map.map.getSource(_sourceId);\n if (_source && _source.type === 'vector' && _sourceLayer) {\n _features = _this9.map.map.querySourceFeatures(_sourceId, {\n sourceLayer: _sourceLayer,\n filter: _filter\n });\n } else if (_source && _source.type === 'geojson') {\n _features = _source._data.features || [];\n }\n } catch (error) {\n console.error('❌ Error getting features before layer removal:', error);\n }\n\n // Store the layer info for restoration\n _this9.originalPaintProperties[_layerId] = {\n 'fill-extrusion-color': _this9.map.map.getPaintProperty(_layerId, 'fill-extrusion-color'),\n 'fill-extrusion-height': _this9.map.map.getPaintProperty(_layerId, 'fill-extrusion-height'),\n 'fill-extrusion-opacity': _this9.map.map.getPaintProperty(_layerId, 'fill-extrusion-opacity'),\n 'source': _sourceId,\n 'source-layer': _sourceLayer,\n 'filter': _filter,\n 'features': _features // Store the features we got before removal\n };\n\n // COMPLETELY REMOVE the extrusion layer\n _this9.map.map.removeLayer(_layerId);\n\n // Store features to add later (don't add them now)\n if (!_this9.pendingExtrusionFeatures) {\n _this9.pendingExtrusionFeatures = [];\n }\n _this9.pendingExtrusionFeatures.push({\n layerId: _layerId,\n features: _features\n });\n }\n // } else if (layer.type === 'fill-extrusion') {\n // console.log('🔵 Processing fill-extrusion layer:', layerId);\n\n // // Get the layer info BEFORE removing it\n // const extrusionLayer = this.map.map.getLayer(layerId);\n // const sourceId = extrusionLayer.source;\n // const sourceLayer = extrusionLayer.sourceLayer;\n // const filter = extrusionLayer.filter;\n\n // console.log('🔵 Extrusion layer source:', sourceId, 'source-layer:', sourceLayer);\n // // GET FEATURES BEFORE REMOVING THE LAYER\n // let features = [];\n // try {\n // const source = this.map.map.getSource(sourceId);\n // console.log('SOURCE TYPE:', source.type);\n // console.log('SOURCE', source);\n // console.log('EXTRUSION LAYER:', extrusionLayer);\n // if (source && source.type === 'vector' && sourceLayer) {\n // features = this.map.map.querySourceFeatures(sourceId, {\n // sourceLayer: sourceLayer,\n // filter: filter\n // });\n // console.log('🔵 Found', features.length, 'features BEFORE removing layer');\n // } else if (source && source.type === 'geojson') {\n // features = source._data.features || [];\n // console.log('🔵 Found', features.length, 'GeoJSON features BEFORE removing layer');\n // }\n // } catch (error) {\n // console.error('❌ Error getting features before layer removal:', error);\n // }\n\n // console.log('🔵 FOUND EXTRUSION FEATURES:', features);\n\n // // Store the layer info for restoration\n // this.originalPaintProperties[layerId] = {\n // 'fill-extrusion-color': this.map.map.getPaintProperty(layerId, 'fill-extrusion-color'),\n // 'fill-extrusion-height': this.map.map.getPaintProperty(layerId, 'fill-extrusion-height'),\n // 'fill-extrusion-opacity': this.map.map.getPaintProperty(layerId, 'fill-extrusion-opacity'),\n // 'source': sourceId,\n // 'source-layer': sourceLayer,\n // 'filter': filter,\n // 'features': features // Store the features we got before removal\n // };\n\n // // COMPLETELY REMOVE the extrusion layer\n // console.log('🔵 Removing extrusion layer:', layerId);\n // this.map.map.removeLayer(layerId);\n\n // // Add the features to booked-content\n // this.addFeaturesToBookedContent(features, layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // console.log('🔵 Processing fill-extrusion layer:', layerId);\n\n // // Get the layer info BEFORE removing it\n // const extrusionLayer = this.map.map.getLayer(layerId);\n // const sourceId = extrusionLayer.source;\n\n // console.log('🔵 Extrusion layer source:', sourceId);\n\n // // Store the layer info for restoration\n // this.originalPaintProperties[layerId] = {\n // 'fill-extrusion-color': this.map.map.getPaintProperty(layerId, 'fill-extrusion-color'),\n // 'fill-extrusion-height': this.map.map.getPaintProperty(layerId, 'fill-extrusion-height'),\n // 'fill-extrusion-opacity': this.map.map.getPaintProperty(layerId, 'fill-extrusion-opacity')\n // };\n\n // // Store the source info for the fill layer creation\n // this.originalPaintProperties[layerId]['source'] = sourceId;\n // this.originalPaintProperties[layerId]['source-layer'] = extrusionLayer['source-layer'];\n // this.originalPaintProperties[layerId]['filter'] = extrusionLayer.filter;\n\n // // COMPLETELY REMOVE the extrusion layer\n // console.log('🔵 Removing extrusion layer:', layerId);\n // this.map.map.removeLayer(layerId);\n\n // // Create a fill layer with the same data\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // console.log('🔵 Processing fill-extrusion layer:', layerId);\n\n // // Store original values for extrusions\n // const originalColor = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // const originalHeight = this.map.map.getPaintProperty(layerId, 'fill-extrusion-height');\n // const originalVisibility = this.map.map.getLayoutProperty(layerId, 'visibility');\n\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = originalColor;\n // this.originalPaintProperties[layerId]['fill-extrusion-height'] = originalHeight;\n\n // // Store layout properties\n // if (!this.originalLayoutProperties) {\n // this.originalLayoutProperties = {};\n // }\n // this.originalLayoutProperties[layerId] = this.originalLayoutProperties[layerId] || {};\n // this.originalLayoutProperties[layerId]['visibility'] = originalVisibility;\n\n // console.log('🔵 Original extrusion visibility:', originalVisibility);\n\n // // COMPLETELY HIDE extrusions for non-floor features\n // const visibilityExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // 'visible', // Keep floors visible\n // 'none' // Hide all other extrusions completely\n // ];\n\n // console.log('🔵 Setting visibility expression:', visibilityExpression);\n // this.map.map.setLayoutProperty(layerId, 'visibility', visibilityExpression);\n\n // // Create corresponding 2D fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // console.log('🔵 Processing fill-extrusion layer:', layerId);\n\n // // Store original values for extrusions\n // const originalColor = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // const originalHeight = this.map.map.getPaintProperty(layerId, 'fill-extrusion-height');\n\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = originalColor;\n // this.originalPaintProperties[layerId]['fill-extrusion-height'] = originalHeight;\n\n // console.log('🔵 Original extrusion height:', originalHeight);\n\n // // Hide extrusions by setting height to 0 for non-floor features\n // const heightExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // originalHeight || 0, // Use original height or 0 if undefined\n // 0 // Set height to 0 for non-floor extrusions\n // ];\n\n // console.log('🔵 Setting height expression:', heightExpression);\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-height', heightExpression);\n\n // // Create corresponding 2D fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // this.originalPaintProperties[layerId]['fill-extrusion-height'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-height');\n\n // // Hide extrusions by setting height to 0 for non-floor features\n // const heightExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-height'], // Keep original height\n // 0 // Set height to 0 for non-floor extrusions\n // ];\n\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-height', heightExpression);\n\n // // Create corresponding 2D fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // console.log('🔵 Processing fill-extrusion layer:', layerId);\n\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // this.originalPaintProperties[layerId]['fill-extrusion-opacity'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-opacity');\n\n // console.log('🔵 Original extrusion opacity:', this.originalPaintProperties[layerId]['fill-extrusion-opacity']);\n\n // // Hide extrusions completely for non-floor features\n // const opacityExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-opacity'], // Keep original opacity\n // 0 // Hide non-floor extrusions completely\n // ];\n\n // console.log('🔵 Setting opacity expression:', opacityExpression);\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-opacity', opacityExpression);\n\n // // Create corresponding 2D fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // this.originalPaintProperties[layerId]['fill-extrusion-opacity'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-opacity');\n\n // // Hide extrusions completely for non-floor features\n // const opacityExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-opacity'], // Keep original opacity\n // 0 // Hide non-floor extrusions completely\n // ];\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-opacity', opacityExpression);\n\n // // Create corresponding 2D fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n\n // // Apply light grey styling but preserve floors at original color\n // const lightGreyExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-color'], // Keep original\n // '#e6e6e6' // Much lighter grey for non-floor extrusions\n // ];\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', lightGreyExpression);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n // this.originalPaintProperties[layerId]['fill-extrusion-height'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-height');\n\n // // Hide extrusions by setting height to 0 for non-floor features\n // const heightExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-height'], // Keep original height\n // 0 // Set height to 0 for non-floor extrusions (effectively hiding them)\n // ];\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-height', heightExpression);\n\n // // Create corresponding fill layers for the same features\n // this.createGreyFillLayerForExtrusion(layerId);\n // }\n // } else if (layer.type === 'fill-extrusion') {\n // // Store original values for extrusions\n // this.originalPaintProperties[layerId]['fill-extrusion-color'] = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n\n // // Apply light grey styling but preserve floors at original color\n // const lightGreyExpression = [\n // 'case',\n // ['==', ['get', 'type'], 'floor'],\n // this.originalPaintProperties[layerId]['fill-extrusion-color'], // Keep original\n // '#e6e6e6' // Much lighter grey for non-floor extrusions\n // ];\n // this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', lightGreyExpression);\n // }\n }\n });\n\n // Note: We no longer apply hover effects to existing layers in selection mode\n // The selectable features will have their own hover effects\n }\n }, {\n key: \"processPendingSymbolFeatures\",\n value: function processPendingSymbolFeatures() {\n var _this10 = this;\n if (!this.pendingSymbolFeatures || this.pendingSymbolFeatures.length === 0) {\n return;\n }\n\n // Process each group\n this.pendingSymbolFeatures.forEach(function (_ref) {\n var layerId = _ref.layerId,\n features = _ref.features;\n _this10.addSymbolFeaturesToBookedLabels(features, layerId);\n });\n\n // Clear the pending features\n this.pendingSymbolFeatures = [];\n }\n }, {\n key: \"addSymbolFeaturesToBookedLabels\",\n value: function addSymbolFeaturesToBookedLabels(features, symbolLayerId) {\n if (features.length === 0) {\n return;\n }\n try {\n // Get the current booked-labels source\n var bookedLabelsSource = this.map.map.getSource('booked-labels');\n if (!bookedLabelsSource) {\n console.error('❌ booked-labels source not found');\n return;\n }\n\n // Get current booked label features\n var currentBookedLabelsData = bookedLabelsSource._data;\n var currentBookedLabelFeatures = currentBookedLabelsData.features || [];\n\n // Convert symbol features to label features\n var labelFeatures = features.map(function (feature) {\n // Use feature.properties.title for existing symbol layers\n var title = feature.properties.title || feature.properties.name || 'Untitled';\n return {\n type: 'Feature',\n geometry: feature.geometry,\n properties: _objectSpread(_objectSpread({}, feature.properties), {}, {\n name: title // Ensure 'name' property exists for the text-field\n })\n };\n });\n\n // Add symbol features to booked label features\n var updatedBookedLabelFeatures = [].concat(_toConsumableArray(currentBookedLabelFeatures), _toConsumableArray(labelFeatures));\n\n // Update the booked-labels source\n bookedLabelsSource.setData({\n type: 'FeatureCollection',\n features: updatedBookedLabelFeatures\n });\n\n // Verify the update worked\n var verifySource = this.map.map.getSource('booked-labels');\n var verifyFeatures = verifySource._data.features || [];\n } catch (error) {\n console.error('❌ Error adding symbol features to booked-labels:', error);\n }\n }\n }, {\n key: \"addFeaturesToBookedContent\",\n value: function addFeaturesToBookedContent(features, extrusionLayerId) {\n if (features.length === 0) {\n return;\n }\n try {\n // Get the current booked-content source\n var bookedSource = this.map.map.getSource('booked-content');\n if (!bookedSource) {\n console.error('❌ booked-content source not found');\n return;\n }\n\n // Get current booked features\n var currentBookedData = bookedSource._data;\n var currentBookedFeatures = currentBookedData.features || [];\n\n // Use the features directly (no high-precision processing for now)\n var updatedBookedFeatures = [].concat(_toConsumableArray(currentBookedFeatures), _toConsumableArray(features));\n\n // Update the booked-content source\n bookedSource.setData({\n type: 'FeatureCollection',\n features: updatedBookedFeatures\n });\n\n // Verify the update worked\n var verifySource = this.map.map.getSource('booked-content');\n var verifyFeatures = verifySource._data.features || [];\n } catch (error) {\n console.error('❌ Error adding features to booked-content:', error);\n }\n }\n }, {\n key: \"processPendingExtrusionFeatures\",\n value: function processPendingExtrusionFeatures() {\n var _this11 = this;\n if (!this.pendingExtrusionFeatures || this.pendingExtrusionFeatures.length === 0) {\n return;\n }\n\n // Process each group\n this.pendingExtrusionFeatures.forEach(function (_ref2) {\n var layerId = _ref2.layerId,\n features = _ref2.features;\n _this11.addFeaturesToBookedContent(features, layerId);\n });\n\n // Clear the pending features\n this.pendingExtrusionFeatures = [];\n }\n\n // getHighPrecisionFeatures(features, extrusionLayerId) {\n // console.log('🔵 Using original features for', features.length, 'features');\n\n // // For now, just return the original features\n // // The issue might not be with precision but with how we're handling them\n // return features;\n // }\n }, {\n key: \"getHighPrecisionFeatures\",\n value: function getHighPrecisionFeatures(features, extrusionLayerId) {\n // Get the stored layer info\n var layerInfo = this.originalPaintProperties[extrusionLayerId];\n if (!layerInfo) {\n console.warn('⚠️ No layer info found, using original features');\n return features;\n }\n var sourceId = layerInfo.source;\n var sourceLayer = layerInfo['source-layer'];\n var filter = layerInfo.filter;\n try {\n // Get the source first\n var source = this.map.map.getSource(sourceId);\n if (!source) {\n console.error('❌ Source not found:', sourceId);\n return features;\n }\n\n // Try querying without changing zoom - just use current view\n var currentFeatures = this.map.map.querySourceFeatures(sourceId, {\n sourceLayer: sourceLayer,\n filter: filter\n });\n\n // If we got the same or more features, use them\n if (currentFeatures.length >= features.length) {\n return currentFeatures;\n } else {\n return features;\n }\n } catch (error) {\n console.error('❌ Error getting high-precision features:', error);\n return features;\n }\n }\n\n // async getHighPrecisionFeatures(features, extrusionLayerId) {\n // console.log('🔵 Getting high-precision geometries for', features.length, 'features');\n\n // // Get the stored layer info\n // const layerInfo = this.originalPaintProperties[extrusionLayerId];\n // if (!layerInfo) {\n // console.warn('⚠️ No layer info found, using original features');\n // return features;\n // }\n\n // const sourceId = layerInfo.source;\n // const sourceLayer = layerInfo['source-layer']; // Fixed: use bracket notation for hyphenated property\n // const filter = layerInfo.filter;\n\n // try {\n // // Get the source first\n // const source = this.map.map.getSource(sourceId);\n // if (!source) {\n // console.error('❌ Source not found:', sourceId);\n // return features;\n // }\n\n // // Temporarily zoom to max zoom to force high-res tile loading\n // const currentZoom = this.map.map.getZoom();\n // const currentCenter = this.map.map.getCenter();\n\n // // Zoom to max zoom briefly to load high-res tiles\n // this.map.map.setZoom(22);\n\n // // Wait a bit for tiles to load\n // await new Promise(resolve => setTimeout(resolve, 100));\n\n // // Query at max zoom\n // const highPrecisionFeatures = this.map.map.querySourceFeatures(sourceId, {\n // sourceLayer: sourceLayer,\n // filter: filter\n // });\n\n // // Restore original zoom\n // this.map.map.setZoom(currentZoom);\n // this.map.map.setCenter(currentCenter);\n\n // console.log('🔵 Retrieved', highPrecisionFeatures.length, 'high-precision features');\n\n // return highPrecisionFeatures.length > 0 ? highPrecisionFeatures : features;\n\n // } catch (error) {\n // console.error('❌ Error getting high-precision features:', error);\n // console.log('🔵 Falling back to original features');\n // return features;\n // }\n // }\n\n // createGreyFillLayerForExtrusion(extrusionLayerId) {\n // console.log('🔵 Adding extrusion features to booked-content source:', extrusionLayerId);\n\n // // Get the source info from the stored properties\n // const sourceId = this.originalPaintProperties[extrusionLayerId]['source'];\n // const sourceLayer = this.originalPaintProperties[extrusionLayerId]['source-layer'];\n // const filter = this.originalPaintProperties[extrusionLayerId]['filter'];\n\n // console.log('🔵 Using source:', sourceId, 'source-layer:', sourceLayer);\n\n // if (!sourceId) {\n // console.error('❌ Source ID not found for:', extrusionLayerId);\n // return;\n // }\n\n // try {\n // // Get the source\n // const source = this.map.map.getSource(sourceId);\n // if (!source) {\n // console.error('❌ Source not found:', sourceId);\n // return;\n // }\n\n // // Get features based on source type\n // let features = [];\n\n // if (source.type === 'geojson') {\n // // For GeoJSON sources, use _data\n // features = source._data.features || [];\n // } else if (source.type === 'vector') {\n // // For vector sources, use querySourceFeatures\n // if (sourceLayer) {\n // features = this.map.map.querySourceFeatures(sourceId, {\n // sourceLayer: sourceLayer,\n // filter: filter\n // });\n // } else {\n // console.warn('⚠️ No source-layer specified for vector source:', sourceId);\n // return;\n // }\n // }\n\n // console.log('🔵 Found', features.length, 'features in extrusion source');\n\n // if (features.length === 0) {\n // console.log('⚠️ No features found, skipping');\n // return;\n // }\n\n // // Get the current booked-content source\n // const bookedSource = this.map.map.getSource('booked-content');\n // if (!bookedSource) {\n // console.error('❌ booked-content source not found');\n // return;\n // }\n\n // // Get current booked features\n // const currentBookedData = bookedSource._data;\n // const currentBookedFeatures = currentBookedData.features || [];\n\n // // Add extrusion features to booked features\n // const updatedBookedFeatures = [...currentBookedFeatures, ...features];\n\n // // Update the booked-content source\n // bookedSource.setData({\n // type: 'FeatureCollection',\n // features: updatedBookedFeatures\n // });\n\n // console.log('✅ Added', features.length, 'extrusion features to booked-content. Total booked features:', updatedBookedFeatures.length);\n\n // } catch (error) {\n // console.error('❌ Error adding extrusion features to booked-content:', error);\n // }\n // }\n }, {\n key: \"removeGreyFillLayers\",\n value: function removeGreyFillLayers() {\n var _this12 = this;\n if (this.greyFillLayers) {\n this.greyFillLayers.forEach(function (layerId) {\n if (_this12.map.map.getLayer(layerId)) {\n _this12.map.map.removeLayer(layerId);\n }\n });\n this.greyFillLayers = [];\n }\n }\n }, {\n key: \"applySelectableHoverEffects\",\n value: function applySelectableHoverEffects() {\n var _this13 = this;\n // Remove any existing selection hover handler\n if (this.selectionHoverHandler) {\n this.map.map.off('mousemove', this.selectionHoverHandler);\n }\n\n // Create new hover handler for selectable features\n this.selectionHoverHandler = function (e) {\n if (!_this13.interactionEnabled || !_this13.selectionCriteria) return;\n\n // Query selectable fill layer\n var features = _this13.map.map.queryRenderedFeatures(e.point, {\n layers: ['selectable-fill-layer']\n });\n\n // Reset previous hover\n if (_this13.currentHoveredFeatureId) {\n _this13.map.map.setFeatureState({\n source: 'selectable-content',\n id: _this13.currentHoveredFeatureId\n }, {\n hover: false\n });\n }\n\n // Apply hover to new feature\n if (features.length > 0) {\n var feature = features[0];\n _this13.currentHoveredFeatureId = feature.properties.feature_id;\n _this13.map.map.setFeatureState({\n source: 'selectable-content',\n id: _this13.currentHoveredFeatureId\n }, {\n hover: true\n });\n _this13.map.map.getCanvas().style.cursor = 'pointer';\n } else {\n _this13.currentHoveredFeatureId = null;\n _this13.map.map.getCanvas().style.cursor = 'default';\n }\n };\n\n // Add the hover handler\n this.map.map.on('mousemove', this.selectionHoverHandler);\n\n // Update fill layer paint to respond to hover state\n this.map.map.setPaintProperty('selectable-fill-layer', 'fill-color', ['case', ['boolean', ['feature-state', 'hover'], false], this.selectionHoverColor,\n // #4A90E2\n '#FFFFFF' // Default white\n ]);\n }\n }, {\n key: \"createSelectionOpacityExpression\",\n value: function createSelectionOpacityExpression(criteria) {\n // Start with a base case for non-matching features (very low opacity)\n var expression = 0.1;\n\n // First check if feature type is 'floor' - always keep at full opacity\n expression = ['case', ['==', ['get', 'type'], 'floor'], 1.0, expression];\n\n // Build conditions for matching features (full opacity)\n var _loop = function _loop() {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n property = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n if (Array.isArray(value)) {\n // Handle multiple values (e.g., size: ['10x10', '20x10'])\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n var anyMatch = ['any'].concat(_toConsumableArray(conditions));\n expression = ['case', anyMatch, 1.0, expression];\n } else {\n // Handle single value\n expression = ['case', ['==', ['get', property], value], 1.0, expression];\n }\n };\n for (var _i = 0, _Object$entries = Object.entries(criteria); _i < _Object$entries.length; _i++) {\n _loop();\n }\n return expression;\n }\n }, {\n key: \"createSelectionColorOpacityExpression\",\n value: function createSelectionColorOpacityExpression(criteria, layerId) {\n // Get the original color\n var originalColor = this.map.map.getPaintProperty(layerId, 'fill-extrusion-color');\n if (!originalColor) return null;\n\n // Create an expression that sets non-selectable extrusions to solid color #2A2A2A\n // For floor type, keep original color\n var expression = ['case', ['==', ['get', 'type'], 'floor'], originalColor // Keep original color for floors\n ];\n\n // Add criteria matching - keep original color\n var _loop2 = function _loop2() {\n var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),\n property = _Object$entries2$_i[0],\n value = _Object$entries2$_i[1];\n if (Array.isArray(value)) {\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n var anyMatch = ['any'].concat(_toConsumableArray(conditions));\n expression.push(anyMatch, originalColor);\n } else {\n expression.push(['==', ['get', property], value], originalColor);\n }\n };\n for (var _i2 = 0, _Object$entries2 = Object.entries(criteria); _i2 < _Object$entries2.length; _i2++) {\n _loop2();\n }\n\n // For non-matching features, set to solid color #2A2A2A\n expression.push('#2A2A2A');\n return expression;\n }\n }, {\n key: \"restoreLayerToSelectionMode\",\n value: function restoreLayerToSelectionMode(layerId) {\n // Helper method to restore a layer to its selection mode colors\n var layer = this.map.map.getStyle().layers.find(function (l) {\n return l.id === layerId;\n });\n if (!layer) return;\n if (layer.type === 'fill') {\n var originalColor = this.originalPaintProperties[layerId]['fill-color'];\n if (originalColor) {\n this.map.map.setPaintProperty(layerId, 'fill-color', originalColor);\n }\n } else if (layer.type === 'fill-extrusion') {\n // Use selection mode expression if available, otherwise fall back to original\n var colorToRestore = this.selectionModeExpressions[layerId] || this.originalPaintProperties[layerId]['fill-extrusion-color'];\n if (colorToRestore) {\n this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', colorToRestore);\n }\n }\n }\n }, {\n key: \"applyHoverToFeature\",\n value: function applyHoverToFeature(layerId, featureId, layerType) {\n // Helper method to apply hover color to a specific feature\n if (layerType === 'fill') {\n this.map.map.setPaintProperty(layerId, 'fill-color', ['case', ['==', ['id'], featureId], this.selectionHoverColor, this.originalPaintProperties[layerId]['fill-color'] || ['get', 'color'] || 0]);\n } else if (layerType === 'fill-extrusion') {\n this.map.map.setPaintProperty(layerId, 'fill-extrusion-color', ['case', ['==', ['id'], featureId], this.selectionHoverColor, this.selectionModeExpressions[layerId] || this.originalPaintProperties[layerId]['fill-extrusion-color'] || ['get', 'color'] || 0]);\n }\n }\n }, {\n key: \"applySelectionHoverEffects\",\n value: function applySelectionHoverEffects(criteria) {\n var _this14 = this;\n // Use a single global mousemove handler instead of per-layer mouseenter/mouseleave\n // This approach continuously validates what's under the cursor and immediately invalidates stale hovers\n this.selectionHoverHandler = function (e) {\n if (!_this14.interactionEnabled || !_this14.selectionCriteria) return;\n\n // Query ALL features under the cursor\n var features = _this14.map.map.queryRenderedFeatures(e.point);\n\n // Find the first fill or fill-extrusion feature\n var fillFeature = features.find(function (f) {\n return f.layer.type === 'fill' || f.layer.type === 'fill-extrusion';\n });\n if (fillFeature) {\n var layerId = fillFeature.layer.id;\n var featureId = fillFeature.id;\n\n // Check if this is a different feature than currently hovered\n if (_this14.currentHoveredLayerId !== layerId || _this14.currentHoveredFeatureId !== featureId) {\n // INVALIDATE old hover if exists\n if (_this14.currentHoveredLayerId) {\n _this14.restoreLayerToSelectionMode(_this14.currentHoveredLayerId);\n }\n\n // Check if new feature is selectable\n if (_this14.featureMatchesCriteria(fillFeature.properties, _this14.selectionCriteria)) {\n // Apply hover to new selectable feature\n _this14.currentHoveredLayerId = layerId;\n _this14.currentHoveredFeatureId = featureId;\n _this14.applyHoverToFeature(layerId, featureId, fillFeature.layer.type);\n _this14.map.map.getCanvas().style.cursor = 'pointer';\n } else {\n // Non-selectable feature\n _this14.currentHoveredLayerId = null;\n _this14.currentHoveredFeatureId = null;\n _this14.map.map.getCanvas().style.cursor = 'default';\n }\n }\n } else {\n // No fill/extrusion features under cursor - clear any hover\n if (_this14.currentHoveredLayerId) {\n _this14.restoreLayerToSelectionMode(_this14.currentHoveredLayerId);\n _this14.currentHoveredLayerId = null;\n _this14.currentHoveredFeatureId = null;\n }\n _this14.map.map.getCanvas().style.cursor = 'default';\n }\n };\n\n // Add the single mousemove handler to the map\n this.map.map.on('mousemove', this.selectionHoverHandler);\n }\n }, {\n key: \"removeSelectionVisuals\",\n value: function removeSelectionVisuals() {\n var _this15 = this;\n // Restore all original paint properties\n for (var _i3 = 0, _Object$entries3 = Object.entries(this.originalPaintProperties); _i3 < _Object$entries3.length; _i3++) {\n var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),\n layerId = _Object$entries3$_i[0],\n properties = _Object$entries3$_i[1];\n for (var _i4 = 0, _Object$entries4 = Object.entries(properties); _i4 < _Object$entries4.length; _i4++) {\n var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i4], 2),\n property = _Object$entries4$_i[0],\n value = _Object$entries4$_i[1];\n if (property === 'source' || property === 'source-layer' || property === 'filter' || property === 'features') {\n // Skip non-paint properties\n continue;\n }\n if (value !== undefined) {\n this.map.map.setPaintProperty(layerId, property, value);\n }\n }\n\n // Restore visibility for symbol layers\n if (properties.source) {\n // This indicates it was a symbol layer we hid\n this.map.map.setLayoutProperty(layerId, 'visibility', 'visible');\n }\n }\n\n // Restore original filters for all layers AND reapply floor filtering\n var layers = this.map.map.getStyle().layers;\n var currentFloor = this.map.getCurrentFloor(); // Get current floor\n\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var _layerId2 = layer.id;\n\n // Skip our own selectable layers\n if (_layerId2.includes('selectable-')) {\n return;\n }\n\n // Restore original filter\n var originalFilter = _this15.map.map.getFilter(_layerId2);\n if (originalFilter) {\n // Check if this layer had an original filter stored\n var storedOriginalFilter = _this15.map.originalFilters[_layerId2];\n if (storedOriginalFilter !== undefined) {\n // Restore the original filter\n _this15.map.map.setFilter(_layerId2, storedOriginalFilter);\n\n // IMPORTANT: Reapply floor filtering after restoring original filter\n var floorFilter = ['==', ['get', '_floor'], currentFloor];\n if (storedOriginalFilter) {\n var combinedFilter = ['all', floorFilter, storedOriginalFilter];\n _this15.map.map.setFilter(_layerId2, combinedFilter);\n } else {\n _this15.map.map.setFilter(_layerId2, floorFilter);\n }\n }\n } else {\n // If no original filter, just apply floor filter\n var _floorFilter = ['==', ['get', '_floor'], currentFloor];\n _this15.map.map.setFilter(_layerId2, _floorFilter);\n }\n }\n });\n\n // Clear stored properties\n this.originalPaintProperties = {};\n this.selectionModeExpressions = {};\n\n // Remove selectable content layers\n this.map.removeSelectableContentLayers();\n\n // Remove grey fill layers\n this.removeGreyFillLayers();\n\n // Clear hover tracking\n this.currentHoveredLayerId = null;\n this.currentHoveredFeatureId = null;\n\n // Remove the global mousemove handler\n if (this.selectionHoverHandler) {\n this.map.map.off('mousemove', this.selectionHoverHandler);\n this.selectionHoverHandler = null;\n }\n this.pendingSymbolFeatures = [];\n this.pendingExtrusionFeatures = [];\n\n // Reset cursor\n this.map.map.getCanvas().style.cursor = 'default';\n }\n }, {\n key: \"_handleClick\",\n value: function _handleClick(e) {\n var _this16 = this;\n if (!this.interactionEnabled) return;\n var currentState = this.map.getCurrentState();\n if (currentState === 'selection') {\n // First check if clicking on confirmed selection features (for deselection)\n var confirmedFeatures = this.map.map.queryRenderedFeatures(e.point, {\n layers: ['confirmed-selection-fill-layer', 'confirmed-selection-outline-layer', 'confirmed-selection-icon-layer']\n });\n if (confirmedFeatures.length > 0) {\n var feature = confirmedFeatures[0];\n var featureId = feature.properties.feature_id; // Use feature_id consistently\n\n // Remove from confirmed selection layers using feature_id\n this.map.removeConfirmedSelectionFeature(featureId);\n\n // Fire deselection event\n this.map.fire('selection:featureDeselected', {\n feature: feature,\n placementId: feature.properties.placement_id || featureId // Keep placementId for UI compatibility\n });\n return;\n }\n\n // Then check for selectable features (for selection)\n var selectableFeatures = this.map.map.queryRenderedFeatures(e.point, {\n layers: ['selectable-fill-layer']\n });\n if (selectableFeatures.length > 0) {\n var _feature = selectableFeatures[0];\n var placementId = _feature.properties.placement_id;\n var _featureId = _feature.properties.feature_id; // Get feature_id for consistency\n\n // SINGLE-SELECT MODE: Optimistically remove previous selection\n if (!this.map.multiSelect) {\n var currentConfirmedFeatures = this.map.getConfirmedSelectionFeatures();\n if (currentConfirmedFeatures.length > 0) {\n var previousFeature = currentConfirmedFeatures[0];\n var previousFeatureId = previousFeature.properties.feature_id; // Use feature_id\n\n // Fire optimistic deselection event for previous feature\n this.map.fire('selection:featureDeselectedOptimistic', {\n placementId: previousFeature.properties.placement_id || previousFeatureId\n });\n }\n }\n\n // OPTIMISTIC SELECTION: Add to confirmed layers immediately for instant feedback\n this.map.addConfirmedSelectionFeature(_feature, !this.map.multiSelect);\n\n // Fire optimistic selection event immediately\n this.map.fire('selection:featureSelectedOptimistic', {\n feature: _feature\n });\n\n // Check if placement_id exists before attempting to fetch\n if (placementId && placementId !== 'unknown' && placementId !== '') {\n // Set loading state for content placement details\n this.map._stateCoordinator.setLoading(true, 'content');\n\n // Fetch content placement details and update selection context\n this.map.getContentPlacementDetails(placementId).then(function (details) {\n // Success - fire the full selection event to update the UI\n _this16.map.fire('selection:featureSelected', {\n feature: _feature,\n contentPlacement: details\n });\n })[\"catch\"](function (error) {\n console.error('❌ Error fetching content placement details:', error);\n\n // FAILURE - Remove from confirmed selection and show error\n _this16.map.removeConfirmedSelectionFeature(_featureId); // Use feature_id\n\n // Fire optimistic removal event\n _this16.map.fire('selection:featureDeselectedOptimistic', {\n placementId: placementId || _featureId\n });\n })[\"finally\"](function () {\n // Reset loading state\n _this16.map._stateCoordinator.setLoading(false, 'content');\n });\n } else {\n // Create a simple fallback content placement object\n var fallbackContentPlacement = _objectSpread({\n placement_id: _featureId,\n // Use feature_id as fallback\n name: _feature.properties.name || 'Unknown Feature',\n type: _feature.properties.type || 'unknown'\n }, _feature.properties);\n\n // Fire selection event with the simple fallback object\n this.map.fire('selection:featureSelected', {\n feature: _feature,\n contentPlacement: fallbackContentPlacement\n });\n }\n return;\n }\n } else {\n // Default behavior for other states\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length > 0) {\n var _feature2 = symbolFeatures[0];\n var _placementId = _feature2.properties.placement_id;\n\n // Check if placement_id exists before attempting to navigate\n if (_placementId && _placementId !== 'unknown' && _placementId !== '') {\n this.map.setToSelectedContentState([_placementId]);\n }\n }\n }\n }\n }, {\n key: \"featureMatchesCriteria\",\n value: function featureMatchesCriteria(properties, criteria) {\n for (var _i5 = 0, _Object$entries5 = Object.entries(criteria); _i5 < _Object$entries5.length; _i5++) {\n var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i5], 2),\n property = _Object$entries5$_i[0],\n value = _Object$entries5$_i[1];\n var featureValue = properties[property];\n if (Array.isArray(value)) {\n // Check if feature value is in the array of allowed values\n if (!value.includes(featureValue)) {\n return false;\n }\n } else {\n // Check if feature value matches the single required value\n if (featureValue !== value) {\n return false;\n }\n }\n }\n return true;\n }\n }, {\n key: \"_setupCursorHandling\",\n value: function _setupCursorHandling() {\n var _this17 = this;\n // Method 1: Using mouseenter/mouseleave events (recommended)\n this.map.map.on('mouseenter', 'confirmed-selection-fill-layer', function () {\n _this17.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-fill-layer', function () {\n _this17.map.map.getCanvas().style.cursor = '';\n });\n this.map.map.on('mouseenter', 'confirmed-selection-outline-layer', function () {\n _this17.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-outline-layer', function () {\n _this17.map.map.getCanvas().style.cursor = '';\n });\n this.map.map.on('mouseenter', 'confirmed-selection-icon-layer', function () {\n _this17.map.map.getCanvas().style.cursor = 'pointer';\n });\n this.map.map.on('mouseleave', 'confirmed-selection-icon-layer', function () {\n _this17.map.map.getCanvas().style.cursor = '';\n });\n }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InteractionControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/InteractionControl.js?");
618
618
 
619
619
  /***/ }),
620
620
 
@@ -801,7 +801,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
801
801
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
802
802
 
803
803
  "use strict";
804
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MapView: () => (/* binding */ MapView)\n/* harmony export */ });\n/* harmony import */ var _utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/resourceLoader */ \"./src/utils/resourceLoader.js\");\n/* harmony import */ var _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../WaygoMaps */ \"./src/WaygoMaps.js\");\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _StateCoordinator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./StateCoordinator */ \"./src/components/MapView/StateCoordinator.js\");\n/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../index */ \"./src/index.js\");\n/* harmony import */ var _assets_logoOutline_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../assets/logoOutline.svg */ \"./src/assets/logoOutline.svg\");\n/* harmony import */ var _assets_logoInner_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../assets/logoInner.svg */ \"./src/assets/logoInner.svg\");\n/* harmony import */ var _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../assets/loading-spinner 1.svg */ \"./src/assets/loading-spinner 1.svg\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\nvar _defaultMapOptions;\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); }\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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure 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 _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; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, 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); }\n\n\n\n\n\n\n\n\n\n// import WaygoLogoUrl from \"../../assets/WaygoLogoWhite.svg\";\n// import WaygoLogoUrl from \"../../assets/WaygoIconWhite.svg\";\n\n\nvar mapboxCSS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css';\nvar mapboxJS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js';\nvar accessToken = 'pk.eyJ1Ijoid2F5Z28tbWFwcyIsImEiOiJjbGtxYzZ1N3QxdG43M210bXFuYmJ4a3gxIn0.tlbznj_fRJ8La6s2UUMO6A';\nvar mock = {\n '2d1d26267da84c4b87eedc1751d71067:0dc23522b7f841ab88756a94428538d1': {\n 'steps': ['Leave Keynote Theater and make a left (73 ft)', 'Turn right at Kyndral (104 ft)', 'Turn left at SAP (182 ft)', 'Turn right at Samsung (47 ft)', 'Turn left at May Mobility (142 feet)', 'Turn right and arrive at Monta, on your left'],\n 'path': [[-81.557308010743881, -195.68687504906683], [-66.793528483184829, -195.68687504906688], [-66.793528483184829, -136.30367294932935], [-6.7541584044446665, -136.30367294932955], [-6.7541584044446195, -106.92078820451393], [81.828518760909716, -106.92078820451393], [81.828518760909716, -47.209502115275079], [140.88363687114594, -47.209502115275079]]\n }\n};\nvar mockData = {\n 'b1800bf6e3ed480cae21526e42464676:a7fa2fb07ae04049b9026c296d015d66': {\n 'steps': ['Leave Roundtable and make a left', 'Turn right after walking 177 feet', 'Turn left after walking 203 feet', 'Turn right after walking 100 feet', 'Continue straight in 242 feet', 'Arrive at Stage 4, on your left'],\n 'path': [[95.645948774511609, -118.96329432647396], [41.840174496296385, -118.96329432647379], [41.840174496296484, -56.955420310725756], [10.344111504170499, -56.955420310725756], [10.34411150417062, 18.175813285074767], [0.17350782962993705, 18.175813285074767], [0.17350782962999536, 54.265052130219125], [-25.417043351472369, 54.26505213021921]]\n },\n // ROUNDTABLE TO STAGE 4\n '529803fcdd7e4d5db5ed71b9ff1ef0e2:899969e0115b4d8da8fb51bedf7caff2': {\n 'steps': [\"Leave Startups Info Point and make a left\", \"Turn right in 12 feet\", \"Turn left in 37 feet\", \"Continue straight for 182 feet\", \"Turn right in 36 feet\", \"Turn left after 29 feet\", \"Turn right after 57 feet\", \"Turn left after walking 42 feet\", \"Arrive at Alpha 1, on your right\"],\n 'path': [[284.28160504078147, -119.85123601826949], [258.75367051155007, -119.8512360182694], [258.75367051155007, -57.515278013020058], [-40.902596633706594, -57.515278013019092], [-40.902596633706445, 19.584459519789313], [-169.83960450772221, 19.584459519789728], [-169.83960450772213, 78.311493640524645], [-215.11519505890323, 78.311493640524787]]\n },\n 'd1910e5724844b40bf8e2a721fba172a:3673b48d96b04d7aa65937dec3276d3c': {\n 'steps': [\"Leave startup lounge and make a right\", \"Continue straight for 22 feet, then turn left\", \"Turn right in 37 feet\", \"Continue straight for 143 feet, then turn left\", \"Turn right in 32 feet\", \"Continue straight for 210 feet\", \"Turn right, and continue for 5 feet\", \"Arrive at The Black Innovation Zone, on your right\"],\n 'path': [[417.35544488563073, 75.74517709550193], [356.33182283838664, 75.745177095502129], [356.33182283838653, 17.674310953769847], [121.7517703449482, 17.674310953770604], [121.75177034494808, -56.800754663027305], [-207.21694798680142, -56.80075466302624], [-207.21694798680144, -78.116837633560053]]\n }\n};\nvar defaultMapOptions = (_defaultMapOptions = {\n container: 'map',\n sourceId: '2024.2xw_YUXYS8GoDTB2AQgN3A',\n center: [0, 0],\n floor: 0,\n zoom: 13,\n bearing: 0,\n // 46.15762290134818,-25.60000000000025\n // pitch: 30,\n pitch: 46\n}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultMapOptions, \"bearing\", -25), \"minPitch\", 0), \"maxPitch\", 60), \"minZoom\", 10.5), \"maxZoom\", 19.5), \"bounds\", null), \"doubleClickZoom\", true), \"dragPan\", true), \"dragRotate\", true), \"scrollZoom\", true), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultMapOptions, \"touchPitch\", true), \"touchZoomRotate\", true), \"interactive\", true), \"trackResize\", true), \"keyboard\", true), \"defaultControls\", false), \"setup\", false), \"selectionCriteria\", null), \"initialState\", 'default'), \"initialStateData\", null));\nvar MapView = /*#__PURE__*/function (_Component) {\n function MapView() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, MapView);\n _this = _callSuper(this, MapView, [_objectSpread(_objectSpread({}, defaultMapOptions), options)]);\n _this.mapViewApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getMapViewApi();\n _this.searchApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getSearchApi();\n _this.routesApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getRotuesApi();\n _this.mapContainer = document.createElement('div');\n _this.mapContainer.className = 'inner-map-container';\n\n // Store initial state configuration BEFORE calling _initialize\n _this.initialState = options.initialState || 'default';\n _this.initialStateData = options.initialStateData || null;\n\n // If initializing in selection state, show loading overlay immediately\n if (_this.initialState === 'selection') {\n _this._createSelectionLoadingOverlay();\n _this._showSelectionLoadingOverlay();\n }\n _this.ready = _this._initialize(options);\n _this.initialLoad = false;\n _this.originalFilters = {};\n _this._currentFloorIndex = options.floor;\n _this.mapData = null;\n _this._stateCoordinator = new _StateCoordinator__WEBPACK_IMPORTED_MODULE_3__[\"default\"](_this);\n _this.defaultControls = options.defaultControls;\n _this.setupControl = null;\n _this.location = options.location || null;\n _this.modalContainer = null;\n _this.selectionCriteria = options.selectionCriteria || null;\n _this.multiSelect = true;\n _this.confirmedSelection = null;\n return _this;\n }\n _inherits(MapView, _Component);\n return _createClass(MapView, [{\n key: \"showModal\",\n value: function showModal(content) {\n var _this2 = this;\n // Create modal container if it doesn't exist\n if (!this.modalContainer) {\n this.modalContainer = document.createElement('div');\n this.modalContainer.className = 'waygo-map-modal-container';\n this.mapContainer.appendChild(this.modalContainer);\n\n // Add click handler to close modal when clicking outside\n this.modalContainer.addEventListener('click', function (e) {\n if (e.target === _this2.modalContainer) {\n _this2.hideModal();\n }\n });\n }\n\n // Create modal content\n var modalContent = document.createElement('div');\n modalContent.className = 'waygo-map-modal-content';\n\n // Can accept HTML string or DOM element\n if (typeof content === 'string') {\n modalContent.innerHTML = content;\n } else {\n modalContent.appendChild(content);\n }\n\n // Clear existing content and add new\n this.modalContainer.innerHTML = '';\n this.modalContainer.appendChild(modalContent);\n this.modalContainer.style.display = 'flex';\n }\n }, {\n key: \"hideModal\",\n value: function hideModal() {\n if (this.modalContainer) {\n this.modalContainer.style.display = 'none';\n }\n }\n }, {\n key: \"_initialize\",\n value: function () {\n var _initialize2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n var _this3 = this;\n var styleId;\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n _context.next = 3;\n return this._loadMapLibraries();\n case 3:\n mapboxgl.clearStorage();\n this.render();\n _context.next = 7;\n return this._initializeMapData();\n case 7:\n if (this.mapData) {\n _context.next = 10;\n break;\n }\n console.error(\"Error initializing map data.\");\n return _context.abrupt(\"return\");\n case 10:\n styleId = this.mapData.style_id;\n if (typeof mapboxgl !== 'undefined' && styleId) {\n mapboxgl.accessToken = accessToken;\n this.map = new mapboxgl.Map({\n container: this.mapContainer,\n style: \"mapbox://styles/waygo-maps/\".concat(styleId),\n center: this.options.center,\n zoom: this.options.zoom,\n bearing: this.options.bearing,\n pitch: this.options.pitch,\n minPitch: this.options.minPitch,\n maxPitch: this.options.maxPitch,\n minZoom: this.options.minZoom,\n maxZoom: this.options.maxZoom,\n bounds: this.options.bounds,\n doubleClickZoom: this.options.doubleClickZoom,\n dragPan: this.options.dragPan,\n dragRotate: this.options.dragRotate,\n scrollZoom: this.options.scrollZoom,\n touchPitch: this.options.touchPitch,\n touchZoomRotate: this.options.touchZoomRotate,\n interactive: this.options.interactive,\n trackResize: this.options.trackResize,\n keyboard: this.options.keyboard\n });\n this.map.on('styledata', function () {\n if (!_this3.initialLoad) {\n _this3._initializeOriginalFilters();\n _this3.updateFloor(_this3.options.floor, false);\n _this3.initialLoad = true;\n }\n });\n this.map.on('load', function () {\n if (_this3.defaultControls) {\n _this3._addLogoImage();\n _this3._addDefaultControls();\n _this3.updateFloor(_this3.options.floor, false);\n }\n\n // Initialize the specified state after map loads\n _this3._initializeState();\n _this3.fire('load', {\n mapData: _this3.mapData\n });\n });\n this._initializeEventListeners();\n } else {\n console.error('Mapbox GL JS is not loaded.');\n }\n _context.next = 17;\n break;\n case 14:\n _context.prev = 14;\n _context.t0 = _context[\"catch\"](0);\n console.error('Failed to initialize the map:', _context.t0);\n case 17:\n case \"end\":\n return _context.stop();\n }\n }, _callee, this, [[0, 14]]);\n }));\n function _initialize() {\n return _initialize2.apply(this, arguments);\n }\n return _initialize;\n }()\n }, {\n key: \"_addLogoImage\",\n value: function _addLogoImage() {\n var linkUrl = 'https://waygomaps.com';\n var imageContainer = document.createElement('div');\n imageContainer.className = 'logo-image-container';\n var outlineImageElement = document.createElement('img');\n outlineImageElement.className = 'logo-outline-element';\n outlineImageElement.src = _assets_logoOutline_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\n outlineImageElement.alt = 'Clickable image';\n\n // Append the image to the container\n imageContainer.appendChild(outlineImageElement);\n var fillImageElement = document.createElement('img');\n fillImageElement.className = 'logo-fill-element';\n fillImageElement.src = _assets_logoInner_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n fillImageElement.alt = 'Clickable image';\n\n // Append the image to the container\n imageContainer.appendChild(fillImageElement);\n\n // Add click event to open the link\n imageContainer.addEventListener('click', function () {\n window.open(linkUrl, '_blank'); // Open link in a new tab\n });\n\n // Append the container to the map container\n this.mapContainer.appendChild(imageContainer);\n\n // const websiteContainer = document.createElement('div');\n // websiteContainer.className = 'website-container';\n // websiteContainer.textContent = '© Waygo Maps';\n // // websiteContainer.textContent = 'waygomaps.com';\n\n // websiteContainer.addEventListener('click', () => {\n // window.open(linkUrl, '_blank'); // Open link in a new tab\n // });\n\n // this.mapContainer.appendChild(websiteContainer);\n }\n }, {\n key: \"getCurrentFloor\",\n value: function getCurrentFloor() {\n return this._currentFloorIndex;\n }\n }, {\n key: \"_addDefaultControls\",\n value: function _addDefaultControls() {\n var _this4 = this;\n var currentState = this._stateCoordinator.state;\n var controls = [];\n if (currentState === 'selection') {\n // In selection mode, only add essential controls\n controls = [new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].FloorSelectorControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].ContentPlacementControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].InteractionControl()];\n } else {\n // Default controls for other states\n controls = [\n // new waygo.ContentPlacementControl(),\n new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SearchBoxControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].FloorSelectorControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].CategoryBarControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SearchResultsControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].ContentPlacementControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].DirectionsControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].InteractionControl()\n // new waygo.FloorSelectorControl()\n ];\n }\n controls.forEach(function (control) {\n return _this4.addControl(control);\n });\n }\n }, {\n key: \"_initializeOriginalFilters\",\n value: function _initializeOriginalFilters() {\n var _this5 = this;\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n // Get and store the original filter, or set to null if no filter exists\n _this5.originalFilters[layer.id] = _this5.map.getFilter(layer.id) || null;\n }\n });\n }\n }, {\n key: \"_initializeEventListeners\",\n value: function _initializeEventListeners() {\n var _this6 = this;\n this.mapContainer.addEventListener('mousedown', function (event) {\n return _this6.fire('mousedown', {\n originalEvent: event\n });\n });\n // preclick\n this.mapContainer.addEventListener('click', function (event) {\n return _this6.fire('click', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('mouseover', function (event) {\n return _this6.fire('mouseover', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('mousemove', function (event) {\n return _this6.fire('mousemove', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('dblclick', function (event) {\n return _this6.fire('dblclick', {\n originalEvent: event\n });\n });\n // mouseenter\n // mouseleave\n this.mapContainer.addEventListener('mouseout', function (event) {\n return _this6.fire('mouseout', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('contextmenu', function (event) {\n return _this6.fire('contextmenu', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('wheel', function (event) {\n return _this6.fire('wheel', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchstart', function (event) {\n return _this6.fire('touchstart', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchend', function (event) {\n return _this6.fire('touchend', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchmove', function (event) {\n return _this6.fire('touchmove', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchcancel', function (event) {\n return _this6.fire('touchcancel', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('move', function (event) {\n return _this6.fire('move', {\n originalEvent: event\n });\n });\n var movementEvents = ['movestart', 'move', 'moveend', 'dragstart', 'drag', 'dragend', 'zoomstart', 'zoom', 'zoomend', 'rotatestart', 'rotate', 'rotateend', 'pitchstart', 'pitch', 'pitchend', 'boxzoomstart', 'boxzoomend', 'boxzoomcancel'];\n movementEvents.forEach(function (eventName) {\n _this6.map.on(eventName, function (event) {\n _this6.fire(eventName, {\n originalEvent: event\n });\n });\n });\n\n // Add selection confirmation event listener\n this.on('selection:confirmed', function (data) {\n _this6.confirmedSelection = data.feature;\n });\n }\n }, {\n key: \"_initializeMapData\",\n value: function () {\n var _initializeMapData2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {\n var parts, mapId, mapViewId, data;\n return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n parts = this.options.sourceId.split('.');\n if (!(parts.length < 1 || parts.length > 2)) {\n _context2.next = 4;\n break;\n }\n console.error('The sourceId format is incorrect. It should be in the format \"mapId\" or \"mapId.mapViewId\".');\n return _context2.abrupt(\"return\");\n case 4:\n // let accountId = parts[0] || '';\n // let mapId = parts[1] || '';\n // let mapViewId = parts[2] || '';\n mapId = parts[0];\n mapViewId = parts[1]; // Set account id in WaygoMaps\n // waygoMaps.setAccountId(accountId);\n _context2.prev = 6;\n _context2.next = 9;\n return this.mapViewApi.loadMapView(mapId, mapViewId);\n case 9:\n data = _context2.sent;\n this.mapData = data;\n _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].setAccountId(data.account_id);\n _context2.next = 17;\n break;\n case 14:\n _context2.prev = 14;\n _context2.t0 = _context2[\"catch\"](6);\n console.error('Error fetching map style:', _context2.t0);\n case 17:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2, this, [[6, 14]]);\n }));\n function _initializeMapData() {\n return _initializeMapData2.apply(this, arguments);\n }\n return _initializeMapData;\n }()\n }, {\n key: \"_loadMapLibraries\",\n value: function () {\n var _loadMapLibraries2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {\n return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return (0,_utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__.loadCSS)(mapboxCSS);\n case 2:\n _context3.next = 4;\n return (0,_utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__.loadScript)(mapboxJS);\n case 4:\n mapboxgl.clearStorage();\n case 5:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n function _loadMapLibraries() {\n return _loadMapLibraries2.apply(this, arguments);\n }\n return _loadMapLibraries;\n }()\n }, {\n key: \"render\",\n value: function render() {\n // this._addLogoImage();\n var targetContainer = document.getElementById(this.options.container);\n if (targetContainer) {\n targetContainer.appendChild(this.mapContainer);\n this.mapContainer.style.width = '100%';\n this.mapContainer.style.height = '100%';\n this.mapContainer.style.position = 'relative';\n } else {\n console.error(\"Container element with id \\\"\".concat(this.containerId, \"\\\" not found.\"));\n }\n }\n }, {\n key: \"updateFloor\",\n value: function updateFloor(floorIndex) {\n var _this7 = this;\n var zoomOut = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var originalFilter = _this7.originalFilters[layer.id];\n _this7.map.setFilter(layer.id, originalFilter);\n var floorFilter = ['==', ['get', '_floor'], floorIndex];\n if (originalFilter) {\n var combinedFilter = ['all', floorFilter, originalFilter];\n _this7.map.setFilter(layer.id, combinedFilter);\n } else {\n _this7.map.setFilter(layer.id, floorFilter);\n }\n }\n });\n this._currentFloorIndex = floorIndex;\n if (zoomOut) {\n var style = this.map.getStyle();\n var sources = Object.keys(style.sources);\n\n // console.log(\"STYLE\");\n // console.log(style);\n\n // Debug log to see available sources\n // console.log(\"Available sources:\", sources);\n\n var allFeatures = [];\n sources.forEach(function (sourceId) {\n // console.log(\"SOURCE ID\");\n // console.log(sourceId);\n var floorSourceLayer = \"\".concat(floorIndex, \"-feature\");\n var features = _this7.map.querySourceFeatures(sourceId, {\n sourceLayer: floorSourceLayer\n });\n // console.log(\"FEATURES\");\n // console.log(features);\n allFeatures = allFeatures.concat(features);\n });\n\n // console.log(\"ALL FEATURES\");\n // console.log(allFeatures.length, allFeatures);\n\n // If we have features, calculate their bounds\n if (allFeatures.length > 0) {\n var bounds = new mapboxgl.LngLatBounds();\n allFeatures.forEach(function (feature) {\n var geom = feature.geometry;\n // Handle different geometry types:\n if (geom.type === 'Point') {\n bounds.extend(geom.coordinates);\n } else if (geom.type === 'LineString') {\n geom.coordinates.forEach(function (coord) {\n return bounds.extend(coord);\n });\n } else if (geom.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n geom.coordinates[0].forEach(function (coord) {\n return bounds.extend(coord);\n });\n }\n // Add cases for MultiPoint, MultiLineString, MultiPolygon as needed\n });\n var currentPitch = this.map.getPitch();\n var currentBearing = this.map.getBearing();\n\n // Fit the map to these bounds with some padding\n this.map.fitBounds(bounds, {\n padding: 50,\n duration: 1300,\n maxZoom: 15.5,\n pitch: currentPitch,\n bearing: currentBearing\n // speed: 1.2,\n });\n } else {\n // If no features found, zoom out from current center\n // console.log(\"NO FEATURES FOUND\");\n this.map.once('moveend', function () {\n var allFeaturesAgain = [];\n sources.forEach(function (sourceId) {\n // console.log(\"SOURCE ID\");\n // console.log(sourceId);\n var floorSourceLayer = \"\".concat(floorIndex, \"-feature\");\n var features = _this7.map.querySourceFeatures(sourceId, {\n sourceLayer: floorSourceLayer\n });\n // console.log(\"FEATURES\");\n // console.log(features);\n allFeaturesAgain = allFeaturesAgain.concat(features);\n });\n if (allFeaturesAgain.length > 0) {\n var _bounds = new mapboxgl.LngLatBounds();\n allFeaturesAgain.forEach(function (feature) {\n var geom = feature.geometry;\n // Handle different geometry types:\n if (geom.type === 'Point') {\n _bounds.extend(geom.coordinates);\n } else if (geom.type === 'LineString') {\n geom.coordinates.forEach(function (coord) {\n return _bounds.extend(coord);\n });\n } else if (geom.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n geom.coordinates[0].forEach(function (coord) {\n return _bounds.extend(coord);\n });\n }\n // Add cases for MultiPoint, MultiLineString, MultiPolygon as needed\n });\n var _currentPitch = _this7.map.getPitch();\n var _currentBearing = _this7.map.getBearing();\n\n // Fit the map to these bounds with some padding\n _this7.map.fitBounds(_bounds, {\n padding: 50,\n duration: 1300,\n maxZoom: 15.5,\n pitch: _currentPitch,\n bearing: _currentBearing\n // speed: 1.2,\n });\n }\n });\n // this.map.jumpTo({\n // zoom: this.map.getZoom() - 3\n // });\n this.map.flyTo({\n zoom: this.map.getZoom() - 3,\n duration: 500,\n essential: true\n });\n }\n }\n this.fire('floorChanged', {\n floorIndex: floorIndex\n });\n }\n }, {\n key: \"addHighlightedFeature\",\n value: function addHighlightedFeature(coordinates, properties) {\n var source = this.map.getSource('highlighted-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n return newFeature;\n }\n }, {\n key: \"addSelectedFeature\",\n value: function addSelectedFeature(coordinates, properties) {\n var allow_multi_select = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n var source = this.map.getSource('selected-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n if (allow_multi_select) {\n currentData.features.push(newFeature);\n } else {\n currentData.features = [newFeature];\n }\n source.setData(currentData);\n }\n }, {\n key: \"clearSelectedContentLayer\",\n value: function clearSelectedContentLayer() {\n this.map.getSource('selected-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"clearHighlightedContentLayer\",\n value: function clearHighlightedContentLayer() {\n this.map.getSource('highlighted-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n\n // MARK: Controls\n }, {\n key: \"addControl\",\n value: function addControl(control) {\n var container = control.onAdd(this);\n this.mapContainer.appendChild(container);\n }\n }, {\n key: \"removeControl\",\n value: function removeControl(control) {\n this.map.removeControl(control);\n }\n\n // MARK: Map states\n }, {\n key: \"getCurrentState\",\n value: function getCurrentState() {\n return this._stateCoordinator.state;\n }\n }, {\n key: \"setToDefaultState\",\n value: function setToDefaultState() {\n // console.log(\"SET TO DEFAULT STATE\", this.location);\n this._stateCoordinator.transitionTo('default');\n }\n }, {\n key: \"setToSearchState\",\n value: function () {\n var _setToSearchState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(query) {\n var skip,\n limit,\n floor,\n results,\n _args4 = arguments;\n return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n skip = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;\n limit = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 40;\n floor = _args4.length > 3 && _args4[3] !== undefined ? _args4[3] : null;\n // Set loading state\n this._stateCoordinator.setLoading(true, 'search');\n _context4.prev = 4;\n _context4.next = 7;\n return this.search(query, skip, limit, floor);\n case 7:\n results = _context4.sent;\n this._stateCoordinator.transitionTo('search', {\n query: query,\n results: results\n });\n // Loading state will be reset in the transitionTo method\n _context4.next = 15;\n break;\n case 11:\n _context4.prev = 11;\n _context4.t0 = _context4[\"catch\"](4);\n console.error(\"\\u274C MapView: Search error occurred:\", _context4.t0);\n this._stateCoordinator.setLoading(false, 'search');\n // Handle error appropriately\n case 15:\n _context4.prev = 15;\n this._stateCoordinator.setLoading(false, 'search');\n return _context4.finish(15);\n case 18:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4, this, [[4, 11, 15, 18]]);\n }));\n function setToSearchState(_x) {\n return _setToSearchState.apply(this, arguments);\n }\n return setToSearchState;\n }()\n }, {\n key: \"setToSelectedContentState\",\n value: function () {\n var _setToSelectedContentState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(contentPlacementIds) {\n var lastContentPlacementId, selectedContentPlacement;\n return _regeneratorRuntime().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n // console.log(`📄 MapView: setToSelectedContentState called with IDs:`, contentPlacementIds);\n\n // Set loading state\n this._stateCoordinator.setLoading(true, 'content');\n _context5.prev = 1;\n lastContentPlacementId = contentPlacementIds[contentPlacementIds.length - 1];\n _context5.next = 5;\n return this.getContentPlacementDetails(lastContentPlacementId);\n case 5:\n selectedContentPlacement = _context5.sent;\n this.updateFloor(selectedContentPlacement.floor);\n this._stateCoordinator.transitionTo('selectedContent', {\n contentPlacementIds: contentPlacementIds,\n selectedContentPlacement: selectedContentPlacement\n });\n // Loading state will be reset in the transitionTo method\n _context5.next = 14;\n break;\n case 10:\n _context5.prev = 10;\n _context5.t0 = _context5[\"catch\"](1);\n console.error(\"\\u274C MapView: Content loading error occurred:\", _context5.t0);\n this._stateCoordinator.setLoading(false, 'content');\n // Handle error appropriately\n case 14:\n _context5.prev = 14;\n this._stateCoordinator.setLoading(false, 'content');\n return _context5.finish(14);\n case 17:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5, this, [[1, 10, 14, 17]]);\n }));\n function setToSelectedContentState(_x2) {\n return _setToSelectedContentState.apply(this, arguments);\n }\n return setToSelectedContentState;\n }()\n }, {\n key: \"setToDirectionsState\",\n value: function () {\n var _setToDirectionsState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {\n var startContentPlacementId,\n endContentPlacementId,\n startContentPlacement,\n endContentPlacement,\n _args6 = arguments;\n return _regeneratorRuntime().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n startContentPlacementId = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : null;\n endContentPlacementId = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : null;\n _context6.prev = 2;\n startContentPlacement = null;\n if (!startContentPlacementId) {\n _context6.next = 8;\n break;\n }\n _context6.next = 7;\n return this.getContentPlacementDetails(startContentPlacementId);\n case 7:\n startContentPlacement = _context6.sent;\n case 8:\n endContentPlacement = null;\n if (!endContentPlacementId) {\n _context6.next = 13;\n break;\n }\n _context6.next = 12;\n return this.getContentPlacementDetails(endContentPlacementId);\n case 12:\n endContentPlacement = _context6.sent;\n case 13:\n this._stateCoordinator.transitionTo('directions', {\n startContentPlacement: startContentPlacement,\n endContentPlacement: endContentPlacement\n });\n // Loading state will be reset in the transitionTo method\n _context6.next = 19;\n break;\n case 16:\n _context6.prev = 16;\n _context6.t0 = _context6[\"catch\"](2);\n console.error(\"\\u274C MapView: Directions state error occurred:\", _context6.t0);\n // console.log(`🔄 MapView: Resetting loading state due to error`);\n // this._stateCoordinator.setLoading(false, 'directions');\n // Handle error appropriately\n case 19:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6, this, [[2, 16]]);\n }));\n function setToDirectionsState() {\n return _setToDirectionsState.apply(this, arguments);\n }\n return setToDirectionsState;\n }()\n }, {\n key: \"setToSetupState\",\n value: function () {\n var _setToSetupState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {\n return _regeneratorRuntime().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n // console.log(\"SET TO SETUP STATE\");\n\n // Reset map view to default top-down perspective\n if (this.map) {\n this.map.easeTo({\n pitch: 0,\n bearing: 0,\n duration: 0\n });\n }\n if (!this.setupControl) {\n this.setupControl = new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SetupControl();\n this.addControl(this.setupControl);\n }\n this._stateCoordinator.transitionTo('setup');\n case 3:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7, this);\n }));\n function setToSetupState() {\n return _setToSetupState.apply(this, arguments);\n }\n return setToSetupState;\n }()\n }, {\n key: \"setToSelectionState\",\n value: function () {\n var _setToSelectionState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(criteria) {\n var multiSelect,\n _selectionStateData$f,\n _selectionStateData$f2,\n _selectionStateData$f3,\n selectionStateData,\n bounds,\n _args8 = arguments;\n return _regeneratorRuntime().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n multiSelect = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : true;\n console.log('🔵 setToSelectionState called with criteria:', criteria, 'multiSelect:', multiSelect);\n this.selectionCriteria = criteria;\n this.multiSelect = multiSelect;\n\n // Set loading state for selection features\n this._stateCoordinator.setLoading(true, 'selection');\n\n // Call the loadMapViewSelectionState endpoint\n _context8.prev = 5;\n console.log('🔵 Fetching GeoJSON from API...');\n _context8.next = 9;\n return this.mapViewApi.loadMapViewSelectionState(this.mapData.map_id, this.mapData.map_view_id, criteria);\n case 9:\n selectionStateData = _context8.sent;\n // Store the GeoJSON data for creating selectable layers\n this.selectionGeoJSON = selectionStateData;\n console.log('✅ Selection GeoJSON loaded:', {\n type: selectionStateData === null || selectionStateData === void 0 ? void 0 : selectionStateData.type,\n featureCount: selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f = selectionStateData.features) === null || _selectionStateData$f === void 0 ? void 0 : _selectionStateData$f.length,\n firstFeature: selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f2 = selectionStateData.features) === null || _selectionStateData$f2 === void 0 ? void 0 : _selectionStateData$f2[0],\n fullData: selectionStateData\n });\n\n // Transition to selection state WITH the GeoJSON data\n this._stateCoordinator.transitionTo('selection', {\n criteria: criteria,\n geojson: selectionStateData,\n multiSelect: multiSelect\n });\n\n // After transition, animate to fit bounds and lock to bird's eye view\n if ((selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f3 = selectionStateData.features) === null || _selectionStateData$f3 === void 0 ? void 0 : _selectionStateData$f3.length) > 0) {\n // Lock to bird's eye view first\n this.map.easeTo({\n pitch: 0,\n bearing: 0,\n duration: 500\n });\n\n // Calculate bounds from converted GeoJSON features\n bounds = new mapboxgl.LngLatBounds(); // Add null check here\n if (selectionStateData && selectionStateData.features) {\n selectionStateData.features.forEach(function (feature) {\n // Add bounds calculation logic here\n // Make sure feature.geometry.coordinates exists\n if (feature.geometry && feature.geometry.coordinates) {\n // Calculate bounds based on geometry type\n if (feature.geometry.type === 'Point') {\n bounds.extend(feature.geometry.coordinates);\n } else if (feature.geometry.type === 'LineString') {\n feature.geometry.coordinates.forEach(function (coord) {\n return bounds.extend(coord);\n });\n } else if (feature.geometry.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n feature.geometry.coordinates[0].forEach(function (coord) {\n return bounds.extend(coord);\n });\n }\n }\n });\n\n // Only call fitBounds if bounds is valid\n if (bounds.isEmpty() === false) {\n this.map.fitBounds(bounds, {\n padding: 80,\n duration: 1000,\n maxZoom: 16\n });\n }\n }\n }\n _context8.next = 21;\n break;\n case 16:\n _context8.prev = 16;\n _context8.t0 = _context8[\"catch\"](5);\n console.error('❌ Error loading map view selection state:', _context8.t0);\n this.selectionGeoJSON = null;\n // Still transition but without data\n this._stateCoordinator.transitionTo('selection', {\n criteria: criteria,\n geojson: null,\n multiSelect: multiSelect\n });\n case 21:\n _context8.prev = 21;\n // Reset loading state\n this._stateCoordinator.setLoading(false, 'selection');\n return _context8.finish(21);\n case 24:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8, this, [[5, 16, 21, 24]]);\n }));\n function setToSelectionState(_x3) {\n return _setToSelectionState.apply(this, arguments);\n }\n return setToSelectionState;\n }()\n }, {\n key: \"getConfirmedSelection\",\n value: function getConfirmedSelection() {\n return this.confirmedSelection;\n }\n }, {\n key: \"initiateBack\",\n value: function initiateBack() {\n this.fire('initiate:back');\n }\n }, {\n key: \"initiateSetToSearchState\",\n value: function initiateSetToSearchState() {\n this.fire('initiate:search');\n }\n }, {\n key: \"initiateFindPath\",\n value: function initiateFindPath(startContentPlacementId, endContentPlacementId) {\n this.fire('initiate:findPath', {\n startContentPlacementId: startContentPlacementId,\n endContentPlacementId: endContentPlacementId\n });\n }\n }, {\n key: \"initiateFindPathFromLocation\",\n value: function initiateFindPathFromLocation(endContentPlacement) {\n this.fire('initiate:findPathFromLocation', {\n endContentPlacement: endContentPlacement\n });\n }\n }, {\n key: \"findPath\",\n value: function () {\n var _findPath = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(startContentPlacementId, endContentPlacementId) {\n var response_data;\n return _regeneratorRuntime().wrap(function _callee9$(_context9) {\n while (1) switch (_context9.prev = _context9.next) {\n case 0:\n this._stateCoordinator.setLoading(true, 'directions');\n _context9.prev = 1;\n _context9.next = 4;\n return this.routesApi.findPath(this.mapData.map_id, startContentPlacementId, endContentPlacementId);\n case 4:\n response_data = _context9.sent;\n if (!response_data) {\n _context9.next = 9;\n break;\n }\n return _context9.abrupt(\"return\", response_data);\n case 9:\n console.error('Failed to find path.');\n case 10:\n _context9.prev = 10;\n this._stateCoordinator.setLoading(false, 'directions');\n return _context9.finish(10);\n case 13:\n case \"end\":\n return _context9.stop();\n }\n }, _callee9, this, [[1,, 10, 13]]);\n }));\n function findPath(_x4, _x5) {\n return _findPath.apply(this, arguments);\n }\n return findPath;\n }()\n }, {\n key: \"findPathFromNodeToPlacement\",\n value: function () {\n var _findPathFromNodeToPlacement = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(startNodeId, endPlacementId) {\n var response_data;\n return _regeneratorRuntime().wrap(function _callee10$(_context10) {\n while (1) switch (_context10.prev = _context10.next) {\n case 0:\n this._stateCoordinator.setLoading(true, 'directions');\n _context10.prev = 1;\n _context10.next = 4;\n return this.routesApi.findPathFromNodeToPlacement(this.mapData.map_id, startNodeId, endPlacementId);\n case 4:\n response_data = _context10.sent;\n if (!response_data) {\n _context10.next = 9;\n break;\n }\n return _context10.abrupt(\"return\", response_data);\n case 9:\n console.error('Failed to find path.');\n case 10:\n _context10.prev = 10;\n this._stateCoordinator.setLoading(false, 'directions');\n return _context10.finish(10);\n case 13:\n case \"end\":\n return _context10.stop();\n }\n }, _callee10, this, [[1,, 10, 13]]);\n }));\n function findPathFromNodeToPlacement(_x6, _x7) {\n return _findPathFromNodeToPlacement.apply(this, arguments);\n }\n return findPathFromNodeToPlacement;\n }() // MARK: Map methods\n }, {\n key: \"_findFeatureByPlacementId\",\n value: function _findFeatureByPlacementId(placementId) {\n var features = this.map.queryRenderedFeatures({\n filter: ['==', ['get', 'placement_id'], placementId]\n });\n\n // Return the first feature that matches the placementId\n return features.length > 0 ? features[0] : null;\n }\n }, {\n key: \"getCenter\",\n value: function getCenter() {\n // Update to convert from lat, lon, to x, y in meters\n if (this.map) {\n return this.map.getCenter();\n } else {\n console.error('Map is not initialized.');\n }\n }\n }, {\n key: \"setCenter\",\n value: function setCenter(lngLat) {\n // Update to convert from lat, lon, to x, y in meters\n if (this.map) {\n this.map.setCenter(lngLat);\n } else {\n console.error('Map is not initialized.');\n }\n }\n }, {\n key: \"search\",\n value: function () {\n var _search = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11(query) {\n var skip,\n limit,\n floor,\n _args11 = arguments;\n return _regeneratorRuntime().wrap(function _callee11$(_context11) {\n while (1) switch (_context11.prev = _context11.next) {\n case 0:\n skip = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : 0;\n limit = _args11.length > 2 && _args11[2] !== undefined ? _args11[2] : 40;\n floor = _args11.length > 3 && _args11[3] !== undefined ? _args11[3] : null;\n if (!(query === '')) {\n _context11.next = 5;\n break;\n }\n return _context11.abrupt(\"return\");\n case 5:\n if (this.mapData) {\n _context11.next = 7;\n break;\n }\n return _context11.abrupt(\"return\");\n case 7:\n _context11.prev = 7;\n _context11.next = 10;\n return this.searchApi.search(this.mapData.map_id, this.mapData.map_view_id, query, skip, limit, floor);\n case 10:\n return _context11.abrupt(\"return\", _context11.sent);\n case 13:\n _context11.prev = 13;\n _context11.t0 = _context11[\"catch\"](7);\n if (axios.isCancel(_context11.t0)) {\n console.error('Request canceled:', _context11.t0.message);\n } else {\n console.error('Search error:', _context11.t0);\n }\n case 16:\n case \"end\":\n return _context11.stop();\n }\n }, _callee11, this, [[7, 13]]);\n }));\n function search(_x8) {\n return _search.apply(this, arguments);\n }\n return search;\n }()\n }, {\n key: \"getContentPlacementDetails\",\n value: function () {\n var _getContentPlacementDetails = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12(contentPlacementId) {\n var details;\n return _regeneratorRuntime().wrap(function _callee12$(_context12) {\n while (1) switch (_context12.prev = _context12.next) {\n case 0:\n _context12.prev = 0;\n _context12.next = 3;\n return this.searchApi.fetchContentPlacementDetails(contentPlacementId);\n case 3:\n details = _context12.sent;\n return _context12.abrupt(\"return\", details);\n case 7:\n _context12.prev = 7;\n _context12.t0 = _context12[\"catch\"](0);\n if (axios.isCancel(_context12.t0)) {\n console.error('Request canceled:', _context12.t0.message);\n } else {\n console.error('Fetching content placement details error:', _context12.t0);\n }\n case 10:\n case \"end\":\n return _context12.stop();\n }\n }, _callee12, this, [[0, 7]]);\n }));\n function getContentPlacementDetails(_x9) {\n return _getContentPlacementDetails.apply(this, arguments);\n }\n return getContentPlacementDetails;\n }()\n }, {\n key: \"flyTo\",\n value: function flyTo(options) {\n // console.log('flyTo', options);\n this.map.flyTo(options);\n }\n }, {\n key: \"removeMatchingFeaturesFromExistingLayers\",\n value: function removeMatchingFeaturesFromExistingLayers(criteria) {\n var _this8 = this;\n console.log('🔵 Removing matching features from existing layers with criteria:', criteria);\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var layerId = layer.id;\n\n // Skip our own selectable layers\n if (layerId.includes('selectable-') || layerId.includes('booked-') || layerId.includes('selected-feature') || layerId.includes('confirmed-selection')) {\n return;\n }\n\n // Get current filter\n var currentFilter = _this8.map.getFilter(layerId);\n\n // Create a filter to exclude features that match ALL criteria\n var matchingCondition = null;\n var _loop = function _loop() {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n property = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n var condition;\n if (Array.isArray(value)) {\n // Handle multiple values (e.g., size: ['10x10', '20x10'])\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n condition = ['any'].concat(_toConsumableArray(conditions));\n } else {\n // Handle single value\n condition = ['==', ['get', property], value];\n }\n if (matchingCondition === null) {\n matchingCondition = condition;\n } else {\n // Combine with AND logic - feature must match ALL criteria\n matchingCondition = ['all', matchingCondition, condition];\n }\n };\n for (var _i = 0, _Object$entries = Object.entries(criteria); _i < _Object$entries.length; _i++) {\n _loop();\n }\n\n // Create exclusion filter - hide features that match ALL criteria\n var exclusionFilter = ['!', matchingCondition];\n\n // Apply the exclusion filter\n if (exclusionFilter) {\n if (currentFilter) {\n // Combine with existing filter\n var combinedFilter = ['all', currentFilter, exclusionFilter];\n _this8.map.setFilter(layerId, combinedFilter);\n } else {\n // Apply only the exclusion filter\n _this8.map.setFilter(layerId, exclusionFilter);\n }\n }\n }\n });\n console.log('✅ Matching features removed from existing layers');\n }\n }, {\n key: \"_getLabelGeometry\",\n value: function _getLabelGeometry(feature) {\n var refCoordinate = [0.0, 0.0];\n var scalingFactor = 30.0;\n if (feature.properties.label_location) {\n var labelLocation = feature.properties.label_location;\n\n // Parse JSON string if label_location is a string\n if (typeof labelLocation === 'string') {\n try {\n labelLocation = JSON.parse(labelLocation);\n } catch (error) {\n console.warn('Failed to parse label_location JSON:', error);\n return feature.geometry;\n }\n }\n if (labelLocation && labelLocation.coordinates && Array.isArray(labelLocation.coordinates) && labelLocation.coordinates.length >= 2) {\n var labelCoords = labelLocation.coordinates;\n if (typeof labelCoords[0] === 'number' && typeof labelCoords[1] === 'number') {\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n\n // Round coordinates to reduce precision issues\n var roundedCoords = [Math.round(convertedLabelCoords[0][0] * 1000000) / 1000000,\n // ~6 decimal places\n Math.round(convertedLabelCoords[0][1] * 1000000) / 1000000];\n return {\n type: 'Point',\n coordinates: roundedCoords\n };\n }\n }\n }\n return feature.geometry;\n }\n }, {\n key: \"createSelectableContentLayers\",\n value: function createSelectableContentLayers() {\n var _this9 = this;\n var geojsonData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n var dataToUse = geojsonData || this.selectionGeoJSON;\n console.log('🔵 CREATING LAYERS - Raw Data:', dataToUse);\n if (!dataToUse || !dataToUse.features) {\n console.error('❌ NO DATA TO CREATE LAYERS');\n return;\n }\n console.log('✅ GOT', dataToUse.features.length, 'FEATURES (in meter coordinates)');\n try {\n // Remove old layers if they exist\n if (this.map.getLayer('selectable-label-layer')) this.map.removeLayer('selectable-label-layer');\n if (this.map.getLayer('selectable-outline-layer')) this.map.removeLayer('selectable-outline-layer');\n if (this.map.getLayer('selectable-fill-layer')) this.map.removeLayer('selectable-fill-layer');\n if (this.map.getLayer('booked-label-layer')) this.map.removeLayer('booked-label-layer');\n // if (this.map.getLayer('booked-outline-layer')) this.map.removeLayer('booked-outline-layer');\n if (this.map.getLayer('booked-fill-layer')) this.map.removeLayer('booked-fill-layer');\n if (this.map.getSource('selectable-labels')) this.map.removeSource('selectable-labels');\n if (this.map.getSource('selectable-content')) this.map.removeSource('selectable-content');\n if (this.map.getSource('booked-labels')) this.map.removeSource('booked-labels');\n if (this.map.getSource('booked-content')) this.map.removeSource('booked-content');\n\n // Convert features from meter coordinates to lat/lon\n var refCoordinate = [0.0, 0.0]; // Reference point\n var scalingFactor = 30.0; // Same as used elsewhere in the app\n\n var convertedFeatures = dataToUse.features;\n\n // Separate features into selectable and booked\n var selectableFeatures = convertedFeatures.filter(function (feature) {\n return feature.properties.booking_status !== 'booked';\n });\n var bookedFeatures = convertedFeatures.filter(function (feature) {\n return feature.properties.booking_status === 'booked';\n });\n console.log('✅ SELECTABLE FEATURES:', selectableFeatures.length);\n console.log('✅ BOOKED FEATURES:', bookedFeatures.length);\n\n // Create selectable GeoJSON\n var selectableGeoJSON = {\n type: 'FeatureCollection',\n features: selectableFeatures\n };\n\n // Create booked GeoJSON\n var bookedGeoJSON = {\n type: 'FeatureCollection',\n features: bookedFeatures\n };\n\n // Add selectable content source\n this.map.addSource('selectable-content', {\n type: 'geojson',\n data: selectableGeoJSON,\n promoteId: 'placement_id'\n });\n console.log('✅ SELECTABLE SOURCE ADDED');\n\n // Add booked content source\n this.map.addSource('booked-content', {\n type: 'geojson',\n data: bookedGeoJSON,\n promoteId: 'placement_id'\n });\n console.log('✅ BOOKED SOURCE ADDED');\n\n // Create label features for selectable content\n var selectableLabelFeatures = selectableFeatures.map(function (feature) {\n var labelGeometry;\n if (feature.properties.label_location) {\n var labelCoords = feature.properties.label_location.coordinates;\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n labelGeometry = {\n type: 'Point',\n coordinates: convertedLabelCoords[0]\n };\n } else {\n labelGeometry = feature.geometry;\n }\n return {\n type: 'Feature',\n geometry: labelGeometry,\n properties: feature.properties\n };\n });\n\n // Create label features for booked content\n var bookedLabelFeatures = bookedFeatures.map(function (feature) {\n var labelGeometry;\n if (feature.properties.label_location) {\n var labelCoords = feature.properties.label_location.coordinates;\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n labelGeometry = {\n type: 'Point',\n coordinates: convertedLabelCoords[0]\n };\n } else {\n labelGeometry = feature.geometry;\n }\n return {\n type: 'Feature',\n geometry: labelGeometry,\n properties: feature.properties\n };\n });\n this.map.addSource('selectable-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: selectableLabelFeatures\n }\n });\n console.log('✅ SELECTABLE LABEL SOURCE ADDED');\n this.map.addSource('booked-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: bookedLabelFeatures\n }\n });\n console.log('✅ BOOKED LABEL SOURCE ADDED');\n\n // Create canvas-based checkmark icon for confirmed selections\n var canvas = document.createElement('canvas');\n var baseSize = 48;\n var scaleFactor = 1;\n canvas.width = baseSize * scaleFactor;\n canvas.height = baseSize * scaleFactor;\n var ctx = canvas.getContext('2d');\n ctx.scale(scaleFactor, scaleFactor);\n\n // Draw white circle background\n ctx.fillStyle = 'white';\n ctx.beginPath();\n ctx.arc(24, 24, 20, 0, Math.PI * 2);\n ctx.fill();\n\n // Draw green circle border\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 3;\n ctx.stroke();\n\n // Draw green checkmark\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 4;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(14, 24);\n ctx.lineTo(20, 30);\n ctx.lineTo(34, 16);\n ctx.stroke();\n var pngDataUri = canvas.toDataURL('image/png');\n console.log('✅ High-resolution canvas checkmark icon created');\n this.map.loadImage(pngDataUri, function (error, image) {\n if (error) {\n console.error('❌ Error loading canvas checkmark icon:', error);\n } else {\n _this9.map.addImage('checkmark-icon', image);\n console.log('✅ CHECKMARK ICON LOADED');\n if (!_this9.map.getLayer('confirmed-selection-icon-layer')) {\n _this9.map.addLayer({\n id: 'confirmed-selection-icon-layer',\n type: 'symbol',\n source: 'confirmed-selection-labels',\n layout: {\n 'icon-image': 'checkmark-icon',\n 'icon-size': 0.60,\n 'icon-anchor': 'center',\n 'icon-allow-overlap': true\n }\n });\n console.log('✅ CONFIRMED SELECTION ICON LAYER ADDED');\n }\n }\n });\n\n // Create confirmed selection label source\n this.map.addSource('confirmed-selection-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: []\n }\n });\n console.log('✅ CONFIRMED SELECTION LABELS SOURCE ADDED');\n\n // Add confirmed selection label layer\n this.map.addLayer({\n id: 'confirmed-selection-label-layer',\n type: 'symbol',\n source: 'confirmed-selection-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#00C853',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n console.log('✅ CONFIRMED SELECTION LABEL LAYER ADDED');\n this.map.addSource('confirmed-selection', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: []\n }\n });\n console.log('✅ CONFIRMED SELECTION SOURCE ADDED');\n\n // Add layers in correct order (bottom to top)\n // 1. Booked fill layer (light grey) - bottom layer\n this.map.addLayer({\n id: 'booked-fill-layer',\n type: 'fill',\n source: 'booked-content',\n paint: {\n 'fill-color': '#E5E5E5',\n 'fill-opacity': 1.0\n }\n });\n console.log('✅ BOOKED FILL LAYER ADDED');\n\n // 2. Booked outline layer (grey outline)\n // this.map.addLayer({\n // id: 'booked-outline-layer',\n // type: 'line',\n // source: 'booked-content',\n // paint: {\n // 'line-color': '#999999',\n // 'line-width': 1\n // }\n // });\n // console.log('✅ BOOKED OUTLINE LAYER ADDED');\n\n // 3. Booked label layer (grey text)\n this.map.addLayer({\n id: 'booked-label-layer',\n type: 'symbol',\n source: 'booked-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#666666',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n console.log('✅ BOOKED LABEL LAYER ADDED');\n\n // 4. Base selectable fill layer (white)\n this.map.addLayer({\n id: 'selectable-fill-layer',\n type: 'fill',\n source: 'selectable-content',\n paint: {\n 'fill-color': '#FFFFFF',\n 'fill-opacity': 0.8\n }\n });\n console.log('✅ SELECTABLE FILL LAYER ADDED');\n\n // 5. Selectable outline layer (blue outline)\n this.map.addLayer({\n id: 'selectable-outline-layer',\n type: 'line',\n source: 'selectable-content',\n paint: {\n 'line-color': '#1987ff',\n 'line-width': 2\n }\n });\n console.log('✅ SELECTABLE OUTLINE LAYER ADDED');\n\n // 6. Confirmed selection fill layer (light green fill)\n this.map.addLayer({\n id: 'confirmed-selection-fill-layer',\n type: 'fill',\n source: 'confirmed-selection',\n paint: {\n 'fill-color': '#d1fae2',\n 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0.6, 16, 0.8]\n }\n });\n console.log('✅ CONFIRMED SELECTION FILL LAYER ADDED');\n\n // 7. Confirmed selection outline layer (green outline)\n this.map.addLayer({\n id: 'confirmed-selection-outline-layer',\n type: 'line',\n source: 'confirmed-selection',\n paint: {\n 'line-color': '#00C853',\n 'line-width': 2,\n 'line-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0.7, 16, 1.0]\n }\n });\n console.log('✅ CONFIRMED SELECTION OUTLINE LAYER ADDED');\n\n // 8. Selectable label layer (blue text)\n this.map.addLayer({\n id: 'selectable-label-layer',\n type: 'symbol',\n source: 'selectable-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#0263ca',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n console.log('✅ SELECTABLE LABEL LAYER ADDED');\n\n // Verify layer order and existence\n console.log('🔍 LAYER ORDER VERIFICATION:');\n var allLayers = this.map.getStyle().layers;\n var ourLayers = allLayers.filter(function (layer) {\n return layer.id.includes('selectable-') || layer.id.includes('booked-') || layer.id.includes('confirmed-selection');\n });\n ourLayers.forEach(function (layer, index) {\n console.log(\"\".concat(index + 1, \". \").concat(layer.id, \" (\").concat(layer.type, \")\"));\n });\n console.log('🔍 LAYERS EXIST:');\n console.log('- Booked Fill:', !!this.map.getLayer('booked-fill-layer'));\n // console.log('- Booked Outline:', !!this.map.getLayer('booked-outline-layer'));\n console.log('- Booked Label:', !!this.map.getLayer('booked-label-layer'));\n console.log('- Selectable Fill:', !!this.map.getLayer('selectable-fill-layer'));\n console.log('- Selectable Outline:', !!this.map.getLayer('selectable-outline-layer'));\n console.log('- Confirmed Selection Fill:', !!this.map.getLayer('confirmed-selection-fill-layer'));\n console.log('- Confirmed Selection Outline:', !!this.map.getLayer('confirmed-selection-outline-layer'));\n console.log('- Confirmed Selection Icon:', !!this.map.getLayer('confirmed-selection-icon-layer'));\n console.log('- Confirmed Selection Label:', !!this.map.getLayer('confirmed-selection-label-layer'));\n console.log('- Selectable Label:', !!this.map.getLayer('selectable-label-layer'));\n } catch (error) {\n console.error('❌ ERROR:', error);\n console.error('Stack:', error.stack);\n }\n }\n }, {\n key: \"removeSelectableContentLayers\",\n value: function removeSelectableContentLayers() {\n var _this10 = this;\n console.log('🔵 removeSelectableContentLayers called');\n\n // Remove layers if they exist\n var layerIds = ['selectable-label-layer', 'selectable-outline-layer', 'selectable-fill-layer', 'booked-label-layer',\n // 'booked-outline-layer', \n 'booked-fill-layer', 'confirmed-selection-fill-layer', 'confirmed-selection-outline-layer', 'confirmed-selection-icon-layer', 'confirmed-selection-label-layer'];\n layerIds.forEach(function (layerId) {\n if (_this10.map.getLayer(layerId)) {\n console.log('🔵 Removing layer:', layerId);\n _this10.map.removeLayer(layerId);\n }\n });\n\n // Remove sources if they exist\n if (this.map.getSource('selectable-content')) {\n console.log('🔵 Removing source: selectable-content');\n this.map.removeSource('selectable-content');\n }\n if (this.map.getSource('selectable-labels')) {\n console.log('🔵 Removing source: selectable-labels');\n this.map.removeSource('selectable-labels');\n }\n if (this.map.getSource('booked-content')) {\n console.log('🔵 Removing source: booked-content');\n this.map.removeSource('booked-content');\n }\n if (this.map.getSource('booked-labels')) {\n console.log('🔵 Removing source: booked-labels');\n this.map.removeSource('booked-labels');\n }\n if (this.map.getSource('confirmed-selection')) {\n console.log('🔵 Removing source: confirmed-selection');\n this.map.removeSource('confirmed-selection');\n }\n if (this.map.getSource('confirmed-selection-labels')) {\n console.log('🔵 Removing source: confirmed-selection-labels');\n this.map.removeSource('confirmed-selection-labels');\n }\n\n // Remove checkmark icon\n if (this.map.hasImage('checkmark-icon')) {\n console.log('�� Removing checkmark icon');\n this.map.removeImage('checkmark-icon');\n }\n console.log('✅ Selectable layers cleanup complete');\n }\n\n // Clear confirmed selection layers\n }, {\n key: \"clearSelectionLayers\",\n value: function clearSelectionLayers() {\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n if (confirmedSource) {\n confirmedSource.setData({\n type: 'FeatureCollection',\n features: []\n });\n }\n if (confirmedLabelsSource) {\n confirmedLabelsSource.setData({\n type: 'FeatureCollection',\n features: []\n });\n }\n console.log('✅ Cleared confirmed selection layers');\n }\n\n // Add feature directly to confirmed selection (immediate selection)\n }, {\n key: \"addConfirmedSelectionFeature\",\n value: function addConfirmedSelectionFeature(feature) {\n var _this11 = this;\n var clearExisting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n var selectableSource = this.map.getSource('selectable-content');\n var selectableLabelsSource = this.map.getSource('selectable-labels');\n if (!confirmedSource || !confirmedLabelsSource || !selectableSource || !selectableLabelsSource) {\n console.error('❌ Required sources not found for confirmed selection');\n return;\n }\n var confirmedData = confirmedSource._data;\n var confirmedLabelsData = confirmedLabelsSource._data;\n var selectableData = selectableSource._data;\n var selectableLabelsData = selectableLabelsSource._data;\n var placementId = feature.properties.placement_id;\n\n // Clear existing selections if requested (single-select mode)\n if (clearExisting) {\n // Move all confirmed features back to selectable layers\n confirmedData.features.forEach(function (confirmedFeature) {\n var confirmedPlacementId = confirmedFeature.properties.placement_id;\n console.log('🔵 CONFIRMED feature label location:', confirmedFeature);\n\n // Re-add to selectable layers\n selectableData.features.push(confirmedFeature);\n selectableLabelsData.features.push({\n type: 'Feature',\n geometry: _this11._getLabelGeometry(confirmedFeature),\n properties: confirmedFeature.properties\n });\n });\n\n // Clear confirmed layers\n confirmedData.features = [];\n confirmedLabelsData.features = [];\n }\n\n // Add new feature to confirmed layers\n confirmedData.features.push(feature);\n confirmedSource.setData(confirmedData);\n console.log('🔵 CONFIRMED feature label location:', feature);\n\n // Create and add label feature\n var labelFeature = {\n type: 'Feature',\n geometry: this._getLabelGeometry(feature),\n properties: feature.properties\n };\n confirmedLabelsData.features.push(labelFeature);\n confirmedLabelsSource.setData(confirmedLabelsData);\n\n // Remove from selectable layers\n selectableData.features = selectableData.features.filter(function (f) {\n return f.properties.placement_id !== placementId;\n });\n selectableSource.setData(selectableData);\n selectableLabelsData.features = selectableLabelsData.features.filter(function (f) {\n return f.properties.placement_id !== placementId;\n });\n selectableLabelsSource.setData(selectableLabelsData);\n console.log('✅ Added feature to confirmed selection. Confirmed now has', confirmedData.features.length, 'features');\n }\n\n // Remove feature from confirmed selection (deselect)\n }, {\n key: \"removeConfirmedSelectionFeature\",\n value: function removeConfirmedSelectionFeature(placementId) {\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n var selectableSource = this.map.getSource('selectable-content');\n var selectableLabelsSource = this.map.getSource('selectable-labels');\n if (!confirmedSource || !confirmedLabelsSource || !selectableSource || !selectableLabelsSource) {\n console.error('❌ Required sources not found for confirmed selection');\n return;\n }\n var confirmedData = confirmedSource._data;\n var confirmedLabelsData = confirmedLabelsSource._data;\n var selectableData = selectableSource._data;\n var selectableLabelsData = selectableLabelsSource._data;\n\n // Find and remove feature from confirmed layers\n var featureToRemove = confirmedData.features.find(function (f) {\n return f.properties.placement_id === placementId;\n });\n if (!featureToRemove) {\n console.log('⚠️ Feature not found in confirmed selection:', placementId);\n return;\n }\n\n // Remove from confirmed layers\n confirmedData.features = confirmedData.features.filter(function (f) {\n return f.properties.placement_id !== placementId;\n });\n confirmedSource.setData(confirmedData);\n confirmedLabelsData.features = confirmedLabelsData.features.filter(function (f) {\n return f.properties.placement_id !== placementId;\n });\n confirmedLabelsSource.setData(confirmedLabelsData);\n\n // Re-add to selectable layers\n selectableData.features.push(featureToRemove);\n selectableSource.setData(selectableData);\n var labelFeature = {\n type: 'Feature',\n geometry: this._getLabelGeometry(featureToRemove),\n properties: featureToRemove.properties\n };\n selectableLabelsData.features.push(labelFeature);\n selectableLabelsSource.setData(selectableLabelsData);\n console.log('✅ Removed feature from confirmed selection. Confirmed now has', confirmedData.features.length, 'features');\n }\n\n // Get all currently confirmed selection features\n }, {\n key: \"getConfirmedSelectionFeatures\",\n value: function getConfirmedSelectionFeatures() {\n var confirmedSource = this.map.getSource('confirmed-selection');\n if (!confirmedSource) {\n return [];\n }\n return confirmedSource._data.features || [];\n }\n\n // Check if a feature is currently selected\n }, {\n key: \"isFeatureSelected\",\n value: function isFeatureSelected(placementId) {\n var confirmedFeatures = this.getConfirmedSelectionFeatures();\n return confirmedFeatures.some(function (f) {\n return f.properties.placement_id === placementId;\n });\n }\n }, {\n key: \"_initializeState\",\n value: function () {\n var _initializeState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {\n var _this$initialStateDat, _this$initialStateDat2;\n return _regeneratorRuntime().wrap(function _callee13$(_context13) {\n while (1) switch (_context13.prev = _context13.next) {\n case 0:\n console.log('🔵 Initializing map in state:', this.initialState, 'with data:', this.initialStateData);\n _context13.prev = 1;\n _context13.t0 = this.initialState;\n _context13.next = _context13.t0 === 'default' ? 5 : _context13.t0 === 'search' ? 6 : _context13.t0 === 'selectedContent' ? 13 : _context13.t0 === 'directions' ? 20 : _context13.t0 === 'selection' ? 23 : _context13.t0 === 'setup' ? 32 : 35;\n break;\n case 5:\n return _context13.abrupt(\"break\", 38);\n case 6:\n if (!(this.initialStateData && this.initialStateData.query)) {\n _context13.next = 11;\n break;\n }\n _context13.next = 9;\n return this.setToSearchState(this.initialStateData.query, this.initialStateData.skip || 0, this.initialStateData.limit || 40, this.initialStateData.floor || null);\n case 9:\n _context13.next = 12;\n break;\n case 11:\n console.warn('⚠️ Search state requires initialStateData with query property');\n case 12:\n return _context13.abrupt(\"break\", 38);\n case 13:\n if (!(this.initialStateData && this.initialStateData.contentPlacementIds)) {\n _context13.next = 18;\n break;\n }\n _context13.next = 16;\n return this.setToSelectedContentState(this.initialStateData.contentPlacementIds);\n case 16:\n _context13.next = 19;\n break;\n case 18:\n console.warn('⚠️ SelectedContent state requires initialStateData with contentPlacementIds property');\n case 19:\n return _context13.abrupt(\"break\", 38);\n case 20:\n _context13.next = 22;\n return this.setToDirectionsState(((_this$initialStateDat = this.initialStateData) === null || _this$initialStateDat === void 0 ? void 0 : _this$initialStateDat.startContentPlacementId) || null, ((_this$initialStateDat2 = this.initialStateData) === null || _this$initialStateDat2 === void 0 ? void 0 : _this$initialStateDat2.endContentPlacementId) || null);\n case 22:\n return _context13.abrupt(\"break\", 38);\n case 23:\n if (!(this.initialStateData && this.initialStateData.criteria)) {\n _context13.next = 29;\n break;\n }\n _context13.next = 26;\n return this.setToSelectionState(this.initialStateData.criteria, this.initialStateData.multiSelect !== false // Default to true\n );\n case 26:\n // Hide loading overlay after selection state is loaded\n this._hideSelectionLoadingOverlay();\n _context13.next = 31;\n break;\n case 29:\n console.warn('⚠️ Selection state requires initialStateData with criteria property');\n // Hide loading overlay on invalid data\n this._hideSelectionLoadingOverlay();\n case 31:\n return _context13.abrupt(\"break\", 38);\n case 32:\n _context13.next = 34;\n return this.setToSetupState();\n case 34:\n return _context13.abrupt(\"break\", 38);\n case 35:\n console.warn('⚠️ Unknown initial state:', this.initialState);\n // Hide loading overlay on unknown state\n this._hideSelectionLoadingOverlay();\n return _context13.abrupt(\"break\", 38);\n case 38:\n _context13.next = 45;\n break;\n case 40:\n _context13.prev = 40;\n _context13.t1 = _context13[\"catch\"](1);\n console.error('❌ Error initializing state:', _context13.t1);\n // Hide loading overlay on error\n this._hideSelectionLoadingOverlay();\n // Fall back to default state\n this._stateCoordinator.transitionTo('default');\n case 45:\n case \"end\":\n return _context13.stop();\n }\n }, _callee13, this, [[1, 40]]);\n }));\n function _initializeState() {\n return _initializeState2.apply(this, arguments);\n }\n return _initializeState;\n }()\n }, {\n key: \"_createSelectionLoadingOverlay\",\n value: function _createSelectionLoadingOverlay() {\n this.selectionLoadingOverlay = document.createElement('div');\n this.selectionLoadingOverlay.className = 'selection-loading-overlay';\n\n // Option 2: NEW Circular progress loader - FIXED SIZE\n var progressContainer = document.createElement('div');\n progressContainer.className = 'selection-circular-progress';\n\n // Create SVG for circular progress with smaller circle to prevent cutoff\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('viewBox', '0 0 40 40'); // Keep viewBox at 40x40\n\n // Background circle - smaller radius to fit within container\n var backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n backgroundCircle.setAttribute('class', 'progress-ring');\n backgroundCircle.setAttribute('cx', '20'); // Center X\n backgroundCircle.setAttribute('cy', '20'); // Center Y\n backgroundCircle.setAttribute('r', '15'); // Radius 15 (30px diameter) - smaller to prevent cutoff\n\n // Progress circle - same smaller radius\n var progressCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n progressCircle.setAttribute('class', 'progress-ring-fill');\n progressCircle.setAttribute('cx', '20'); // Center X\n progressCircle.setAttribute('cy', '20'); // Center Y\n progressCircle.setAttribute('r', '15'); // Radius 15 (30px diameter) - smaller to prevent cutoff\n\n svg.appendChild(backgroundCircle);\n svg.appendChild(progressCircle);\n progressContainer.appendChild(svg);\n this.selectionLoadingOverlay.appendChild(progressContainer);\n\n // Append to the map container's parent (the actual map div) to ensure it covers everything\n var mapElement = document.getElementById(this.options.container);\n if (mapElement) {\n mapElement.appendChild(this.selectionLoadingOverlay);\n } else {\n // Fallback to mapContainer if parent not found\n this.mapContainer.appendChild(this.selectionLoadingOverlay);\n }\n console.log('🔵 Selection loading overlay created');\n }\n }, {\n key: \"_showSelectionLoadingOverlay\",\n value: function _showSelectionLoadingOverlay() {\n if (this.selectionLoadingOverlay) {\n this.selectionLoadingOverlay.style.display = 'flex';\n\n // Start the circular progress animation\n var progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n if (progressCircle) {\n // Reset animation\n progressCircle.classList.remove('animating');\n progressCircle.style.strokeDashoffset = '94.2';\n\n // Start animation after a small delay to ensure it's visible\n setTimeout(function () {\n progressCircle.classList.add('animating');\n }, 50);\n }\n console.log('🔵 Selection loading overlay shown');\n }\n }\n }, {\n key: \"_hideSelectionLoadingOverlay\",\n value: function _hideSelectionLoadingOverlay() {\n if (this.selectionLoadingOverlay) {\n this.selectionLoadingOverlay.classList.add('hidden');\n var progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n if (progressCircle) {\n progressCircle.classList.remove('animating');\n progressCircle.style.strokeDashoffset = '188.4';\n }\n // setTimeout(() => {\n // if (this.selectionLoadingOverlay) {\n // this.selectionLoadingOverlay.style.display = 'none';\n // this.selectionLoadingOverlay.classList.remove('hidden');\n\n // // Reset progress animation for next time\n // const progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n // if (progressCircle) {\n // progressCircle.classList.remove('animating');\n // progressCircle.style.strokeDashoffset = '188.4';\n // }\n // }\n // }, 100); // Match the CSS transition duration\n console.log('🔵 Selection loading overlay hidden');\n }\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n\n//# sourceURL=webpack://waygomaps/./src/components/MapView/MapView.js?");
804
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MapView: () => (/* binding */ MapView)\n/* harmony export */ });\n/* harmony import */ var _utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/resourceLoader */ \"./src/utils/resourceLoader.js\");\n/* harmony import */ var _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../WaygoMaps */ \"./src/WaygoMaps.js\");\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _StateCoordinator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./StateCoordinator */ \"./src/components/MapView/StateCoordinator.js\");\n/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../index */ \"./src/index.js\");\n/* harmony import */ var _assets_logoOutline_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../assets/logoOutline.svg */ \"./src/assets/logoOutline.svg\");\n/* harmony import */ var _assets_logoInner_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../assets/logoInner.svg */ \"./src/assets/logoInner.svg\");\n/* harmony import */ var _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../assets/loading-spinner 1.svg */ \"./src/assets/loading-spinner 1.svg\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\nvar _defaultMapOptions;\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); }\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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure 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 _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; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, 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); }\n\n\n\n\n\n\n\n\n\n// import WaygoLogoUrl from \"../../assets/WaygoLogoWhite.svg\";\n// import WaygoLogoUrl from \"../../assets/WaygoIconWhite.svg\";\n\n\nvar mapboxCSS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css';\nvar mapboxJS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js';\nvar accessToken = 'pk.eyJ1Ijoid2F5Z28tbWFwcyIsImEiOiJjbGtxYzZ1N3QxdG43M210bXFuYmJ4a3gxIn0.tlbznj_fRJ8La6s2UUMO6A';\nvar mock = {\n '2d1d26267da84c4b87eedc1751d71067:0dc23522b7f841ab88756a94428538d1': {\n 'steps': ['Leave Keynote Theater and make a left (73 ft)', 'Turn right at Kyndral (104 ft)', 'Turn left at SAP (182 ft)', 'Turn right at Samsung (47 ft)', 'Turn left at May Mobility (142 feet)', 'Turn right and arrive at Monta, on your left'],\n 'path': [[-81.557308010743881, -195.68687504906683], [-66.793528483184829, -195.68687504906688], [-66.793528483184829, -136.30367294932935], [-6.7541584044446665, -136.30367294932955], [-6.7541584044446195, -106.92078820451393], [81.828518760909716, -106.92078820451393], [81.828518760909716, -47.209502115275079], [140.88363687114594, -47.209502115275079]]\n }\n};\nvar mockData = {\n 'b1800bf6e3ed480cae21526e42464676:a7fa2fb07ae04049b9026c296d015d66': {\n 'steps': ['Leave Roundtable and make a left', 'Turn right after walking 177 feet', 'Turn left after walking 203 feet', 'Turn right after walking 100 feet', 'Continue straight in 242 feet', 'Arrive at Stage 4, on your left'],\n 'path': [[95.645948774511609, -118.96329432647396], [41.840174496296385, -118.96329432647379], [41.840174496296484, -56.955420310725756], [10.344111504170499, -56.955420310725756], [10.34411150417062, 18.175813285074767], [0.17350782962993705, 18.175813285074767], [0.17350782962999536, 54.265052130219125], [-25.417043351472369, 54.26505213021921]]\n },\n // ROUNDTABLE TO STAGE 4\n '529803fcdd7e4d5db5ed71b9ff1ef0e2:899969e0115b4d8da8fb51bedf7caff2': {\n 'steps': [\"Leave Startups Info Point and make a left\", \"Turn right in 12 feet\", \"Turn left in 37 feet\", \"Continue straight for 182 feet\", \"Turn right in 36 feet\", \"Turn left after 29 feet\", \"Turn right after 57 feet\", \"Turn left after walking 42 feet\", \"Arrive at Alpha 1, on your right\"],\n 'path': [[284.28160504078147, -119.85123601826949], [258.75367051155007, -119.8512360182694], [258.75367051155007, -57.515278013020058], [-40.902596633706594, -57.515278013019092], [-40.902596633706445, 19.584459519789313], [-169.83960450772221, 19.584459519789728], [-169.83960450772213, 78.311493640524645], [-215.11519505890323, 78.311493640524787]]\n },\n 'd1910e5724844b40bf8e2a721fba172a:3673b48d96b04d7aa65937dec3276d3c': {\n 'steps': [\"Leave startup lounge and make a right\", \"Continue straight for 22 feet, then turn left\", \"Turn right in 37 feet\", \"Continue straight for 143 feet, then turn left\", \"Turn right in 32 feet\", \"Continue straight for 210 feet\", \"Turn right, and continue for 5 feet\", \"Arrive at The Black Innovation Zone, on your right\"],\n 'path': [[417.35544488563073, 75.74517709550193], [356.33182283838664, 75.745177095502129], [356.33182283838653, 17.674310953769847], [121.7517703449482, 17.674310953770604], [121.75177034494808, -56.800754663027305], [-207.21694798680142, -56.80075466302624], [-207.21694798680144, -78.116837633560053]]\n }\n};\nvar defaultMapOptions = (_defaultMapOptions = {\n container: 'map',\n sourceId: '2024.2xw_YUXYS8GoDTB2AQgN3A',\n center: [0, 0],\n floor: 0,\n zoom: 13,\n bearing: 0,\n // 46.15762290134818,-25.60000000000025\n // pitch: 30,\n pitch: 46\n}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultMapOptions, \"bearing\", -25), \"minPitch\", 0), \"maxPitch\", 60), \"minZoom\", 10.5), \"maxZoom\", 19.5), \"bounds\", null), \"doubleClickZoom\", true), \"dragPan\", true), \"dragRotate\", true), \"scrollZoom\", true), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultMapOptions, \"touchPitch\", true), \"touchZoomRotate\", true), \"interactive\", true), \"trackResize\", true), \"keyboard\", true), \"defaultControls\", false), \"setup\", false), \"selectionCriteria\", null), \"initialState\", 'default'), \"initialStateData\", null));\nvar MapView = /*#__PURE__*/function (_Component) {\n function MapView() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, MapView);\n _this = _callSuper(this, MapView, [_objectSpread(_objectSpread({}, defaultMapOptions), options)]);\n _this.mapViewApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getMapViewApi();\n _this.searchApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getSearchApi();\n _this.routesApi = _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].getRotuesApi();\n _this.mapContainer = document.createElement('div');\n _this.mapContainer.className = 'inner-map-container';\n\n // Store initial state configuration BEFORE calling _initialize\n _this.initialState = options.initialState || 'default';\n _this.initialStateData = options.initialStateData || null;\n\n // If initializing in selection state, show loading overlay immediately\n if (_this.initialState === 'selection') {\n _this._createSelectionLoadingOverlay();\n _this._showSelectionLoadingOverlay();\n }\n _this.ready = _this._initialize(options);\n _this.initialLoad = false;\n _this.originalFilters = {};\n _this._currentFloorIndex = options.floor;\n _this.mapData = null;\n _this._stateCoordinator = new _StateCoordinator__WEBPACK_IMPORTED_MODULE_3__[\"default\"](_this);\n _this.defaultControls = options.defaultControls;\n _this.setupControl = null;\n _this.location = options.location || null;\n _this.modalContainer = null;\n _this.selectionCriteria = options.selectionCriteria || null;\n _this.multiSelect = true;\n _this.confirmedSelection = null;\n return _this;\n }\n _inherits(MapView, _Component);\n return _createClass(MapView, [{\n key: \"showModal\",\n value: function showModal(content) {\n var _this2 = this;\n // Create modal container if it doesn't exist\n if (!this.modalContainer) {\n this.modalContainer = document.createElement('div');\n this.modalContainer.className = 'waygo-map-modal-container';\n this.mapContainer.appendChild(this.modalContainer);\n\n // Add click handler to close modal when clicking outside\n this.modalContainer.addEventListener('click', function (e) {\n if (e.target === _this2.modalContainer) {\n _this2.hideModal();\n }\n });\n }\n\n // Create modal content\n var modalContent = document.createElement('div');\n modalContent.className = 'waygo-map-modal-content';\n\n // Can accept HTML string or DOM element\n if (typeof content === 'string') {\n modalContent.innerHTML = content;\n } else {\n modalContent.appendChild(content);\n }\n\n // Clear existing content and add new\n this.modalContainer.innerHTML = '';\n this.modalContainer.appendChild(modalContent);\n this.modalContainer.style.display = 'flex';\n }\n }, {\n key: \"hideModal\",\n value: function hideModal() {\n if (this.modalContainer) {\n this.modalContainer.style.display = 'none';\n }\n }\n }, {\n key: \"_initialize\",\n value: function () {\n var _initialize2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n var _this3 = this;\n var styleId;\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.prev = 0;\n _context.next = 3;\n return this._loadMapLibraries();\n case 3:\n mapboxgl.clearStorage();\n this.render();\n _context.next = 7;\n return this._initializeMapData();\n case 7:\n if (this.mapData) {\n _context.next = 10;\n break;\n }\n console.error(\"Error initializing map data.\");\n return _context.abrupt(\"return\");\n case 10:\n styleId = this.mapData.style_id;\n if (typeof mapboxgl !== 'undefined' && styleId) {\n mapboxgl.accessToken = accessToken;\n this.map = new mapboxgl.Map({\n container: this.mapContainer,\n style: \"mapbox://styles/waygo-maps/\".concat(styleId),\n center: this.options.center,\n zoom: this.options.zoom,\n bearing: this.options.bearing,\n pitch: this.options.pitch,\n minPitch: this.options.minPitch,\n maxPitch: this.options.maxPitch,\n minZoom: this.options.minZoom,\n maxZoom: this.options.maxZoom,\n bounds: this.options.bounds,\n doubleClickZoom: this.options.doubleClickZoom,\n dragPan: this.options.dragPan,\n dragRotate: this.options.dragRotate,\n scrollZoom: this.options.scrollZoom,\n touchPitch: this.options.touchPitch,\n touchZoomRotate: this.options.touchZoomRotate,\n interactive: this.options.interactive,\n trackResize: this.options.trackResize,\n keyboard: this.options.keyboard\n });\n this.map.on('styledata', function () {\n if (!_this3.initialLoad) {\n _this3._initializeOriginalFilters();\n _this3.updateFloor(_this3.options.floor, false);\n _this3.initialLoad = true;\n }\n });\n this.map.on('load', function () {\n if (_this3.defaultControls) {\n _this3._addLogoImage();\n _this3._addDefaultControls();\n _this3.updateFloor(_this3.options.floor, false);\n }\n\n // Initialize the specified state after map loads\n _this3._initializeState();\n _this3.fire('load', {\n mapData: _this3.mapData\n });\n });\n this._initializeEventListeners();\n } else {\n console.error('Mapbox GL JS is not loaded.');\n }\n _context.next = 17;\n break;\n case 14:\n _context.prev = 14;\n _context.t0 = _context[\"catch\"](0);\n console.error('Failed to initialize the map:', _context.t0);\n case 17:\n case \"end\":\n return _context.stop();\n }\n }, _callee, this, [[0, 14]]);\n }));\n function _initialize() {\n return _initialize2.apply(this, arguments);\n }\n return _initialize;\n }()\n }, {\n key: \"_addLogoImage\",\n value: function _addLogoImage() {\n var linkUrl = 'https://waygomaps.com';\n var imageContainer = document.createElement('div');\n imageContainer.className = 'logo-image-container';\n var outlineImageElement = document.createElement('img');\n outlineImageElement.className = 'logo-outline-element';\n outlineImageElement.src = _assets_logoOutline_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\n outlineImageElement.alt = 'Clickable image';\n\n // Append the image to the container\n imageContainer.appendChild(outlineImageElement);\n var fillImageElement = document.createElement('img');\n fillImageElement.className = 'logo-fill-element';\n fillImageElement.src = _assets_logoInner_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n fillImageElement.alt = 'Clickable image';\n\n // Append the image to the container\n imageContainer.appendChild(fillImageElement);\n\n // Add click event to open the link\n imageContainer.addEventListener('click', function () {\n window.open(linkUrl, '_blank'); // Open link in a new tab\n });\n\n // Append the container to the map container\n this.mapContainer.appendChild(imageContainer);\n\n // const websiteContainer = document.createElement('div');\n // websiteContainer.className = 'website-container';\n // websiteContainer.textContent = '© Waygo Maps';\n // // websiteContainer.textContent = 'waygomaps.com';\n\n // websiteContainer.addEventListener('click', () => {\n // window.open(linkUrl, '_blank'); // Open link in a new tab\n // });\n\n // this.mapContainer.appendChild(websiteContainer);\n }\n }, {\n key: \"getCurrentFloor\",\n value: function getCurrentFloor() {\n return this._currentFloorIndex;\n }\n }, {\n key: \"_addDefaultControls\",\n value: function _addDefaultControls() {\n var _this4 = this;\n var currentState = this._stateCoordinator.state;\n var controls = [];\n if (currentState === 'selection') {\n // In selection mode, only add essential controls\n controls = [new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].FloorSelectorControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].ContentPlacementControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].InteractionControl()];\n } else {\n // Default controls for other states\n controls = [\n // new waygo.ContentPlacementControl(),\n new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SearchBoxControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].FloorSelectorControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].CategoryBarControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SearchResultsControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].ContentPlacementControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].DirectionsControl(), new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].InteractionControl()\n // new waygo.FloorSelectorControl()\n ];\n }\n controls.forEach(function (control) {\n return _this4.addControl(control);\n });\n }\n }, {\n key: \"_initializeOriginalFilters\",\n value: function _initializeOriginalFilters() {\n var _this5 = this;\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n // Get and store the original filter, or set to null if no filter exists\n _this5.originalFilters[layer.id] = _this5.map.getFilter(layer.id) || null;\n }\n });\n }\n }, {\n key: \"_initializeEventListeners\",\n value: function _initializeEventListeners() {\n var _this6 = this;\n this.mapContainer.addEventListener('mousedown', function (event) {\n return _this6.fire('mousedown', {\n originalEvent: event\n });\n });\n // preclick\n this.mapContainer.addEventListener('click', function (event) {\n return _this6.fire('click', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('mouseover', function (event) {\n return _this6.fire('mouseover', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('mousemove', function (event) {\n return _this6.fire('mousemove', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('dblclick', function (event) {\n return _this6.fire('dblclick', {\n originalEvent: event\n });\n });\n // mouseenter\n // mouseleave\n this.mapContainer.addEventListener('mouseout', function (event) {\n return _this6.fire('mouseout', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('contextmenu', function (event) {\n return _this6.fire('contextmenu', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('wheel', function (event) {\n return _this6.fire('wheel', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchstart', function (event) {\n return _this6.fire('touchstart', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchend', function (event) {\n return _this6.fire('touchend', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchmove', function (event) {\n return _this6.fire('touchmove', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('touchcancel', function (event) {\n return _this6.fire('touchcancel', {\n originalEvent: event\n });\n });\n this.mapContainer.addEventListener('move', function (event) {\n return _this6.fire('move', {\n originalEvent: event\n });\n });\n var movementEvents = ['movestart', 'move', 'moveend', 'dragstart', 'drag', 'dragend', 'zoomstart', 'zoom', 'zoomend', 'rotatestart', 'rotate', 'rotateend', 'pitchstart', 'pitch', 'pitchend', 'boxzoomstart', 'boxzoomend', 'boxzoomcancel'];\n movementEvents.forEach(function (eventName) {\n _this6.map.on(eventName, function (event) {\n _this6.fire(eventName, {\n originalEvent: event\n });\n });\n });\n\n // Add selection confirmation event listener\n this.on('selection:confirmed', function (data) {\n _this6.confirmedSelection = data.feature;\n });\n }\n }, {\n key: \"_initializeMapData\",\n value: function () {\n var _initializeMapData2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {\n var parts, mapId, mapViewId, data;\n return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n parts = this.options.sourceId.split('.');\n if (!(parts.length < 1 || parts.length > 2)) {\n _context2.next = 4;\n break;\n }\n console.error('The sourceId format is incorrect. It should be in the format \"mapId\" or \"mapId.mapViewId\".');\n return _context2.abrupt(\"return\");\n case 4:\n // let accountId = parts[0] || '';\n // let mapId = parts[1] || '';\n // let mapViewId = parts[2] || '';\n mapId = parts[0];\n mapViewId = parts[1]; // Set account id in WaygoMaps\n // waygoMaps.setAccountId(accountId);\n _context2.prev = 6;\n _context2.next = 9;\n return this.mapViewApi.loadMapView(mapId, mapViewId);\n case 9:\n data = _context2.sent;\n this.mapData = data;\n _WaygoMaps__WEBPACK_IMPORTED_MODULE_1__[\"default\"].setAccountId(data.account_id);\n _context2.next = 17;\n break;\n case 14:\n _context2.prev = 14;\n _context2.t0 = _context2[\"catch\"](6);\n console.error('Error fetching map style:', _context2.t0);\n case 17:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2, this, [[6, 14]]);\n }));\n function _initializeMapData() {\n return _initializeMapData2.apply(this, arguments);\n }\n return _initializeMapData;\n }()\n }, {\n key: \"_loadMapLibraries\",\n value: function () {\n var _loadMapLibraries2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {\n return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return (0,_utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__.loadCSS)(mapboxCSS);\n case 2:\n _context3.next = 4;\n return (0,_utils_resourceLoader__WEBPACK_IMPORTED_MODULE_0__.loadScript)(mapboxJS);\n case 4:\n mapboxgl.clearStorage();\n case 5:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n function _loadMapLibraries() {\n return _loadMapLibraries2.apply(this, arguments);\n }\n return _loadMapLibraries;\n }()\n }, {\n key: \"render\",\n value: function render() {\n // this._addLogoImage();\n var targetContainer = document.getElementById(this.options.container);\n if (targetContainer) {\n targetContainer.appendChild(this.mapContainer);\n this.mapContainer.style.width = '100%';\n this.mapContainer.style.height = '100%';\n this.mapContainer.style.position = 'relative';\n } else {\n console.error(\"Container element with id \\\"\".concat(this.containerId, \"\\\" not found.\"));\n }\n }\n }, {\n key: \"updateFloor\",\n value: function updateFloor(floorIndex) {\n var _this7 = this;\n var zoomOut = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var originalFilter = _this7.originalFilters[layer.id];\n _this7.map.setFilter(layer.id, originalFilter);\n var floorFilter = ['==', ['get', '_floor'], floorIndex];\n if (originalFilter) {\n var combinedFilter = ['all', floorFilter, originalFilter];\n _this7.map.setFilter(layer.id, combinedFilter);\n } else {\n _this7.map.setFilter(layer.id, floorFilter);\n }\n }\n });\n this._currentFloorIndex = floorIndex;\n if (zoomOut) {\n var style = this.map.getStyle();\n var sources = Object.keys(style.sources);\n\n // console.log(\"STYLE\");\n // console.log(style);\n\n // Debug log to see available sources\n // console.log(\"Available sources:\", sources);\n\n var allFeatures = [];\n sources.forEach(function (sourceId) {\n // console.log(\"SOURCE ID\");\n // console.log(sourceId);\n var floorSourceLayer = \"\".concat(floorIndex, \"-feature\");\n var features = _this7.map.querySourceFeatures(sourceId, {\n sourceLayer: floorSourceLayer\n });\n // console.log(\"FEATURES\");\n // console.log(features);\n allFeatures = allFeatures.concat(features);\n });\n\n // console.log(\"ALL FEATURES\");\n // console.log(allFeatures.length, allFeatures);\n\n // If we have features, calculate their bounds\n if (allFeatures.length > 0) {\n var bounds = new mapboxgl.LngLatBounds();\n allFeatures.forEach(function (feature) {\n var geom = feature.geometry;\n // Handle different geometry types:\n if (geom.type === 'Point') {\n bounds.extend(geom.coordinates);\n } else if (geom.type === 'LineString') {\n geom.coordinates.forEach(function (coord) {\n return bounds.extend(coord);\n });\n } else if (geom.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n geom.coordinates[0].forEach(function (coord) {\n return bounds.extend(coord);\n });\n }\n // Add cases for MultiPoint, MultiLineString, MultiPolygon as needed\n });\n var currentPitch = this.map.getPitch();\n var currentBearing = this.map.getBearing();\n\n // Fit the map to these bounds with some padding\n this.map.fitBounds(bounds, {\n padding: 50,\n duration: 1300,\n maxZoom: 15.5,\n pitch: currentPitch,\n bearing: currentBearing\n // speed: 1.2,\n });\n } else {\n // If no features found, zoom out from current center\n // console.log(\"NO FEATURES FOUND\");\n this.map.once('moveend', function () {\n var allFeaturesAgain = [];\n sources.forEach(function (sourceId) {\n // console.log(\"SOURCE ID\");\n // console.log(sourceId);\n var floorSourceLayer = \"\".concat(floorIndex, \"-feature\");\n var features = _this7.map.querySourceFeatures(sourceId, {\n sourceLayer: floorSourceLayer\n });\n // console.log(\"FEATURES\");\n // console.log(features);\n allFeaturesAgain = allFeaturesAgain.concat(features);\n });\n if (allFeaturesAgain.length > 0) {\n var _bounds = new mapboxgl.LngLatBounds();\n allFeaturesAgain.forEach(function (feature) {\n var geom = feature.geometry;\n // Handle different geometry types:\n if (geom.type === 'Point') {\n _bounds.extend(geom.coordinates);\n } else if (geom.type === 'LineString') {\n geom.coordinates.forEach(function (coord) {\n return _bounds.extend(coord);\n });\n } else if (geom.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n geom.coordinates[0].forEach(function (coord) {\n return _bounds.extend(coord);\n });\n }\n // Add cases for MultiPoint, MultiLineString, MultiPolygon as needed\n });\n var _currentPitch = _this7.map.getPitch();\n var _currentBearing = _this7.map.getBearing();\n\n // Fit the map to these bounds with some padding\n _this7.map.fitBounds(_bounds, {\n padding: 50,\n duration: 1300,\n maxZoom: 15.5,\n pitch: _currentPitch,\n bearing: _currentBearing\n // speed: 1.2,\n });\n }\n });\n // this.map.jumpTo({\n // zoom: this.map.getZoom() - 3\n // });\n this.map.flyTo({\n zoom: this.map.getZoom() - 3,\n duration: 500,\n essential: true\n });\n }\n }\n this.fire('floorChanged', {\n floorIndex: floorIndex\n });\n }\n }, {\n key: \"addHighlightedFeature\",\n value: function addHighlightedFeature(coordinates, properties) {\n var source = this.map.getSource('highlighted-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n return newFeature;\n }\n }, {\n key: \"addSelectedFeature\",\n value: function addSelectedFeature(coordinates, properties) {\n var allow_multi_select = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n var source = this.map.getSource('selected-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n if (allow_multi_select) {\n currentData.features.push(newFeature);\n } else {\n currentData.features = [newFeature];\n }\n source.setData(currentData);\n }\n }, {\n key: \"clearSelectedContentLayer\",\n value: function clearSelectedContentLayer() {\n this.map.getSource('selected-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"clearHighlightedContentLayer\",\n value: function clearHighlightedContentLayer() {\n this.map.getSource('highlighted-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n\n // MARK: Controls\n }, {\n key: \"addControl\",\n value: function addControl(control) {\n var container = control.onAdd(this);\n this.mapContainer.appendChild(container);\n }\n }, {\n key: \"removeControl\",\n value: function removeControl(control) {\n this.map.removeControl(control);\n }\n\n // MARK: Map states\n }, {\n key: \"getCurrentState\",\n value: function getCurrentState() {\n return this._stateCoordinator.state;\n }\n }, {\n key: \"setToDefaultState\",\n value: function setToDefaultState() {\n // console.log(\"SET TO DEFAULT STATE\", this.location);\n this._stateCoordinator.transitionTo('default');\n }\n }, {\n key: \"setToSearchState\",\n value: function () {\n var _setToSearchState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(query) {\n var skip,\n limit,\n floor,\n results,\n _args4 = arguments;\n return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n skip = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 0;\n limit = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 40;\n floor = _args4.length > 3 && _args4[3] !== undefined ? _args4[3] : null;\n // Set loading state\n this._stateCoordinator.setLoading(true, 'search');\n _context4.prev = 4;\n _context4.next = 7;\n return this.search(query, skip, limit, floor);\n case 7:\n results = _context4.sent;\n this._stateCoordinator.transitionTo('search', {\n query: query,\n results: results\n });\n // Loading state will be reset in the transitionTo method\n _context4.next = 15;\n break;\n case 11:\n _context4.prev = 11;\n _context4.t0 = _context4[\"catch\"](4);\n console.error(\"\\u274C MapView: Search error occurred:\", _context4.t0);\n this._stateCoordinator.setLoading(false, 'search');\n // Handle error appropriately\n case 15:\n _context4.prev = 15;\n this._stateCoordinator.setLoading(false, 'search');\n return _context4.finish(15);\n case 18:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4, this, [[4, 11, 15, 18]]);\n }));\n function setToSearchState(_x) {\n return _setToSearchState.apply(this, arguments);\n }\n return setToSearchState;\n }()\n }, {\n key: \"setToSelectedContentState\",\n value: function () {\n var _setToSelectedContentState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(contentPlacementIds) {\n var lastContentPlacementId, selectedContentPlacement;\n return _regeneratorRuntime().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n // console.log(`📄 MapView: setToSelectedContentState called with IDs:`, contentPlacementIds);\n\n // Set loading state\n this._stateCoordinator.setLoading(true, 'content');\n _context5.prev = 1;\n lastContentPlacementId = contentPlacementIds[contentPlacementIds.length - 1];\n _context5.next = 5;\n return this.getContentPlacementDetails(lastContentPlacementId);\n case 5:\n selectedContentPlacement = _context5.sent;\n this.updateFloor(selectedContentPlacement.floor);\n this._stateCoordinator.transitionTo('selectedContent', {\n contentPlacementIds: contentPlacementIds,\n selectedContentPlacement: selectedContentPlacement\n });\n // Loading state will be reset in the transitionTo method\n _context5.next = 14;\n break;\n case 10:\n _context5.prev = 10;\n _context5.t0 = _context5[\"catch\"](1);\n console.error(\"\\u274C MapView: Content loading error occurred:\", _context5.t0);\n this._stateCoordinator.setLoading(false, 'content');\n // Handle error appropriately\n case 14:\n _context5.prev = 14;\n this._stateCoordinator.setLoading(false, 'content');\n return _context5.finish(14);\n case 17:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5, this, [[1, 10, 14, 17]]);\n }));\n function setToSelectedContentState(_x2) {\n return _setToSelectedContentState.apply(this, arguments);\n }\n return setToSelectedContentState;\n }()\n }, {\n key: \"setToDirectionsState\",\n value: function () {\n var _setToDirectionsState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {\n var startContentPlacementId,\n endContentPlacementId,\n startContentPlacement,\n endContentPlacement,\n _args6 = arguments;\n return _regeneratorRuntime().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n startContentPlacementId = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : null;\n endContentPlacementId = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : null;\n _context6.prev = 2;\n startContentPlacement = null;\n if (!startContentPlacementId) {\n _context6.next = 8;\n break;\n }\n _context6.next = 7;\n return this.getContentPlacementDetails(startContentPlacementId);\n case 7:\n startContentPlacement = _context6.sent;\n case 8:\n endContentPlacement = null;\n if (!endContentPlacementId) {\n _context6.next = 13;\n break;\n }\n _context6.next = 12;\n return this.getContentPlacementDetails(endContentPlacementId);\n case 12:\n endContentPlacement = _context6.sent;\n case 13:\n this._stateCoordinator.transitionTo('directions', {\n startContentPlacement: startContentPlacement,\n endContentPlacement: endContentPlacement\n });\n // Loading state will be reset in the transitionTo method\n _context6.next = 19;\n break;\n case 16:\n _context6.prev = 16;\n _context6.t0 = _context6[\"catch\"](2);\n console.error(\"\\u274C MapView: Directions state error occurred:\", _context6.t0);\n // console.log(`🔄 MapView: Resetting loading state due to error`);\n // this._stateCoordinator.setLoading(false, 'directions');\n // Handle error appropriately\n case 19:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6, this, [[2, 16]]);\n }));\n function setToDirectionsState() {\n return _setToDirectionsState.apply(this, arguments);\n }\n return setToDirectionsState;\n }()\n }, {\n key: \"setToSetupState\",\n value: function () {\n var _setToSetupState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {\n return _regeneratorRuntime().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n // console.log(\"SET TO SETUP STATE\");\n\n // Reset map view to default top-down perspective\n if (this.map) {\n this.map.easeTo({\n pitch: 0,\n bearing: 0,\n duration: 0\n });\n }\n if (!this.setupControl) {\n this.setupControl = new _index__WEBPACK_IMPORTED_MODULE_4__[\"default\"].SetupControl();\n this.addControl(this.setupControl);\n }\n this._stateCoordinator.transitionTo('setup');\n case 3:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7, this);\n }));\n function setToSetupState() {\n return _setToSetupState.apply(this, arguments);\n }\n return setToSetupState;\n }()\n }, {\n key: \"setToSelectionState\",\n value: function () {\n var _setToSelectionState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(criteria) {\n var multiSelect,\n _selectionStateData$f,\n _selectionStateData$f2,\n _selectionStateData$f3,\n selectionStateData,\n bounds,\n _args8 = arguments;\n return _regeneratorRuntime().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n multiSelect = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : true;\n this.selectionCriteria = criteria;\n this.multiSelect = multiSelect;\n\n // Set loading state for selection features\n this._stateCoordinator.setLoading(true, 'selection');\n\n // Call the loadMapViewSelectionState endpoint\n _context8.prev = 4;\n _context8.next = 7;\n return this.mapViewApi.loadMapViewSelectionState(this.mapData.map_id, this.mapData.map_view_id, criteria);\n case 7:\n selectionStateData = _context8.sent;\n // Store the GeoJSON data for creating selectable layers\n this.selectionGeoJSON = selectionStateData;\n console.log('✅ Selection GeoJSON loaded:', {\n type: selectionStateData === null || selectionStateData === void 0 ? void 0 : selectionStateData.type,\n featureCount: selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f = selectionStateData.features) === null || _selectionStateData$f === void 0 ? void 0 : _selectionStateData$f.length,\n firstFeature: selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f2 = selectionStateData.features) === null || _selectionStateData$f2 === void 0 ? void 0 : _selectionStateData$f2[0],\n fullData: selectionStateData\n });\n\n // Transition to selection state WITH the GeoJSON data\n this._stateCoordinator.transitionTo('selection', {\n criteria: criteria,\n geojson: selectionStateData,\n multiSelect: multiSelect\n });\n\n // After transition, animate to fit bounds and lock to bird's eye view\n if ((selectionStateData === null || selectionStateData === void 0 || (_selectionStateData$f3 = selectionStateData.features) === null || _selectionStateData$f3 === void 0 ? void 0 : _selectionStateData$f3.length) > 0) {\n // Lock to bird's eye view first\n this.map.easeTo({\n pitch: 0,\n bearing: 0,\n duration: 500\n });\n\n // Calculate bounds from converted GeoJSON features\n bounds = new mapboxgl.LngLatBounds(); // Add null check here\n if (selectionStateData && selectionStateData.features) {\n selectionStateData.features.forEach(function (feature) {\n // Add bounds calculation logic here\n // Make sure feature.geometry.coordinates exists\n if (feature.geometry && feature.geometry.coordinates) {\n // Calculate bounds based on geometry type\n if (feature.geometry.type === 'Point') {\n bounds.extend(feature.geometry.coordinates);\n } else if (feature.geometry.type === 'LineString') {\n feature.geometry.coordinates.forEach(function (coord) {\n return bounds.extend(coord);\n });\n } else if (feature.geometry.type === 'Polygon') {\n // For a Polygon, iterate through the outer ring (and inner rings if needed)\n feature.geometry.coordinates[0].forEach(function (coord) {\n return bounds.extend(coord);\n });\n }\n }\n });\n\n // Only call fitBounds if bounds is valid\n if (bounds.isEmpty() === false) {\n this.map.fitBounds(bounds, {\n padding: 80,\n duration: 1000,\n maxZoom: 16\n });\n }\n }\n }\n _context8.next = 19;\n break;\n case 14:\n _context8.prev = 14;\n _context8.t0 = _context8[\"catch\"](4);\n console.error('❌ Error loading map view selection state:', _context8.t0);\n this.selectionGeoJSON = null;\n // Still transition but without data\n this._stateCoordinator.transitionTo('selection', {\n criteria: criteria,\n geojson: null,\n multiSelect: multiSelect\n });\n case 19:\n _context8.prev = 19;\n // Reset loading state\n this._stateCoordinator.setLoading(false, 'selection');\n return _context8.finish(19);\n case 22:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8, this, [[4, 14, 19, 22]]);\n }));\n function setToSelectionState(_x3) {\n return _setToSelectionState.apply(this, arguments);\n }\n return setToSelectionState;\n }()\n }, {\n key: \"getConfirmedSelection\",\n value: function getConfirmedSelection() {\n return this.confirmedSelection;\n }\n }, {\n key: \"initiateBack\",\n value: function initiateBack() {\n this.fire('initiate:back');\n }\n }, {\n key: \"initiateSetToSearchState\",\n value: function initiateSetToSearchState() {\n this.fire('initiate:search');\n }\n }, {\n key: \"initiateFindPath\",\n value: function initiateFindPath(startContentPlacementId, endContentPlacementId) {\n this.fire('initiate:findPath', {\n startContentPlacementId: startContentPlacementId,\n endContentPlacementId: endContentPlacementId\n });\n }\n }, {\n key: \"initiateFindPathFromLocation\",\n value: function initiateFindPathFromLocation(endContentPlacement) {\n this.fire('initiate:findPathFromLocation', {\n endContentPlacement: endContentPlacement\n });\n }\n }, {\n key: \"findPath\",\n value: function () {\n var _findPath = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(startContentPlacementId, endContentPlacementId) {\n var response_data;\n return _regeneratorRuntime().wrap(function _callee9$(_context9) {\n while (1) switch (_context9.prev = _context9.next) {\n case 0:\n this._stateCoordinator.setLoading(true, 'directions');\n _context9.prev = 1;\n _context9.next = 4;\n return this.routesApi.findPath(this.mapData.map_id, startContentPlacementId, endContentPlacementId);\n case 4:\n response_data = _context9.sent;\n if (!response_data) {\n _context9.next = 9;\n break;\n }\n return _context9.abrupt(\"return\", response_data);\n case 9:\n console.error('Failed to find path.');\n case 10:\n _context9.prev = 10;\n this._stateCoordinator.setLoading(false, 'directions');\n return _context9.finish(10);\n case 13:\n case \"end\":\n return _context9.stop();\n }\n }, _callee9, this, [[1,, 10, 13]]);\n }));\n function findPath(_x4, _x5) {\n return _findPath.apply(this, arguments);\n }\n return findPath;\n }()\n }, {\n key: \"findPathFromNodeToPlacement\",\n value: function () {\n var _findPathFromNodeToPlacement = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(startNodeId, endPlacementId) {\n var response_data;\n return _regeneratorRuntime().wrap(function _callee10$(_context10) {\n while (1) switch (_context10.prev = _context10.next) {\n case 0:\n this._stateCoordinator.setLoading(true, 'directions');\n _context10.prev = 1;\n _context10.next = 4;\n return this.routesApi.findPathFromNodeToPlacement(this.mapData.map_id, startNodeId, endPlacementId);\n case 4:\n response_data = _context10.sent;\n if (!response_data) {\n _context10.next = 9;\n break;\n }\n return _context10.abrupt(\"return\", response_data);\n case 9:\n console.error('Failed to find path.');\n case 10:\n _context10.prev = 10;\n this._stateCoordinator.setLoading(false, 'directions');\n return _context10.finish(10);\n case 13:\n case \"end\":\n return _context10.stop();\n }\n }, _callee10, this, [[1,, 10, 13]]);\n }));\n function findPathFromNodeToPlacement(_x6, _x7) {\n return _findPathFromNodeToPlacement.apply(this, arguments);\n }\n return findPathFromNodeToPlacement;\n }() // MARK: Map methods\n }, {\n key: \"_findFeatureByPlacementId\",\n value: function _findFeatureByPlacementId(placementId) {\n var features = this.map.queryRenderedFeatures({\n filter: ['==', ['get', 'placement_id'], placementId]\n });\n\n // Return the first feature that matches the placementId\n return features.length > 0 ? features[0] : null;\n }\n }, {\n key: \"getCenter\",\n value: function getCenter() {\n // Update to convert from lat, lon, to x, y in meters\n if (this.map) {\n return this.map.getCenter();\n } else {\n console.error('Map is not initialized.');\n }\n }\n }, {\n key: \"setCenter\",\n value: function setCenter(lngLat) {\n // Update to convert from lat, lon, to x, y in meters\n if (this.map) {\n this.map.setCenter(lngLat);\n } else {\n console.error('Map is not initialized.');\n }\n }\n }, {\n key: \"search\",\n value: function () {\n var _search = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11(query) {\n var skip,\n limit,\n floor,\n _args11 = arguments;\n return _regeneratorRuntime().wrap(function _callee11$(_context11) {\n while (1) switch (_context11.prev = _context11.next) {\n case 0:\n skip = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : 0;\n limit = _args11.length > 2 && _args11[2] !== undefined ? _args11[2] : 40;\n floor = _args11.length > 3 && _args11[3] !== undefined ? _args11[3] : null;\n if (!(query === '')) {\n _context11.next = 5;\n break;\n }\n return _context11.abrupt(\"return\");\n case 5:\n if (this.mapData) {\n _context11.next = 7;\n break;\n }\n return _context11.abrupt(\"return\");\n case 7:\n _context11.prev = 7;\n _context11.next = 10;\n return this.searchApi.search(this.mapData.map_id, this.mapData.map_view_id, query, skip, limit, floor);\n case 10:\n return _context11.abrupt(\"return\", _context11.sent);\n case 13:\n _context11.prev = 13;\n _context11.t0 = _context11[\"catch\"](7);\n if (axios.isCancel(_context11.t0)) {\n console.error('Request canceled:', _context11.t0.message);\n } else {\n console.error('Search error:', _context11.t0);\n }\n case 16:\n case \"end\":\n return _context11.stop();\n }\n }, _callee11, this, [[7, 13]]);\n }));\n function search(_x8) {\n return _search.apply(this, arguments);\n }\n return search;\n }()\n }, {\n key: \"getContentPlacementDetails\",\n value: function () {\n var _getContentPlacementDetails = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12(contentPlacementId) {\n var details;\n return _regeneratorRuntime().wrap(function _callee12$(_context12) {\n while (1) switch (_context12.prev = _context12.next) {\n case 0:\n _context12.prev = 0;\n _context12.next = 3;\n return this.searchApi.fetchContentPlacementDetails(contentPlacementId);\n case 3:\n details = _context12.sent;\n return _context12.abrupt(\"return\", details);\n case 7:\n _context12.prev = 7;\n _context12.t0 = _context12[\"catch\"](0);\n if (axios.isCancel(_context12.t0)) {\n console.error('Request canceled:', _context12.t0.message);\n } else {\n console.error('Fetching content placement details error:', _context12.t0);\n }\n case 10:\n case \"end\":\n return _context12.stop();\n }\n }, _callee12, this, [[0, 7]]);\n }));\n function getContentPlacementDetails(_x9) {\n return _getContentPlacementDetails.apply(this, arguments);\n }\n return getContentPlacementDetails;\n }()\n }, {\n key: \"flyTo\",\n value: function flyTo(options) {\n // console.log('flyTo', options);\n this.map.flyTo(options);\n }\n }, {\n key: \"removeMatchingFeaturesFromExistingLayers\",\n value: function removeMatchingFeaturesFromExistingLayers(criteria) {\n var _this8 = this;\n var layers = this.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type !== 'background' && layer.type !== 'raster' && layer.type !== 'heatmap') {\n var layerId = layer.id;\n\n // Skip our own selectable layers\n if (layerId.includes('selectable-') || layerId.includes('booked-') || layerId.includes('selected-feature') || layerId.includes('confirmed-selection')) {\n return;\n }\n\n // Get current filter\n var currentFilter = _this8.map.getFilter(layerId);\n\n // Create a filter to exclude features that match ALL criteria\n var matchingCondition = null;\n var _loop = function _loop() {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n property = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n var condition;\n if (Array.isArray(value)) {\n // Handle multiple values (e.g., size: ['10x10', '20x10'])\n var conditions = value.map(function (v) {\n return ['==', ['get', property], v];\n });\n condition = ['any'].concat(_toConsumableArray(conditions));\n } else {\n // Handle single value\n condition = ['==', ['get', property], value];\n }\n if (matchingCondition === null) {\n matchingCondition = condition;\n } else {\n // Combine with AND logic - feature must match ALL criteria\n matchingCondition = ['all', matchingCondition, condition];\n }\n };\n for (var _i = 0, _Object$entries = Object.entries(criteria); _i < _Object$entries.length; _i++) {\n _loop();\n }\n\n // Create exclusion filter - hide features that match ALL criteria\n var exclusionFilter = ['!', matchingCondition];\n\n // Apply the exclusion filter\n if (exclusionFilter) {\n if (currentFilter) {\n // Combine with existing filter\n var combinedFilter = ['all', currentFilter, exclusionFilter];\n _this8.map.setFilter(layerId, combinedFilter);\n } else {\n // Apply only the exclusion filter\n _this8.map.setFilter(layerId, exclusionFilter);\n }\n }\n }\n });\n }\n }, {\n key: \"_getLabelGeometry\",\n value: function _getLabelGeometry(feature) {\n var refCoordinate = [0.0, 0.0];\n var scalingFactor = 30.0;\n if (feature.properties.label_location) {\n var labelLocation = feature.properties.label_location;\n\n // Parse JSON string if label_location is a string\n if (typeof labelLocation === 'string') {\n try {\n labelLocation = JSON.parse(labelLocation);\n } catch (error) {\n console.warn('Failed to parse label_location JSON:', error);\n return feature.geometry;\n }\n }\n if (labelLocation && labelLocation.coordinates && Array.isArray(labelLocation.coordinates) && labelLocation.coordinates.length >= 2) {\n var labelCoords = labelLocation.coordinates;\n if (typeof labelCoords[0] === 'number' && typeof labelCoords[1] === 'number') {\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n\n // Round coordinates to reduce precision issues\n var roundedCoords = [Math.round(convertedLabelCoords[0][0] * 1000000) / 1000000,\n // ~6 decimal places\n Math.round(convertedLabelCoords[0][1] * 1000000) / 1000000];\n return {\n type: 'Point',\n coordinates: roundedCoords\n };\n }\n }\n }\n return feature.geometry;\n }\n }, {\n key: \"_findOriginalFeature\",\n value: function _findOriginalFeature(featureId) {\n if (!this.selectionGeoJSON || !this.selectionGeoJSON.features) {\n return null;\n }\n return this.selectionGeoJSON.features.find(function (feature) {\n return feature.properties.feature_id === featureId;\n });\n }\n }, {\n key: \"createSelectableContentLayers\",\n value: function createSelectableContentLayers() {\n var _this9 = this;\n var geojsonData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n var dataToUse = geojsonData || this.selectionGeoJSON;\n if (!dataToUse || !dataToUse.features) {\n console.error('❌ NO DATA TO CREATE LAYERS');\n return;\n }\n try {\n // Remove old layers if they exist\n if (this.map.getLayer('selectable-label-layer')) this.map.removeLayer('selectable-label-layer');\n if (this.map.getLayer('selectable-outline-layer')) this.map.removeLayer('selectable-outline-layer');\n if (this.map.getLayer('selectable-fill-layer')) this.map.removeLayer('selectable-fill-layer');\n if (this.map.getLayer('booked-label-layer')) this.map.removeLayer('booked-label-layer');\n // if (this.map.getLayer('booked-outline-layer')) this.map.removeLayer('booked-outline-layer');\n if (this.map.getLayer('booked-fill-layer')) this.map.removeLayer('booked-fill-layer');\n if (this.map.getSource('selectable-labels')) this.map.removeSource('selectable-labels');\n if (this.map.getSource('selectable-content')) this.map.removeSource('selectable-content');\n if (this.map.getSource('booked-labels')) this.map.removeSource('booked-labels');\n if (this.map.getSource('booked-content')) this.map.removeSource('booked-content');\n\n // Convert features from meter coordinates to lat/lon\n var refCoordinate = [0.0, 0.0]; // Reference point\n var scalingFactor = 30.0; // Same as used elsewhere in the app\n\n var convertedFeatures = dataToUse.features;\n\n // Separate features into selectable and booked\n var selectableFeatures = convertedFeatures.filter(function (feature) {\n return feature.properties.booking_status !== 'booked';\n });\n var bookedFeatures = convertedFeatures.filter(function (feature) {\n return feature.properties.booking_status === 'booked';\n });\n\n // Create selectable GeoJSON\n var selectableGeoJSON = {\n type: 'FeatureCollection',\n features: selectableFeatures\n };\n\n // Create booked GeoJSON\n var bookedGeoJSON = {\n type: 'FeatureCollection',\n features: bookedFeatures\n };\n\n // Add selectable content source\n this.map.addSource('selectable-content', {\n type: 'geojson',\n data: selectableGeoJSON,\n promoteId: 'feature_id'\n });\n\n // Add booked content source\n this.map.addSource('booked-content', {\n type: 'geojson',\n data: bookedGeoJSON,\n // promoteId: 'placement_id'\n promoteId: 'feature_id'\n });\n\n // Create label features for selectable content\n var selectableLabelFeatures = selectableFeatures.map(function (feature) {\n var labelGeometry;\n if (feature.properties.label_location) {\n var labelCoords = feature.properties.label_location.coordinates;\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n labelGeometry = {\n type: 'Point',\n coordinates: convertedLabelCoords[0]\n };\n } else {\n labelGeometry = feature.geometry;\n }\n return {\n type: 'Feature',\n geometry: labelGeometry,\n properties: feature.properties\n };\n });\n\n // Create label features for booked content\n var bookedLabelFeatures = bookedFeatures.map(function (feature) {\n var labelGeometry;\n if (feature.properties.label_location) {\n var labelCoords = feature.properties.label_location.coordinates;\n var convertedLabelCoords = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_8__.convertVerticesToCoordinates)([labelCoords], refCoordinate, scalingFactor);\n labelGeometry = {\n type: 'Point',\n coordinates: convertedLabelCoords[0]\n };\n } else {\n labelGeometry = feature.geometry;\n }\n return {\n type: 'Feature',\n geometry: labelGeometry,\n properties: feature.properties\n };\n });\n this.map.addSource('selectable-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: selectableLabelFeatures\n }\n });\n this.map.addSource('booked-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: bookedLabelFeatures\n }\n });\n\n // Create canvas-based checkmark icon for confirmed selections\n var canvas = document.createElement('canvas');\n var baseSize = 48;\n var scaleFactor = 1;\n canvas.width = baseSize * scaleFactor;\n canvas.height = baseSize * scaleFactor;\n var ctx = canvas.getContext('2d');\n ctx.scale(scaleFactor, scaleFactor);\n\n // Draw white circle background\n ctx.fillStyle = 'white';\n ctx.beginPath();\n ctx.arc(24, 24, 20, 0, Math.PI * 2);\n ctx.fill();\n\n // Draw green circle border\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 3;\n ctx.stroke();\n\n // Draw green checkmark\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 4;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(14, 24);\n ctx.lineTo(20, 30);\n ctx.lineTo(34, 16);\n ctx.stroke();\n var pngDataUri = canvas.toDataURL('image/png');\n this.map.loadImage(pngDataUri, function (error, image) {\n if (error) {\n console.error('❌ Error loading canvas checkmark icon:', error);\n } else {\n _this9.map.addImage('checkmark-icon', image);\n if (!_this9.map.getLayer('confirmed-selection-icon-layer')) {\n _this9.map.addLayer({\n id: 'confirmed-selection-icon-layer',\n type: 'symbol',\n source: 'confirmed-selection-labels',\n layout: {\n 'icon-image': 'checkmark-icon',\n 'icon-size': 0.60,\n 'icon-anchor': 'center',\n 'icon-allow-overlap': true\n }\n });\n }\n }\n });\n\n // Create confirmed selection label source\n this.map.addSource('confirmed-selection-labels', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: []\n }\n });\n\n // Add confirmed selection label layer\n this.map.addLayer({\n id: 'confirmed-selection-label-layer',\n type: 'symbol',\n source: 'confirmed-selection-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#00C853',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n this.map.addSource('confirmed-selection', {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: []\n }\n });\n\n // Add layers in correct order (bottom to top)\n // 1. Booked fill layer (light grey) - bottom layer\n this.map.addLayer({\n id: 'booked-fill-layer',\n type: 'fill',\n source: 'booked-content',\n paint: {\n 'fill-color': '#f2f2f2',\n 'fill-opacity': 1.0\n }\n });\n\n // 2. Booked outline layer (grey outline)\n // this.map.addLayer({\n // id: 'booked-outline-layer',\n // type: 'line',\n // source: 'booked-content',\n // paint: {\n // 'line-color': '#999999',\n // 'line-width': 1\n // }\n // });\n // console.log('✅ BOOKED OUTLINE LAYER ADDED');\n\n // 3. Booked label layer (grey text)\n this.map.addLayer({\n id: 'booked-label-layer',\n type: 'symbol',\n source: 'booked-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#666666',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n\n // 4. Base selectable fill layer (white)\n this.map.addLayer({\n id: 'selectable-fill-layer',\n type: 'fill',\n source: 'selectable-content',\n paint: {\n 'fill-color': '#FFFFFF',\n 'fill-opacity': 0.8\n }\n });\n\n // 5. Selectable outline layer (blue outline)\n this.map.addLayer({\n id: 'selectable-outline-layer',\n type: 'line',\n source: 'selectable-content',\n paint: {\n 'line-color': '#1987ff',\n 'line-width': 2\n }\n });\n\n // 6. Confirmed selection fill layer (light green fill)\n this.map.addLayer({\n id: 'confirmed-selection-fill-layer',\n type: 'fill',\n source: 'confirmed-selection',\n paint: {\n 'fill-color': '#d1fae2',\n 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0.6, 16, 0.8]\n }\n });\n\n // 7. Confirmed selection outline layer (green outline)\n this.map.addLayer({\n id: 'confirmed-selection-outline-layer',\n type: 'line',\n source: 'confirmed-selection',\n paint: {\n 'line-color': '#00C853',\n 'line-width': 2,\n 'line-opacity': ['interpolate', ['linear'], ['zoom'], 10, 0.7, 16, 1.0]\n }\n });\n\n // 8. Selectable label layer (blue text)\n this.map.addLayer({\n id: 'selectable-label-layer',\n type: 'symbol',\n source: 'selectable-labels',\n layout: {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium', 'Arial Unicode MS Regular'],\n 'text-size': ['interpolate', ['exponential', 1.99], ['zoom'], 12, 1.5, 22, 1000]\n },\n paint: {\n 'text-color': '#0263ca',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n\n // Verify layer order and existence\n var allLayers = this.map.getStyle().layers;\n var ourLayers = allLayers.filter(function (layer) {\n return layer.id.includes('selectable-') || layer.id.includes('booked-') || layer.id.includes('confirmed-selection');\n });\n } catch (error) {\n console.error('❌ ERROR:', error);\n console.error('Stack:', error.stack);\n }\n }\n }, {\n key: \"removeSelectableContentLayers\",\n value: function removeSelectableContentLayers() {\n var _this10 = this;\n // Remove layers if they exist\n var layerIds = ['selectable-label-layer', 'selectable-outline-layer', 'selectable-fill-layer', 'booked-label-layer',\n // 'booked-outline-layer', \n 'booked-fill-layer', 'confirmed-selection-fill-layer', 'confirmed-selection-outline-layer', 'confirmed-selection-icon-layer', 'confirmed-selection-label-layer'];\n layerIds.forEach(function (layerId) {\n if (_this10.map.getLayer(layerId)) {\n _this10.map.removeLayer(layerId);\n }\n });\n\n // Remove sources if they exist\n if (this.map.getSource('selectable-content')) {\n this.map.removeSource('selectable-content');\n }\n if (this.map.getSource('selectable-labels')) {\n this.map.removeSource('selectable-labels');\n }\n if (this.map.getSource('booked-content')) {\n this.map.removeSource('booked-content');\n }\n if (this.map.getSource('booked-labels')) {\n this.map.removeSource('booked-labels');\n }\n if (this.map.getSource('confirmed-selection')) {\n this.map.removeSource('confirmed-selection');\n }\n if (this.map.getSource('confirmed-selection-labels')) {\n this.map.removeSource('confirmed-selection-labels');\n }\n\n // Remove checkmark icon\n if (this.map.hasImage('checkmark-icon')) {\n this.map.removeImage('checkmark-icon');\n }\n }\n\n // Clear confirmed selection layers\n }, {\n key: \"clearSelectionLayers\",\n value: function clearSelectionLayers() {\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n if (confirmedSource) {\n confirmedSource.setData({\n type: 'FeatureCollection',\n features: []\n });\n }\n if (confirmedLabelsSource) {\n confirmedLabelsSource.setData({\n type: 'FeatureCollection',\n features: []\n });\n }\n }\n\n // Add feature directly to confirmed selection (immediate selection)\n }, {\n key: \"addConfirmedSelectionFeature\",\n value: function addConfirmedSelectionFeature(feature) {\n var _this11 = this;\n var clearExisting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n var selectableSource = this.map.getSource('selectable-content');\n var selectableLabelsSource = this.map.getSource('selectable-labels');\n if (!confirmedSource || !confirmedLabelsSource || !selectableSource || !selectableLabelsSource) {\n console.error('❌ Required sources not found for confirmed selection');\n return;\n }\n var confirmedData = confirmedSource._data;\n var confirmedLabelsData = confirmedLabelsSource._data;\n var selectableData = selectableSource._data;\n var selectableLabelsData = selectableLabelsSource._data;\n\n // Use feature_id as the primary identifier since it's guaranteed to exist\n var featureId = feature.properties.feature_id;\n\n // Clear existing selections if requested (single-select mode)\n if (clearExisting) {\n // Move all confirmed features back to selectable layers using original geometry\n confirmedData.features.forEach(function (confirmedFeature) {\n var confirmedFeatureId = confirmedFeature.properties.feature_id;\n\n // Get original feature geometry\n var originalFeature = _this11._findOriginalFeature(confirmedFeatureId);\n if (originalFeature) {\n // Use original geometry\n selectableData.features.push(originalFeature);\n selectableLabelsData.features.push({\n type: 'Feature',\n geometry: _this11._getLabelGeometry(originalFeature),\n properties: originalFeature.properties\n });\n } else {\n // Fallback to current geometry\n console.warn('⚠️ Original feature not found for feature:', confirmedFeatureId);\n selectableData.features.push(confirmedFeature);\n selectableLabelsData.features.push({\n type: 'Feature',\n geometry: _this11._getLabelGeometry(confirmedFeature),\n properties: confirmedFeature.properties\n });\n }\n });\n\n // Clear confirmed layers\n confirmedData.features = [];\n confirmedLabelsData.features = [];\n }\n\n // Add new feature to confirmed layers\n confirmedData.features.push(feature);\n confirmedSource.setData(confirmedData);\n\n // Create and add label feature\n var labelFeature = {\n type: 'Feature',\n geometry: this._getLabelGeometry(feature),\n properties: feature.properties\n };\n confirmedLabelsData.features.push(labelFeature);\n confirmedLabelsSource.setData(confirmedLabelsData);\n\n // Remove from selectable layers using feature_id\n selectableData.features = selectableData.features.filter(function (f) {\n return f.properties.feature_id !== featureId;\n });\n selectableSource.setData(selectableData);\n selectableLabelsData.features = selectableLabelsData.features.filter(function (f) {\n return f.properties.feature_id !== featureId;\n });\n selectableLabelsSource.setData(selectableLabelsData);\n }\n\n // Remove feature from confirmed selection (deselect)\n }, {\n key: \"removeConfirmedSelectionFeature\",\n value: function removeConfirmedSelectionFeature(featureId) {\n var confirmedSource = this.map.getSource('confirmed-selection');\n var confirmedLabelsSource = this.map.getSource('confirmed-selection-labels');\n var selectableSource = this.map.getSource('selectable-content');\n var selectableLabelsSource = this.map.getSource('selectable-labels');\n if (!confirmedSource || !confirmedLabelsSource || !selectableSource || !selectableLabelsSource) {\n console.error('❌ Required sources not found for confirmed selection');\n return;\n }\n var confirmedData = confirmedSource._data;\n var confirmedLabelsData = confirmedLabelsSource._data;\n var selectableData = selectableSource._data;\n var selectableLabelsData = selectableLabelsSource._data;\n\n // Find and remove feature from confirmed layers using feature_id\n var featureToRemove = confirmedData.features.find(function (f) {\n return f.properties.feature_id === featureId;\n });\n if (!featureToRemove) {\n return;\n }\n\n // Get the original feature geometry from the original GeoJSON\n var originalFeature = this._findOriginalFeature(featureId);\n if (!originalFeature) {\n console.warn('⚠️ Original feature not found for feature:', featureId);\n // Fallback to using the current geometry\n var fallbackFeature = featureToRemove;\n selectableData.features.push(fallbackFeature);\n selectableSource.setData(selectableData);\n var labelFeature = {\n type: 'Feature',\n geometry: this._getLabelGeometry(fallbackFeature),\n properties: fallbackFeature.properties\n };\n selectableLabelsData.features.push(labelFeature);\n selectableLabelsSource.setData(selectableLabelsData);\n } else {\n // Use original geometry - this ensures high quality geometry\n selectableData.features.push(originalFeature);\n selectableSource.setData(selectableData);\n var _labelFeature = {\n type: 'Feature',\n geometry: this._getLabelGeometry(originalFeature),\n properties: originalFeature.properties\n };\n selectableLabelsData.features.push(_labelFeature);\n selectableLabelsSource.setData(selectableLabelsData);\n }\n\n // Remove from confirmed layers\n confirmedData.features = confirmedData.features.filter(function (f) {\n return f.properties.feature_id !== featureId;\n });\n confirmedSource.setData(confirmedData);\n confirmedLabelsData.features = confirmedLabelsData.features.filter(function (f) {\n return f.properties.feature_id !== featureId;\n });\n confirmedLabelsSource.setData(confirmedLabelsData);\n }\n\n // Update _findOriginalFeature to use feature_id instead of placement_id\n // _findOriginalFeature(featureId) {\n // if (!this.selectionGeoJSON || !this.selectionGeoJSON.features) {\n // return null;\n // }\n\n // return this.selectionGeoJSON.features.find(feature => \n // feature.properties.feature_id === featureId\n // );\n // }\n\n // Get all currently confirmed selection features\n }, {\n key: \"getConfirmedSelectionFeatures\",\n value: function getConfirmedSelectionFeatures() {\n var confirmedSource = this.map.getSource('confirmed-selection');\n if (!confirmedSource) {\n return [];\n }\n return confirmedSource._data.features || [];\n }\n\n // Check if a feature is currently selected\n }, {\n key: \"isFeatureSelected\",\n value: function isFeatureSelected(placementId) {\n var confirmedFeatures = this.getConfirmedSelectionFeatures();\n return confirmedFeatures.some(function (f) {\n return f.properties.placement_id === placementId || f.properties.feature_id === placementId;\n });\n }\n }, {\n key: \"_initializeState\",\n value: function () {\n var _initializeState2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {\n var _this$initialStateDat, _this$initialStateDat2;\n return _regeneratorRuntime().wrap(function _callee13$(_context13) {\n while (1) switch (_context13.prev = _context13.next) {\n case 0:\n _context13.prev = 0;\n _context13.t0 = this.initialState;\n _context13.next = _context13.t0 === 'default' ? 4 : _context13.t0 === 'search' ? 6 : _context13.t0 === 'selectedContent' ? 13 : _context13.t0 === 'directions' ? 20 : _context13.t0 === 'selection' ? 23 : _context13.t0 === 'setup' ? 32 : 35;\n break;\n case 4:\n // Default state - explicitly fire the state:default event\n this._stateCoordinator.transitionTo('default');\n return _context13.abrupt(\"break\", 38);\n case 6:\n if (!(this.initialStateData && this.initialStateData.query)) {\n _context13.next = 11;\n break;\n }\n _context13.next = 9;\n return this.setToSearchState(this.initialStateData.query, this.initialStateData.skip || 0, this.initialStateData.limit || 40, this.initialStateData.floor || null);\n case 9:\n _context13.next = 12;\n break;\n case 11:\n console.warn('⚠️ Search state requires initialStateData with query property');\n case 12:\n return _context13.abrupt(\"break\", 38);\n case 13:\n if (!(this.initialStateData && this.initialStateData.contentPlacementIds)) {\n _context13.next = 18;\n break;\n }\n _context13.next = 16;\n return this.setToSelectedContentState(this.initialStateData.contentPlacementIds);\n case 16:\n _context13.next = 19;\n break;\n case 18:\n console.warn('⚠️ SelectedContent state requires initialStateData with contentPlacementIds property');\n case 19:\n return _context13.abrupt(\"break\", 38);\n case 20:\n _context13.next = 22;\n return this.setToDirectionsState(((_this$initialStateDat = this.initialStateData) === null || _this$initialStateDat === void 0 ? void 0 : _this$initialStateDat.startContentPlacementId) || null, ((_this$initialStateDat2 = this.initialStateData) === null || _this$initialStateDat2 === void 0 ? void 0 : _this$initialStateDat2.endContentPlacementId) || null);\n case 22:\n return _context13.abrupt(\"break\", 38);\n case 23:\n if (!(this.initialStateData && this.initialStateData.criteria)) {\n _context13.next = 29;\n break;\n }\n _context13.next = 26;\n return this.setToSelectionState(this.initialStateData.criteria, this.initialStateData.multiSelect !== false // Default to true\n );\n case 26:\n // Hide loading overlay after selection state is loaded\n this._hideSelectionLoadingOverlay();\n _context13.next = 31;\n break;\n case 29:\n console.warn('⚠️ Selection state requires initialStateData with criteria property');\n // Hide loading overlay on invalid data\n this._hideSelectionLoadingOverlay();\n case 31:\n return _context13.abrupt(\"break\", 38);\n case 32:\n _context13.next = 34;\n return this.setToSetupState();\n case 34:\n return _context13.abrupt(\"break\", 38);\n case 35:\n console.warn('⚠️ Unknown initial state:', this.initialState);\n // Hide loading overlay on unknown state\n this._hideSelectionLoadingOverlay();\n return _context13.abrupt(\"break\", 38);\n case 38:\n _context13.next = 45;\n break;\n case 40:\n _context13.prev = 40;\n _context13.t1 = _context13[\"catch\"](0);\n console.error('❌ Error initializing state:', _context13.t1);\n // Hide loading overlay on error\n this._hideSelectionLoadingOverlay();\n // Fall back to default state\n this._stateCoordinator.transitionTo('default');\n case 45:\n case \"end\":\n return _context13.stop();\n }\n }, _callee13, this, [[0, 40]]);\n }));\n function _initializeState() {\n return _initializeState2.apply(this, arguments);\n }\n return _initializeState;\n }()\n }, {\n key: \"_createSelectionLoadingOverlay\",\n value: function _createSelectionLoadingOverlay() {\n this.selectionLoadingOverlay = document.createElement('div');\n this.selectionLoadingOverlay.className = 'selection-loading-overlay';\n\n // Option 2: NEW Circular progress loader - FIXED SIZE\n var progressContainer = document.createElement('div');\n progressContainer.className = 'selection-circular-progress';\n\n // Create SVG for circular progress with smaller circle to prevent cutoff\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('viewBox', '0 0 40 40'); // Keep viewBox at 40x40\n\n // Background circle - smaller radius to fit within container\n var backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n backgroundCircle.setAttribute('class', 'progress-ring');\n backgroundCircle.setAttribute('cx', '20'); // Center X\n backgroundCircle.setAttribute('cy', '20'); // Center Y\n backgroundCircle.setAttribute('r', '15'); // Radius 15 (30px diameter) - smaller to prevent cutoff\n\n // Progress circle - same smaller radius\n var progressCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n progressCircle.setAttribute('class', 'progress-ring-fill');\n progressCircle.setAttribute('cx', '20'); // Center X\n progressCircle.setAttribute('cy', '20'); // Center Y\n progressCircle.setAttribute('r', '15'); // Radius 15 (30px diameter) - smaller to prevent cutoff\n\n svg.appendChild(backgroundCircle);\n svg.appendChild(progressCircle);\n progressContainer.appendChild(svg);\n this.selectionLoadingOverlay.appendChild(progressContainer);\n\n // Append to the map container's parent (the actual map div) to ensure it covers everything\n var mapElement = document.getElementById(this.options.container);\n if (mapElement) {\n mapElement.appendChild(this.selectionLoadingOverlay);\n } else {\n // Fallback to mapContainer if parent not found\n this.mapContainer.appendChild(this.selectionLoadingOverlay);\n }\n }\n }, {\n key: \"_showSelectionLoadingOverlay\",\n value: function _showSelectionLoadingOverlay() {\n if (this.selectionLoadingOverlay) {\n this.selectionLoadingOverlay.style.display = 'flex';\n\n // Start the circular progress animation\n var progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n if (progressCircle) {\n // Reset animation\n progressCircle.classList.remove('animating');\n progressCircle.style.strokeDashoffset = '94.2';\n\n // Start animation after a small delay to ensure it's visible\n setTimeout(function () {\n progressCircle.classList.add('animating');\n }, 50);\n }\n }\n }\n }, {\n key: \"_hideSelectionLoadingOverlay\",\n value: function _hideSelectionLoadingOverlay() {\n if (this.selectionLoadingOverlay) {\n this.selectionLoadingOverlay.classList.add('hidden');\n var progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n if (progressCircle) {\n progressCircle.classList.remove('animating');\n progressCircle.style.strokeDashoffset = '188.4';\n }\n // setTimeout(() => {\n // if (this.selectionLoadingOverlay) {\n // this.selectionLoadingOverlay.style.display = 'none';\n // this.selectionLoadingOverlay.classList.remove('hidden');\n\n // // Reset progress animation for next time\n // const progressCircle = this.selectionLoadingOverlay.querySelector('.progress-ring-fill');\n // if (progressCircle) {\n // progressCircle.classList.remove('animating');\n // progressCircle.style.strokeDashoffset = '188.4';\n // }\n // }\n // }, 100); // Match the CSS transition duration\n }\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n\n//# sourceURL=webpack://waygomaps/./src/components/MapView/MapView.js?");
805
805
 
806
806
  /***/ }),
807
807
 
@@ -900,7 +900,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
900
900
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
901
901
 
902
902
  "use strict";
903
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SelectionContentItem: () => (/* binding */ SelectionContentItem),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _ContentPlacementView_ContentPlacementHeader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../ContentPlacementView/ContentPlacementHeader */ \"./src/components/ContentPlacementView/ContentPlacementHeader.js\");\n/* harmony import */ var _ContentPlacementView_DetailsView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ContentPlacementView/DetailsView */ \"./src/components/ContentPlacementView/DetailsView.js\");\n/* harmony import */ var _assets_location_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../assets/location.svg */ \"./src/assets/location.svg\");\n/* harmony import */ var _assets_website_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../assets/website.svg */ \"./src/assets/website.svg\");\n/* harmony import */ var _assets_cancel_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../assets/cancel.svg */ \"./src/assets/cancel.svg\");\n/* harmony import */ var _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../assets/loading-spinner 1.svg */ \"./src/assets/loading-spinner 1.svg\");\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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure 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 _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; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\n\n\n\nvar SelectionContentItem = /*#__PURE__*/function (_Component) {\n function SelectionContentItem(contentPlacement) {\n var _this;\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n _classCallCheck(this, SelectionContentItem);\n _this = _callSuper(this, SelectionContentItem, [options]);\n _this.contentPlacement = contentPlacement;\n _this.isOptimistic = contentPlacement.isOptimistic || false;\n _this._initialize();\n return _this;\n }\n _inherits(SelectionContentItem, _Component);\n return _createClass(SelectionContentItem, [{\n key: \"_initialize\",\n value: function _initialize() {\n this.element = document.createElement('div');\n this.element.className = 'selection-content-item';\n this._render();\n }\n }, {\n key: \"_render\",\n value: function _render() {\n var _this2 = this;\n this.element.innerHTML = '';\n\n // Create selected indicator (canvas-drawn checkmark like on map)\n var selectedIndicator = document.createElement('div');\n selectedIndicator.className = 'selection-item-selected-indicator';\n\n // Create canvas for checkmark with higher resolution\n var canvas = document.createElement('canvas');\n var size = 24;\n var devicePixelRatio = window.devicePixelRatio || 1;\n\n // Set canvas size accounting for device pixel ratio\n canvas.width = size * devicePixelRatio;\n canvas.height = size * devicePixelRatio;\n canvas.style.width = size + 'px';\n canvas.style.height = size + 'px';\n var ctx = canvas.getContext('2d');\n ctx.scale(devicePixelRatio, devicePixelRatio);\n\n // Draw white circle background\n ctx.fillStyle = 'white';\n ctx.beginPath();\n ctx.arc(12, 12, 10, 0, Math.PI * 2);\n ctx.fill();\n\n // Draw green circle border\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // Draw green checkmark\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 2;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(7, 12);\n ctx.lineTo(10, 15);\n ctx.lineTo(17, 8);\n ctx.stroke();\n selectedIndicator.appendChild(canvas);\n this.element.appendChild(selectedIndicator);\n\n // Create content container\n var contentContainer = document.createElement('div');\n contentContainer.className = 'selection-item-content';\n if (this.isOptimistic) {\n // Render optimistic/loading version\n this._renderOptimisticContent(contentContainer);\n } else {\n // Render full content\n this._renderFullContent(contentContainer);\n }\n this.element.appendChild(contentContainer);\n\n // Create garbage bin icon container - positioned absolutely over the content\n var deleteButton = document.createElement('div');\n deleteButton.className = 'selection-item-delete-button';\n var deleteIcon = document.createElement('img');\n deleteIcon.src = _assets_cancel_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\n deleteIcon.alt = 'Remove selection';\n deleteIcon.className = 'selection-item-delete-icon';\n deleteButton.appendChild(deleteIcon);\n\n // Add click handler to the delete button\n deleteButton.addEventListener('click', function (e) {\n e.stopPropagation(); // Prevent any parent click handlers\n _this2._handleDeselect();\n });\n\n // Add delete button to contentContainer instead of this.element\n contentContainer.appendChild(deleteButton);\n }\n }, {\n key: \"_renderOptimisticContent\",\n value: function _renderOptimisticContent(contentContainer) {\n // Create simplified header with name and spinner below\n var header = document.createElement('div');\n header.className = 'content-placement-header';\n var textContainer = document.createElement('div');\n textContainer.className = 'header-text-container';\n textContainer.style.paddingLeft = '10px';\n textContainer.style.display = 'flex';\n textContainer.style.flexDirection = 'column';\n textContainer.style.alignItems = 'flex-start'; // Left-align the text\n textContainer.style.justifyContent = 'center';\n var nameElement = document.createElement('div');\n nameElement.className = 'header-content-name';\n var titleKey = this.contentPlacement.catalog.content_title_key;\n var titleValue = this.contentPlacement.content.data[titleKey];\n nameElement.textContent = titleValue;\n textContainer.appendChild(nameElement);\n header.appendChild(textContainer);\n contentContainer.appendChild(header);\n\n // Add loading spinner centered across the entire content container\n var loadingSpinnerContainer = document.createElement('div');\n loadingSpinnerContainer.style.display = 'flex';\n loadingSpinnerContainer.style.justifyContent = 'center';\n loadingSpinnerContainer.style.alignItems = 'center';\n loadingSpinnerContainer.style.marginTop = '12px';\n loadingSpinnerContainer.style.marginBottom = '8px';\n var loadingSpinner = document.createElement('img');\n loadingSpinner.src = _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n loadingSpinner.alt = 'Loading';\n loadingSpinner.style.width = '20px';\n loadingSpinner.style.height = '20px';\n loadingSpinner.style.animation = 'smoothSpin 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite';\n loadingSpinnerContainer.appendChild(loadingSpinner);\n contentContainer.appendChild(loadingSpinnerContainer);\n }\n }, {\n key: \"_renderFullContent\",\n value: function _renderFullContent(contentContainer) {\n // Check if there will be additional details\n var viableAdditionalData = this.findViableAdditionalData(this.contentPlacement);\n var viableDataKeys = Object.keys(viableAdditionalData);\n var hasAdditionalDetails = viableDataKeys.length > 0;\n\n // Add header with conditional class\n var header = new _ContentPlacementView_ContentPlacementHeader__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.contentPlacement);\n var headerElement = header.getElement();\n\n // Add a class to indicate whether there are additional details\n if (hasAdditionalDetails) {\n headerElement.classList.add('has-additional-details');\n } else {\n headerElement.classList.add('no-additional-details');\n }\n contentContainer.appendChild(headerElement);\n\n // Add website URLs\n var schema = this.contentPlacement.catalog.data_schema;\n for (var _i = 0, _Object$entries = Object.entries(schema); _i < _Object$entries.length; _i++) {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n key = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n if (value === 'url') {\n var url = this.contentPlacement.content.data[key];\n if (url && url.trim() !== '') {\n var websiteView = new ContextualLocationView(_assets_website_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"], url, url);\n contentContainer.appendChild(websiteView.getElement());\n }\n }\n }\n\n // Add additional details\n if (hasAdditionalDetails) {\n var detailsView = new _ContentPlacementView_DetailsView__WEBPACK_IMPORTED_MODULE_2__[\"default\"](viableAdditionalData, {\n showTitle: false\n });\n contentContainer.appendChild(detailsView.getElement());\n }\n\n // Add images if available\n var images = this._getAdditionalImages();\n if (images.length > 0) {\n var imageContainer = this._createImageContainer(images);\n contentContainer.appendChild(imageContainer);\n }\n }\n\n // Method to update from optimistic to full content\n }, {\n key: \"updateWithFullContent\",\n value: function updateWithFullContent(contentPlacement) {\n this.contentPlacement = contentPlacement;\n this.isOptimistic = false;\n this._render();\n }\n }, {\n key: \"findViableAdditionalData\",\n value: function findViableAdditionalData(contentPlacement) {\n var schema = contentPlacement.catalog.data_schema;\n var titleKey = contentPlacement.catalog.content_title_key;\n var excludedKeys = contentPlacement.excluded_child_fields || [];\n var viableData = {};\n for (var _i2 = 0, _Object$entries2 = Object.entries(schema); _i2 < _Object$entries2.length; _i2++) {\n var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),\n key = _Object$entries2$_i[0],\n value = _Object$entries2$_i[1];\n if (value !== 'image' && value !== 'url' && key !== titleKey && !excludedKeys.includes(key)) {\n var dataValue = contentPlacement.content.data[key];\n if (dataValue && dataValue.trim() !== '') {\n var cleanDataValue = dataValue.trim();\n viableData[key] = cleanDataValue;\n }\n }\n }\n return viableData;\n }\n }, {\n key: \"_getAdditionalImages\",\n value: function _getAdditionalImages() {\n var images = [];\n var schema = this.contentPlacement.catalog.data_schema;\n var displayImgKey = this.contentPlacement.catalog.content_display_img_key;\n for (var _i3 = 0, _Object$entries3 = Object.entries(schema); _i3 < _Object$entries3.length; _i3++) {\n var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),\n key = _Object$entries3$_i[0],\n value = _Object$entries3$_i[1];\n if (value === 'image' && key !== displayImgKey) {\n var imageUrl = this.contentPlacement.content.data[key];\n if (imageUrl) {\n images.push(imageUrl);\n }\n }\n }\n return images;\n }\n }, {\n key: \"_createImageContainer\",\n value: function _createImageContainer(images) {\n var _this3 = this;\n var imageContainer = document.createElement('div');\n imageContainer.className = 'selection-item-image-container';\n var firstImage = document.createElement('img');\n firstImage.src = images[0];\n firstImage.className = 'selection-item-preview-image';\n var hoverPopup = document.createElement('div');\n hoverPopup.className = 'image-hover-popup';\n hoverPopup.textContent = 'See photos';\n imageContainer.appendChild(firstImage);\n imageContainer.appendChild(hoverPopup);\n imageContainer.addEventListener('click', function (e) {\n e.stopPropagation(); // Prevent deselection when clicking images\n _this3.fire('selectPhotos', {\n placementId: _this3.contentPlacement.placement_id,\n images: images\n });\n });\n return imageContainer;\n }\n }, {\n key: \"_handleDeselect\",\n value: function _handleDeselect() {\n this.fire('deselect:feature', {\n placementId: this.contentPlacement.placement_id\n });\n }\n }, {\n key: \"getElement\",\n value: function getElement() {\n return this.element;\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectionContentItem);\n\n//# sourceURL=webpack://waygomaps/./src/components/SelectionView/SelectionContentItem.js?");
903
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SelectionContentItem: () => (/* binding */ SelectionContentItem),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _ContentPlacementView_ContentPlacementHeader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../ContentPlacementView/ContentPlacementHeader */ \"./src/components/ContentPlacementView/ContentPlacementHeader.js\");\n/* harmony import */ var _ContentPlacementView_DetailsView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ContentPlacementView/DetailsView */ \"./src/components/ContentPlacementView/DetailsView.js\");\n/* harmony import */ var _assets_location_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../assets/location.svg */ \"./src/assets/location.svg\");\n/* harmony import */ var _assets_website_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../assets/website.svg */ \"./src/assets/website.svg\");\n/* harmony import */ var _assets_cancel_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../assets/cancel.svg */ \"./src/assets/cancel.svg\");\n/* harmony import */ var _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../assets/loading-spinner 1.svg */ \"./src/assets/loading-spinner 1.svg\");\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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure 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 _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; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\n\n\n\nvar SelectionContentItem = /*#__PURE__*/function (_Component) {\n function SelectionContentItem(contentPlacement) {\n var _this;\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n _classCallCheck(this, SelectionContentItem);\n _this = _callSuper(this, SelectionContentItem, [options]);\n _this.contentPlacement = contentPlacement;\n _this.isOptimistic = contentPlacement.isOptimistic || false;\n _this._initialize();\n return _this;\n }\n _inherits(SelectionContentItem, _Component);\n return _createClass(SelectionContentItem, [{\n key: \"_initialize\",\n value: function _initialize() {\n this.element = document.createElement('div');\n this.element.className = 'selection-content-item';\n this._render();\n }\n }, {\n key: \"_render\",\n value: function _render() {\n var _this2 = this;\n this.element.innerHTML = '';\n\n // Create selected indicator (canvas-drawn checkmark like on map)\n var selectedIndicator = document.createElement('div');\n selectedIndicator.className = 'selection-item-selected-indicator';\n\n // Create canvas for checkmark with higher resolution\n var canvas = document.createElement('canvas');\n var size = 24;\n var devicePixelRatio = window.devicePixelRatio || 1;\n\n // Set canvas size accounting for device pixel ratio\n canvas.width = size * devicePixelRatio;\n canvas.height = size * devicePixelRatio;\n canvas.style.width = size + 'px';\n canvas.style.height = size + 'px';\n var ctx = canvas.getContext('2d');\n ctx.scale(devicePixelRatio, devicePixelRatio);\n\n // Draw white circle background\n ctx.fillStyle = 'white';\n ctx.beginPath();\n ctx.arc(12, 12, 10, 0, Math.PI * 2);\n ctx.fill();\n\n // Draw green circle border\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // Draw green checkmark\n ctx.strokeStyle = '#00C853';\n ctx.lineWidth = 2;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(7, 12);\n ctx.lineTo(10, 15);\n ctx.lineTo(17, 8);\n ctx.stroke();\n selectedIndicator.appendChild(canvas);\n this.element.appendChild(selectedIndicator);\n\n // Create content container\n var contentContainer = document.createElement('div');\n contentContainer.className = 'selection-item-content';\n if (this.isOptimistic) {\n // Render optimistic/loading version\n this._renderOptimisticContent(contentContainer);\n } else {\n // Render full content\n this._renderFullContent(contentContainer);\n }\n this.element.appendChild(contentContainer);\n\n // Create garbage bin icon container - positioned absolutely over the content\n var deleteButton = document.createElement('div');\n deleteButton.className = 'selection-item-delete-button';\n var deleteIcon = document.createElement('img');\n deleteIcon.src = _assets_cancel_svg__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\n deleteIcon.alt = 'Remove selection';\n deleteIcon.className = 'selection-item-delete-icon';\n deleteButton.appendChild(deleteIcon);\n\n // Add click handler to the delete button\n deleteButton.addEventListener('click', function (e) {\n e.stopPropagation(); // Prevent any parent click handlers\n _this2._handleDeselect();\n });\n\n // Add delete button to contentContainer instead of this.element\n contentContainer.appendChild(deleteButton);\n }\n }, {\n key: \"_renderOptimisticContent\",\n value: function _renderOptimisticContent(contentContainer) {\n var _this$contentPlacemen, _this$contentPlacemen2;\n // Create simplified header with name and spinner below\n var header = document.createElement('div');\n header.className = 'content-placement-header';\n var textContainer = document.createElement('div');\n textContainer.className = 'header-text-container';\n textContainer.style.paddingLeft = '10px';\n textContainer.style.display = 'flex';\n textContainer.style.flexDirection = 'column';\n textContainer.style.alignItems = 'flex-start'; // Left-align the text\n textContainer.style.justifyContent = 'center';\n var nameElement = document.createElement('div');\n nameElement.className = 'header-content-name';\n\n // Handle cases where catalog structure might not exist\n var titleKey = ((_this$contentPlacemen = this.contentPlacement.catalog) === null || _this$contentPlacemen === void 0 ? void 0 : _this$contentPlacemen.content_title_key) || 'name';\n var titleValue = ((_this$contentPlacemen2 = this.contentPlacement.content) === null || _this$contentPlacemen2 === void 0 || (_this$contentPlacemen2 = _this$contentPlacemen2.data) === null || _this$contentPlacemen2 === void 0 ? void 0 : _this$contentPlacemen2[titleKey]) || this.contentPlacement.name || 'Unknown Feature';\n nameElement.textContent = titleValue;\n textContainer.appendChild(nameElement);\n header.appendChild(textContainer);\n contentContainer.appendChild(header);\n\n // Add loading spinner centered across the entire content container\n var loadingSpinnerContainer = document.createElement('div');\n loadingSpinnerContainer.style.display = 'flex';\n loadingSpinnerContainer.style.justifyContent = 'center';\n loadingSpinnerContainer.style.alignItems = 'center';\n loadingSpinnerContainer.style.marginTop = '12px';\n loadingSpinnerContainer.style.marginBottom = '8px';\n var loadingSpinner = document.createElement('img');\n loadingSpinner.src = _assets_loading_spinner_1_svg__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n loadingSpinner.alt = 'Loading';\n loadingSpinner.style.width = '20px';\n loadingSpinner.style.height = '20px';\n loadingSpinner.style.animation = 'smoothSpin 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite';\n loadingSpinnerContainer.appendChild(loadingSpinner);\n contentContainer.appendChild(loadingSpinnerContainer);\n }\n }, {\n key: \"_renderFullContent\",\n value: function _renderFullContent(contentContainer) {\n var _this$contentPlacemen3;\n // Check if there will be additional details\n var viableAdditionalData = this.findViableAdditionalData(this.contentPlacement);\n var viableDataKeys = Object.keys(viableAdditionalData);\n var hasAdditionalDetails = viableDataKeys.length > 0;\n\n // Add header with conditional class - handle missing catalog\n if (this.contentPlacement.catalog) {\n var header = new _ContentPlacementView_ContentPlacementHeader__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.contentPlacement);\n var headerElement = header.getElement();\n\n // Add a class to indicate whether there are additional details\n if (hasAdditionalDetails) {\n headerElement.classList.add('has-additional-details');\n } else {\n headerElement.classList.add('no-additional-details');\n }\n contentContainer.appendChild(headerElement);\n } else {\n // Fallback header when catalog is missing\n var _header = document.createElement('div');\n _header.className = 'content-placement-header';\n var textContainer = document.createElement('div');\n textContainer.className = 'header-text-container';\n textContainer.style.paddingLeft = '10px';\n var nameElement = document.createElement('div');\n nameElement.className = 'header-content-name';\n nameElement.textContent = this.contentPlacement.name || 'Unknown Feature';\n textContainer.appendChild(nameElement);\n _header.appendChild(textContainer);\n contentContainer.appendChild(_header);\n }\n\n // Add website URLs - only if catalog exists\n if ((_this$contentPlacemen3 = this.contentPlacement.catalog) !== null && _this$contentPlacemen3 !== void 0 && _this$contentPlacemen3.data_schema) {\n var schema = this.contentPlacement.catalog.data_schema;\n for (var _i = 0, _Object$entries = Object.entries(schema); _i < _Object$entries.length; _i++) {\n var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),\n key = _Object$entries$_i[0],\n value = _Object$entries$_i[1];\n if (value === 'url') {\n var _this$contentPlacemen4;\n var url = (_this$contentPlacemen4 = this.contentPlacement.content) === null || _this$contentPlacemen4 === void 0 || (_this$contentPlacemen4 = _this$contentPlacemen4.data) === null || _this$contentPlacemen4 === void 0 ? void 0 : _this$contentPlacemen4[key];\n if (url && url.trim() !== '') {\n var websiteView = new ContextualLocationView(_assets_website_svg__WEBPACK_IMPORTED_MODULE_4__[\"default\"], url, url);\n contentContainer.appendChild(websiteView.getElement());\n }\n }\n }\n }\n\n // Add additional details\n if (hasAdditionalDetails) {\n var detailsView = new _ContentPlacementView_DetailsView__WEBPACK_IMPORTED_MODULE_2__[\"default\"](viableAdditionalData, {\n showTitle: false\n });\n contentContainer.appendChild(detailsView.getElement());\n }\n\n // Add images if available\n var images = this._getAdditionalImages();\n if (images.length > 0) {\n var imageContainer = this._createImageContainer(images);\n contentContainer.appendChild(imageContainer);\n }\n }\n\n // Method to update from optimistic to full content\n }, {\n key: \"updateWithFullContent\",\n value: function updateWithFullContent(contentPlacement) {\n this.contentPlacement = contentPlacement;\n this.isOptimistic = false;\n this._render();\n }\n }, {\n key: \"findViableAdditionalData\",\n value: function findViableAdditionalData(contentPlacement) {\n // Add null checks for required properties\n if (!contentPlacement.catalog || !contentPlacement.catalog.data_schema) {\n return {};\n }\n var schema = contentPlacement.catalog.data_schema;\n var titleKey = contentPlacement.catalog.content_title_key;\n var excludedKeys = contentPlacement.excluded_child_fields || [];\n var viableData = {};\n for (var _i2 = 0, _Object$entries2 = Object.entries(schema); _i2 < _Object$entries2.length; _i2++) {\n var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),\n key = _Object$entries2$_i[0],\n value = _Object$entries2$_i[1];\n if (value !== 'image' && value !== 'url' && key !== titleKey && !excludedKeys.includes(key)) {\n var _contentPlacement$con;\n var dataValue = (_contentPlacement$con = contentPlacement.content) === null || _contentPlacement$con === void 0 || (_contentPlacement$con = _contentPlacement$con.data) === null || _contentPlacement$con === void 0 ? void 0 : _contentPlacement$con[key];\n if (dataValue && dataValue.trim() !== '') {\n var cleanDataValue = dataValue.trim();\n viableData[key] = cleanDataValue;\n }\n }\n }\n return viableData;\n }\n }, {\n key: \"_getAdditionalImages\",\n value: function _getAdditionalImages() {\n var images = [];\n\n // Add null checks for required properties\n if (!this.contentPlacement.catalog || !this.contentPlacement.catalog.data_schema) {\n return images;\n }\n var schema = this.contentPlacement.catalog.data_schema;\n var displayImgKey = this.contentPlacement.catalog.content_display_img_key;\n for (var _i3 = 0, _Object$entries3 = Object.entries(schema); _i3 < _Object$entries3.length; _i3++) {\n var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),\n key = _Object$entries3$_i[0],\n value = _Object$entries3$_i[1];\n if (value === 'image' && key !== displayImgKey) {\n var _this$contentPlacemen5;\n var imageUrl = (_this$contentPlacemen5 = this.contentPlacement.content) === null || _this$contentPlacemen5 === void 0 || (_this$contentPlacemen5 = _this$contentPlacemen5.data) === null || _this$contentPlacemen5 === void 0 ? void 0 : _this$contentPlacemen5[key];\n if (imageUrl) {\n images.push(imageUrl);\n }\n }\n }\n return images;\n }\n }, {\n key: \"_createImageContainer\",\n value: function _createImageContainer(images) {\n var _this3 = this;\n var imageContainer = document.createElement('div');\n imageContainer.className = 'selection-item-image-container';\n var firstImage = document.createElement('img');\n firstImage.src = images[0];\n firstImage.className = 'selection-item-preview-image';\n var hoverPopup = document.createElement('div');\n hoverPopup.className = 'image-hover-popup';\n hoverPopup.textContent = 'See photos';\n imageContainer.appendChild(firstImage);\n imageContainer.appendChild(hoverPopup);\n imageContainer.addEventListener('click', function (e) {\n e.stopPropagation(); // Prevent deselection when clicking images\n _this3.fire('selectPhotos', {\n placementId: _this3.contentPlacement.placement_id,\n images: images\n });\n });\n return imageContainer;\n }\n }, {\n key: \"_handleDeselect\",\n value: function _handleDeselect() {\n this.fire('deselect:feature', {\n placementId: this.contentPlacement.placement_id || this.contentPlacement.feature_id\n });\n }\n }, {\n key: \"getElement\",\n value: function getElement() {\n return this.element;\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectionContentItem);\n\n//# sourceURL=webpack://waygomaps/./src/components/SelectionView/SelectionContentItem.js?");
904
904
 
905
905
  /***/ }),
906
906
 
@@ -911,7 +911,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
911
911
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
912
912
 
913
913
  "use strict";
914
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SelectionContentView: () => (/* binding */ SelectionContentView),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectionContentItem */ \"./src/components/SelectionView/SelectionContentItem.js\");\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); }\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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar SelectionContentView = /*#__PURE__*/function (_Component) {\n function SelectionContentView() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, SelectionContentView);\n _this = _callSuper(this, SelectionContentView, [options]);\n _this.selectedPlacements = [];\n _this.contentItems = [];\n _this.optimisticItems = new Map(); // Add this line\n _this._initialize();\n return _this;\n }\n _inherits(SelectionContentView, _Component);\n return _createClass(SelectionContentView, [{\n key: \"_initialize\",\n value: function _initialize() {\n this.element = document.createElement('div');\n this.element.className = 'selection-content-view';\n this._render();\n }\n }, {\n key: \"_render\",\n value: function _render() {\n this.element.innerHTML = '';\n\n // Create header\n var header = document.createElement('div');\n header.className = 'selection-view-header';\n header.textContent = \"Selected content\";\n this.element.appendChild(header);\n\n // Create items container\n var itemsContainer = document.createElement('div');\n itemsContainer.className = 'selection-items-list';\n\n // Check if we have any items (confirmed or optimistic)\n var hasAnyItems = this.contentItems.length > 0 || this.optimisticItems.size > 0;\n if (!hasAnyItems) {\n // Show empty state\n var emptyState = document.createElement('div');\n emptyState.className = 'selection-empty-state';\n emptyState.textContent = 'Click features on the map to select them';\n itemsContainer.appendChild(emptyState);\n } else {\n // Render all items (both confirmed and optimistic)\n this.contentItems.forEach(function (item) {\n itemsContainer.appendChild(item.getElement());\n });\n\n // Render optimistic items\n this.optimisticItems.forEach(function (item) {\n itemsContainer.appendChild(item.getElement());\n });\n }\n this.element.appendChild(itemsContainer);\n }\n }, {\n key: \"updateSelections\",\n value: function updateSelections(selectedPlacements) {\n var _this2 = this;\n this.selectedPlacements = selectedPlacements;\n\n // Clear existing items\n this.contentItems = [];\n\n // Create new items for each placement\n this.selectedPlacements.forEach(function (placement) {\n var item = new _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__[\"default\"](placement);\n\n // Set up event listeners\n item.on('deselect:feature', _this2._handleDeselectFeature.bind(_this2));\n item.on('selectPhotos', _this2._handleSelectPhotos.bind(_this2));\n _this2.contentItems.push(item);\n });\n this._render();\n }\n }, {\n key: \"addSelection\",\n value: function addSelection(contentPlacement) {\n // Check if already selected\n var alreadySelected = this.selectedPlacements.some(function (p) {\n return p.placement_id === contentPlacement.placement_id;\n });\n if (!alreadySelected) {\n this.selectedPlacements.push(contentPlacement);\n this.updateSelections(this.selectedPlacements);\n }\n }\n }, {\n key: \"removeSelection\",\n value: function removeSelection(placementId) {\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n this.updateSelections(this.selectedPlacements);\n }\n }, {\n key: \"_handleDeselectFeature\",\n value: function _handleDeselectFeature(data) {\n var placementId = data.placementId;\n this.fire('deselect:feature', {\n placementId: placementId\n });\n }\n }, {\n key: \"_handleSelectPhotos\",\n value: function _handleSelectPhotos(data) {\n this.fire('selectPhotos', data);\n }\n }, {\n key: \"clearSelections\",\n value: function clearSelections() {\n this.selectedPlacements = [];\n this.contentItems = [];\n this._render();\n }\n }, {\n key: \"getElement\",\n value: function getElement() {\n return this.element;\n }\n\n // Add new method to add optimistic item immediately\n }, {\n key: \"addOptimisticItem\",\n value: function addOptimisticItem(feature) {\n var placementId = feature.properties.placement_id;\n var featureName = feature.properties.name || 'Unknown Feature';\n console.log('🔵 Adding optimistic item:', placementId, featureName);\n\n // Create a simplified content placement object for optimistic display\n var optimisticPlacement = {\n placement_id: placementId,\n content: {\n data: _defineProperty({}, feature.properties.title_key || 'name', featureName)\n },\n catalog: {\n content_title_key: feature.properties.title_key || 'name',\n title: feature.properties.catalog_title || 'Feature',\n data_schema: {}\n },\n isOptimistic: true // Flag to indicate this is optimistic\n };\n\n // Create optimistic item\n var optimisticItem = new _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__[\"default\"](optimisticPlacement);\n\n // Set up event listeners\n optimisticItem.on('deselect:feature', this._handleDeselectFeature.bind(this));\n optimisticItem.on('selectPhotos', this._handleSelectPhotos.bind(this));\n\n // Add to contentItems (not optimisticItems) so it can be updated in place\n this.contentItems.push(optimisticItem);\n this._render();\n }\n\n // Add new method to replace optimistic item with real data\n }, {\n key: \"updateOptimisticItem\",\n value: function updateOptimisticItem(placementId, realContentPlacement) {\n var optimisticItem = this.contentItems.find(function (item) {\n return item.contentPlacement.placement_id === placementId && item.isOptimistic;\n });\n if (optimisticItem) {\n console.log('🔵 Updating optimistic item with real data:', placementId);\n optimisticItem.updateWithFullContent(realContentPlacement);\n this._render();\n }\n }\n\n // Add new method to remove optimistic item (on error)\n }, {\n key: \"removeOptimisticItem\",\n value: function removeOptimisticItem(placementId) {\n console.log('🔵 Removing optimistic item:', placementId);\n\n // Find and remove the optimistic item from contentItems\n var optimisticItemIndex = this.contentItems.findIndex(function (item) {\n return item.contentPlacement.placement_id === placementId && item.isOptimistic;\n });\n if (optimisticItemIndex !== -1) {\n this.contentItems.splice(optimisticItemIndex, 1);\n this._render();\n }\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectionContentView);\n\n//# sourceURL=webpack://waygomaps/./src/components/SelectionView/SelectionContentView.js?");
914
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SelectionContentView: () => (/* binding */ SelectionContentView),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../core/Component */ \"./src/core/Component.js\");\n/* harmony import */ var _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SelectionContentItem */ \"./src/components/SelectionView/SelectionContentItem.js\");\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); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar SelectionContentView = /*#__PURE__*/function (_Component) {\n function SelectionContentView() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, SelectionContentView);\n _this = _callSuper(this, SelectionContentView, [options]);\n _this.selectedPlacements = [];\n _this.contentItems = [];\n _this.optimisticItems = new Map(); // Add this line\n _this._initialize();\n return _this;\n }\n _inherits(SelectionContentView, _Component);\n return _createClass(SelectionContentView, [{\n key: \"_initialize\",\n value: function _initialize() {\n this.element = document.createElement('div');\n this.element.className = 'selection-content-view';\n this._render();\n }\n }, {\n key: \"_render\",\n value: function _render() {\n this.element.innerHTML = '';\n\n // Create header\n var header = document.createElement('div');\n header.className = 'selection-view-header';\n header.textContent = \"Selected content\";\n this.element.appendChild(header);\n\n // Create items container\n var itemsContainer = document.createElement('div');\n itemsContainer.className = 'selection-items-list';\n\n // Check if we have any items (confirmed or optimistic)\n var hasAnyItems = this.contentItems.length > 0 || this.optimisticItems.size > 0;\n if (!hasAnyItems) {\n // Show empty state\n var emptyState = document.createElement('div');\n emptyState.className = 'selection-empty-state';\n emptyState.textContent = 'Click features on the map to select them';\n itemsContainer.appendChild(emptyState);\n } else {\n // Render all items (both confirmed and optimistic)\n this.contentItems.forEach(function (item) {\n itemsContainer.appendChild(item.getElement());\n });\n\n // Render optimistic items\n this.optimisticItems.forEach(function (item) {\n itemsContainer.appendChild(item.getElement());\n });\n }\n this.element.appendChild(itemsContainer);\n }\n }, {\n key: \"updateSelections\",\n value: function updateSelections(selectedPlacements) {\n var _this2 = this;\n this.selectedPlacements = selectedPlacements;\n\n // Clear existing items\n this.contentItems = [];\n\n // Create new items for each placement\n this.selectedPlacements.forEach(function (placement) {\n var item = new _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__[\"default\"](placement);\n\n // Set up event listeners\n item.on('deselect:feature', _this2._handleDeselectFeature.bind(_this2));\n item.on('selectPhotos', _this2._handleSelectPhotos.bind(_this2));\n _this2.contentItems.push(item);\n });\n this._render();\n }\n }, {\n key: \"addSelection\",\n value: function addSelection(contentPlacement) {\n // Check if already selected\n var alreadySelected = this.selectedPlacements.some(function (p) {\n return p.placement_id === contentPlacement.placement_id;\n });\n if (!alreadySelected) {\n this.selectedPlacements.push(contentPlacement);\n this.updateSelections(this.selectedPlacements);\n }\n }\n }, {\n key: \"removeSelection\",\n value: function removeSelection(placementId) {\n this.selectedPlacements = this.selectedPlacements.filter(function (p) {\n return p.placement_id !== placementId;\n });\n this.updateSelections(this.selectedPlacements);\n }\n }, {\n key: \"_handleDeselectFeature\",\n value: function _handleDeselectFeature(data) {\n var placementId = data.placementId;\n this.fire('deselect:feature', {\n placementId: placementId\n });\n }\n }, {\n key: \"_handleSelectPhotos\",\n value: function _handleSelectPhotos(data) {\n this.fire('selectPhotos', data);\n }\n }, {\n key: \"clearSelections\",\n value: function clearSelections() {\n this.selectedPlacements = [];\n this.contentItems = [];\n this._render();\n }\n }, {\n key: \"getElement\",\n value: function getElement() {\n return this.element;\n }\n\n // Add new method to add optimistic item immediately\n }, {\n key: \"addOptimisticItem\",\n value: function addOptimisticItem(feature) {\n var placementId = feature.properties.placement_id || feature.properties.feature_id;\n var featureName = feature.properties.name || 'Unknown Feature';\n\n // Create a simplified content placement object for optimistic display\n var optimisticPlacement = {\n placement_id: placementId,\n name: featureName,\n content: {\n data: {\n name: featureName\n }\n },\n catalog: {\n content_title_key: 'name',\n title: feature.properties.type || 'Feature',\n data_schema: {\n name: 'text'\n }\n },\n isOptimistic: true // Flag to indicate this is optimistic\n };\n\n // Create optimistic item\n var optimisticItem = new _SelectionContentItem__WEBPACK_IMPORTED_MODULE_1__[\"default\"](optimisticPlacement);\n\n // Set up event listeners\n optimisticItem.on('deselect:feature', this._handleDeselectFeature.bind(this));\n optimisticItem.on('selectPhotos', this._handleSelectPhotos.bind(this));\n\n // Add to contentItems (not optimisticItems) so it can be updated in place\n this.contentItems.push(optimisticItem);\n this._render();\n }\n\n // Add new method to replace optimistic item with real data\n }, {\n key: \"updateOptimisticItem\",\n value: function updateOptimisticItem(placementId, realContentPlacement) {\n var optimisticItem = this.contentItems.find(function (item) {\n return item.contentPlacement.placement_id === placementId && item.isOptimistic;\n });\n if (optimisticItem) {\n optimisticItem.updateWithFullContent(realContentPlacement);\n this._render();\n }\n }\n\n // Add new method to remove optimistic item (on error)\n }, {\n key: \"removeOptimisticItem\",\n value: function removeOptimisticItem(placementId) {\n // Find and remove the optimistic item from contentItems\n var optimisticItemIndex = this.contentItems.findIndex(function (item) {\n return item.contentPlacement.placement_id === placementId && item.isOptimistic;\n });\n if (optimisticItemIndex !== -1) {\n this.contentItems.splice(optimisticItemIndex, 1);\n this._render();\n }\n }\n }]);\n}(_core_Component__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectionContentView);\n\n//# sourceURL=webpack://waygomaps/./src/components/SelectionView/SelectionContentView.js?");
915
915
 
916
916
  /***/ }),
917
917