`;\r\n }\r\n\r\n lemonade.setComponents({ Color: Color });\r\n // Register the web component\r\n lemonade.createWebComponent('color', Color);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Color, root, options)\r\n return options;\r\n } else {\r\n return Color.call(this, root)\r\n }\r\n }\r\n})));\n\n/***/ }),\n\n/***/ 238:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nif (! lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\nif (! Modal && \"function\" === 'function') {\r\n var Modal = __webpack_require__(72);\r\n}\r\n\r\n; (function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function(method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n // Get the coordinates of the action\r\n const getCoords = function(e) {\r\n let x;\r\n let y;\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n x = e.changedTouches[0].clientX;\r\n y = e.changedTouches[0].clientY;\r\n } else {\r\n x = e.clientX;\r\n y = e.clientY;\r\n }\r\n\r\n return [x,y];\r\n }\r\n\r\n const Item = function() {\r\n let self = this;\r\n\r\n self.onload = function() {\r\n if (typeof(self.render) === 'function') {\r\n self.render.call(self, self.el);\r\n }\r\n }\r\n\r\n // Initialize expanded state\r\n self.expanded = false;\r\n\r\n if (self.type === 'line' || self.type === 'divisor') {\r\n return ``;\r\n } else if (self.type === 'inline') {\r\n return ``;\r\n } else {\r\n return `
\r\n {{self.title}}
{{self.shortcut}}
\r\n
`;\r\n }\r\n }\r\n\r\n const Create = function() {\r\n let self = this;\r\n\r\n // Delay on open\r\n let delayTimer;\r\n // Save the position of this modal\r\n let index = self.parent.modals.length;\r\n\r\n // Blank options\r\n self.options = [];\r\n\r\n // Close handler\r\n self.onclose = function() {\r\n // Reset any cursor\r\n resetCursor.call(self);\r\n // Parent\r\n if (typeof(self.parent.onclose) === 'function') {\r\n self.parent.onclose(self.parent, self);\r\n }\r\n }\r\n\r\n self.onopen = function() {\r\n // Parent\r\n if (typeof(self.parent.onopen) === 'function') {\r\n self.parent.onopen(self.parent, self);\r\n }\r\n }\r\n\r\n /**\r\n * Close the modal\r\n */\r\n self.close = function() {\r\n // Close modals with higher level\r\n self.parent.close(index);\r\n }\r\n\r\n /**\r\n * Open submenu handler\r\n * @param {object} s\r\n * @param {boolean} cursor - Activate the first item\r\n */\r\n self.open = function(s, cursor) {\r\n if (s.submenu) {\r\n // Get the modal in the container of modals\r\n let current = self.parent.modals[index+1];\r\n // Do not exist yet, create it.\r\n if (! current) {\r\n // Modal needs to be created\r\n current = self.parent.create();\r\n }\r\n // Get the parent from this one\r\n let parent = self.parent.modals[index];\r\n // Update modal content\r\n if (current.options !== s.submenu) {\r\n // Close modals with higher level\r\n current.options = s.submenu;\r\n // Close other modals\r\n self.parent.close(index+1);\r\n }\r\n // Update the selected modal\r\n self.parent.modalIndex = index+1;\r\n let rect = parent.modal.el.getBoundingClientRect();\r\n // Update modal\r\n current.modal.open();\r\n\r\n // Calculate initial position using item's actual screen position (accounts for scroll)\r\n let itemRect = s.el.getBoundingClientRect();\r\n let submenuWidth = 250;\r\n let submenuTop = itemRect.y;\r\n let submenuLeft = rect.x + rect.width - 2; // Position to the right of parent\r\n\r\n // Check if parent was positioned to the left (has negative margin or is on left side)\r\n let parentOpenedLeft = parent.openedLeft || false;\r\n\r\n // Check horizontal space\r\n let spaceOnRight = window.innerWidth - (rect.x + rect.width);\r\n let spaceOnLeft = rect.x;\r\n\r\n // Determine which side to open the submenu\r\n let openLeft = parentOpenedLeft; // Follow parent's direction by default\r\n\r\n // If parent opened to right, check if we still have space\r\n if (!parentOpenedLeft && spaceOnRight < submenuWidth + 10) {\r\n // Not enough space on right, switch to left\r\n openLeft = true;\r\n }\r\n // If parent opened to left, check if we still have space on left\r\n if (parentOpenedLeft && spaceOnLeft < submenuWidth + 10) {\r\n // Not enough space on left, switch to right if possible\r\n if (spaceOnRight >= submenuWidth + 10) {\r\n openLeft = false;\r\n }\r\n }\r\n\r\n if (openLeft) {\r\n // Position to the left of parent menu\r\n submenuLeft = rect.x - submenuWidth + 2;\r\n // Ensure it doesn't go off the left edge\r\n if (submenuLeft < 10) {\r\n submenuLeft = 10;\r\n }\r\n current.openedLeft = true;\r\n } else {\r\n current.openedLeft = false;\r\n }\r\n\r\n // Set position\r\n current.modal.top = submenuTop;\r\n current.modal.left = submenuLeft;\r\n\r\n // Adjust vertical position after render\r\n queueMicrotask(() => {\r\n let submenuEl = current.modal.el;\r\n let submenuRect = submenuEl.getBoundingClientRect();\r\n\r\n // Check if submenu goes off the bottom\r\n if (submenuRect.bottom > window.innerHeight - 10) {\r\n let overflow = submenuRect.bottom - (window.innerHeight - 10);\r\n let newTop = submenuTop - overflow;\r\n // Don't go above the top of the screen\r\n if (newTop < 10) {\r\n newTop = 10;\r\n }\r\n current.modal.top = newTop;\r\n }\r\n });\r\n\r\n // Keep current item for each modal\r\n current.item = s;\r\n s.expanded = true;\r\n\r\n // Activate the cursor\r\n if (cursor === true) {\r\n // Place cursor in the first position\r\n current.options[0].cursor = true;\r\n // Position cursor\r\n current.cursor = 0;\r\n }\r\n\r\n onopen(current, s.submenu)\r\n } else {\r\n // Close modals with higher level\r\n self.parent.close(index+1);\r\n }\r\n }\r\n\r\n // Mouse open\r\n self.mouseUp = function(e, s) {\r\n if (typeof(s.onclick) === 'function') {\r\n s.onclick.call(s, e, s.el);\r\n }\r\n if (! s.submenu) {\r\n self.close();\r\n }\r\n }\r\n\r\n self.mouseEnter = function(e, s) {\r\n if (delayTimer) {\r\n clearTimeout(delayTimer);\r\n }\r\n delayTimer = setTimeout(function() {\r\n self.open(s);\r\n }, 200);\r\n }\r\n\r\n self.mouseLeave = function(e, s) {\r\n if (delayTimer) {\r\n clearTimeout(delayTimer);\r\n }\r\n }\r\n\r\n let template = `\r\n
\r\n \r\n
\r\n `;\r\n\r\n return lemonade.element(template, self, { Item: Item });\r\n }\r\n\r\n const findNextEnabledCursor = function(startIndex, direction) {\r\n if (!this.options || this.options.length === 0) {\r\n return null;\r\n }\r\n \r\n let cursor = startIndex;\r\n let attempts = 0;\r\n const maxAttempts = this.options.length;\r\n \r\n while (attempts < maxAttempts) {\r\n if (direction) {\r\n // Down\r\n if (cursor >= this.options.length) {\r\n cursor = 0;\r\n }\r\n } else {\r\n // Up\r\n if (cursor < 0) {\r\n cursor = this.options.length - 1;\r\n }\r\n }\r\n \r\n let item = this.options[cursor];\r\n if (item && !item.disabled && item.type !== 'line') {\r\n return cursor;\r\n }\r\n \r\n cursor = direction ? cursor + 1 : cursor - 1;\r\n attempts++;\r\n }\r\n return null;\r\n };\r\n\r\n const setCursor = function(direction) {\r\n let cursor = null;\r\n\r\n if (typeof(this.cursor) !== 'undefined') {\r\n if (! direction) {\r\n // Up\r\n cursor = findNextEnabledCursor.call(this, this.cursor - 1, false);\r\n } else {\r\n // Down\r\n cursor = findNextEnabledCursor.call(this, this.cursor + 1, true);\r\n }\r\n }\r\n\r\n // Remove the cursor\r\n if (cursor === null) {\r\n if (direction) {\r\n cursor = findNextEnabledCursor.call(this, 0, true);\r\n } else {\r\n cursor = findNextEnabledCursor.call(this, this.options.length - 1, false);\r\n }\r\n } else if (typeof(this.cursor) !== 'undefined') {\r\n this.options[this.cursor].cursor = false;\r\n }\r\n\r\n // Add the cursor if found\r\n if (cursor !== null) {\r\n this.options[cursor].cursor = true;\r\n this.cursor = cursor;\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n /**\r\n * Reset the cursor for a contextmenu\r\n */\r\n const resetCursor = function() {\r\n // Contextmenu modal\r\n let item = this.options[this.cursor];\r\n // Cursor is found so reset it\r\n if (typeof(item) !== 'undefined') {\r\n // Remove the cursor style\r\n item.cursor = false;\r\n // Delete reference index\r\n delete this.cursor;\r\n }\r\n }\r\n\r\n /**\r\n * Go through all items of a menu\r\n * @param s\r\n * @param options\r\n */\r\n const onopen = function(s, options) {\r\n // Onopen\r\n for (let i = 0; i < options.length; i++) {\r\n if (typeof(options[i].onopen) === 'function') {\r\n options[i].onopen(s);\r\n }\r\n }\r\n }\r\n\r\n const Contextmenu = function(children, { onload }) {\r\n let self = this;\r\n\r\n // Container for all modals\r\n self.modals = [];\r\n self.modalIndex = 0;\r\n\r\n self.create = function() {\r\n // Create a new self for each modal\r\n let s = {\r\n parent: self,\r\n };\r\n // Render the modal inside the main container\r\n lemonade.render(Create, self.el, s);\r\n // Add the reference of the modal in a container#\r\n self.modals.push(s);\r\n // Return self\r\n return s;\r\n }\r\n\r\n self.isClosed = function() {\r\n return self.modals[0].modal.closed === true;\r\n }\r\n\r\n self.openAt = function(a, b) {\r\n let x, y;\r\n if (a instanceof Event || (a && a.clientX !== undefined)) {\r\n // openAt(event)\r\n x = a.clientX;\r\n y = a.clientY;\r\n } else {\r\n // openAt(x, y)\r\n x = a;\r\n y = b;\r\n }\r\n self.open(self.options, x, y, true);\r\n };\r\n\r\n self.open = function(options, x, y, adjust) {\r\n // Get the main modal\r\n let menu = self.modals[0];\r\n // Reset cursor\r\n resetCursor.call(menu);\r\n // Define new position\r\n menu.modal.top = y;\r\n menu.modal.left = x;\r\n // Open\r\n menu.modal.open();\r\n // If the modal is open and the content is different from what is shown. Close modals with higher level\r\n self.close(1);\r\n // Update the data\r\n if (options && menu.options !== options) {\r\n // Refresh content\r\n menu.options = options;\r\n }\r\n onopen(self, options);\r\n\r\n // Adjust position to respect mouse cursor after auto-adjust\r\n // Use queueMicrotask to ensure it runs after the modal's auto-adjust\r\n if (adjust === true) {\r\n queueMicrotask(() => {\r\n let modalEl = menu.modal.el;\r\n let rect = modalEl.getBoundingClientRect();\r\n let marginLeft = parseFloat(modalEl.style.marginLeft) || 0;\r\n let marginTop = parseFloat(modalEl.style.marginTop) || 0;\r\n\r\n // Check if horizontal adjustment was applied (margin is non-zero)\r\n if (marginLeft !== 0) {\r\n // Position modal so its right edge is at x - 1 (cursor 1px to the right of modal)\r\n // Formula: left + margin + width = x - 1, where left = x\r\n // Therefore: margin = -width - 1\r\n let newMarginLeft = -rect.width - 1;\r\n // Check if this would push modal off the left edge\r\n let newLeft = x + newMarginLeft;\r\n if (newLeft < 10) {\r\n // Keep a 10px margin from the left edge\r\n newMarginLeft = 10 - x;\r\n }\r\n modalEl.style.marginLeft = newMarginLeft + 'px';\r\n }\r\n\r\n // Check if vertical adjustment was applied (margin is non-zero)\r\n if (marginTop !== 0) {\r\n // Position modal so its bottom edge is at y - 1 (cursor 1px below modal)\r\n // Formula: top + margin + height = y - 1, where top = y\r\n // Therefore: margin = -height - 1\r\n let newMarginTop = -rect.height - 1;\r\n // Check if this would push modal off the top edge\r\n let newTop = y + newMarginTop;\r\n if (newTop < 10) {\r\n // Keep a 10px margin from the top edge\r\n newMarginTop = 10 - y;\r\n }\r\n modalEl.style.marginTop = newMarginTop + 'px';\r\n }\r\n });\r\n }\r\n // Focus\r\n self.el.classList.add('lm-menu-focus');\r\n // Focus on the contextmenu. preventScroll stops the browser from\r\n // scrolling this in-flow element into view, which would jump the page\r\n self.el.focus({ preventScroll: true });\r\n }\r\n\r\n self.close = function(level) {\r\n // Close all modals from the level specified\r\n self.modals.forEach(function(menu, k) {\r\n if (k >= level) {\r\n if (menu.item) {\r\n menu.item.expanded = false;\r\n menu.item = null;\r\n }\r\n menu.openedLeft = false;\r\n menu.modal.close();\r\n }\r\n });\r\n // Keep the index of the modal that is opened\r\n self.modalIndex = level ? level - 1 : 0;\r\n\r\n // Close event\r\n if (level === 0) {\r\n self.el.classList.remove('lm-menu-focus');\r\n\r\n Dispatch.call(self, self.onclose, 'close', {\r\n instance: self,\r\n });\r\n }\r\n }\r\n\r\n onload(() => {\r\n // Create first menu\r\n self.create();\r\n\r\n // Create event for focus out\r\n self.el.addEventListener(\"focusout\", (e) => {\r\n if (! (e.relatedTarget && (self.el.contains(e.relatedTarget) || self.root?.contains(e.relatedTarget)))) {\r\n self.close(0);\r\n }\r\n });\r\n\r\n // Keyboard event\r\n self.el.addEventListener(\"keydown\", function(e) {\r\n // Menu object\r\n let menu = self.modals[self.modalIndex];\r\n // Modal must be opened\r\n if (! menu.modal.closed) {\r\n // Something happens\r\n let ret = false;\r\n // Control\r\n if (e.key === 'ArrowLeft') {\r\n if (self.modalIndex > 0) {\r\n // Close modal\r\n menu.close();\r\n // Action happened\r\n ret = true;\r\n }\r\n } else if (e.key === 'ArrowRight') {\r\n // Get the selected cursor\r\n let item = menu.options[menu.cursor];\r\n // Open submenu\r\n if (typeof (item) !== 'undefined') {\r\n // Open submenu in case that exists\r\n if (item.submenu && !item.disabled) {\r\n // Open modal\r\n menu.open(item, true);\r\n // Action happened\r\n ret = true;\r\n }\r\n }\r\n } else if (e.key === 'ArrowUp') {\r\n ret = setCursor.call(menu, 0);\r\n } else if (e.key === 'ArrowDown') {\r\n ret = setCursor.call(menu, 1);\r\n } else if (e.key === 'Enter') {\r\n // Contextmenu modal\r\n let item = menu.options[menu.cursor];\r\n // Cursor is found so reset it\r\n if (typeof(item) !== 'undefined') {\r\n // Execute action\r\n if (typeof (item.onclick) === 'function') {\r\n item.onclick.call(item, e, item.el);\r\n }\r\n // Open sub menu in case exists\r\n if (item.submenu) {\r\n // Open menu\r\n menu.open(item, true);\r\n // Action happened\r\n ret = true;\r\n } else {\r\n // Close all menu\r\n self.close(0);\r\n // Action happened\r\n ret = true;\r\n }\r\n }\r\n } else if (e.key === 'Escape') {\r\n self.close(0);\r\n }\r\n\r\n // Something important happen so block any progression\r\n if (ret === true) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n });\r\n\r\n if (! self.root) {\r\n if (self.tagName) {\r\n self.root = self.el.parentNode.parentNode;\r\n } else {\r\n self.root = self.el.parentNode;\r\n }\r\n }\r\n\r\n // Parent\r\n self.root.addEventListener(\"contextmenu\", function(e) {\r\n if (Array.isArray(self.options) && self.options.length) {\r\n let [x, y] = getCoords(e);\r\n self.open(self.options, x, y, true);\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n });\r\n });\r\n\r\n return ``;\r\n }\r\n\r\n lemonade.setComponents({ Contextmenu: Contextmenu });\r\n\r\n lemonade.createWebComponent('contextmenu', Contextmenu);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Contextmenu, root, options)\r\n return options;\r\n } else {\r\n return Contextmenu.call(this, root)\r\n }\r\n }\r\n})));\n\n/***/ }),\n\n/***/ 692:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\n/**\r\n * Implement page up and down navigation\r\n * Implement color attribute for items\r\n */\r\n\r\nif (!lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\nif (!Modal && \"function\" === 'function') {\r\n var Modal = __webpack_require__(72);\r\n}\r\n\r\n; (function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function(method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n return this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n // Default row height\r\n let defaultRowHeight = 24;\r\n\r\n // Translations\r\n const T = function(t) {\r\n if (typeof(document) !== \"undefined\" && document.dictionary) {\r\n return document.dictionary[t] || t;\r\n } else {\r\n return t;\r\n }\r\n }\r\n\r\n const isEmpty = function(v) {\r\n return v === '' || v === null || v === undefined || (Array.isArray(v) && v.length === 0);\r\n }\r\n\r\n /**\r\n * Compare two values (arrays, strings, numbers, etc.)\r\n * Returns true if both are equal or empty\r\n * @param {*} a1\r\n * @param {*} a2\r\n */\r\n const compareValues = function(a1, a2) {\r\n if (a1 === a2 || (isEmpty(a1) && isEmpty(a2))) {\r\n return true;\r\n }\r\n\r\n if (!a1 || !a2) {\r\n return false;\r\n }\r\n\r\n if (Array.isArray(a1) && Array.isArray(a2)) {\r\n if (a1.length !== a2.length) {\r\n return false;\r\n }\r\n for (let i = 0; i < a1.length; i++) {\r\n if (a1[i] !== a2[i]) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n return a1 === a2;\r\n }\r\n\r\n const lazyLoading = function (self) {\r\n /**\r\n * Get the position from top of a row by its index\r\n * @param item\r\n * @returns {number}\r\n */\r\n const getRowPosition = function (item) {\r\n // Position from top\r\n let top = 0;\r\n if (item) {\r\n let items = self.rows;\r\n if (items && items.length) {\r\n let index = self.rows.indexOf(item);\r\n // Go through the items\r\n for (let j = 0; j < index; j++) {\r\n top += items[j].height || defaultRowHeight;\r\n }\r\n }\r\n }\r\n return top;\r\n }\r\n\r\n const updateScroll = function () {\r\n let items = self.rows;\r\n if (items) {\r\n // Before control\r\n let before = true;\r\n // Total of items in the container\r\n let numOfItems = items.length;\r\n // Position from top\r\n let height = 0;\r\n // Size of the adjustment\r\n let size = 0;\r\n // Go through the items\r\n for (let j = 0; j < numOfItems; j++) {\r\n let h = items[j].height || defaultRowHeight;\r\n // Height\r\n height += h;\r\n // Start tracking all items as before\r\n if (items[j] === self.result[0]) {\r\n before = false;\r\n }\r\n // Adjustment\r\n if (before) {\r\n size += h;\r\n }\r\n }\r\n // Update height\r\n scroll.style.height = height + 'px';\r\n // Adjust scroll position\r\n return size;\r\n }\r\n return false;\r\n }\r\n\r\n const getVisibleRows = function (reset) {\r\n let items = self.rows;\r\n if (items) {\r\n let adjust;\r\n // Total of items in the container\r\n let numOfItems = items.length;\r\n // Get the position from top\r\n let y = el.scrollTop;\r\n // Get the height\r\n let h = null;\r\n if (self.type === 'searchbar' || self.type === 'picker') {\r\n // Priority should be the size used on the viewport\r\n h = y + (el.offsetHeight || self.height);\r\n } else {\r\n // Priority is the height define during initialization\r\n h = y + (self.height || el.offsetHeight);\r\n }\r\n // Go through the items\r\n let rows = [];\r\n // Height\r\n let height = 0;\r\n // Go through all items\r\n for (let j = 0; j < numOfItems; j++) {\r\n if (items[j].visible !== false) {\r\n // Height\r\n let rowHeight = items[j].height || defaultRowHeight;\r\n // Return on partial width\r\n if (height + rowHeight > y && height < h) {\r\n rows.push(items[j]);\r\n }\r\n height += rowHeight;\r\n }\r\n }\r\n\r\n // Update visible rows\r\n if (reset || !compareValues(rows, self.result)) {\r\n // Render the items\r\n self.result = rows;\r\n // Adjust scroll height\r\n let adjustScroll = reset;\r\n // Adjust scrolling\r\n for (let i = 0; i < rows.length; i++) {\r\n // Item\r\n let item = rows[i];\r\n // Item height\r\n let h = item.el.offsetHeight;\r\n // Update row height\r\n if (!item.height || h !== item.height) {\r\n // Keep item height\r\n item.height = h;\r\n // Adjust total height\r\n adjustScroll = true;\r\n }\r\n }\r\n\r\n // Update scroll if the height of one element has been changed\r\n if (adjustScroll) {\r\n // Adjust the scroll height\r\n adjust = updateScroll();\r\n }\r\n }\r\n\r\n // Adjust position of the first element\r\n let position = getRowPosition(self.result[0]);\r\n let diff = position - el.scrollTop;\r\n if (diff > 0) {\r\n diff = 0;\r\n }\r\n self.container.style.top = diff + 'px';\r\n\r\n return adjust;\r\n }\r\n }\r\n\r\n /**\r\n * Move the position to the top and re-render based on the scroll\r\n * @param reset\r\n */\r\n const render = function (reset) {\r\n // Move scroll to the top\r\n el.scrollTop = 0;\r\n // Reset scroll\r\n updateScroll();\r\n // Append first batch\r\n getVisibleRows(reset);\r\n }\r\n\r\n /**\r\n * Will adjust the items based on the scroll position offset\r\n */\r\n self.adjustPosition = function (item) {\r\n if (item.el) {\r\n let h = item.el.offsetHeight;\r\n let calc = item.el.offsetTop + h;\r\n if (calc > el.offsetHeight) {\r\n let size = calc - el.offsetHeight;\r\n if (size < h) {\r\n size = h;\r\n }\r\n el.scrollTop -= -1 * size;\r\n }\r\n }\r\n }\r\n\r\n // Controls\r\n const scrollControls = function () {\r\n getVisibleRows(false);\r\n }\r\n\r\n // Element for scrolling\r\n let el = self.container.parentNode;\r\n el.classList.add('lm-lazy');\r\n // Div to represent the height of the content\r\n const scroll = document.createElement('div');\r\n scroll.classList.add('lm-lazy-scroll');\r\n // Force the height and add scrolling\r\n el.appendChild(scroll);\r\n el.addEventListener('scroll', scrollControls, { passive: true });\r\n el.addEventListener('wheel', scrollControls, { passive: true });\r\n self.container.classList.add('lm-lazy-items');\r\n\r\n self.goto = function (item) {\r\n el.scrollTop = getRowPosition(item);\r\n let adjust = getVisibleRows(false);\r\n if (adjust) {\r\n el.scrollTop = adjust;\r\n // Last adjust on the visible rows\r\n getVisibleRows(false);\r\n }\r\n }\r\n\r\n return (prop) => {\r\n if (prop === 'rows') {\r\n render(true);\r\n }\r\n }\r\n }\r\n\r\n const getAttributeName = function(prop) {\r\n if (prop.substring(0,1) === ':') {\r\n prop = prop.substring(1);\r\n } else if (prop.substring(0,3) === 'lm-') {\r\n prop = prop.substring(3);\r\n }\r\n return prop.toLowerCase();\r\n }\r\n\r\n const extractFromHtml = function(element) {\r\n let data = [];\r\n // Content\r\n for (let i = 0; i < element.children.length; i++) {\r\n let e = element.children[i];\r\n let item = {\r\n text: e.textContent || e.getAttribute('title'),\r\n value: e.getAttribute('value'),\r\n }\r\n if (item.value == null) {\r\n item.value = item.text;\r\n }\r\n data.push(item);\r\n }\r\n\r\n return data;\r\n }\r\n\r\n const extract = function(children) {\r\n let data = [];\r\n\r\n if (this.tagName) {\r\n data = extractFromHtml(this);\r\n // Remove all elements\r\n this.textContent = '';\r\n } else {\r\n // Get data\r\n if (typeof(children) === 'string') {\r\n // Version 4\r\n let d = document.createElement('div');\r\n d.innerHTML = children;\r\n data = extractFromHtml(d);\r\n } else if (children && children.length) {\r\n // Version 5\r\n children.forEach((v) => {\r\n let item = {}\r\n v.props.forEach((prop) => {\r\n item[getAttributeName(prop.name)] = prop.value;\r\n });\r\n if (! item.text) {\r\n item.text = v.children[0]?.props[0]?.value || '';\r\n }\r\n data.push(item);\r\n });\r\n // Block children\r\n children.length = 0;\r\n }\r\n }\r\n\r\n return data;\r\n }\r\n\r\n const isDOM = function(o) {\r\n return (o instanceof Element || o instanceof HTMLDocument || o instanceof DocumentFragment);\r\n }\r\n\r\n const Dropdown = function (children, { onchange, onload }) {\r\n let self = this;\r\n // Data\r\n let data = [];\r\n // Internal value controllers\r\n let value = [];\r\n // Cursor\r\n let cursor = null;\r\n // Control events\r\n let ignoreEvents = false;\r\n // Lazy loading global instance\r\n let lazyloading = null;\r\n // Tracking changes\r\n let changesDetected = false;\r\n // Debounce timer for search\r\n let searchTimeout = null;\r\n\r\n // Data\r\n if (! Array.isArray(self.data)) {\r\n self.data = [];\r\n }\r\n\r\n let d = extract.call(this, children);\r\n if (d) {\r\n d.forEach((v) => {\r\n self.data.push(v)\r\n })\r\n }\r\n\r\n // Decide the type based on the size of the screen\r\n let autoType = self.type === 'auto';\r\n\r\n // Custom events defined by the user\r\n let load = self.onload;\r\n self.onload = null;\r\n let change = self.onchange;\r\n self.onchange = null;\r\n\r\n // Compatibility\r\n if (typeof self.newOptions !== 'undefined') {\r\n self.insert = self.newOptions;\r\n }\r\n\r\n // Cursor controllers\r\n const setCursor = function (index, force) {\r\n let item = self.rows[index];\r\n if (typeof (item) !== 'undefined') {\r\n // Set the cursor number\r\n cursor = index;\r\n // Set visual indication\r\n item.cursor = true;\r\n // Go to the item on the scroll in case the item is not on the viewport\r\n if (!(item.el && item.el.parentNode) || force === true) {\r\n // Goto method\r\n self.goto(item);\r\n }\r\n // Adjust cursor position\r\n setTimeout(function () {\r\n self.adjustPosition(item);\r\n });\r\n }\r\n }\r\n\r\n const removeCursor = function (reset) {\r\n if (cursor !== null) {\r\n if (typeof (self.rows[cursor]) !== 'undefined') {\r\n self.rows[cursor].cursor = false;\r\n }\r\n if (reset) {\r\n // Cursor is null\r\n cursor = null;\r\n }\r\n }\r\n }\r\n\r\n const moveCursor = function (direction, jump) {\r\n // Remove cursor\r\n removeCursor();\r\n // Last item\r\n let last = self.rows.length - 1;\r\n if (jump) {\r\n if (direction < 0) {\r\n cursor = 0;\r\n } else {\r\n cursor = last;\r\n }\r\n } else {\r\n // Position\r\n if (cursor === null) {\r\n cursor = 0;\r\n } else {\r\n // Move previous\r\n cursor = cursor + direction;\r\n }\r\n // Reach the boundaries\r\n if (direction < 0) {\r\n // Back to the last one\r\n if (cursor < 0) {\r\n cursor = last;\r\n }\r\n } else {\r\n // Back to the first one\r\n if (cursor > last) {\r\n cursor = 0;\r\n }\r\n }\r\n }\r\n // Add cursor\r\n setCursor(cursor);\r\n }\r\n\r\n const adjustDimensions = function(data) {\r\n // Estimate width\r\n let width = self.width ?? 0;\r\n // Adjust the width\r\n let w = getInput().offsetWidth;\r\n if (width < w) {\r\n width = w;\r\n }\r\n // Width && values\r\n data.map(function (s) {\r\n // Estimated width of the element\r\n if (s.text) {\r\n let w = Math.max(width, s.text.length * 7.5);\r\n if (width < w) {\r\n width = w;\r\n }\r\n }\r\n });\r\n // Min width for the container\r\n self.container.parentNode.style.width = (width - 2) + 'px';\r\n }\r\n\r\n const setData = function () {\r\n // Data\r\n data = JSON.parse(JSON.stringify(self.data));\r\n // Re-order to make sure groups are in sequence\r\n if (data && data.length) {\r\n // Adjust width and height\r\n adjustDimensions(data);\r\n // Groups\r\n data.sort((a, b) => {\r\n // Compare groups\r\n if (a.group && b.group) {\r\n return a.group.localeCompare(b.group);\r\n }\r\n return 0;\r\n });\r\n let group = '';\r\n // Define group headers\r\n data.map((v) => {\r\n // Compare groups\r\n if (v && v.group && v.group !== group) {\r\n v.header = v.group;\r\n group = v.group;\r\n }\r\n });\r\n }\r\n // Data to be listed\r\n self.rows = data;\r\n }\r\n\r\n const updateLabel = function () {\r\n if (value && value.length) {\r\n getInput().textContent = value.filter(v => v.selected).map(i => i.text).join('; ');\r\n } else {\r\n getInput().textContent = '';\r\n }\r\n }\r\n\r\n const setValue = function (v, ignoreEvent) {\r\n // Values\r\n let newValue;\r\n if (! Array.isArray(v)) {\r\n if (typeof(v) === 'string') {\r\n newValue = v.split(self.divisor ?? ';');\r\n } else {\r\n newValue = [v];\r\n }\r\n } else {\r\n newValue = v;\r\n }\r\n\r\n // Width && values\r\n value = [];\r\n\r\n if (Array.isArray(data)) {\r\n data.map(function (s) {\r\n s.selected = newValue.some(v => {\r\n // Use strict equality when either value is empty string to avoid '' == 0 being true\r\n if (v === '' || s.value === '') {\r\n return v === s.value;\r\n }\r\n return v == s.value;\r\n });\r\n if (s.selected) {\r\n value.push(s);\r\n }\r\n });\r\n }\r\n\r\n // Update label\r\n if (self.isClosed()) {\r\n updateLabel();\r\n }\r\n\r\n // Component onchange\r\n if (! ignoreEvent) {\r\n Dispatch.call(self, change, 'change', {\r\n instance: self,\r\n value: getValue(),\r\n });\r\n }\r\n }\r\n\r\n const getValue = function () {\r\n if (self.multiple) {\r\n if (value && value.length) {\r\n return value.filter(v => v.selected).map(i => i.value);\r\n }\r\n } else {\r\n if (value && value.length) {\r\n return value[0].value;\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n\r\n const getText = function () {\r\n if (self.multiple) {\r\n if (value && value.length) {\r\n return value.filter(v => v.selected).map(i => i.text);\r\n }\r\n } else {\r\n if (value && value.length) {\r\n return value[0].text;\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n\r\n const onopen = function () {\r\n self.state = true;\r\n // Value\r\n let v = value[value.length - 1];\r\n // Make sure goes back to the top of the scroll\r\n if (self.container.parentNode.scrollTop > 0) {\r\n self.container.parentNode.scrollTop = 0;\r\n }\r\n // Move to the correct position\r\n if (v) {\r\n // Mark the position of the cursor to the same element\r\n setCursor(self.rows.indexOf(v), true);\r\n }\r\n // Prepare search field\r\n if (self.autocomplete) {\r\n // Get the input\r\n let input = getInput();\r\n // Editable\r\n input.setAttribute('contenteditable', true);\r\n // Clear input\r\n input.textContent = '';\r\n // Focus on the item\r\n input.focus();\r\n }\r\n // Adjust width and height\r\n adjustDimensions(self.data);\r\n // Open event\r\n Dispatch.call(self, self.onopen, 'open', {\r\n instance: self\r\n });\r\n }\r\n\r\n const onclose = function (options, origin) {\r\n // Cursor\r\n removeCursor(true);\r\n // Reset search\r\n if (self.autocomplete) {\r\n // Go to begin of the data\r\n self.rows = data;\r\n // Get the input\r\n let input = getInput();\r\n if (input) {\r\n // Remove editable attribute\r\n input.removeAttribute('contenteditable');\r\n // Clear input\r\n input.textContent = '';\r\n }\r\n }\r\n\r\n if (origin === 'escape') {\r\n // Cancel operation and keep the same previous value\r\n setValue(self.value, true);\r\n } else {\r\n // Current value\r\n let newValue = getValue();\r\n\r\n // If that is different from the component value\r\n if (changesDetected === true && ! compareValues(newValue, self.value)) {\r\n self.value = newValue;\r\n } else {\r\n // Update label\r\n updateLabel();\r\n }\r\n }\r\n\r\n // Identify the new state of the dropdown\r\n self.state = false;\r\n\r\n // Close event\r\n Dispatch.call(self, self.onclose, 'close', {\r\n instance: self,\r\n ...options\r\n });\r\n }\r\n\r\n const normalizeData = function(result) {\r\n if (result && result.length) {\r\n return result.map((v) => {\r\n if (typeof v === 'string' || typeof v === 'number') {\r\n return { value: v, text: v };\r\n } else if (typeof v === 'object' && v.hasOwnProperty('name')) {\r\n return { value: v.id, text: v.name };\r\n } else {\r\n return v;\r\n }\r\n });\r\n }\r\n }\r\n\r\n const loadData = function(result) {\r\n result = normalizeData(result);\r\n // Loading controls\r\n lazyloading = lazyLoading(self);\r\n // Loading new data from a remote source\r\n if (result) {\r\n result.forEach((v) => {\r\n self.data.push(v);\r\n });\r\n }\r\n // Process the data\r\n setData();\r\n // Set value\r\n if (typeof(self.value) !== 'undefined') {\r\n setValue(self.value, true);\r\n }\r\n // Onload method\r\n Dispatch.call(self, load, 'load', {\r\n instance: self\r\n });\r\n // Remove loading spin\r\n self.input.classList.remove('lm-dropdown-loading');\r\n }\r\n\r\n const resetData = function(result) {\r\n result = normalizeData(result);\r\n // Reset cursor\r\n removeCursor(true);\r\n let r = data.filter(item => {\r\n return item.selected === true;\r\n });\r\n // Loading new data from a remote source\r\n if (result) {\r\n result.forEach((v) => {\r\n r.push(v);\r\n });\r\n }\r\n self.rows = r;\r\n // Remove loading spin\r\n self.input.classList.remove('lm-dropdown-loading');\r\n\r\n // Event\r\n Dispatch.call(self, self.onsearch, 'search', {\r\n instance: self,\r\n result: result,\r\n });\r\n }\r\n\r\n const getInput = function() {\r\n return self.input;\r\n }\r\n\r\n const search = function(query) {\r\n if (! self.isClosed() && self.autocomplete) {\r\n\r\n // Remote or normal search\r\n if (self.remote === true && self.url) {\r\n // Clear existing timeout\r\n if (searchTimeout) {\r\n clearTimeout(searchTimeout);\r\n }\r\n // Loading spin\r\n self.input.classList.add('lm-dropdown-loading');\r\n // Headers\r\n let http = {\r\n headers: {\r\n 'Content-Type': 'text/json',\r\n }\r\n }\r\n let ret = Dispatch.call(self, self.onbeforesearch, 'beforesearch', {\r\n instance: self,\r\n http: http,\r\n query: query,\r\n });\r\n\r\n if (ret === false) {\r\n return;\r\n }\r\n\r\n // Debounce the search with 300ms delay\r\n searchTimeout = setTimeout(() => {\r\n let url = self.url;\r\n url += url.indexOf('?') === -1 ? '?' : '&';\r\n url += `q=${query}`;\r\n\r\n fetch(url, http).then(r => r.json()).then(resetData).catch((error) => {\r\n resetData([]);\r\n });\r\n }, 300);\r\n } else {\r\n // Filter options\r\n let temp;\r\n\r\n const find = (prop) => {\r\n if (prop) {\r\n if (Array.isArray(prop)) {\r\n // match if ANY element contains the query (case-insensitive)\r\n return prop.some(v => v != null && v.toString().toLowerCase().includes(query));\r\n }\r\n // handle strings/numbers/others\r\n return prop.toString().toLowerCase().includes(query);\r\n }\r\n return false;\r\n };\r\n\r\n if (! query) {\r\n temp = data;\r\n } else {\r\n temp = data.filter(item => {\r\n return item.selected === true || find(item.text) || find(item.group) || find(item.keywords) || find(item.synonym);\r\n });\r\n }\r\n\r\n // Cursor\r\n removeCursor(true);\r\n // Update the data from the dropdown\r\n self.rows = temp;\r\n }\r\n }\r\n }\r\n\r\n const events = {\r\n focusout: (e) => {\r\n if (self.modal) {\r\n if (! (e.relatedTarget && self.el.contains(e.relatedTarget))) {\r\n if (! self.isClosed()) {\r\n self.close({ origin: 'focusout '});\r\n }\r\n }\r\n }\r\n },\r\n keydown: (e) => {\r\n if (! self.isClosed()) {\r\n let prevent = false;\r\n if (e.code === 'ArrowUp') {\r\n moveCursor(-1);\r\n prevent = true;\r\n } else if (e.code === 'ArrowDown') {\r\n moveCursor(1);\r\n prevent = true;\r\n } else if (e.code === 'Home') {\r\n moveCursor(-1, true);\r\n if (!self.autocomplete) {\r\n prevent = true;\r\n }\r\n } else if (e.code === 'End') {\r\n moveCursor(1, true);\r\n if (!self.autocomplete) {\r\n prevent = true;\r\n }\r\n } else if (e.code === 'Enter') {\r\n if (e.target.tagName === 'BUTTON') {\r\n e.target.click();\r\n let input = getInput();\r\n input.focus();\r\n } else {\r\n select(e, self.rows[cursor]);\r\n }\r\n prevent = true;\r\n } else if (e.code === 'Escape') {\r\n self.close({ origin: 'escape'});\r\n prevent = true;\r\n } else {\r\n if (e.keyCode === 32 && !self.autocomplete) {\r\n select(e, self.rows[cursor]);\r\n }\r\n }\r\n\r\n if (prevent) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n } else {\r\n if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'Enter') {\r\n self.open();\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n },\r\n mousedown: (e) => {\r\n if (e.target.classList.contains('lm-dropdown-input')) {\r\n if (self.autocomplete) {\r\n let x;\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n x = e.changedTouches[0].clientX;\r\n } else {\r\n x = e.clientX;\r\n }\r\n if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {\r\n toggle();\r\n } else {\r\n self.open();\r\n }\r\n } else {\r\n toggle();\r\n }\r\n }\r\n },\r\n paste: (e) => {\r\n if (e.target.classList.contains('lm-dropdown-input')) {\r\n let text;\r\n if (e.clipboardData || e.originalEvent.clipboardData) {\r\n text = (e.originalEvent || e).clipboardData.getData('text/plain');\r\n } else if (window.clipboardData) {\r\n text = window.clipboardData.getData('Text');\r\n }\r\n text = text.replace(/(\\r\\n|\\n|\\r)/gm, \"\");\r\n document.execCommand('insertText', false, text)\r\n e.preventDefault();\r\n }\r\n },\r\n input: (e) => {\r\n if (e.target.classList.contains('lm-dropdown-input')) {\r\n search(e.target.textContent.toLowerCase());\r\n }\r\n },\r\n }\r\n\r\n const selectItem = function(s) {\r\n if (self.remote === true) {\r\n if (data.indexOf(s) === -1) {\r\n self.data.push(s);\r\n data.push(s);\r\n }\r\n }\r\n\r\n if (self.multiple === true) {\r\n let position = value.indexOf(s);\r\n if (position === -1) {\r\n value.push(s);\r\n s.selected = true;\r\n } else {\r\n value.splice(position, 1);\r\n s.selected = false;\r\n }\r\n } else {\r\n if (value[0] === s) {\r\n if (self.allowEmpty === false) {\r\n s.selected = true;\r\n } else {\r\n s.selected = !s.selected;\r\n }\r\n } else {\r\n if (value[0]) {\r\n value[0].selected = false;\r\n }\r\n s.selected = true;\r\n }\r\n if (s.selected) {\r\n value = [s];\r\n } else {\r\n value = [];\r\n }\r\n }\r\n\r\n changesDetected = true;\r\n }\r\n\r\n const add = async function (e) {\r\n let input = getInput();\r\n let text = input.textContent;\r\n if (! text) {\r\n return false;\r\n }\r\n\r\n // New item\r\n let s = {\r\n text: text,\r\n value: text,\r\n }\r\n\r\n self.add(s);\r\n\r\n e.preventDefault();\r\n }\r\n\r\n const select = function (e, s) {\r\n if (s && s.disabled !== true) {\r\n selectItem(s);\r\n // Close the modal\r\n if (self.multiple !== true) {\r\n self.close({ origin: 'button' });\r\n }\r\n }\r\n }\r\n\r\n const toggle = function () {\r\n if (self.modal) {\r\n if (self.isClosed()) {\r\n self.open();\r\n } else {\r\n self.close({ origin: 'button' });\r\n }\r\n }\r\n }\r\n\r\n self.add = async function (newItem) {\r\n // Event\r\n if (typeof(self.onbeforeinsert) === 'function') {\r\n self.input.classList.add('lm-dropdown-loading');\r\n let ret = await self.onbeforeinsert(self, newItem);\r\n self.input.classList.remove('lm-dropdown-loading');\r\n if (ret === false) {\r\n return;\r\n } else if (ret) {\r\n newItem = ret;\r\n }\r\n }\r\n // Process the data\r\n data.push(newItem);\r\n self.data.push(newItem);\r\n // Refresh screen\r\n self.result.unshift(newItem);\r\n self.rows.unshift(newItem);\r\n self.refresh('result');\r\n\r\n Dispatch.call(self, self.oninsert, 'insert', {\r\n instance: self,\r\n item: newItem,\r\n });\r\n }\r\n\r\n self.open = function () {\r\n if (self.modal && ! self.disabled) {\r\n if (self.isClosed()) {\r\n if (autoType) {\r\n self.type = window.innerWidth > 640 ? self.type = 'default' : (self.autocomplete ? 'searchbar' : 'picker');\r\n }\r\n // Track\r\n changesDetected = false;\r\n // Open the modal\r\n self.modal.open();\r\n }\r\n }\r\n }\r\n\r\n self.close = function (options) {\r\n if (self.modal) {\r\n if (options?.origin) {\r\n self.modal.close(options)\r\n } else {\r\n self.modal.close({ origin: 'button' })\r\n }\r\n }\r\n }\r\n\r\n self.isClosed = function() {\r\n if (self.modal) {\r\n return self.modal.isClosed();\r\n }\r\n }\r\n\r\n self.setData = function(data) {\r\n self.data = data;\r\n }\r\n\r\n self.getData = function() {\r\n return self.data;\r\n }\r\n\r\n self.getValue = function() {\r\n return self.value;\r\n }\r\n\r\n self.getText = function() {\r\n return getText();\r\n }\r\n\r\n self.setValue = function(v) {\r\n self.value = v;\r\n }\r\n\r\n self.reset = function() {\r\n self.value = null;\r\n self.close({ origin: 'button' });\r\n }\r\n\r\n self.onevent = function(e) {\r\n if (events[e.type]) {\r\n events[e.type](e);\r\n }\r\n }\r\n\r\n // Init with a\r\n let input = self.input;\r\n\r\n onload(() => {\r\n if (self.type === \"inline\") {\r\n // For inline dropdown\r\n self.el.setAttribute('tabindex', 0);\r\n // Remove search\r\n self.input.remove();\r\n } else {\r\n // Create modal instance\r\n self.modal = {\r\n closed: true,\r\n focus: false,\r\n onopen: onopen,\r\n onclose: onclose,\r\n position: 'absolute',\r\n 'auto-adjust': true,\r\n 'auto-close': false,\r\n };\r\n // Generate modal\r\n Modal(self.el.children[1], self.modal);\r\n }\r\n\r\n if (self.remote === 'true') {\r\n self.remote = true;\r\n }\r\n\r\n if (self.autocomplete === 'true') {\r\n self.autocomplete = true;\r\n }\r\n\r\n if (self.multiple === 'true') {\r\n self.multiple = true;\r\n }\r\n\r\n if (self.insert === 'true') {\r\n self.insert = true;\r\n }\r\n\r\n // Autocomplete will be forced to be true when insert action is active\r\n if ((self.insert === true || self.type === 'searchbar' || self.remote === true) && ! self.autocomplete) {\r\n self.autocomplete = true;\r\n }\r\n\r\n if (typeof(input) !== 'undefined') {\r\n // Remove the native element\r\n if (isDOM(input)) {\r\n input.classList.add('lm-dropdown-input');\r\n }\r\n // Remove search\r\n self.input.remove();\r\n // New input\r\n self.input = input;\r\n } else {\r\n self.el.children[0].style.position = 'relative';\r\n }\r\n\r\n // Default width\r\n if (self.width) {\r\n // Dropdown\r\n self.el.style.width = self.width + 'px';\r\n }\r\n\r\n // Height\r\n self.height = 400;\r\n\r\n // Animation for mobile\r\n if (document.documentElement.clientWidth < 800) {\r\n self.animation = true;\r\n }\r\n\r\n // Events\r\n self.el.addEventListener('focusout', events.focusout);\r\n self.el.addEventListener('keydown', events.keydown);\r\n self.el.addEventListener('mousedown', events.mousedown);\r\n self.el.addEventListener('paste', events.paste);\r\n self.el.addEventListener('input', events.input);\r\n\r\n // Load remote data\r\n if (self.url) {\r\n if (self.remote === true) {\r\n loadData();\r\n } else {\r\n // Loading spin\r\n self.input.classList.add('lm-dropdown-loading');\r\n // Load remote data\r\n fetch(self.url, {\r\n headers: {\r\n 'Content-Type': 'text/json',\r\n }\r\n }).then(r => r.json()).then(loadData).catch(() => {\r\n loadData();\r\n });\r\n }\r\n } else {\r\n loadData();\r\n }\r\n });\r\n\r\n onchange(prop => {\r\n if (prop === 'value') {\r\n setValue(self.value);\r\n } else if (prop === 'rows') {\r\n // The number of results changes the modal height, so the position needs to be recalculated\r\n if (self.modal && typeof (self.modal.refreshPosition) === 'function') {\r\n self.modal.refreshPosition();\r\n }\r\n } else if (prop === 'data') {\r\n // Store current value before resetting data\r\n let currentValue = self.value;\r\n setData();\r\n\r\n // Only reset value if it's not in the new data\r\n if (currentValue !== null && currentValue !== undefined && currentValue !== '') {\r\n let valuesToCheck = Array.isArray(currentValue) ? currentValue : [currentValue];\r\n\r\n // Filter to keep only values that exist in the new data\r\n let validValues = valuesToCheck.filter(v => {\r\n return self.data.some(item => {\r\n if (v === '' || item.value === '') {\r\n return v === item.value;\r\n }\r\n return v == item.value;\r\n });\r\n });\r\n\r\n if (validValues.length === 0) {\r\n // No valid values remain, reset to null\r\n self.value = null;\r\n } else if (self.multiple) {\r\n // Multi-select: keep only valid values\r\n self.value = validValues;\r\n } else {\r\n // Single select: re-apply the value\r\n self.value = validValues[0];\r\n }\r\n }\r\n }\r\n\r\n if (typeof (lazyloading) === 'function') {\r\n lazyloading(prop);\r\n }\r\n });\r\n\r\n return render => render`
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{{self.text}}
\r\n
\r\n
\r\n
\r\n
\r\n
`;\r\n }\r\n\r\n lemonade.setComponents({ Dropdown: Dropdown });\r\n\r\n lemonade.createWebComponent('dropdown', Dropdown);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Dropdown, root, options)\r\n return options;\r\n } else {\r\n return Dropdown.call(this, root)\r\n }\r\n }\r\n})));\n\n/***/ }),\n\n/***/ 72:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\n/**\r\n * pin the modal to the left panel\r\n */\r\nif (!lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\n;(function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (!(key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function (method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n // References\r\n const modals = [];\r\n // State of the resize and move modal\r\n let state = {};\r\n // Internal controls of the action of resize and move\r\n let controls = {};\r\n // Width of the border\r\n let cornerSize = 10;\r\n // Container with minimized modals\r\n const minimizedModals = [];\r\n // Default z-index for the modals\r\n const defaultZIndex = 20;\r\n\r\n /**\r\n * Send the modal to the front\r\n * @param container\r\n */\r\n const sendToFront = function (container) {\r\n let highestXIndex = defaultZIndex;\r\n for (let i = 0; i < modals.length; i++) {\r\n const zIndex = parseInt(modals[i].el.style.zIndex);\r\n if (zIndex > highestXIndex) {\r\n highestXIndex = zIndex;\r\n }\r\n }\r\n container.style.zIndex = highestXIndex + 1;\r\n }\r\n\r\n /**\r\n * Send modal to the back\r\n * @param container\r\n */\r\n const sendToBack = function (container) {\r\n container.style.zIndex = defaultZIndex;\r\n }\r\n\r\n // Get the coordinates of the action\r\n const getCoords = function (e) {\r\n let x;\r\n let y;\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n x = e.changedTouches[0].clientX;\r\n y = e.changedTouches[0].clientY;\r\n } else {\r\n x = e.clientX;\r\n y = e.clientY;\r\n }\r\n\r\n return [x, y];\r\n }\r\n\r\n // Get the button status\r\n const getButton = function (e) {\r\n e = e || window.event;\r\n if (e.buttons) {\r\n return e.buttons;\r\n } else if (e.button) {\r\n return e.button;\r\n } else {\r\n return e.which;\r\n }\r\n }\r\n\r\n // Finalize any potential action\r\n const mouseUp = function (e) {\r\n // Finalize all actions\r\n if (typeof (controls.action) === 'function') {\r\n controls.action();\r\n }\r\n setTimeout(function () {\r\n // Remove cursor\r\n if (controls.e) {\r\n controls.e.style.cursor = '';\r\n }\r\n // Reset controls\r\n controls = {};\r\n // Reset state controls\r\n state = {\r\n x: null,\r\n y: null,\r\n }\r\n }, 0)\r\n }\r\n\r\n const mouseMove = function (e) {\r\n if (!getButton(e)) {\r\n return false;\r\n }\r\n // Get mouse coordinates\r\n let [x, y] = getCoords(e);\r\n\r\n // Move modal\r\n if (controls.type === 'move') {\r\n if (state && state.x == null && state.y == null) {\r\n state.x = x;\r\n state.y = y;\r\n }\r\n\r\n let dx = x - state.x;\r\n let dy = y - state.y;\r\n let top = controls.e.offsetTop + dy;\r\n let left = controls.e.offsetLeft + dx;\r\n\r\n // Update position\r\n controls.top = top;\r\n controls.left = left;\r\n controls.e.style.top = top + 'px';\r\n controls.e.style.left = left + 'px';\r\n\r\n state.x = x;\r\n state.y = y;\r\n state.top = top;\r\n state.left = left;\r\n } else if (controls.type === 'resize') {\r\n let top = null;\r\n let left = null;\r\n let width = null;\r\n let height = null;\r\n\r\n if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {\r\n width = controls.w + (x - controls.x);\r\n\r\n if (e.shiftKey) {\r\n height = controls.h + (x - controls.x) * (controls.h / controls.w);\r\n }\r\n } else if (controls.d === 'w-resize' || controls.d === 'nw-resize' || controls.d === 'sw-resize') {\r\n left = controls.l + (x - controls.x);\r\n // Do not move further\r\n if (left >= controls.l) {\r\n left = controls.l;\r\n }\r\n // Update width\r\n width = controls.l + controls.w - left;\r\n // Consider shift to update height\r\n if (e.shiftKey) {\r\n height = controls.h - (x - controls.x) * (controls.h / controls.w);\r\n }\r\n }\r\n\r\n if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {\r\n if (!height) {\r\n height = controls.h + (y - controls.y);\r\n }\r\n } else if (controls.d === 'n-resize' || controls.d === 'ne-resize' || controls.d === 'nw-resize') {\r\n top = controls.t + (y - controls.y);\r\n // Do not move further\r\n if (top >= controls.t) {\r\n top = controls.t;\r\n }\r\n // Update height\r\n height = controls.t + controls.h - top;\r\n }\r\n\r\n if (top) {\r\n controls.e.style.top = top + 'px';\r\n }\r\n if (left) {\r\n controls.e.style.left = left + 'px';\r\n }\r\n if (width) {\r\n controls.e.style.width = width + 'px';\r\n }\r\n if (height) {\r\n controls.e.style.height = height + 'px';\r\n }\r\n }\r\n }\r\n\r\n if (typeof (document) !== \"undefined\") {\r\n document.addEventListener('mouseup', mouseUp);\r\n document.addEventListener('mousemove', mouseMove);\r\n }\r\n\r\n const isTrue = function (e) {\r\n return e === true || e === 1 || e === 'true';\r\n }\r\n\r\n const refreshMinimized = function () {\r\n let items = minimizedModals;\r\n let numOfItems = items.length;\r\n let width = 10;\r\n let height = 55;\r\n let offsetWidth = window.innerWidth;\r\n let offsetHeight = window.innerHeight;\r\n for (let i = 0; i < numOfItems; i++) {\r\n let item = items[i];\r\n item.el.style.left = width + 'px';\r\n item.el.style.top = offsetHeight - height + 'px';\r\n width += 205;\r\n\r\n if (offsetWidth - width < 205) {\r\n width = 10;\r\n height += 50;\r\n }\r\n }\r\n }\r\n\r\n const delayAction = function (self, action) {\r\n // Make sure to remove the transformation before minimize to preserve the animation\r\n if (self.el.style.marginLeft || self.el.style.marginTop) {\r\n // Make sure no animation during this process\r\n self.el.classList.add('action');\r\n // Remove adjustment\r\n removeMargin(self);\r\n // Make sure to continue with minimize\r\n setTimeout(function () {\r\n // Remove class\r\n self.el.classList.remove('action');\r\n // Call action\r\n action(self);\r\n }, 0)\r\n\r\n return true;\r\n }\r\n }\r\n\r\n const setMini = function (self) {\r\n if (delayAction(self, setMini)) {\r\n return;\r\n }\r\n\r\n // Minimize modals\r\n minimizedModals.push(self);\r\n\r\n self.el.top = self.el.offsetTop;\r\n self.el.left = self.el.offsetLeft;\r\n\r\n if (!self.el.style.top) {\r\n self.el.style.top = self.el.top + 'px';\r\n }\r\n if (!self.el.style.left) {\r\n self.el.style.left = self.el.left + 'px';\r\n }\r\n\r\n self.el.translateY = 0;\r\n self.el.translateX = 0;\r\n\r\n // Refresh positions\r\n setTimeout(function () {\r\n refreshMinimized();\r\n self.minimized = true;\r\n }, 10)\r\n }\r\n\r\n const removeMini = function (self) {\r\n minimizedModals.splice(minimizedModals.indexOf(self), 1);\r\n self.minimized = false;\r\n self.el.style.top = self.el.top + 'px';\r\n self.el.style.left = self.el.left + 'px';\r\n // Refresh positions\r\n setTimeout(() => {\r\n refreshMinimized();\r\n }, 10);\r\n // Refresh positions\r\n setTimeout(() => {\r\n if (self.top === '') {\r\n self.el.style.top = '';\r\n }\r\n if (self.left === '') {\r\n self.el.style.left = '';\r\n }\r\n }, 400);\r\n }\r\n\r\n const removeMargin = function (self) {\r\n if (self.el.style.marginLeft) {\r\n let y = self.el.offsetLeft;\r\n self.el.style.marginLeft = '';\r\n self.left = y;\r\n }\r\n\r\n if (self.el.style.marginTop) {\r\n let x = self.el.offsetTop;\r\n self.el.style.marginTop = '';\r\n self.top = x;\r\n }\r\n }\r\n\r\n const adjustHorizontal = function (self) {\r\n if (!isTrue(self['auto-adjust'])) {\r\n return false;\r\n }\r\n\r\n self.el.style.marginLeft = '';\r\n let viewportWidth = window.innerWidth;\r\n let margin = 10;\r\n\r\n if (self.position) {\r\n if (self.position === 'absolute') {\r\n let w = document.documentElement.offsetWidth;\r\n if (w > viewportWidth) {\r\n //viewportWidth = w;\r\n }\r\n } else if (self.position !== 'center') {\r\n margin = 0;\r\n }\r\n }\r\n\r\n let el = self.el.getBoundingClientRect();\r\n\r\n let rightEdgeDistance = viewportWidth - (el.left + el.width);\r\n let transformX = 0;\r\n\r\n if (self.position === 'absolute') {\r\n if (rightEdgeDistance < 0) {\r\n transformX = rightEdgeDistance - margin - 10; // 10 is the scroll width\r\n }\r\n } else {\r\n if (rightEdgeDistance < 0) {\r\n transformX = rightEdgeDistance - margin;\r\n }\r\n }\r\n\r\n if (el.left < 0) {\r\n transformX = margin - el.left;\r\n }\r\n if (transformX !== 0) {\r\n self.el.style.marginLeft = transformX + 'px';\r\n }\r\n }\r\n\r\n const adjustVertical = function (self) {\r\n if (!isTrue(self['auto-adjust'])) {\r\n return false;\r\n }\r\n\r\n self.el.style.marginTop = '';\r\n let viewportHeight = window.innerHeight;\r\n let margin = 10;\r\n\r\n if (self.position) {\r\n if (self.position === 'absolute') {\r\n let h = document.documentElement.offsetHeight;\r\n if (h > viewportHeight) {\r\n //viewportHeight = h;\r\n }\r\n } else if (self.position !== 'center') {\r\n margin = 0;\r\n }\r\n }\r\n\r\n let el = self.el.getBoundingClientRect();\r\n\r\n let bottomEdgeDistance = viewportHeight - (el.top + el.height);\r\n let transformY = 0;\r\n\r\n if (self.position === 'absolute') {\r\n if (bottomEdgeDistance < 5) {\r\n transformY = (-1 * el.height) - margin - 12;\r\n if (el.top + transformY < 0) {\r\n transformY = -el.top + 10;\r\n }\r\n }\r\n } else {\r\n if (bottomEdgeDistance < 0) {\r\n transformY = bottomEdgeDistance - margin;\r\n }\r\n }\r\n\r\n if (el.top < 0) {\r\n transformY = margin - el.top;\r\n }\r\n if (transformY !== 0) {\r\n self.el.style.marginTop = transformY + 'px';\r\n }\r\n }\r\n\r\n const removeElements = function (root) {\r\n // Keep the DOM elements\r\n let elements = [];\r\n if (root) {\r\n while (root.firstChild) {\r\n elements.push(root.firstChild);\r\n root.firstChild.remove();\r\n }\r\n }\r\n return elements;\r\n }\r\n\r\n const appendElements = function (root, elements) {\r\n if (elements && elements.length) {\r\n while (elements[0]) {\r\n root.appendChild(elements.shift());\r\n }\r\n }\r\n }\r\n\r\n const Modal = function (template, {onchange, onload, track}) {\r\n let self = this;\r\n let backdrop = null;\r\n let elements = null;\r\n\r\n if (this.tagName) {\r\n // Remove elements from the DOM\r\n elements = removeElements(this);\r\n\r\n this.addEventListener('dragstart', (e) => {\r\n e.preventDefault();\r\n });\r\n }\r\n\r\n // Make sure keep the state as boolean\r\n self.closed = !!self.closed;\r\n\r\n // Keep all modals references\r\n modals.push(self);\r\n\r\n // External onload remove from the lifecycle\r\n let change = self.onchange;\r\n self.onchange = null;\r\n\r\n let load = self.onload;\r\n self.onload = null;\r\n\r\n let ignoreEvents = false;\r\n\r\n const click = function (e) {\r\n if (e.target.classList.contains('lm-modal-close')) {\r\n self.close({origin: 'button'});\r\n }\r\n\r\n if (e.target.classList.contains('lm-modal-minimize')) {\r\n // Handles minimized modal positioning\r\n if (self.minimized === true) {\r\n removeMini(self);\r\n } else {\r\n setMini(self);\r\n }\r\n }\r\n }\r\n\r\n const mousemove = function (e) {\r\n if (getButton(e)) {\r\n return;\r\n }\r\n\r\n // Get mouse coordinates\r\n let [x, y] = getCoords(e);\r\n // Root element of the component\r\n let item = self.el;\r\n // Get the position and dimensions\r\n let rect = item.getBoundingClientRect();\r\n\r\n controls.type = null;\r\n controls.d = null;\r\n controls.e = item;\r\n controls.w = rect.width;\r\n controls.h = rect.height;\r\n controls.t = rect.top;\r\n controls.l = rect.left;\r\n\r\n // When resizable\r\n if (isTrue(self.resizable)) {\r\n if (e.clientY - rect.top < cornerSize) {\r\n if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'ne-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'nw-resize';\r\n } else {\r\n item.style.cursor = 'n-resize';\r\n }\r\n } else if (rect.height - (e.clientY - rect.top) < cornerSize) {\r\n if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'se-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'sw-resize';\r\n } else {\r\n item.style.cursor = 's-resize';\r\n }\r\n } else if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'e-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'w-resize';\r\n } else {\r\n item.style.cursor = '';\r\n }\r\n\r\n if (item.style.cursor) {\r\n controls.type = 'resize';\r\n controls.d = item.style.cursor;\r\n } else {\r\n controls.type = null;\r\n controls.d = null;\r\n }\r\n }\r\n\r\n if (controls.type == null && isTrue(self.draggable)) {\r\n if (y - rect.top < 40) {\r\n item.style.cursor = 'move';\r\n } else {\r\n item.style.cursor = '';\r\n }\r\n\r\n if (item.style.cursor) {\r\n controls.type = 'move';\r\n controls.d = item.style.cursor;\r\n } else {\r\n controls.type = null;\r\n controls.d = null;\r\n }\r\n }\r\n }\r\n\r\n const mousedown = function (e) {\r\n if (!self.minimized) {\r\n // Get mouse coordinates\r\n let [x, y] = getCoords(e);\r\n controls.x = x;\r\n controls.y = y;\r\n // Root element of the component\r\n let item = self.el;\r\n // Get the position and dimensions\r\n let rect = item.getBoundingClientRect();\r\n controls.e = item;\r\n controls.w = rect.width;\r\n controls.h = rect.height;\r\n controls.t = rect.top;\r\n controls.l = rect.left;\r\n // If is not minimized\r\n if (controls.type === 'resize') {\r\n // Make sure the width and height is defined for the modal\r\n if (!item.style.width) {\r\n item.style.width = controls.w + 'px';\r\n }\r\n if (!item.style.height) {\r\n item.style.height = controls.h + 'px';\r\n }\r\n // This will be the callback when finalize the resize\r\n controls.action = function () {\r\n self.width = parseInt(item.style.width);\r\n self.height = parseInt(item.style.height);\r\n controls.e.classList.remove('action');\r\n // Event\r\n Dispatch.call(self, self.onresize, 'resize', {\r\n instance: self,\r\n width: self.width,\r\n height: self.height,\r\n });\r\n }\r\n controls.e.classList.add('action');\r\n } else if (isTrue(self.draggable) && y - rect.top < 40) {\r\n // Callback\r\n controls.action = function () {\r\n self.top = parseInt(item.style.top);\r\n self.left = parseInt(item.style.left);\r\n controls.e.classList.remove('action');\r\n // Open event\r\n Dispatch.call(self, self.onmove, 'move', {\r\n instance: self,\r\n top: self.top,\r\n left: self.left,\r\n });\r\n }\r\n controls.e.classList.add('action');\r\n // Remove transform\r\n removeMargin(self);\r\n }\r\n }\r\n }\r\n\r\n self.back = function () {\r\n sendToBack(self.el);\r\n }\r\n\r\n self.front = function () {\r\n sendToFront(self.el);\r\n }\r\n\r\n self.open = function () {\r\n if (self.closed === true) {\r\n self.closed = false;\r\n // Close event\r\n Dispatch.call(self, self.onopen, 'open', {\r\n instance: self\r\n });\r\n }\r\n }\r\n\r\n self.close = function (options) {\r\n if (self.closed === false) {\r\n self.closed = true;\r\n // Close event\r\n Dispatch.call(self, self.onclose, 'close', {\r\n instance: self,\r\n ...options\r\n });\r\n }\r\n }\r\n\r\n self.isClosed = function () {\r\n return self.closed;\r\n }\r\n\r\n /**\r\n * Recalculate the auto-adjust position when the modal dimensions change,\r\n * since the margin compensation depends on the current size of the modal.\r\n * NOTE: cannot be named refresh, since lemonade registers its own refresh on self\r\n */\r\n self.refreshPosition = function () {\r\n if (self.closed === false) {\r\n // Auto adjust\r\n queueMicrotask(() => {\r\n adjustHorizontal(self);\r\n adjustVertical(self);\r\n });\r\n }\r\n }\r\n\r\n if (!template || typeof (template) !== 'string') {\r\n template = '';\r\n }\r\n\r\n // Custom Root Configuration\r\n self.settings = {\r\n getRoot: function () {\r\n return self.root;\r\n }\r\n }\r\n\r\n // Native lemonade\r\n onload(() => {\r\n // Dimensions\r\n if (self.width) {\r\n self.el.style.width = self.width + 'px';\r\n }\r\n if (self.height) {\r\n self.el.style.height = self.height + 'px';\r\n }\r\n // Position\r\n if (self.top) {\r\n self.el.style.top = self.top + 'px';\r\n }\r\n if (self.left) {\r\n self.el.style.left = self.left + 'px';\r\n }\r\n\r\n if (self.position === 'absolute' || self.position === 'right' || self.position === 'bottom' || self.position === 'left') {\r\n\r\n } else {\r\n if (!self.width && self.el.offsetWidth) {\r\n self.width = self.el.offsetWidth;\r\n }\r\n if (!self.height && self.el.offsetHeight) {\r\n self.height = self.el.offsetHeight;\r\n }\r\n\r\n // Initial centralize\r\n if (self.position === 'center' || !self.top) {\r\n self.top = (window.innerHeight - self.height) / 2;\r\n }\r\n if (self.position === 'center' || !self.left) {\r\n self.left = (window.innerWidth - self.width) / 2;\r\n }\r\n\r\n // Responsive\r\n if (document.documentElement.clientWidth < 800) {\r\n // Full screen\r\n if (self.height > 300) {\r\n self.el.classList.add('fullscreen');\r\n }\r\n }\r\n }\r\n\r\n // Auto adjust\r\n adjustHorizontal(self);\r\n adjustVertical(self);\r\n\r\n // Backdrop\r\n if (self.backdrop === true) {\r\n backdrop = document.createElement('div');\r\n backdrop.classList.add('lm-modal-backdrop');\r\n backdrop.addEventListener('click', () => {\r\n self.close({origin: 'backdrop'});\r\n });\r\n\r\n if (self.closed === false) {\r\n self.el.parentNode.insertBefore(backdrop, self.el);\r\n }\r\n }\r\n\r\n // Import content from DOM\r\n if (self.content) {\r\n if (typeof (self.content) === 'string') {\r\n template = self.content;\r\n } else if (typeof (self.content) === 'object' && self.content.tagName) {\r\n self.root.appendChild(self.content);\r\n }\r\n }\r\n\r\n // Focus out of the component\r\n self.el.addEventListener('focusout', function (e) {\r\n if (!self.el.contains(e.relatedTarget)) {\r\n if (isTrue(self['auto-close'])) {\r\n self.close({origin: 'focusout'});\r\n }\r\n // Remove focus\r\n self.el.classList.remove('lm-modal-focus');\r\n }\r\n });\r\n\r\n // Focus out of the component\r\n self.el.addEventListener('focusin', function (e) {\r\n self.el.classList.add('lm-modal-focus');\r\n });\r\n\r\n // Close and stop propagation\r\n self.el.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n if (self.closed === false) {\r\n self.close({origin: 'escape'});\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n } else if (e.key === 'Enter') {\r\n click(e);\r\n }\r\n });\r\n\r\n // Append elements to the container\r\n appendElements(self.el.children[1], elements);\r\n\r\n if (self.url) {\r\n fetch(self.url)\r\n .then(response => response.clone().body)\r\n .then(body => {\r\n let reader = body.getReader();\r\n reader.read().then(({done, value}) => {\r\n // Add HTML to the modal\r\n self.root.innerHTML = new TextDecoder().decode(value.buffer);\r\n // Call onload event\r\n Dispatch.call(self, load, 'load', {\r\n instance: self\r\n });\r\n });\r\n });\r\n } else {\r\n // Call onload event\r\n Dispatch.call(self, load, 'load', {\r\n instance: self\r\n });\r\n }\r\n });\r\n\r\n onchange((property) => {\r\n if (ignoreEvents) {\r\n return false;\r\n }\r\n\r\n if (property === 'closed') {\r\n if (self.closed === false) {\r\n // Focus on the modal\r\n if (self.focus !== false) {\r\n self.el.focus();\r\n }\r\n // Show backdrop\r\n if (backdrop) {\r\n self.el.parentNode.insertBefore(backdrop, self.el);\r\n }\r\n\r\n // Auto adjust\r\n queueMicrotask(() => {\r\n adjustHorizontal(self);\r\n adjustVertical(self);\r\n });\r\n } else {\r\n // Hide backdrop\r\n if (backdrop) {\r\n backdrop.remove();\r\n }\r\n }\r\n } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {\r\n if (self[property] !== '') {\r\n self.el.style[property] = self[property] + 'px';\r\n } else {\r\n self.el.style[property] = '';\r\n }\r\n\r\n if (self.closed === false) {\r\n queueMicrotask(() => {\r\n if (property === 'top') {\r\n adjustVertical(self);\r\n }\r\n if (property === 'left') {\r\n adjustHorizontal(self);\r\n }\r\n });\r\n }\r\n } else if (property === 'position') {\r\n if (self.position) {\r\n if (self.position === 'center') {\r\n self.top = (window.innerHeight - self.el.offsetHeight) / 2;\r\n self.left = (window.innerWidth - self.el.offsetWidth) / 2;\r\n } else {\r\n self.top = '';\r\n self.left = '';\r\n }\r\n } else {\r\n if (!self.top) {\r\n self.top = (window.innerHeight - self.el.offsetHeight) / 2;\r\n }\r\n if (!self.left) {\r\n self.left = (window.innerWidth - self.el.offsetWidth) / 2;\r\n }\r\n }\r\n }\r\n });\r\n\r\n track('top');\r\n track('left');\r\n track('width');\r\n track('height');\r\n\r\n return render => render`
\r\n
{{self.icon}}
{{self.title}}
\r\n
${template}
\r\n
`\r\n }\r\n\r\n const Component = function (root, options) {\r\n if (typeof (root) === 'object') {\r\n // Remove elements from the DOM\r\n let elements = removeElements(root);\r\n // Create the modal\r\n let e = lemonade.render(Modal, root, options);\r\n // Add elements to the container\r\n appendElements(e.children[1], elements);\r\n\r\n return options;\r\n } else {\r\n return Modal.call(this);\r\n }\r\n }\r\n\r\n // Create LemonadeJS Component\r\n lemonade.setComponents({Modal: Modal});\r\n // Create Web Component\r\n lemonade.createWebComponent('modal', Modal)\r\n\r\n return Component;\r\n})));\n\n/***/ }),\n\n/***/ 867:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nif (!lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\n;(function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function(method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n const Rating = function(children, { onchange, onload }) {\r\n let self = this;\r\n\r\n // Event\r\n let change = self.onchange;\r\n self.onchange = null;\r\n\r\n if (! self.number) {\r\n self.number = 5;\r\n }\r\n\r\n self.stars = [];\r\n\r\n // Current self star\r\n let current = null;\r\n\r\n /**\r\n * Update the number of stars\r\n */\r\n const len = function () {\r\n // Remove stars\r\n if (self.number < self.stars.length) {\r\n self.stars.splice(self.number, self.stars.length);\r\n if (self.value > self.number) {\r\n self.value = self.number;\r\n }\r\n }\r\n // Add missing stars\r\n for (let i = 0; i < self.number; i++) {\r\n if (! self.stars[i]) {\r\n self.stars[i] = {\r\n icon: 'star',\r\n };\r\n if (self.tooltip[i]) {\r\n self.stars[i].title = self.tooltip[i];\r\n }\r\n }\r\n }\r\n // Refresh\r\n self.refresh('stars');\r\n }\r\n\r\n const val = function (index, events) {\r\n if (typeof(index) === 'string') {\r\n index = Number(index);\r\n }\r\n // Apply value to the selected property in each star\r\n for (let i = 0; i < self.number; i++) {\r\n self.stars[i].selected = i <= index - 1 ? 1 : 0;\r\n }\r\n // Keep current value\r\n current = index;\r\n // Dispatch method\r\n if (events !== false) {\r\n Dispatch.call(self, change, 'change', {\r\n instance: self,\r\n value: index,\r\n });\r\n }\r\n }\r\n\r\n const getElementPosition = function(child) {\r\n if (child.tagName === 'I') {\r\n let root = self.el;\r\n for (let i = 0; i < root.children.length; i++) {\r\n let c = root.children[i];\r\n if (c === child) {\r\n return i;\r\n }\r\n }\r\n }\r\n return -1;\r\n }\r\n\r\n const click = function(e, s) {\r\n let ret = getElementPosition(e.target);\r\n if (ret !== -1) {\r\n let index = ret + 1;\r\n if (index === current) {\r\n index = 0;\r\n }\r\n self.value = index;\r\n }\r\n }\r\n\r\n const mouseover = function(e, s) {\r\n let index = getElementPosition(e.target);\r\n if (index !== -1) {\r\n for (let i = 0; i < self.number; i++) {\r\n if (i <= index) {\r\n self.stars[i].hover = 1;\r\n } else {\r\n self.stars[i].hover = 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n const mouseout = function(e, s) {\r\n for (let i = 0; i < self.number; i++) {\r\n self.stars[i].hover = 0;\r\n }\r\n }\r\n\r\n onchange((prop) => {\r\n if (prop === 'number') {\r\n len();\r\n } else if (prop === 'value') {\r\n val(self.value);\r\n } else if (prop === 'tooltip') {\r\n if (typeof(self.tooltip) === 'string') {\r\n self.tooltip = self.tooltip.split(',')\r\n }\r\n len();\r\n }\r\n })\r\n\r\n onload(() => {\r\n // Bind global method to be compatible with LemonadeJS forms\r\n self.el.val = function (v) {\r\n if (typeof (v) === 'undefined') {\r\n return self.value;\r\n } else {\r\n self.value = v;\r\n }\r\n }\r\n\r\n if (self.tooltip && typeof(self.tooltip) === 'string') {\r\n self.tooltip = self.tooltip.split(',')\r\n } else {\r\n self.tooltip = '';\r\n }\r\n len();\r\n // Ignore events\r\n val(self.value, false);\r\n\r\n self.el.addEventListener('click', click);\r\n self.el.addEventListener('mouseout', mouseout);\r\n self.el.addEventListener('mouseover', mouseover);\r\n });\r\n\r\n self.getValue = function () {\r\n return Number(self.value);\r\n }\r\n\r\n self.setValue = function (index) {\r\n self.value = index;\r\n }\r\n\r\n return `
\r\n star\r\n
`;\r\n }\r\n\r\n // Register the LemonadeJS Component\r\n lemonade.setComponents({ Rating: Rating });\r\n // Register the web component\r\n lemonade.createWebComponent('rating', Rating);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Rating, root, options)\r\n return options;\r\n } else {\r\n return Rating.call(this, root)\r\n }\r\n }\r\n\r\n})));\n\n/***/ }),\n\n/***/ 539:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nif (!lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\n; (function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function(method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n const Switch = function (children, { onchange, onload }) {\r\n let self = this;\r\n\r\n // Event\r\n let change = self.onchange;\r\n self.onchange = null;\r\n\r\n const state = () => {\r\n let s = self.el.firstChild.checked;\r\n if (s !== self.checked) {\r\n self.checked = s;\r\n }\r\n }\r\n\r\n onchange((prop, a, b, c, d) => {\r\n if (a !== b) {\r\n Dispatch.call(self, change, 'change', {\r\n instance: self,\r\n value: self.value,\r\n });\r\n }\r\n\r\n state();\r\n })\r\n\r\n onload(state);\r\n\r\n return render => render``\r\n }\r\n\r\n // Create LemonadeJS references\r\n lemonade.setComponents({ Switch: Switch });\r\n // Create web-component\r\n lemonade.createWebComponent('switch', Switch);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Switch, root, options)\r\n return options;\r\n } else {\r\n return Switch.call(this, root);\r\n }\r\n }\r\n\r\n})));\n\n/***/ }),\n\n/***/ 560:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nif (! lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\n; (function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Dispatcher\r\n const Dispatch = function(method, type, options) {\r\n // Try calling the method directly if provided\r\n if (typeof method === 'function') {\r\n let a = Object.values(options);\r\n return method(...a);\r\n } else if (this.tagName) {\r\n this.dispatchEvent(new CustomEvents(type, options));\r\n }\r\n }\r\n\r\n const extract = function(root, self) {\r\n if (! Array.isArray(self.data)) {\r\n self.data = [];\r\n }\r\n\r\n if (root.tagName) {\r\n for (let i = 0; i < root.children.length; i++) {\r\n self.data.push({\r\n el: root.children[i],\r\n })\r\n }\r\n } else {\r\n root.forEach((child) => {\r\n self.data.push({\r\n el: child.element,\r\n })\r\n });\r\n }\r\n }\r\n\r\n const sorting = function(el, options) {\r\n const obj = {};\r\n\r\n let dragElement = null;\r\n\r\n el.addEventListener('dragstart', function(e) {\r\n let target = e.target;\r\n if (target.nodeType === 3) {\r\n if (target.parentNode.getAttribute('draggable') === 'true') {\r\n target = target.parentNode;\r\n } else {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return;\r\n }\r\n }\r\n\r\n if (target.getAttribute('draggable') === 'true') {\r\n let position = Array.prototype.indexOf.call(target.parentNode.children, target);\r\n dragElement = {\r\n element: target,\r\n o: position,\r\n d: position\r\n }\r\n target.style.opacity = '0.25';\r\n e.dataTransfer.setDragImage(target,0,0);\r\n }\r\n });\r\n\r\n el.addEventListener('dragover', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement && getElement(e.target) && e.target.getAttribute('draggable') == 'true' && dragElement.element != e.target) {\r\n let element = e.target.clientWidth / 2 > e.offsetX ? e.target : e.target.nextSibling;\r\n e.target.parentNode.insertBefore(dragElement.element, element);\r\n dragElement.d = Array.prototype.indexOf.call(e.target.parentNode.children, dragElement.element);\r\n }\r\n });\r\n\r\n el.addEventListener('dragleave', function(e) {\r\n e.preventDefault();\r\n });\r\n\r\n el.addEventListener('dragend', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement) {\r\n let element = dragElement.o < dragElement.d ? e.target.parentNode.children[dragElement.o] : e.target.parentNode.children[dragElement.o].nextSibling\r\n e.target.parentNode.insertBefore(dragElement.element, element);\r\n dragElement.element.style.opacity = '';\r\n dragElement = null;\r\n }\r\n });\r\n\r\n el.addEventListener('drop', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement) {\r\n if (dragElement.o !== dragElement.d) {\r\n if (typeof(options.ondrop) == 'function') {\r\n options.ondrop(el, dragElement.o, dragElement.d, dragElement.element, e.target, e);\r\n }\r\n }\r\n\r\n dragElement.element.style.opacity = '';\r\n dragElement = null;\r\n }\r\n });\r\n\r\n const getElement = function(element) {\r\n var sorting = false;\r\n\r\n function path (element) {\r\n if (element === el) {\r\n sorting = true;\r\n }\r\n\r\n if (! sorting) {\r\n path(element.parentNode);\r\n }\r\n }\r\n\r\n path(element);\r\n\r\n return sorting;\r\n }\r\n\r\n for (let i = 0; i < el.children.length; i++) {\r\n if (! el.children[i].hasAttribute('draggable')) {\r\n el.children[i].setAttribute('draggable', 'true');\r\n }\r\n }\r\n\r\n return el;\r\n }\r\n\r\n const Tabs = function(children, { onchange, onload }) {\r\n let self = this\r\n\r\n // Event\r\n let change = self.onchange;\r\n self.onchange = null;\r\n\r\n // Add new tab\r\n let createButton;\r\n\r\n // Get the references from the root web component\r\n let root;\r\n let template = '';\r\n if (this.tagName) {\r\n root = this;\r\n } else {\r\n // References from LemonadeJS\r\n if (typeof(children) === 'string') {\r\n // Version 4\r\n template = children;\r\n } else if (children && children.length) {\r\n // Version 5\r\n root = children;\r\n }\r\n }\r\n\r\n if (root) {\r\n extract(root, self);\r\n }\r\n\r\n // Process the data\r\n if (self.data) {\r\n for (let i = 0; i < self.data.length; i++) {\r\n if (! self.data[i].el) {\r\n // Create element\r\n self.data[i].el = document.createElement('div');\r\n // Create from content\r\n if (self.data[i].content) {\r\n self.data[i].el.innerHTML = self.data[i].content;\r\n }\r\n }\r\n }\r\n }\r\n\r\n let props = ['title', 'selected', 'data-icon'];\r\n\r\n const select = function(index) {\r\n // Make sure the index is a number\r\n index = parseInt(index);\r\n // Do not select tabs that does not exist\r\n if (index >= 0 && index < self.data.length) {\r\n for (let i = 0; i < self.root.children.length; i++) {\r\n self.headers.children[i].classList.remove('selected');\r\n self.root.children[i].classList.remove('selected');\r\n }\r\n self.headers.children[index].classList.add('selected');\r\n self.root.children[index].classList.add('selected');\r\n }\r\n }\r\n\r\n const init = function(selected) {\r\n let tabs = [];\r\n\r\n for (let i = 0; i < self.data.length; i++) {\r\n // Extract meta information from the DOM\r\n if (props) {\r\n props.forEach((prop) => {\r\n let short = prop.replace('data-', '');\r\n if (! self.data[i][short]) {\r\n let ret = self.data[i].el.getAttribute(prop);\r\n if (ret != null) {\r\n self.data[i][short] = ret;\r\n }\r\n }\r\n });\r\n }\r\n // Create tabs object\r\n tabs[i] = {\r\n title: self.data[i].title,\r\n }\r\n // Which one is selected by default\r\n if (self.data[i].selected) {\r\n selected = i;\r\n }\r\n if (self.data[i].icon) {\r\n tabs[i].icon = self.data[i].icon;\r\n }\r\n\r\n self.root.appendChild(self.data[i].el);\r\n }\r\n\r\n // Create headers\r\n self.tabs = tabs;\r\n\r\n // Default selected\r\n if (typeof(selected) !== 'undefined') {\r\n self.selected = selected;\r\n }\r\n\r\n if (props) {\r\n // Add create new tab button\r\n if (createButton) {\r\n self.headers.appendChild(createButton);\r\n }\r\n // Add sorting\r\n sorting(self.el.firstChild.firstChild, {\r\n ondrop: (el, fromIndex, toIndex) => {\r\n // Remove the item from its original position\r\n const [movedItem] = self.data.splice(fromIndex, 1);\r\n // Insert it into the new position\r\n self.data.splice(toIndex, 0, movedItem);\r\n // Make sure correct order\r\n for (let i = 0; i < self.data.length; i++) {\r\n self.root.appendChild(self.data[i].el);\r\n }\r\n // Select new position\r\n self.selected = toIndex;\r\n // Dispatch event\r\n Dispatch.call(self, self.onchangeposition, 'changeposition', {\r\n instance: self,\r\n fromIndex: fromIndex,\r\n toIndex: toIndex,\r\n });\r\n }\r\n })\r\n }\r\n\r\n props = null;\r\n }\r\n\r\n const create = function() {\r\n // Create a new item\r\n self.create({ title: 'Untitled' }, null, true);\r\n }\r\n\r\n const open = function(e) {\r\n if (e.target.tagName === 'LI') {\r\n // Avoid select something already selected\r\n let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);\r\n if (index !== self.selected) {\r\n self.selected = index;\r\n }\r\n }\r\n }\r\n\r\n const keydown = function(e, s) {\r\n let index = null;\r\n if (e.key === 'Enter') {\r\n self.click(e, s);\r\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\r\n index = self.selected - 1;\r\n if (index < 0) {\r\n index = 0;\r\n }\r\n } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\r\n index = self.selected + 1;\r\n if (index > self.tabs.length-1) {\r\n index = self.tabs.length-1;\r\n }\r\n }\r\n\r\n // Make selection\r\n if (index !== null) {\r\n self.tabs[index].el.focus();\r\n }\r\n }\r\n\r\n onload(() => {\r\n if (template) {\r\n extract(self.root, self);\r\n }\r\n\r\n init(self.selected || 0);\r\n })\r\n\r\n onchange((property) => {\r\n if (property === 'selected') {\r\n select(self.selected);\r\n\r\n Dispatch.call(self, self.onopen, 'open', {\r\n instance: self,\r\n selected: self.selected,\r\n });\r\n\r\n Dispatch.call(self, change, 'change', {\r\n instance: self,\r\n value: self.selected,\r\n });\r\n }\r\n })\r\n\r\n self.open = function (index) {\r\n self.selected = index;\r\n }\r\n\r\n self.create = function(item, position, select) {\r\n // Create element\r\n if (typeof(item) !== 'object') {\r\n console.error('Item must be an object');\r\n } else {\r\n\r\n let ret = Dispatch.call(self, self.onbeforecreate, 'beforecreate', {\r\n instance: self,\r\n item: item,\r\n position: position,\r\n });\r\n\r\n if (ret === false) {\r\n return false;\r\n }\r\n\r\n // Create DOM\r\n item.el = document.createElement('div');\r\n // Create from content\r\n if (item.content) {\r\n item.el.innerHTML = item.content;\r\n }\r\n\r\n // Add the new item in the end\r\n if (typeof(position) === 'undefined' || position === null) {\r\n // Mew item\r\n position = self.data.length;\r\n // Add in the end\r\n self.data.push(item);\r\n } else {\r\n self.data.splice(position, 0, item);\r\n }\r\n // New position\r\n if (select) {\r\n // Refresh\r\n init(self.data.indexOf(item));\r\n } else {\r\n init(self.selected);\r\n }\r\n\r\n self.tabs.forEach(item => {\r\n item.el.setAttribute('draggable', 'true');\r\n })\r\n\r\n Dispatch.call(self, self.oncreate, 'create', {\r\n instance: self,\r\n item: item,\r\n position: position,\r\n });\r\n }\r\n }\r\n\r\n self.allowCreate = !! self.allowCreate;\r\n\r\n return render => render`
\r\n
\r\n
{{self.title}}
\r\n
add
\r\n
\r\n
${template}
\r\n
`\r\n }\r\n\r\n lemonade.setComponents({ Tabs: Tabs });\r\n\r\n lemonade.createWebComponent('tabs', Tabs);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n if (typeof(options) !== 'object') {\r\n options = {};\r\n }\r\n // Extract DOM references\r\n extract(root, options);\r\n // Create the modal\r\n lemonade.render(Tabs, root, options);\r\n // Return self\r\n return options;\r\n } else {\r\n return Tabs.call(this);\r\n }\r\n };\r\n})));\n\n/***/ }),\n\n/***/ 330:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nif (!lemonade && \"function\" === 'function') {\r\n var lemonade = __webpack_require__(966);\r\n}\r\n\r\nif (! Contextmenu && \"function\" === 'function') {\r\n var Contextmenu = __webpack_require__(238);\r\n}\r\n\r\n; (function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n const Topmenu = function(children, { onload, onchange }) {\r\n let self = this;\r\n\r\n // Current selection\r\n let currentIndex = null;\r\n\r\n const getElementPosition = function(child) {\r\n let root = self.el.children[0];\r\n for (let i = 0; i < root.children.length; i++) {\r\n let c = root.children[i];\r\n if (c === child) {\r\n return i;\r\n }\r\n }\r\n return -1;\r\n }\r\n\r\n const select = function(e, s) {\r\n if (! self.menu.isClosed()) {\r\n let index = self.options.indexOf(s);\r\n if (index !== currentIndex) {\r\n open(index);\r\n }\r\n }\r\n }\r\n\r\n const deselect = function() {\r\n if (self.options) {\r\n self.options.forEach(v => v.selected = false);\r\n }\r\n }\r\n\r\n const selectIndex = function(newIndex) {\r\n if (self.options) {\r\n let s = self.options[newIndex];\r\n if (s && ! s.disabled) {\r\n deselect();\r\n // Make it selected\r\n s.selected = true;\r\n // New index\r\n currentIndex = newIndex;\r\n // Focus\r\n s.el.focus();\r\n }\r\n }\r\n }\r\n\r\n const open = function(index) {\r\n // Update cursor position\r\n selectIndex(index);\r\n let s = self.options[currentIndex];\r\n if (s && s.submenu) {\r\n let x = s.el.offsetLeft;\r\n let y = s.el.offsetTop + s.el.offsetHeight + 2;\r\n self.menu.open(s.submenu, x, y);\r\n s.expanded = true;\r\n }\r\n }\r\n\r\n const close = function() {\r\n self.menu.close(0);\r\n let s = self.options[currentIndex];\r\n if (s) {\r\n s.el.focus();\r\n s.expanded = false;\r\n }\r\n }\r\n\r\n const toggle = function(e, s) {\r\n if (s.submenu && ! s.disabled) {\r\n let index = self.options.indexOf(s);\r\n if (index === currentIndex && ! self.menu.isClosed()) {\r\n close();\r\n } else {\r\n open(index);\r\n }\r\n cancel(e);\r\n }\r\n }\r\n\r\n const findNextEnabledIndex = function(startIndex) {\r\n if (!self.options || self.options.length === 0) {\r\n return null;\r\n }\r\n \r\n let index = startIndex;\r\n let attempts = 0;\r\n const maxAttempts = self.options.length;\r\n \r\n while (attempts < maxAttempts) {\r\n if (index >= self.options.length) {\r\n index = 0;\r\n }\r\n if (!self.options[index].disabled) {\r\n return index;\r\n }\r\n index++;\r\n attempts++;\r\n }\r\n return null;\r\n };\r\n\r\n const findPreviousEnabledIndex = function(startIndex) {\r\n if (!self.options || self.options.length === 0) {\r\n return null;\r\n }\r\n \r\n let index = startIndex;\r\n let attempts = 0;\r\n const maxAttempts = self.options.length;\r\n \r\n while (attempts < maxAttempts) {\r\n if (index < 0) {\r\n index = self.options.length - 1;\r\n }\r\n if (!self.options[index].disabled) {\r\n return index;\r\n }\r\n index--;\r\n attempts++;\r\n }\r\n return null;\r\n };\r\n\r\n const adjustOptionProperties = function() {\r\n if (self.options) {\r\n self.options.forEach(v => {\r\n v.haspopup = !!v.submenu;\r\n v.expanded = false;\r\n\r\n if (v.disabled) {\r\n v.el.removeAttribute('tabindex');\r\n } else {\r\n v.el.setAttribute('tabindex', '0');\r\n }\r\n })\r\n }\r\n };\r\n\r\n /**\r\n * Open a submenu programaticaly. Default 0\r\n * @param {number} index\r\n */\r\n self.open = function(index) {\r\n if (typeof index === 'undefined') {\r\n index = currentIndex;\r\n }\r\n if (! index) {\r\n index = 0;\r\n }\r\n\r\n let s = self.options[index];\r\n if (s) {\r\n open(index);\r\n }\r\n }\r\n\r\n onchange((prop) => {\r\n if (prop === 'options') {\r\n adjustOptionProperties();\r\n }\r\n });\r\n\r\n // Keyboard event\r\n onload(() => {\r\n self.el.addEventListener(\"focusin\", function(e) {\r\n let index = getElementPosition(e.target);\r\n if (index !== -1) {\r\n if (e.relatedTarget === self.menu.el) {\r\n close();\r\n } else {\r\n selectIndex(index);\r\n }\r\n }\r\n });\r\n\r\n self.el.addEventListener(\"focusout\", function(e) {\r\n if (! (e.relatedTarget && self.el.contains(e.relatedTarget))) {\r\n if (self.options[currentIndex]) {\r\n self.options[currentIndex].selected = false;\r\n }\r\n }\r\n });\r\n\r\n self.el.addEventListener(\"keydown\", function(e) {\r\n let o = self.options;\r\n // Select top menu\r\n let select = null;\r\n\r\n if (e.key === 'Enter') {\r\n toggle(e, o[currentIndex])\r\n } else if (e.key === 'ArrowLeft') {\r\n select = findPreviousEnabledIndex(currentIndex - 1);\r\n } else if (e.key === 'ArrowRight') {\r\n select = findNextEnabledIndex(currentIndex + 1);\r\n }\r\n\r\n if (select !== null) {\r\n if (self.menu.isClosed()) {\r\n selectIndex(select);\r\n } else {\r\n open(select);\r\n }\r\n }\r\n });\r\n\r\n adjustOptionProperties();\r\n });\r\n\r\n const cancel = function(e) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n\r\n return render => render`
\r\n
\r\n
{{self.title}}
\r\n
\r\n \r\n
`\r\n }\r\n\r\n lemonade.setComponents({ Topmenu: Topmenu });\r\n\r\n // Register the web component\r\n lemonade.createWebComponent('topmenu', Topmenu);\r\n\r\n return function (root, options) {\r\n if (typeof (root) === 'object') {\r\n lemonade.render(Topmenu, root, options)\r\n return options;\r\n } else {\r\n return Topmenu.call(this, root)\r\n }\r\n }\r\n})));\n\n/***/ }),\n\n/***/ 966:\n/***/ (function(module) {\n\n/**\r\n * LemonadeJS v5\r\n *\r\n * Website: https://lemonadejs.com\r\n * Description: Create amazing web based reusable components.\r\n *\r\n * This software is distributed under MIT License\r\n * @Roadmap\r\n * Accept interpolated values on properties `\r\n */\r\n\r\n;(function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n 'use strict';\r\n\r\n /**\r\n * Global control element\r\n */\r\n let R = {\r\n queue: [],\r\n container: {},\r\n tracking: new Map,\r\n components: {},\r\n version: 5,\r\n };\r\n\r\n // Global LemonadeJS controllers\r\n if (typeof(document) !== \"undefined\") {\r\n if (! document.lemonadejs) {\r\n document.lemonadejs = R;\r\n } else {\r\n R = document.lemonadejs;\r\n }\r\n }\r\n\r\n // Get any conflict of versions\r\n if (! R.version) {\r\n console.error('This project seems to be using version 4 and version 5 causing a conflict of versions.');\r\n }\r\n\r\n // Script expression inside LemonadeJS templates\r\n let isScript = /{{(.*?)}}/g;\r\n\r\n /**\r\n * Apply value in a object based on the address\r\n */\r\n const Path = function(str, val, remove) {\r\n str = str.split('.');\r\n if (str.length) {\r\n let o = this;\r\n let p = null;\r\n while (str.length > 1) {\r\n // Get the property\r\n p = str.shift();\r\n // Check if the property exists\r\n if (o.hasOwnProperty(p)) {\r\n o = o[p];\r\n } else {\r\n // Property does not exist\r\n if (typeof(val) === 'undefined') {\r\n return undefined;\r\n } else {\r\n // Create the property\r\n o[p] = {};\r\n // Next property\r\n o = o[p];\r\n }\r\n }\r\n }\r\n // Get the property\r\n p = str.shift();\r\n // Set or get the value\r\n if (typeof(val) !== 'undefined') {\r\n if (remove === true) {\r\n delete o[p];\r\n } else {\r\n o[p] = val;\r\n }\r\n // Success\r\n return true;\r\n } else {\r\n // Return the value\r\n if (o) {\r\n return o[p];\r\n }\r\n }\r\n }\r\n // Something went wrong\r\n return false;\r\n }\r\n\r\n /**\r\n * Show a better error developers\r\n */\r\n const createError = function() {\r\n throw new Error('LemonadeJS ' + Array.from(arguments).join(' '));\r\n }\r\n\r\n /**\r\n * Reference token is a string that define a token and not an expression\r\n * @param {string} token\r\n * @param {boolean?} topLevelOnly\r\n * @returns {boolean}\r\n */\r\n function isReferenceToken(token, topLevelOnly) {\r\n if (topLevelOnly) {\r\n return /^(this|self)(\\.\\w+)$/gm.test(token);\r\n } else {\r\n return /^(this|self)(\\.\\w+|\\[\\d+])*$/gm.test(token);\r\n }\r\n }\r\n\r\n /**\r\n * Extract all valid tokens from a string\r\n * @param {string} content\r\n * @returns {string[]}\r\n */\r\n function extractTokens(content) {\r\n // Input validation\r\n if (typeof content !== 'string') {\r\n throw new TypeError('Content must be a string');\r\n }\r\n // Single regex pattern to match both 'self.' and 'this.' prefixed identifiers Negative lookahead (?!\\.\\w) prevents matching nested properties\r\n //const pattern = /(?:self|this)\\.\\w+\\b(?!\\.\\w)/g;\r\n const pattern = /(?<=(?:this|self)\\.)[a-zA-Z_]\\w*/gm\r\n\r\n // If no matches found, return empty array early\r\n const matches = content.match(pattern);\r\n if (!matches) {\r\n return [];\r\n }\r\n // Create Set directly from matches array with map transform This is more efficient than adding items one by one\r\n return [...new Set(matches.map(match => match.slice(match.indexOf('.') + 1)))];\r\n }\r\n\r\n /**\r\n * Bind a property to one action and start tracking\r\n * @param {object} lemon\r\n * @param {string} prop\r\n */\r\n const trackProperty = function(lemon, prop) {\r\n // Lemon handler\r\n let s = lemon.self;\r\n if (typeof(s) === 'object') {\r\n // Change\r\n let change = lemon.change;\r\n // Events\r\n let events = lemon.events[prop];\r\n // Current value\r\n let value = s[prop];\r\n // Do not allow undefined\r\n if (typeof(value) === 'undefined') {\r\n value = '';\r\n }\r\n // Create the observer\r\n Object.defineProperty(s, prop, {\r\n set: function(v) {\r\n // Old value\r\n let oldValue = value;\r\n // New value\r\n value = v;\r\n // Dispatch reactions\r\n if (events) {\r\n events.forEach((action) => {\r\n action();\r\n });\r\n }\r\n // Refresh bound elements\r\n if (change && change.length) {\r\n change.forEach((action) => {\r\n if (typeof (action) === 'function') {\r\n action.call(s, prop, oldValue, v);\r\n }\r\n })\r\n }\r\n },\r\n get: function () {\r\n // Get value\r\n return value;\r\n },\r\n configurable: true,\r\n enumerable: true,\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Check if an element is appended to the DOM or a shadowRoot\r\n * @param {HTMLElement} node\r\n * @return {boolean}\r\n */\r\n const isAppended = function(node) {\r\n while (node) {\r\n if (node === document.body) {\r\n return true; // Node is in main document\r\n }\r\n\r\n if (node.parentNode === null) {\r\n if (node.host) {\r\n node = node.host; // Traverse up through ShadowRoot\r\n } else {\r\n return false; // Detached node\r\n }\r\n } else {\r\n node = node.parentNode; // Traverse up through parentNode\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n const elementNotReady = new Set;\r\n\r\n /**\r\n * Execute all pending events from onload\r\n * @param lemon\r\n */\r\n const executeOnload = function(lemon) {\r\n let s = lemon.self;\r\n // Ready event\r\n while (lemon.ready.length) {\r\n lemon.ready.shift()();\r\n }\r\n // Native onload\r\n if (typeof(s.onload) === 'function') {\r\n s.onload.call(s, s.el);\r\n }\r\n // Current self\r\n if (typeof(lemon.load) === 'function') {\r\n lemon.load.call(s, s.el);\r\n }\r\n }\r\n\r\n /**\r\n * Process the onload methods\r\n */\r\n const processOnload = function(lemon) {\r\n let root = lemon.tree.element;\r\n if (root.tagName === 'ROOT' && lemon.elements) {\r\n root = lemon.elements[0];\r\n }\r\n // Add to the queue\r\n elementNotReady.add(lemon);\r\n // Check if the element is appended to the DOM\r\n if (isAppended(root)) {\r\n elementNotReady.forEach((item) => {\r\n // Remove from the list\r\n elementNotReady.delete(item);\r\n // Run onload and ready events\r\n executeOnload(item);\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * Return the element based on the type\r\n * @param item\r\n * @returns {*}\r\n */\r\n const getElement = function(item) {\r\n return typeof(item.type) === 'function' ? item.self : item.element;\r\n }\r\n\r\n const HTMLParser = function(html, values) {\r\n /**\r\n * process the scape chars\r\n * @param char\r\n * @returns {*|string}\r\n */\r\n function escape(char) {\r\n const escapeMap = {\r\n 'n': String.fromCharCode(0x0A),\r\n 'r': String.fromCharCode(0x0D),\r\n 't': String.fromCharCode(0x09),\r\n 'b': String.fromCharCode(0x08),\r\n 'f': String.fromCharCode(0x0C),\r\n 'v': String.fromCharCode(0x0B),\r\n '0': String.fromCharCode(0x00)\r\n };\r\n\r\n return escapeMap[char] || char;\r\n }\r\n\r\n /**\r\n * Check if is a self-closing tag\r\n * @param {string|function} type - Tag name or component function\r\n * @returns {boolean}\r\n */\r\n function isSelfClosing(type) {\r\n if (! type) {\r\n return false;\r\n } else {\r\n // List of self-closing or void HTML elements\r\n const selfClosingTags = [\r\n 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr'\r\n ];\r\n // Convert tagName to lowercase to ensure case-insensitive comparison\r\n return typeof(type) === 'function' || selfClosingTags.includes(type.toLowerCase());\r\n }\r\n }\r\n\r\n /**\r\n * Create a text node and add it to current node's children\r\n * @param {Object} tag - Text node properties\r\n */\r\n const createTextNode = function(tag) {\r\n if (! this.current.children) {\r\n this.current.children = [];\r\n }\r\n\r\n this.current.children.push({\r\n type: '#text',\r\n parent: this.current,\r\n props: [tag],\r\n });\r\n }\r\n\r\n /**\r\n * Find the parent node by tag name\r\n * @param {Object} node - Current node\r\n * @param {string} type - Tag name to find\r\n * @returns {Object|undefined}\r\n */\r\n const findParentByTagName = function(node, type) {\r\n if (node && type) {\r\n if (node.type === type) {\r\n return node;\r\n } else {\r\n return findParentByTagName(node.parent, type);\r\n }\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n /**\r\n * Get expression value and update tag metadata\r\n * @param {Object} tag - Tag to update\r\n * @returns {*} Expression value\r\n */\r\n const getExpression = function(tag) {\r\n // Get value\r\n const v = values && values[this.index] !== undefined ? values[this.index] : '';\r\n if (tag) {\r\n // Keep the reference\r\n tag.expression = this.reference;\r\n // Keep the index\r\n tag.index = this.index;\r\n }\r\n // Move the value index\r\n this.index++;\r\n // Delete reference\r\n delete this.reference;\r\n // Return value\r\n return v;\r\n }\r\n\r\n /**\r\n * Handle the text node creation\r\n */\r\n const commitText = function() {\r\n if (typeof(this.text) !== 'undefined') {\r\n const text = this.text.replace(/\\r?\\n\\s+/g, '');\r\n if (text) {\r\n createTextNode.call(this, { name: 'textContent', value: text });\r\n }\r\n delete this.text;\r\n }\r\n }\r\n\r\n const commitComments = function() {\r\n if (typeof(this.comments) !== 'undefined') {\r\n let comments = this.comments;\r\n if (comments) {\r\n comments = comments\r\n .replace('', '')\r\n\r\n if (! this.current.children) {\r\n this.current.children = [];\r\n }\r\n\r\n this.current.children.push({\r\n type: '#comments',\r\n parent: this.current,\r\n props: [{ name: 'text', value: comments }],\r\n });\r\n }\r\n delete this.comments;\r\n }\r\n }\r\n\r\n /**\r\n * Save the attribute to the tag\r\n */\r\n const commitAttribute = function() {\r\n if (this.tag.attributeName) {\r\n // Commit any current attribute\r\n if (! this.tag.props) {\r\n this.tag.props = [];\r\n }\r\n\r\n let k = this.tag.attributeName;\r\n let v = this.tag.attributeValue;\r\n\r\n if (typeof(v) === 'undefined') {\r\n v = k;\r\n }\r\n\r\n let tag = {\r\n name: k,\r\n value: v,\r\n };\r\n\r\n if (typeof(this.tag.expression) !== 'undefined') {\r\n tag.index = this.tag.index;\r\n tag.expression = this.tag.expression;\r\n }\r\n\r\n this.tag.props.push(tag);\r\n\r\n // Clean up temporary properties\r\n delete this.tag.attributeName;\r\n delete this.tag.attributeValue;\r\n delete this.tag.index;\r\n delete this.tag.expression;\r\n\r\n if (this.tag.attributeIsReadyToClose) {\r\n delete this.tag.attributeIsReadyToClose;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Actions controller\r\n * @param {Object} control - Parser control object\r\n * @param {string} char - Current character\r\n */\r\n const actions = function(control, char) {\r\n const method = control.action || 'text';\r\n if (typeof actions[method] === 'function') {\r\n actions[method].call(control, char);\r\n }\r\n }\r\n\r\n /**\r\n * Extract content between expression markers, handling quoted content\r\n * @param {string} html - Full HTML string\r\n * @param {number} startIndex - Starting index (position after ${})\r\n * @returns {Object} Expression content and ending position\r\n */\r\n function extractExpressionContent(html, startIndex) {\r\n let text = '';\r\n let i = startIndex;\r\n let insideQuotes = null;\r\n\r\n while (i < html.length) {\r\n const char = html[i];\r\n\r\n // Handle quotes\r\n if ((char === '\"' || char === \"'\" || char === '`')) {\r\n if (!insideQuotes) {\r\n insideQuotes = char;\r\n } else if (char === insideQuotes) {\r\n insideQuotes = null;\r\n }\r\n }\r\n\r\n // Found closing brace outside quotes\r\n if (char === '}' && !insideQuotes) {\r\n return {\r\n content: text,\r\n position: i\r\n };\r\n }\r\n\r\n text += char;\r\n i++;\r\n }\r\n\r\n return {\r\n content: text,\r\n position: i\r\n };\r\n }\r\n\r\n /**\r\n * Process a new tag\r\n * @param char\r\n */\r\n actions.processTag = function(char) {\r\n // Just to check if there are any text to commit\r\n commitText.call(this);\r\n\r\n // Process the tag\r\n if (char === '<') {\r\n // Create new tag\r\n this.tag = {\r\n type: '',\r\n parent: this.current\r\n };\r\n } else if (char.match(/[a-zA-Z0-9-]/)) {\r\n // Tag name\r\n this.tag.type += char;\r\n } else {\r\n if (char === '$' && this.reference) {\r\n // Custom tags\r\n this.tag.type = getExpression.call(this);\r\n }\r\n // Finished with tag name, move to attribute handling\r\n this.action = 'attributeName';\r\n }\r\n }\r\n\r\n /**\r\n * Handle tag closing\r\n * @param char\r\n */\r\n actions.closeTag = function(char) {\r\n // Make sure to commit attribute\r\n commitAttribute.call(this);\r\n // Close the tag\r\n if (char === '>') {\r\n // Get the new parent\r\n if (isSelfClosing(this.tag.type)) {\r\n // Push new tag to the parent\r\n if (! this.tag.parent.children) {\r\n this.tag.parent.children = [];\r\n }\r\n this.tag.parent.children.push(this.tag);\r\n } else if (this.tag.closingTag) {\r\n // Need to find the parent on the chain\r\n const parentNode = findParentByTagName(this.tag.parent, this.tag.type);\r\n if (parentNode) {\r\n this.current = parentNode.parent;\r\n }\r\n } else {\r\n if (this.tag.closing) {\r\n // Current is the parent\r\n this.current = this.tag.parent;\r\n } else {\r\n this.current = this.tag;\r\n }\r\n\r\n // Push new tag to the parent\r\n if (! this.tag.parent.children) {\r\n this.tag.parent.children = [];\r\n }\r\n this.tag.parent.children.push(this.tag);\r\n }\r\n\r\n // Remote temporary properties\r\n delete this.tag.insideQuote;\r\n delete this.tag.closingTag;\r\n delete this.tag.closing;\r\n // Finalize tag\r\n this.tag = null;\r\n // New action\r\n this.action = 'text';\r\n } else if (! this.tag.locked) {\r\n if (char === '/') {\r\n if (! this.tag.type) {\r\n // This is a closing tag\r\n this.tag.closingTag = true;\r\n }\r\n // Closing character is found\r\n this.tag.closing = true;\r\n } else if (char.match(/[a-zA-Z0-9-]/)) {\r\n // If is a closing tag, get the tag name\r\n if (this.tag.closingTag) {\r\n this.tag.type += char;\r\n }\r\n } else {\r\n // Wait to the closing sign\r\n if (this.tag.type) {\r\n this.locked = true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n actions.attributeName = function(char) {\r\n // There is another attribute to commit\r\n if (this.tag.attributeIsReadyToClose) {\r\n commitAttribute.call(this);\r\n }\r\n\r\n // Build attribute name\r\n if (char.match(/[a-zA-Z0-9-:]/)) {\r\n if (! this.tag.attributeName) {\r\n this.tag.attributeName = '';\r\n }\r\n this.tag.attributeName += char;\r\n } else if (char === '=') {\r\n // Move to attribute value\r\n if (this.tag.attributeName) {\r\n this.action = 'attributeValue';\r\n delete this.tag.attributeIsReadyToClose;\r\n }\r\n } else if (char.match(/\\s/)) {\r\n if (this.tag.attributeName) {\r\n this.tag.attributeIsReadyToClose = true;\r\n }\r\n }\r\n };\r\n\r\n actions.attributeValue = function(char) {\r\n if (! this.tag.attributeValue) {\r\n this.tag.attributeValue = '';\r\n }\r\n\r\n if (char === '\"' || char === \"'\") {\r\n if (this.tag.insideQuote) {\r\n if (this.tag.insideQuote === char) {\r\n this.tag.insideQuote = false;\r\n } else {\r\n this.tag.attributeValue += char;\r\n }\r\n } else {\r\n this.tag.insideQuote = char;\r\n }\r\n } else {\r\n if (char === '$' && this.reference) {\r\n // Custom tags\r\n char = getExpression.call(this, this.tag);\r\n }\r\n // Inside quotes, keep appending to the attribute value\r\n if (this.tag.insideQuote) {\r\n if (this.tag.attributeValue) {\r\n this.tag.attributeValue += char;\r\n } else {\r\n this.tag.attributeValue = char;\r\n }\r\n } else if (typeof(char) === 'string' && char.match(/\\s/)) {\r\n if (this.tag.attributeValue) {\r\n this.action = 'attributeName';\r\n }\r\n this.tag.attributeIsReadyToClose = true;\r\n } else {\r\n if (this.tag.attributeIsReadyToClose) {\r\n this.action = 'attributeName';\r\n actions.attributeName.call(this, char);\r\n } else {\r\n if (this.tag.attributeValue) {\r\n this.tag.attributeValue += char;\r\n } else {\r\n this.tag.attributeValue = char;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n actions.text = function(char) {\r\n if (char === '$' && this.reference) {\r\n // Just to check if there are any text to commit\r\n commitText.call(this);\r\n // Custom tags\r\n let tag = { name: 'textContent' }\r\n tag.value = getExpression.call(this, tag);\r\n // Add node tag\r\n createTextNode.call(this, tag);\r\n } else {\r\n if (referenceControl === 1) {\r\n // Just to check if there are any text to commit\r\n commitText.call(this);\r\n }\r\n\r\n // Normal text processing\r\n if (! this.text) {\r\n this.text = '';\r\n }\r\n this.text += char; // Keep appending to text content\r\n\r\n if (referenceControl === 2) {\r\n // Just to check if there are any text to commit\r\n commitText.call(this);\r\n }\r\n }\r\n }\r\n\r\n actions.comments = function(char) {\r\n if (! this.comments) {\r\n this.comments = '';\r\n }\r\n this.comments += char;\r\n\r\n if (this.comments.endsWith('-->')) {\r\n commitComments.call(this);\r\n this.action = 'text';\r\n }\r\n }\r\n\r\n // Control the LemonadeJS native references\r\n let referenceControl = null;\r\n\r\n const result = { type: 'template' };\r\n const control = {\r\n current: result,\r\n action: 'text',\r\n index: 0,\r\n };\r\n\r\n // Input validation\r\n if (typeof html !== 'string') {\r\n throw new TypeError('HTML input must be a string');\r\n }\r\n\r\n // Main loop to process the HTML string\r\n for (let i = 0; i < html.length; i++) {\r\n // Current char\r\n let char = html[i];\r\n\r\n if (control.action === 'text' && char === '<' && html[i+1] === '!' && html[i+2] === '-' && html[i+3] === '-') {\r\n control.action = 'comments';\r\n }\r\n\r\n if (control.action !== 'comments') {\r\n let escaped = false;\r\n\r\n if (values !== null) {\r\n // Handle scape\r\n if (char === '\\\\') {\r\n // This is a escaped char\r\n escaped = true;\r\n // Parse escape char\r\n char = escape(html[i+1]);\r\n // Move to the next char\r\n i++;\r\n }\r\n }\r\n\r\n // Global control logic\r\n if (control.tag) {\r\n if (char === '>' || char === '/') {\r\n // End of tag, commit any attributes and go back to text parsing\r\n if (!control.tag.insideQuote) {\r\n control.action = 'closeTag';\r\n }\r\n }\r\n } else {\r\n if (char === '<') {\r\n control.action = 'processTag';\r\n }\r\n }\r\n\r\n // Register references for a dynamic template\r\n if (!escaped && char === '$' && html[i + 1] === '{') {\r\n const result = extractExpressionContent(html, i + 2);\r\n control.reference = result.content;\r\n i = result.position;\r\n }\r\n\r\n // Control node references\r\n if (char === '{' && html[i + 1] === '{') {\r\n referenceControl = 1;\r\n } else if (char === '}' && html[i - 1] === '}') {\r\n referenceControl = 2;\r\n }\r\n }\r\n\r\n // Execute action\r\n actions(control, char);\r\n\r\n // Reference control\r\n referenceControl = null;\r\n }\r\n\r\n // Handle any remaining text\r\n commitText.call(control);\r\n\r\n return result.children && result.children[0];\r\n }\r\n\r\n const generateHTML = function(lemon) {\r\n\r\n const appendEvent = function(token, event, exec) {\r\n if (! lemon.events[token]) {\r\n lemon.events[token] = []\r\n }\r\n // Push the event\r\n lemon.events[token].push(event);\r\n // Execute\r\n if (exec) {\r\n event();\r\n }\r\n }\r\n\r\n const createEventsFromExpression = function(expression, event, exec) {\r\n // Get the tokens should be updated to populate this attribute\r\n let tokens = extractTokens(expression);\r\n if (tokens.length) {\r\n // Process all the tokens\r\n for (let i = 0; i < tokens.length; i++) {\r\n appendEvent(tokens[i], event);\r\n }\r\n }\r\n // Execute method\r\n if (exec) {\r\n event();\r\n }\r\n }\r\n\r\n const setDynamicValue = function(item, prop, attributeName) {\r\n // Create a reference to the DOM element\r\n let property = prop.expression || prop.value;\r\n\r\n if (isReferenceToken(property)) {\r\n // Event\r\n let event = function() {\r\n // Reference\r\n let value = extractFromPath.call(lemon.self, property);\r\n // Update reference\r\n setAttribute(getElement(item), attributeName, value);\r\n }\r\n // Append event only for the top level properties in the self\r\n if (isReferenceToken(property, true)) {\r\n let p = extractFromPath.call(lemon.self, property, true);\r\n if (p) {\r\n // Append event to the token change\r\n let token = p[1]\r\n // Append event\r\n appendEvent(token, event);\r\n }\r\n }\r\n // Execute the event in the first time\r\n event();\r\n } else {\r\n setAttribute(getElement(item), attributeName, castProperty(prop.value));\r\n }\r\n }\r\n\r\n const dynamicContent = function(text) {\r\n try {\r\n // Cast value\r\n let cast = null;\r\n // Replace the text\r\n text = text.replace(isScript, function (a, b) {\r\n let s = lemon.self;\r\n // Try to find the property\r\n let result = extractFromPath.call(s, b);\r\n // Evaluation for legacy purposes\r\n if (typeof(result) === 'undefined') {\r\n // This is deprecated and will be dropped on LemonadeJS 6\r\n result = run.call(s, b);\r\n if (typeof (result) === 'undefined') {\r\n result = '';\r\n }\r\n } else if (result === null) {\r\n result = '';\r\n }\r\n // Parse correct type\r\n if (typeof(result) !== 'string' && a === text) {\r\n cast = result;\r\n }\r\n // Return\r\n return result;\r\n });\r\n\r\n if (cast !== null) {\r\n return cast;\r\n }\r\n\r\n return text;\r\n } catch (e) {\r\n }\r\n }\r\n\r\n const isHTML = function(str) {\r\n return /<[^>]*>/.test(str);\r\n }\r\n\r\n const appendHTMLBeforeNode = function(item, value) {\r\n // Remove previous elements\r\n if (item.current) {\r\n item.current.forEach(e => e?.remove());\r\n }\r\n item.current = [];\r\n // Node container\r\n let node = getElement(item);\r\n // Append content\r\n if (! isHTML(value)) {\r\n node.textContent = value;\r\n } else {\r\n // TODO: improve that\r\n queueMicrotask(() => {\r\n // Create a temporary container\r\n const t = document.createElement('div');\r\n t.innerHTML = value;\r\n // Insert elements and store references\r\n while (t.firstChild) {\r\n item.current.push(t.firstChild);\r\n node.parentNode.insertBefore(t.firstChild, node);\r\n }\r\n });\r\n }\r\n }\r\n\r\n const applyElementAttribute = function(item, prop) {\r\n if (typeof(prop.expression) !== 'undefined') {\r\n // Event to update the designed position\r\n let event = function() {\r\n // Extra value from the template\r\n let value = lemon.view(parseTemplate)[prop.index];\r\n // Process the NODE\r\n if (item.type === '#text') {\r\n appendHTMLBeforeNode(item, value);\r\n } else {\r\n // Set attribute\r\n setAttribute(getElement(item), prop.name, value);\r\n }\r\n }\r\n // Bind event to any tokens change\r\n createEventsFromExpression(prop.expression, event, true);\r\n // Register event for state changes\r\n lemon.events[prop.index] = event;\r\n } else {\r\n // Get the tokens should be updated to populate this attribute\r\n let tokens = extractTokens(prop.value);\r\n if (tokens.length) {\r\n // Dynamic\r\n createEventsFromExpression(prop.value, function() {\r\n // Dynamic text\r\n let value = dynamicContent(prop.value);\r\n // Get the dynamic value\r\n setAttribute(getElement(item), prop.name, value);\r\n }, true)\r\n } else {\r\n let value = prop.value;\r\n if (value.match(isScript)) {\r\n value = dynamicContent(value);\r\n }\r\n\r\n setAttribute(getElement(item), prop.name, value, true);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Create a LemonadeJS self bind\r\n * @param item\r\n * @param prop\r\n */\r\n const applyBindHandler = function(item, prop) {\r\n // Create a reference to the DOM element\r\n let property = prop.expression || prop.value;\r\n\r\n if (isReferenceToken(property, true)) {\r\n let prop = property.split('.')[1];\r\n\r\n // Event from component to the property\r\n let event = function () {\r\n let value = getAttribute(getElement(item), 'value');\r\n if (lemon.self[prop] !== value) {\r\n lemon.self[prop] = value;\r\n }\r\n }\r\n\r\n if (typeof (item.type) === 'function') {\r\n item.bind = event;\r\n } else {\r\n item.element.addEventListener('input', event);\r\n }\r\n\r\n // Event property to the element\r\n event = () => {\r\n setAttribute(getElement(item), 'value', lemon.self[prop]);\r\n }\r\n // Append event\r\n appendEvent(prop, event, true);\r\n } else if (prop.value instanceof state) {\r\n // TODO: implement :bind states\r\n }\r\n }\r\n\r\n /**\r\n * Create a LemonadeJS self render\r\n * @param item\r\n * @param prop\r\n */\r\n const applyRenderHandler = function(item, prop) {\r\n // Create a reference to the DOM element\r\n let property = prop.expression || prop.value;\r\n let getValue = null;\r\n let token = null;\r\n\r\n if (isReferenceToken(property, true)) {\r\n token = property.split('.')[1];\r\n // Get value\r\n getValue = () => {\r\n return lemon.self[token];\r\n }\r\n } else {\r\n if (typeof(prop.expression) !== 'undefined') {\r\n getValue = () => {\r\n // Extra value from the template\r\n let data = lemon.view(parseTemplate)[prop.index];\r\n if (data instanceof state) {\r\n data = data.value;\r\n }\r\n return data;\r\n }\r\n }\r\n }\r\n\r\n if (getValue) {\r\n // Create container to keep the elements\r\n item.container = [];\r\n\r\n // Event property to the element\r\n let event = () => {\r\n // Root element\r\n let root = typeof(item.type) === 'function' ? item.self.el : item.element;\r\n // Curren value\r\n let value = getValue();\r\n if (value) {\r\n item.container.forEach(e => {\r\n root.appendChild(e);\r\n });\r\n } else {\r\n while (root.firstChild) {\r\n item.container.push(root.firstChild);\r\n root.firstChild.remove();\r\n }\r\n }\r\n }\r\n\r\n if (token) {\r\n // Append event\r\n appendEvent(token, event);\r\n } else {\r\n if (typeof(prop.expression) !== 'undefined') {\r\n lemon.events[prop.index] = event;\r\n createEventsFromExpression(prop.expression, event);\r\n }\r\n }\r\n\r\n // Execute event\r\n let root = typeof(item.type) === 'function' ? item.self.el : item.element;\r\n if (root) {\r\n event();\r\n } else {\r\n lemon.ready.push(event);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Create a dynamic reference\r\n * @param item\r\n * @param prop\r\n */\r\n const createReference = function(item, prop) {\r\n let ref = getElement(item);\r\n if (typeof(prop.value) === 'function') {\r\n prop.value(ref);\r\n } else {\r\n // Create a reference to the DOM element\r\n let property = prop.expression || prop.value;\r\n // Reference\r\n if (isReferenceToken(property)) {\r\n let p = extractFromPath.call(lemon.self, property, true);\r\n if (p) {\r\n lemon.self[p[1]] = ref;\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Process the :ready. Call when DOM is ready\r\n * @param item\r\n * @param prop\r\n */\r\n const whenIsReady = function(item, prop) {\r\n let value = prop.value;\r\n // If not a method, should be converted to a method\r\n if (typeof(value) !== 'function') {\r\n let t = extractFromPath.call(lemon.self, value);\r\n if (t) {\r\n value = t;\r\n }\r\n }\r\n // Must be a function\r\n if (typeof(value) === 'function') {\r\n lemon.ready.push(function() {\r\n value(getElement(item), lemon.self);\r\n });\r\n } else {\r\n createError(`:ready ${value} is not a function`)\r\n }\r\n }\r\n\r\n const getRoot = function(item) {\r\n if (typeof(item.type) === 'function') {\r\n if (item.parent.type === 'template') {\r\n return lemon.root;\r\n } else {\r\n return item.parent.element;\r\n }\r\n }\r\n\r\n return item.element;\r\n }\r\n\r\n const registerLoop = function(item, prop) {\r\n // Create a reference to the DOM element\r\n let property = prop.expression || prop.value;\r\n\r\n // Append the template back to the correct position\r\n if (lemon.self.settings?.loop) {\r\n lemon.self.settings.loop(item)\r\n }\r\n\r\n // Event\r\n let updateLoop = function(data) {\r\n // Component\r\n let method = typeof(item.type) === 'function' ? item.type : Basic;\r\n // Remove all DOM\r\n let root = getRoot(item);\r\n if (root) {\r\n while (root.firstChild) {\r\n root.firstChild.remove();\r\n }\r\n }\r\n // Process the data\r\n if (data && Array.isArray(data)) {\r\n // Process data\r\n data.forEach(function(self) {\r\n let el = self.el;\r\n if (el) {\r\n root.appendChild(el);\r\n } else {\r\n // Register parent\r\n register(self, 'parent', lemon.self);\r\n // Pass parent view for expressions in loop templates\r\n item.parentView = lemon.view;\r\n // Render\r\n L.render(method, root, self, item);\r\n }\r\n\r\n if (root?.getAttribute('unique') === 'false') {\r\n delete self.el;\r\n }\r\n })\r\n }\r\n }\r\n\r\n // Event\r\n let event;\r\n\r\n // Type of property\r\n if (isReferenceToken(property)) {\r\n // Event\r\n event = function() {\r\n // Reference\r\n let data = extractFromPath.call(lemon.self, property);\r\n // Update reference\r\n updateLoop(data);\r\n }\r\n\r\n // Append event only for the top level properties in the self\r\n if (isReferenceToken(property, true)) {\r\n let p = extractFromPath.call(lemon.self, property, true);\r\n if (p) {\r\n // Append event to the token change\r\n appendEvent(p[1], event);\r\n }\r\n }\r\n } else {\r\n if (typeof(prop.expression) !== 'undefined') {\r\n event = function() {\r\n // Extra value from the template\r\n let data = lemon.view(parseTemplate)[prop.index];\r\n if (data instanceof state) {\r\n data = data.value;\r\n }\r\n // Update the data\r\n updateLoop(data);\r\n }\r\n // Register event for state changes\r\n lemon.events[prop.index] = event;\r\n }\r\n }\r\n\r\n // Defer event since the dom is not ready\r\n if (event) {\r\n if (getRoot(item)) {\r\n event();\r\n } else {\r\n lemon.ready.push(event);\r\n }\r\n }\r\n }\r\n\r\n const isLoopAttribute = function(props) {\r\n let test = false;\r\n props.forEach(function(prop) {\r\n if (prop.name === ':loop' || prop.name === 'lm-loop' || prop.name === '@loop') {\r\n test = true;\r\n }\r\n });\r\n return test;\r\n }\r\n\r\n const registerPath = function(item, prop) {\r\n if (! lemon.path.elements) {\r\n lemon.path.elements = [];\r\n }\r\n\r\n let element = getElement(item);\r\n\r\n lemon.path.elements.push({\r\n element: element,\r\n path: prop.value\r\n });\r\n\r\n // Event from component to the property\r\n let event = function () {\r\n // Get the current value of my HTML form element or component\r\n let value = getAttribute(element, 'value');\r\n // Apply the new value on the path on the object\r\n if (lemon.path.value) {\r\n Path.call(lemon.path.value, prop.value, value);\r\n // Call the callback when exist\r\n if (typeof(lemon.path.change) === 'function') {\r\n lemon.path.change(value, prop.value, element);\r\n }\r\n } else {\r\n console.log('Use setPath to define the form container before using lm-path');\r\n }\r\n }\r\n\r\n if (typeof(item.type) === 'function') {\r\n item.path = event;\r\n } else {\r\n item.element.addEventListener('input', event);\r\n }\r\n }\r\n\r\n const appendChildren = function(container, children) {\r\n if (container && children) {\r\n for (let i = 0; i < children.length; i++) {\r\n let child = children[i];\r\n if (typeof(child) === 'string') {\r\n container.appendChild(document.createTextNode(child));\r\n } else if (child.element) {\r\n if (child.element.tagName === 'ROOT') {\r\n while (child.element.firstChild) {\r\n container.appendChild(child.element.firstChild);\r\n }\r\n } else {\r\n container.appendChild(child.element);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n const getAttributeName = function(prop) {\r\n return prop[0] === ':' || prop[0] === '@' ? prop.substring(1) : prop.substring(3);\r\n }\r\n\r\n const getAttributeEvent = function(event) {\r\n event = event.toLowerCase();\r\n if (event.startsWith('on')) {\r\n return event.toLowerCase();\r\n } else if (event.startsWith(':on')) {\r\n return getAttributeName(event);\r\n }\r\n }\r\n\r\n /**\r\n * CHeck if the event name is a valid DOM event name\r\n * @param element\r\n * @param eventName\r\n * @returns {boolean}\r\n */\r\n const isValidEventName = function(element, eventName) {\r\n const validEventPattern = /^on[a-z]+$/;\r\n return validEventPattern.test(eventName);\r\n }\r\n\r\n /**\r\n * Create element from the string tagname\r\n * @param tagName\r\n * @returns {*}\r\n */\r\n const createElementFromString = function(tagName) {\r\n // List of SVG tags (you can expand this list if needed)\r\n const svgTags = [\r\n \"svg\", \"path\", \"circle\", \"rect\", \"line\", \"polygon\", \"polyline\", \"text\"\r\n ];\r\n\r\n if (svgTags.includes(tagName)) {\r\n // For SVG elements, use createElementNS with the correct namespace\r\n return document.createElementNS(\"http://www.w3.org/2000/svg\", tagName);\r\n } else {\r\n // For regular HTML elements, use createElement\r\n return document.createElement(tagName);\r\n }\r\n }\r\n\r\n const reorderProps = function(arr) {\r\n // Define the desired order of names\r\n const orderPriority = ['ref', 'bind', 'loop', 'ready'];\r\n\r\n // Separate items into prioritized and non-prioritized\r\n const prioritized = [];\r\n const others = [];\r\n\r\n // Sort items into respective arrays\r\n arr.forEach(item => {\r\n if (orderPriority.includes(item.name.substring(1)) || orderPriority.includes(item.name.substring(3))) {\r\n prioritized.push(item);\r\n } else {\r\n others.push(item);\r\n }\r\n });\r\n\r\n // Return combined array with prioritized items at the end\r\n return [...others, ...prioritized];\r\n }\r\n\r\n\r\n const createElements = function(item) {\r\n if (typeof(item) === 'object') {\r\n // Create an element\r\n if (item.type === '#comments') {\r\n item.element = document.createComment(item.props[0].value);\r\n } else if (item.type === '#text') {\r\n // Text node\r\n item.element = document.createTextNode('');\r\n // Check for dynamic content\r\n applyElementAttribute(item, item.props[0]);\r\n } else {\r\n // Apply attributes if they exist\r\n if (item.props && ! Array.isArray(item.props)) {\r\n let props = [];\r\n let keys = Object.keys(item.props);\r\n for (let i = 0; i < keys.length; i++) {\r\n props.push({ name: keys[i], value: item.props[keys[i]] });\r\n }\r\n item.props = props;\r\n } else if (! item.props) {\r\n item.props = [];\r\n }\r\n\r\n // This item is a parent for a loop\r\n if (isLoopAttribute(item.props)) {\r\n // Mark this item as a loop\r\n item.loop = true;\r\n }\r\n\r\n if (! item.type) {\r\n item.type = 'root';\r\n }\r\n\r\n if (typeof(item.type) === 'string') {\r\n if (item.type.match(/^[A-Z][a-zA-Z0-9\\-]*$/g)) {\r\n let controller = item.type.toUpperCase();\r\n if (typeof(R.components[controller]) === 'function') {\r\n item.type = R.components[controller];\r\n } else if (typeof (lemon.components[controller]) === 'function') {\r\n item.type = lemon.components[controller];\r\n } else {\r\n }\r\n }\r\n }\r\n\r\n if (typeof(item.type) === 'string') {\r\n item.element = createElementFromString(item.type);\r\n } else if (typeof(item.type) === 'function') {\r\n // Create instance without calling constructor\r\n if (isClass(item.type)) {\r\n item.self = new item.type;\r\n } else {\r\n item.self = {};\r\n }\r\n }\r\n\r\n // Create all children\r\n if (! item.loop) {\r\n if (item.children && Array.isArray(item.children)) {\r\n item.children.forEach(child => {\r\n createElements(child);\r\n });\r\n }\r\n if (item.element) {\r\n appendChildren(item.element, item.children);\r\n }\r\n }\r\n\r\n // Process attributes\r\n if (item.props.length) {\r\n // Reorder props\r\n item.props = reorderProps(item.props);\r\n // Order by priority\r\n item.props.forEach(function(prop) {\r\n try {\r\n // If the property is an event\r\n let event = getAttributeEvent(prop.name);\r\n // When event for a DOM\r\n if (event) {\r\n // Element\r\n let element = item.element;\r\n // Value\r\n let value = prop.value;\r\n if (value) {\r\n let handler = null; // Reset handler for each iteration\r\n if (typeof (value) === 'function') {\r\n handler = value;\r\n } else {\r\n let t = extractFromPath.call(lemon.self, value);\r\n if (t) {\r\n if (typeof (t) === 'function') {\r\n prop.value = handler = t;\r\n }\r\n }\r\n }\r\n // When the element is a DOM\r\n if (isDOM(element)) {\r\n // Create the event handler\r\n let eventHandler;\r\n // Bind event\r\n if (typeof(handler) === 'function') {\r\n eventHandler = function(e, a, b) {\r\n return handler.call(element, e, lemon.self, a, b);\r\n }\r\n } else {\r\n // Legacy compatibility. Inline scripting is non-Compliance with Content Security Policy (CSP).\r\n eventHandler = function (e) {\r\n return Function('e', 'self', value).call(element, e, lemon.self); // TODO, quebra tudo se mudar\r\n }\r\n }\r\n\r\n if (isValidEventName(element, prop.name)) {\r\n element.addEventListener(event.substring(2), eventHandler);\r\n } else {\r\n if (element.tagName?.includes('-')) {\r\n element[event] = handler;\r\n } else {\r\n element[event] = eventHandler;\r\n }\r\n }\r\n } else {\r\n item.self[event] = handler || value;\r\n }\r\n }\r\n } else if (prop.name.startsWith(':') || prop.name.startsWith('@') || prop.name.startsWith('lm-')) {\r\n // Special lemonade attribute name\r\n let attrName = getAttributeName(prop.name);\r\n // Special properties bound to the self\r\n if (attrName === 'ready') {\r\n whenIsReady(item, prop);\r\n } else if (attrName === 'ref') {\r\n createReference(item, prop);\r\n } else if (attrName === 'loop') {\r\n registerLoop(item, prop);\r\n } else if (attrName === 'bind') {\r\n applyBindHandler(item, prop);\r\n } else if (attrName === 'path') {\r\n registerPath(item, prop);\r\n } else if (attrName === 'render') {\r\n applyRenderHandler(item, prop);\r\n } else {\r\n setDynamicValue(item, prop, attrName);\r\n }\r\n } else {\r\n applyElementAttribute(item, prop);\r\n }\r\n } catch (e) {\r\n let propValue = prop.expression || prop.value;\r\n console.error(`${prop.name}=\"${propValue}\" - ${e.message}`, item);\r\n }\r\n })\r\n }\r\n\r\n // Do not create elements at this state if this is a loop\r\n if (! item.loop) {\r\n if (typeof(item.type) === 'function') {\r\n // Execute component\r\n item.element = L.render(item.type, null, item.self, item);\r\n\r\n // Create all children\r\n if (item.children) {\r\n let root = item.element;\r\n if (typeof(item.self?.settings?.getRoot) === 'function') {\r\n root = item.self.settings.getRoot();\r\n }\r\n appendChildren(root, item.children);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Create DOM elements\r\n createElements(lemon.tree);\r\n\r\n return lemon.tree.element;\r\n }\r\n\r\n /**\r\n * Extract a property from a nested object using a string address\r\n * @param {string} str address inside the nested object\r\n * @param {boolean} config get the configuration obj => property\r\n */\r\n const extractFromPath = function(str, config) {\r\n try {\r\n let t = str.toString().replace(/[\\[\\]]/g, '.').split('.');\r\n if (t[0] === 'self' || t[0] === 'this') {\r\n t.shift();\r\n }\r\n // Remove blanks\r\n t = t.filter(item => item !== '');\r\n // Object\r\n let o = this;\r\n let lastObject;\r\n while (t.length) {\r\n // Get the property\r\n let p = t.shift();\r\n // Process config\r\n if (config) {\r\n if (typeof(o) === 'object' && ! Array.isArray(o)) {\r\n lastObject = [o,p];\r\n }\r\n if (t.length === 0) {\r\n return lastObject;\r\n }\r\n }\r\n // Check if the property exists\r\n if (o.hasOwnProperty(p) || typeof(o[p]) !== 'undefined') {\r\n o = o[p];\r\n } else {\r\n return undefined;\r\n }\r\n }\r\n\r\n if (typeof(o) !== 'undefined') {\r\n return o;\r\n }\r\n } catch (e) {}\r\n\r\n // Something went wrong\r\n return undefined;\r\n }\r\n\r\n /**\r\n * Cast the value of an attribute\r\n */\r\n const castProperty = function(attr) {\r\n // Parse type\r\n try {\r\n if (typeof(attr) === 'string' && attr) {\r\n // Remove any white spaces\r\n attr = attr.trim();\r\n if (attr === 'true') {\r\n return true;\r\n } else if (attr === 'false') {\r\n return false;\r\n } else if (! isNaN(attr)) {\r\n return Number(attr);\r\n } else {\r\n let firstChar = attr[0];\r\n if (firstChar === '{' || firstChar === '[') {\r\n if (attr.slice(-1) === '}' || attr.slice(-1) === ']') {\r\n return JSON.parse(attr);\r\n }\r\n } else if (attr.startsWith('self.') || attr.startsWith('this.')) {\r\n let v = extractFromPath.call(this, attr);\r\n if (typeof(v) !== 'undefined') {\r\n return v;\r\n }\r\n }\r\n }\r\n }\r\n } catch (e) {}\r\n\r\n return attr;\r\n }\r\n\r\n /**\r\n * This allows to run inline script on LEGACY system. Inline script can lead to security issues so use carefully.\r\n * @param {string} s string to function\r\n */\r\n const run = function(s) {\r\n return Function('self', '\"use strict\";return (' + s + ')')(this);\r\n }\r\n\r\n /**\r\n * Check if the content {o} is a valid DOM Element\r\n * @param {HTMLElement|DocumentFragment|object} o - is this a valid dom?\r\n * @return {boolean}\r\n */\r\n const isDOM = function(o) {\r\n return (o instanceof HTMLElement || o instanceof Element || o instanceof DocumentFragment);\r\n }\r\n\r\n /**\r\n * Check if the method is a method or a class\r\n * @param {function} f\r\n * @return {boolean}\r\n */\r\n const isClass = function(f) {\r\n return typeof f === 'function' && /^class\\s/.test(Function.prototype.toString.call(f));\r\n }\r\n\r\n /**\r\n * Basic handler\r\n * @param {string|object} t - HTML template\r\n * @return {string|object}\r\n */\r\n const Basic = function(t) {\r\n return t;\r\n }\r\n\r\n /**\r\n * Get the attribute helper\r\n * @param {object} e Element\r\n * @param {string} attribute\r\n */\r\n const getAttribute = function(e, attribute) {\r\n let value;\r\n if (attribute === 'value') {\r\n if (typeof(e.val) === 'function') {\r\n value = e.val();\r\n } else {\r\n if (e.getAttribute) {\r\n if (e.tagName === 'SELECT' && e.getAttribute('multiple') !== null) {\r\n value = [];\r\n for (let i = 0; i < e.options.length; i++) {\r\n if (e.options[i].selected) {\r\n value.push(e.options[i].value);\r\n }\r\n }\r\n } else if (e.type === 'checkbox') {\r\n value = e.checked && e.getAttribute('value') ? e.value : e.checked;\r\n } else if (e.getAttribute('contenteditable')) {\r\n value = e.innerHTML;\r\n } else {\r\n value = e.value;\r\n }\r\n } else {\r\n value = e.value;\r\n }\r\n }\r\n }\r\n return value;\r\n }\r\n\r\n /**\r\n * Set attribute value helper\r\n * @param {object} e Element\r\n * @param {string} attribute\r\n * @param {any} value\r\n * @param {boolean?} propertyValue\r\n */\r\n const setAttribute = function(e, attribute, value, propertyValue) {\r\n // Handle state\r\n if (value instanceof state) {\r\n value = value.value;\r\n } else if (typeof(value) === 'undefined') {\r\n value = '';\r\n }\r\n\r\n if (attribute === 'value' && ! propertyValue) {\r\n // Update HTML form element\r\n if (typeof (e.val) === 'function') {\r\n if (e.val() != value) {\r\n e.val(value);\r\n }\r\n } else if (e.tagName === 'SELECT' && e.getAttribute('multiple') !== null) {\r\n for (let j = 0; j < e.children.length; j++) {\r\n e.children[j].selected = value.indexOf(e.children[j].value) >= 0;\r\n }\r\n } else if (e.type === 'checkbox') {\r\n e.checked = !(!value || value === '0' || value === 'false');\r\n } else if (e.type === 'radio') {\r\n e.checked = e.value == value;\r\n } else if (e.getAttribute && e.getAttribute('contenteditable')) {\r\n if (e.innerHTML != value) {\r\n e.innerHTML = value;\r\n }\r\n } else {\r\n // Make sure apply that to the value\r\n e.value = value;\r\n // Update attribute if exists\r\n if (e.getAttribute && e.getAttribute('value') !== null) {\r\n e.setAttribute('value', value);\r\n }\r\n }\r\n } else if (typeof(value) === 'object' || typeof(value) === 'function') {\r\n e[attribute] = value;\r\n } else {\r\n if (isDOM(e)) {\r\n if (typeof (e[attribute]) !== 'undefined' && !(e.namespaceURI && e.namespaceURI.includes('svg'))) {\r\n e[attribute] = value;\r\n } else {\r\n if (value === '') {\r\n e.removeAttribute(attribute);\r\n } else {\r\n e.setAttribute(attribute, value);\r\n }\r\n }\r\n } else {\r\n e[attribute] = value;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Get attributes as an object\r\n * @param {boolean} props - all attributes that are not undefined\r\n * @return {object}\r\n */\r\n const getAttributes = function(props) {\r\n let o = {};\r\n let k = null;\r\n let a = this.attributes;\r\n if (a && a.length) {\r\n for (let i = 0; i < a.length; i++) {\r\n k = a[i].name;\r\n if (props && typeof(this[k]) !== 'undefined') {\r\n o[k] = this[k];\r\n } else {\r\n o[k] = a[i].value;\r\n }\r\n }\r\n }\r\n return o;\r\n }\r\n\r\n /**\r\n * Register a getter without setter for a self object\r\n * @param {object} s - self object\r\n * @param {string} p - self property\r\n * @param {string|object|number} v - value\r\n */\r\n const register = function(s, p, v) {\r\n if (typeof(s) === 'object') {\r\n Object.defineProperty(s, p, {\r\n enumerable: false,\r\n configurable: true,\r\n get: function () {\r\n return v;\r\n }\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Extract variables from the dynamic and append to the self\r\n * @return {[string, array]} grab the literal injection\r\n */\r\n const parseTemplate = function() {\r\n let args = Array.from(arguments);\r\n // Remove first\r\n args.shift()\r\n // Return the final template\r\n return args;\r\n }\r\n\r\n function cloneChildren(element) {\r\n // Base case: if an element is null/undefined or not an object, return as is\r\n if (!element || typeof element !== 'object') {\r\n return element;\r\n }\r\n\r\n // Handle arrays\r\n if (Array.isArray(element)) {\r\n return element.map(item => cloneChildren(item));\r\n }\r\n\r\n // Create a new object\r\n const cloned = {};\r\n\r\n // Clone each property\r\n for (const key in element) {\r\n if (key === 'children') {\r\n // Handle children especially as before\r\n cloned.children = element.children ? cloneChildren(element.children) : undefined;\r\n } else if (key === 'props') {\r\n // Deep clone props array\r\n cloned.props = element.props.map(prop => ({\r\n ...prop,\r\n value: prop.value // If value is a function, it will maintain the reference which is what we want\r\n }));\r\n } else {\r\n // Clone other properties\r\n cloned[key] = element[key];\r\n }\r\n }\r\n\r\n return cloned;\r\n }\r\n\r\n // LemonadeJS object\r\n const L = {};\r\n\r\n /**\r\n * Render a lemonade DOM element, method or class into a root DOM element\r\n * @param {function} component - LemonadeJS component or DOM created\r\n * @param {HTMLElement} root - root DOM element to receive the new HTML\r\n * @param {object?} self - self to be used\r\n * @param {object?} item - item\r\n * @return {HTMLElement|boolean} o\r\n */\r\n L.render = function(component, root, self, item) {\r\n if (typeof(component) !== 'function') {\r\n console.error('Component is not a function');\r\n return false;\r\n }\r\n\r\n // In case the self has not initial definition by the developer\r\n if (typeof(self) === 'undefined') {\r\n self = {};\r\n }\r\n\r\n // Web component\r\n if (self.tagName && self.tagName.includes('-')) {\r\n let props = getAttributes.call(self, true);\r\n // Copy all values to the object\r\n L.setProperties.call(self, props, true);\r\n }\r\n\r\n // Arguments\r\n let args = Array.from(arguments);\r\n\r\n // Lemonade component object\r\n let lemon = {\r\n self: self,\r\n ready: [],\r\n change: [],\r\n events: {},\r\n components: {},\r\n elements: [],\r\n root: root,\r\n path: {},\r\n }\r\n\r\n // Current onchange\r\n let externalOnchange = self.onchange;\r\n let externalOnload = self.onload;\r\n\r\n if (! item) {\r\n item = {};\r\n } else if (typeof(item) === 'string') {\r\n item = {\r\n children: item,\r\n }\r\n }\r\n\r\n let view;\r\n let result;\r\n\r\n // New self\r\n if (component === Basic) {\r\n view = cloneChildren(item.children[0]);\r\n\r\n if (item.parentView) {\r\n lemon.view = item.parentView;\r\n }\r\n } else {\r\n R.currentLemon = lemon;\r\n\r\n const tools = {\r\n onload: (...args) => setOnload(lemon, ...args),\r\n onchange: (...args) => setOnchange(lemon, ...args),\r\n track: (...args) => setTrack(lemon, ...args),\r\n state: (...args) => setState(lemon, ...args),\r\n setPath: (...args) => setPath(lemon, ...args),\r\n };\r\n\r\n if (isClass(component)) {\r\n if (! (self instanceof component)) {\r\n lemon.self = self = new component(self);\r\n }\r\n view = self.render(item.children, tools);\r\n } else {\r\n // Execute component\r\n view = component.call(self, item.children, tools);\r\n }\r\n\r\n // Resolve onchange scope conflict\r\n if (typeof(self.onchange) === 'function' && externalOnchange !== self.onchange) {\r\n // Keep onchange event in the new onchange format\r\n lemon.change.push(self.onchange);\r\n // Keep the external onchange\r\n self.onchange = externalOnchange;\r\n }\r\n\r\n R.currentLemon = null;\r\n }\r\n\r\n // Values\r\n let values = null;\r\n // Process return\r\n if (typeof(view) === 'function') {\r\n values = view(parseTemplate);\r\n // Curren values\r\n lemon.values = values;\r\n // A render template to be executed\r\n lemon.view = view;\r\n // Template from the method\r\n result = view.toString().split('`');\r\n // Get the original template\r\n if (result) {\r\n // Remove the last element\r\n result.shift();\r\n result.pop();\r\n // Join everything else\r\n result = result.join('`').trim();\r\n }\r\n } else {\r\n result = view;\r\n }\r\n\r\n // Virtual DOM tree\r\n if (typeof(result) === 'string') {\r\n result = HTMLParser(result.trim(), values);\r\n }\r\n\r\n let element;\r\n\r\n // Process the result\r\n if (result) {\r\n // Get the HTML virtual DOM representation\r\n lemon.tree = result;\r\n\r\n // Create real DOM and append to the root\r\n element = generateHTML(lemon);\r\n\r\n if (element) {\r\n // Parents\r\n lemon.elements = [];\r\n // Append parents\r\n if (element.tagName === 'ROOT') {\r\n element.childNodes.forEach((e) => {\r\n lemon.elements.push(e);\r\n });\r\n } else {\r\n lemon.elements.push(element);\r\n }\r\n\r\n // Register element when is not registered inside the component\r\n register(lemon.self, 'el', element);\r\n\r\n const destroy = () => {\r\n // Do not add in the same root\r\n let div = document.createElement('div');\r\n // Append temporary DIV to the same position\r\n lemon.elements[0].parentNode.insertBefore(div, lemon.elements[0]);\r\n // Remove the old elements\r\n lemon.elements.forEach((e) => {\r\n e.remove();\r\n });\r\n // Root element\r\n args[1] = div;\r\n // Create a new component\r\n L.render(...args);\r\n // Append elements in the same position in the DOM tree\r\n while (div.firstChild) {\r\n div.parentNode.insertBefore(div.firstChild, div);\r\n }\r\n // Remove DIV\r\n div.remove();\r\n // Object not in use\r\n lemon = null;\r\n }\r\n\r\n // Refresh\r\n register(lemon.self, 'refresh', (prop) => {\r\n if (prop) {\r\n if (prop === true) {\r\n destroy();\r\n } else {\r\n lemon.self[prop] = lemon.self[prop];\r\n }\r\n } else {\r\n if (lemon.view) {\r\n runViewValues(lemon);\r\n } else {\r\n destroy();\r\n }\r\n }\r\n });\r\n\r\n // Append element to the DOM\r\n if (root) {\r\n lemon.elements.forEach((e) => {\r\n root.appendChild(e);\r\n });\r\n }\r\n } else {\r\n // Refresh\r\n register(lemon.self, 'refresh', (prop) => {\r\n if (prop) {\r\n if (prop === true) {\r\n runViewValues(lemon);\r\n } else {\r\n lemon.self[prop] = lemon.self[prop];\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n // Bind to custom component\r\n if (item.bind || item.path) {\r\n let token = 'value';\r\n if (! lemon.events[token]) {\r\n lemon.events[token] = []\r\n }\r\n // Push the event\r\n if (item.bind) {\r\n lemon.events[token].push(item.bind);\r\n }\r\n if (item.path) {\r\n lemon.events[token].push(item.path);\r\n }\r\n }\r\n\r\n // In case initial exists\r\n if (typeof(lemon.path.initial) === 'object') {\r\n // Get the value of the draft\r\n let newValue = lemon.path.initial;\r\n // Delete draft\r\n delete lemon.path.initial;\r\n // Apply new values\r\n lemon.path.setValue(newValue);\r\n\r\n }\r\n\r\n // Apply events\r\n if (lemon.events) {\r\n let props = Object.keys(lemon.events);\r\n if (props.length) {\r\n for (let i = 0; i ${template}`;\r\n }\r\n return L.render(Component,el,s);\r\n }\r\n\r\n /**\r\n * Get all properties existing in {o} and create a new object with the values from {this};\r\n * @param {object} o - reference object with the properties relevant to the new object\r\n * @return {object} n - the new object with all new values\r\n */\r\n L.getProperties = function(o) {\r\n // The new object with all properties found in {o} with values from {this}\r\n let n = {};\r\n for (let p in o) {\r\n n[p] = this[p];\r\n }\r\n return n;\r\n }\r\n\r\n /**\r\n * Set the values from {o} to {this}\r\n * @param {object} o set the values of {this} when the `this[property]` is found in {o}, or when flag force is true\r\n * @param {boolean} f create a new property when that does not exist yet, but is found in {o}\r\n * @return {object} this is redundant since object {this} is a reference and is already available in the caller\r\n */\r\n L.setProperties = function(o, f) {\r\n for (let p in o) {\r\n if (this.hasOwnProperty(p) || f) {\r\n this[p] = o[p];\r\n }\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * Reset the values of any common property name between this and a given object\r\n * @param {object} o - all properties names in the object {o} found in {this} will be reset.\r\n */\r\n L.resetProperties = function(o) {\r\n for (let p in o) {\r\n this[p] = '';\r\n }\r\n }\r\n\r\n /**\r\n * Lemonade CC (common container) helps you share a self or function through the whole application\r\n * @param {string} name alias for your declared object(self) or function\r\n * @returns {Object | Function} - registered element\r\n */\r\n L.get = function(name) {\r\n return R.container[name];\r\n }\r\n\r\n /**\r\n * Register something to the Lemonade CC (common container)\r\n * @param {string} name - alias for your declared object(self) or function\r\n * @param {object|function} e - the element to be added to the common container. Can be an object(self) or function.\r\n * @param {boolean} persistence - optional the persistence flag. Only applicable for functions.\r\n */\r\n L.set = function(name, e, persistence) {\r\n // Applicable only when the o is a function\r\n if (typeof(e) === 'function' && persistence === true) {\r\n // Keep the flag\r\n e.storage = true;\r\n // Any existing values\r\n let t = window.localStorage.getItem(name);\r\n if (t) {\r\n // Parse JSON\r\n t = JSON.parse(t);\r\n // Execute method with the existing values\r\n e(t);\r\n }\r\n }\r\n // Save to the sugar container\r\n R.container[name] = e;\r\n }\r\n\r\n /**\r\n * Dispatch the new values to the function\r\n * @param {string} name - alias to the element saved on the Lemonade CC (common container)\r\n * @param {object?} data - data to be dispatched\r\n */\r\n L.dispatch = function(name, data) {\r\n // Get from the container\r\n let e = R.container[name];\r\n // Confirm that the alias is a function\r\n if (typeof(e) === 'function') {\r\n // Save the data to the local storage\r\n if (e.storage === true) {\r\n window.localStorage.setItem(name, JSON.stringify(data));\r\n }\r\n // Dispatch the data to the function\r\n return e(data);\r\n }\r\n }\r\n\r\n /**\r\n * Register components\r\n * @param {object} components - register components\r\n */\r\n L.setComponents = function(components) {\r\n if (typeof(components) === 'object') {\r\n // Component names\r\n let k = Object.keys(components);\r\n // Make sure they follow the standard\r\n for (let i = 0; i < k.length; i++) {\r\n R.components[k[i].toUpperCase()] = components[k[i]];\r\n }\r\n }\r\n }\r\n\r\n L.component = class {}\r\n\r\n /**\r\n * Create a Web Component\r\n * @param {string} name - web component name\r\n * @param {function} handler - lemonadejs component\r\n * @param {object} options - options to create the web components\r\n */\r\n L.createWebComponent = function(name, handler, options) {\r\n if (typeof(window) === 'undefined') {\r\n return;\r\n }\r\n\r\n if (typeof(handler) !== 'function') {\r\n return 'Handler should be an function';\r\n }\r\n // Prefix\r\n let prefix = options && options.prefix ? options.prefix : 'lm';\r\n\r\n // Component name\r\n const componentName = prefix + '-' + name;\r\n\r\n // Check if the component is already defined\r\n if (! window.customElements.get(componentName)) {\r\n class Component extends HTMLElement {\r\n constructor() {\r\n super();\r\n }\r\n\r\n connectedCallback() {\r\n // LemonadeJS self\r\n let self = this;\r\n // First call\r\n let state = typeof(this.el) === 'undefined';\r\n // LemonadeJS is already rendered\r\n if (state === true) {\r\n // Render\r\n if (options && options.applyOnly === true) {\r\n // Merge component\r\n handler.call(this);\r\n // Apply\r\n L.apply(this, self);\r\n } else {\r\n let root = this;\r\n if (options && options.shadowRoot === true) {\r\n this.attachShadow({ mode: 'open' });\r\n root = document.createElement('div');\r\n this.shadowRoot.appendChild(root);\r\n }\r\n // Give the browser time to calculate all width and heights\r\n L.render(handler, root, self);\r\n }\r\n }\r\n\r\n queueMicrotask(() => {\r\n // Event\r\n if (typeof(self.onconnect) === 'function') {\r\n self.onconnect(self, state);\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n if (typeof(this.ondisconnect) === 'function') {\r\n this.ondisconnect(this);\r\n }\r\n }\r\n }\r\n\r\n if (! window.customElements.get(componentName)) {\r\n window.customElements.define(componentName, Component);\r\n }\r\n }\r\n }\r\n\r\n L.h = function(type, props, ...children) {\r\n return { type, props: props || {}, children };\r\n }\r\n\r\n L.Fragment = function(props) {\r\n return props.children;\r\n }\r\n\r\n const wrongLevel = 'Hooks must be called at the top level of your component';\r\n\r\n const setOnload = function(lemon, event) {\r\n lemon.load = event;\r\n }\r\n\r\n const setOnchange = function(lemon, event) {\r\n lemon.change.push(event);\r\n }\r\n\r\n const setTrack = function(lemon, prop) {\r\n if (! lemon.events[prop]) {\r\n lemon.events[prop] = [];\r\n }\r\n }\r\n\r\n const setPath = function(lemon, initialValues, change) {\r\n // My value object\r\n let value = {};\r\n // Create a method to update the state\r\n const setValue = (newValue) => {\r\n if (typeof(lemon.path.initial) === 'undefined') {\r\n if (typeof (newValue) === 'object') {\r\n // If my has been declared\r\n let elements = lemon.path.elements;\r\n if (elements) {\r\n for (let i = 0; i < elements.length; i++) {\r\n let v = Path.call(newValue, elements[i].path)\r\n setAttribute(elements[i].element, 'value', v);\r\n // Also sync value to the data object (use '' for undefined to match form behavior)\r\n Path.call(lemon.path.value, elements[i].path, v !== undefined ? v : '');\r\n }\r\n }\r\n }\r\n } else {\r\n lemon.path.initial = newValue;\r\n }\r\n }\r\n\r\n const getValue = () => {\r\n let ret = {};\r\n // If my has been declared\r\n let elements = lemon.path.elements;\r\n if (elements) {\r\n for (let i = 0; i < elements.length; i++) {\r\n let v = getAttribute(elements[i].element, 'value');\r\n Path.call(ret, elements[i].path, v);\r\n }\r\n }\r\n return ret;\r\n }\r\n\r\n lemon.path = {\r\n setValue: setValue,\r\n value: value,\r\n change: change,\r\n initial: initialValues || {}\r\n };\r\n\r\n return [value, setValue, getValue];\r\n }\r\n\r\n const setState = function(lemon, value, callback) {\r\n // Create a state container\r\n const s = new state();\r\n // Create a method to update the state\r\n const setValue = (newValue) => {\r\n let oldValue = value;\r\n // Update original value\r\n value = typeof newValue === 'function' ? newValue(value) : newValue;\r\n // Values from the view\r\n runViewValues(lemon, s);\r\n // Call back\r\n callback?.(value, oldValue);\r\n }\r\n // Make the value attribute dynamic\r\n Object.defineProperty(s, 'value', {\r\n set: setValue,\r\n get: () => value\r\n });\r\n\r\n return s;\r\n }\r\n\r\n L.onload = function(event) {\r\n if (! R.currentLemon) {\r\n createError(wrongLevel);\r\n }\r\n return setOnload(R.currentLemon, event);\r\n }\r\n\r\n L.onchange = function(event) {\r\n if (! R.currentLemon) {\r\n createError(wrongLevel);\r\n }\r\n return setOnchange(R.currentLemon, event);\r\n }\r\n\r\n L.track = function(prop) {\r\n if (! R.currentLemon) {\r\n createError(wrongLevel);\r\n }\r\n return setTrack(R.currentLemon, prop);\r\n }\r\n\r\n L.setPath = function(initialValues, change) {\r\n if (! R.currentLemon) {\r\n createError(wrongLevel);\r\n }\r\n return setPath(R.currentLemon, initialValues, change);\r\n }\r\n\r\n /**\r\n * Run view values\r\n * @param lemon\r\n * @param s - refresh from state\r\n */\r\n const runViewValues = function(lemon, s) {\r\n let values = lemon.view(parseTemplate);\r\n if (values && values.length) {\r\n values.forEach((v, k) => {\r\n let current = lemon.values[k];\r\n // Compare if the previous value\r\n if (s && s === v || v !== current) {\r\n // Update current value\r\n lemon.values[k] = v;\r\n // Trigger state events\r\n if (typeof(lemon.events[k]) === 'function') {\r\n lemon.events[k]();\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n const state = function() {}\r\n\r\n state.prototype.toString = function() {\r\n return this.value.toString();\r\n }\r\n\r\n state.prototype.valueOf = function() {\r\n return this.value;\r\n }\r\n\r\n state.prototype[Symbol.toPrimitive] = function(hint) {\r\n if (hint === 'string') {\r\n return this.value.toString();\r\n }\r\n return this.value;\r\n }\r\n\r\n // TODO: Proxy for Objects and Arrays\r\n L.state = function(value, callback) {\r\n if (! R.currentLemon) {\r\n createError(wrongLevel);\r\n }\r\n\r\n return setState(R.currentLemon, value, callback);\r\n }\r\n\r\n L.helpers = {\r\n path: extractFromPath,\r\n properties: {\r\n get: L.getProperties,\r\n set: L.setProperties,\r\n reset: L.resetProperties,\r\n }\r\n }\r\n\r\n L.events = (function() {\r\n class CustomEvents extends Event {\r\n constructor(type, props, options) {\r\n super(type, {\r\n bubbles: true,\r\n composed: true,\r\n ...options,\r\n });\r\n\r\n if (props) {\r\n for (const key in props) {\r\n // Avoid assigning if property already exists anywhere on `this`\r\n if (! (key in this)) {\r\n this[key] = props[key];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n const create = function(type, props, options) {\r\n return new CustomEvents(type, props, options);\r\n };\r\n\r\n return {\r\n create: create,\r\n dispatch(element, event, options) {\r\n if (typeof event === 'string') {\r\n event = create(event, options);\r\n }\r\n element.dispatchEvent(event);\r\n }\r\n };\r\n })();\r\n\r\n return L;\r\n})));\n\n/***/ }),\n\n/***/ 195:\n/***/ (function(module) {\n\n/**\r\n * (c) jSuites Javascript Plugins and Web Components (v4)\r\n *\r\n * Website: https://jsuites.net\r\n * Description: Create amazing web based applications.\r\n * Plugin: Organogram\r\n *\r\n * MIT License\r\n */\r\n\r\n;(function (global, factory) {\r\n true ? module.exports = factory() :\r\n 0;\r\n}(this, (function () {\r\n\r\n return (function(str) {\r\n function int64(msint_32, lsint_32) {\r\n this.highOrder = msint_32;\r\n this.lowOrder = lsint_32;\r\n }\r\n\r\n var H = [new int64(0x6a09e667, 0xf3bcc908), new int64(0xbb67ae85, 0x84caa73b),\r\n new int64(0x3c6ef372, 0xfe94f82b), new int64(0xa54ff53a, 0x5f1d36f1),\r\n new int64(0x510e527f, 0xade682d1), new int64(0x9b05688c, 0x2b3e6c1f),\r\n new int64(0x1f83d9ab, 0xfb41bd6b), new int64(0x5be0cd19, 0x137e2179)];\r\n\r\n var K = [new int64(0x428a2f98, 0xd728ae22), new int64(0x71374491, 0x23ef65cd),\r\n new int64(0xb5c0fbcf, 0xec4d3b2f), new int64(0xe9b5dba5, 0x8189dbbc),\r\n new int64(0x3956c25b, 0xf348b538), new int64(0x59f111f1, 0xb605d019),\r\n new int64(0x923f82a4, 0xaf194f9b), new int64(0xab1c5ed5, 0xda6d8118),\r\n new int64(0xd807aa98, 0xa3030242), new int64(0x12835b01, 0x45706fbe),\r\n new int64(0x243185be, 0x4ee4b28c), new int64(0x550c7dc3, 0xd5ffb4e2),\r\n new int64(0x72be5d74, 0xf27b896f), new int64(0x80deb1fe, 0x3b1696b1),\r\n new int64(0x9bdc06a7, 0x25c71235), new int64(0xc19bf174, 0xcf692694),\r\n new int64(0xe49b69c1, 0x9ef14ad2), new int64(0xefbe4786, 0x384f25e3),\r\n new int64(0x0fc19dc6, 0x8b8cd5b5), new int64(0x240ca1cc, 0x77ac9c65),\r\n new int64(0x2de92c6f, 0x592b0275), new int64(0x4a7484aa, 0x6ea6e483),\r\n new int64(0x5cb0a9dc, 0xbd41fbd4), new int64(0x76f988da, 0x831153b5),\r\n new int64(0x983e5152, 0xee66dfab), new int64(0xa831c66d, 0x2db43210),\r\n new int64(0xb00327c8, 0x98fb213f), new int64(0xbf597fc7, 0xbeef0ee4),\r\n new int64(0xc6e00bf3, 0x3da88fc2), new int64(0xd5a79147, 0x930aa725),\r\n new int64(0x06ca6351, 0xe003826f), new int64(0x14292967, 0x0a0e6e70),\r\n new int64(0x27b70a85, 0x46d22ffc), new int64(0x2e1b2138, 0x5c26c926),\r\n new int64(0x4d2c6dfc, 0x5ac42aed), new int64(0x53380d13, 0x9d95b3df),\r\n new int64(0x650a7354, 0x8baf63de), new int64(0x766a0abb, 0x3c77b2a8),\r\n new int64(0x81c2c92e, 0x47edaee6), new int64(0x92722c85, 0x1482353b),\r\n new int64(0xa2bfe8a1, 0x4cf10364), new int64(0xa81a664b, 0xbc423001),\r\n new int64(0xc24b8b70, 0xd0f89791), new int64(0xc76c51a3, 0x0654be30),\r\n new int64(0xd192e819, 0xd6ef5218), new int64(0xd6990624, 0x5565a910),\r\n new int64(0xf40e3585, 0x5771202a), new int64(0x106aa070, 0x32bbd1b8),\r\n new int64(0x19a4c116, 0xb8d2d0c8), new int64(0x1e376c08, 0x5141ab53),\r\n new int64(0x2748774c, 0xdf8eeb99), new int64(0x34b0bcb5, 0xe19b48a8),\r\n new int64(0x391c0cb3, 0xc5c95a63), new int64(0x4ed8aa4a, 0xe3418acb),\r\n new int64(0x5b9cca4f, 0x7763e373), new int64(0x682e6ff3, 0xd6b2b8a3),\r\n new int64(0x748f82ee, 0x5defb2fc), new int64(0x78a5636f, 0x43172f60),\r\n new int64(0x84c87814, 0xa1f0ab72), new int64(0x8cc70208, 0x1a6439ec),\r\n new int64(0x90befffa, 0x23631e28), new int64(0xa4506ceb, 0xde82bde9),\r\n new int64(0xbef9a3f7, 0xb2c67915), new int64(0xc67178f2, 0xe372532b),\r\n new int64(0xca273ece, 0xea26619c), new int64(0xd186b8c7, 0x21c0c207),\r\n new int64(0xeada7dd6, 0xcde0eb1e), new int64(0xf57d4f7f, 0xee6ed178),\r\n new int64(0x06f067aa, 0x72176fba), new int64(0x0a637dc5, 0xa2c898a6),\r\n new int64(0x113f9804, 0xbef90dae), new int64(0x1b710b35, 0x131c471b),\r\n new int64(0x28db77f5, 0x23047d84), new int64(0x32caab7b, 0x40c72493),\r\n new int64(0x3c9ebe0a, 0x15c9bebc), new int64(0x431d67c4, 0x9c100d4c),\r\n new int64(0x4cc5d4be, 0xcb3e42b6), new int64(0x597f299c, 0xfc657e2a),\r\n new int64(0x5fcb6fab, 0x3ad6faec), new int64(0x6c44198c, 0x4a475817)];\r\n\r\n var W = new Array(64);\r\n var a, b, c, d, e, f, g, h, i, j;\r\n var T1, T2;\r\n var charsize = 8;\r\n\r\n function utf8_encode(str) {\r\n return unescape(encodeURIComponent(str));\r\n }\r\n\r\n function str2binb(str) {\r\n var bin = [];\r\n var mask = (1 << charsize) - 1;\r\n var len = str.length * charsize;\r\n\r\n for (var i = 0; i < len; i += charsize) {\r\n bin[i >> 5] |= (str.charCodeAt(i / charsize) & mask) << (32 - charsize - (i % 32));\r\n }\r\n\r\n return bin;\r\n }\r\n\r\n function binb2hex(binarray) {\r\n var hex_tab = \"0123456789abcdef\";\r\n var str = \"\";\r\n var length = binarray.length * 4;\r\n var srcByte;\r\n\r\n for (var i = 0; i < length; i += 1) {\r\n srcByte = binarray[i >> 2] >> ((3 - (i % 4)) * 8);\r\n str += hex_tab.charAt((srcByte >> 4) & 0xF) + hex_tab.charAt(srcByte & 0xF);\r\n }\r\n\r\n return str;\r\n }\r\n\r\n function safe_add_2(x, y) {\r\n var lsw, msw, lowOrder, highOrder;\r\n\r\n lsw = (x.lowOrder & 0xFFFF) + (y.lowOrder & 0xFFFF);\r\n msw = (x.lowOrder >>> 16) + (y.lowOrder >>> 16) + (lsw >>> 16);\r\n lowOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n lsw = (x.highOrder & 0xFFFF) + (y.highOrder & 0xFFFF) + (msw >>> 16);\r\n msw = (x.highOrder >>> 16) + (y.highOrder >>> 16) + (lsw >>> 16);\r\n highOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n return new int64(highOrder, lowOrder);\r\n }\r\n\r\n function safe_add_4(a, b, c, d) {\r\n var lsw, msw, lowOrder, highOrder;\r\n\r\n lsw = (a.lowOrder & 0xFFFF) + (b.lowOrder & 0xFFFF) + (c.lowOrder & 0xFFFF) + (d.lowOrder & 0xFFFF);\r\n msw = (a.lowOrder >>> 16) + (b.lowOrder >>> 16) + (c.lowOrder >>> 16) + (d.lowOrder >>> 16) + (lsw >>> 16);\r\n lowOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n lsw = (a.highOrder & 0xFFFF) + (b.highOrder & 0xFFFF) + (c.highOrder & 0xFFFF) + (d.highOrder & 0xFFFF) + (msw >>> 16);\r\n msw = (a.highOrder >>> 16) + (b.highOrder >>> 16) + (c.highOrder >>> 16) + (d.highOrder >>> 16) + (lsw >>> 16);\r\n highOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n return new int64(highOrder, lowOrder);\r\n }\r\n\r\n function safe_add_5(a, b, c, d, e) {\r\n var lsw, msw, lowOrder, highOrder;\r\n\r\n lsw = (a.lowOrder & 0xFFFF) + (b.lowOrder & 0xFFFF) + (c.lowOrder & 0xFFFF) + (d.lowOrder & 0xFFFF) + (e.lowOrder & 0xFFFF);\r\n msw = (a.lowOrder >>> 16) + (b.lowOrder >>> 16) + (c.lowOrder >>> 16) + (d.lowOrder >>> 16) + (e.lowOrder >>> 16) + (lsw >>> 16);\r\n lowOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n lsw = (a.highOrder & 0xFFFF) + (b.highOrder & 0xFFFF) + (c.highOrder & 0xFFFF) + (d.highOrder & 0xFFFF) + (e.highOrder & 0xFFFF) + (msw >>> 16);\r\n msw = (a.highOrder >>> 16) + (b.highOrder >>> 16) + (c.highOrder >>> 16) + (d.highOrder >>> 16) + (e.highOrder >>> 16) + (lsw >>> 16);\r\n highOrder = ((msw & 0xFFFF) << 16) | (lsw & 0xFFFF);\r\n\r\n return new int64(highOrder, lowOrder);\r\n }\r\n\r\n function maj(x, y, z) {\r\n return new int64(\r\n (x.highOrder & y.highOrder) ^ (x.highOrder & z.highOrder) ^ (y.highOrder & z.highOrder),\r\n (x.lowOrder & y.lowOrder) ^ (x.lowOrder & z.lowOrder) ^ (y.lowOrder & z.lowOrder)\r\n );\r\n }\r\n\r\n function ch(x, y, z) {\r\n return new int64(\r\n (x.highOrder & y.highOrder) ^ (~x.highOrder & z.highOrder),\r\n (x.lowOrder & y.lowOrder) ^ (~x.lowOrder & z.lowOrder)\r\n );\r\n }\r\n\r\n function rotr(x, n) {\r\n if (n <= 32) {\r\n return new int64(\r\n (x.highOrder >>> n) | (x.lowOrder << (32 - n)),\r\n (x.lowOrder >>> n) | (x.highOrder << (32 - n))\r\n );\r\n } else {\r\n return new int64(\r\n (x.lowOrder >>> n) | (x.highOrder << (32 - n)),\r\n (x.highOrder >>> n) | (x.lowOrder << (32 - n))\r\n );\r\n }\r\n }\r\n\r\n function sigma0(x) {\r\n var rotr28 = rotr(x, 28);\r\n var rotr34 = rotr(x, 34);\r\n var rotr39 = rotr(x, 39);\r\n\r\n return new int64(\r\n rotr28.highOrder ^ rotr34.highOrder ^ rotr39.highOrder,\r\n rotr28.lowOrder ^ rotr34.lowOrder ^ rotr39.lowOrder\r\n );\r\n }\r\n\r\n function sigma1(x) {\r\n var rotr14 = rotr(x, 14);\r\n var rotr18 = rotr(x, 18);\r\n var rotr41 = rotr(x, 41);\r\n\r\n return new int64(\r\n rotr14.highOrder ^ rotr18.highOrder ^ rotr41.highOrder,\r\n rotr14.lowOrder ^ rotr18.lowOrder ^ rotr41.lowOrder\r\n );\r\n }\r\n\r\n function gamma0(x) {\r\n var rotr1 = rotr(x, 1), rotr8 = rotr(x, 8), shr7 = shr(x, 7);\r\n\r\n return new int64(\r\n rotr1.highOrder ^ rotr8.highOrder ^ shr7.highOrder,\r\n rotr1.lowOrder ^ rotr8.lowOrder ^ shr7.lowOrder\r\n );\r\n }\r\n\r\n function gamma1(x) {\r\n var rotr19 = rotr(x, 19);\r\n var rotr61 = rotr(x, 61);\r\n var shr6 = shr(x, 6);\r\n\r\n return new int64(\r\n rotr19.highOrder ^ rotr61.highOrder ^ shr6.highOrder,\r\n rotr19.lowOrder ^ rotr61.lowOrder ^ shr6.lowOrder\r\n );\r\n }\r\n\r\n function shr(x, n) {\r\n if (n <= 32) {\r\n return new int64(\r\n x.highOrder >>> n,\r\n x.lowOrder >>> n | (x.highOrder << (32 - n))\r\n );\r\n } else {\r\n return new int64(\r\n 0,\r\n x.highOrder << (32 - n)\r\n );\r\n }\r\n }\r\n\r\n var str = utf8_encode(str);\r\n var strlen = str.length*charsize;\r\n str = str2binb(str);\r\n\r\n str[strlen >> 5] |= 0x80 << (24 - strlen % 32);\r\n str[(((strlen + 128) >> 10) << 5) + 31] = strlen;\r\n\r\n for (var i = 0; i < str.length; i += 32) {\r\n a = H[0];\r\n b = H[1];\r\n c = H[2];\r\n d = H[3];\r\n e = H[4];\r\n f = H[5];\r\n g = H[6];\r\n h = H[7];\r\n\r\n for (var j = 0; j < 80; j++) {\r\n if (j < 16) {\r\n W[j] = new int64(str[j*2 + i], str[j*2 + i + 1]);\r\n } else {\r\n W[j] = safe_add_4(gamma1(W[j - 2]), W[j - 7], gamma0(W[j - 15]), W[j - 16]);\r\n }\r\n\r\n T1 = safe_add_5(h, sigma1(e), ch(e, f, g), K[j], W[j]);\r\n T2 = safe_add_2(sigma0(a), maj(a, b, c));\r\n h = g;\r\n g = f;\r\n f = e;\r\n e = safe_add_2(d, T1);\r\n d = c;\r\n c = b;\r\n b = a;\r\n a = safe_add_2(T1, T2);\r\n }\r\n\r\n H[0] = safe_add_2(a, H[0]);\r\n H[1] = safe_add_2(b, H[1]);\r\n H[2] = safe_add_2(c, H[2]);\r\n H[3] = safe_add_2(d, H[3]);\r\n H[4] = safe_add_2(e, H[4]);\r\n H[5] = safe_add_2(f, H[5]);\r\n H[6] = safe_add_2(g, H[6]);\r\n H[7] = safe_add_2(h, H[7]);\r\n }\r\n\r\n var binarray = [];\r\n for (var i = 0; i < H.length; i++) {\r\n binarray.push(H[i].highOrder);\r\n binarray.push(H[i].lowOrder);\r\n }\r\n\r\n return binb2hex(binarray);\r\n });\r\n\r\n})));\r\n\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/ \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined) {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId] = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t// Execute the module function\n/******/ \t\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/ \t\n/************************************************************************/\n/******/ \t/* webpack/runtime/compat get default export */\n/******/ \t!function() {\n/******/ \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t\t__webpack_require__.n = function(module) {\n/******/ \t\t\tvar getter = module && module.__esModule ?\n/******/ \t\t\t\tfunction() { return module['default']; } :\n/******/ \t\t\t\tfunction() { return module; };\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t!function() {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d = function(exports, definition) {\n/******/ \t\t\tfor(var key in definition) {\n/******/ \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty shorthand */\n/******/ \t!function() {\n/******/ \t\t__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }\n/******/ \t}();\n/******/ \t\n/************************************************************************/\nvar __webpack_exports__ = {};\n// This entry need to be wrapped in an IIFE because it need to be in strict mode.\n!function() {\n\"use strict\";\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n \"default\": function() { return /* binding */ jsuites; }\n});\n\n;// CONCATENATED MODULE: ./src/utils/dictionary.js\n// Update dictionary\r\nconst setDictionary = function(d) {\r\n if (! document.dictionary) {\r\n document.dictionary = {}\r\n }\r\n // Replace the key into the dictionary and append the new ones\r\n let k = Object.keys(d);\r\n for (let i = 0; i < k.length; i++) {\r\n document.dictionary[k[i]] = d[k[i]];\r\n }\r\n}\r\n\r\n// Translate\r\nconst translate = function(t) {\r\n if (typeof(document) !== \"undefined\" && document.dictionary) {\r\n return document.dictionary[t] || t;\r\n } else {\r\n return t;\r\n }\r\n}\r\n\r\n\r\n/* harmony default export */ var dictionary = ({ setDictionary, translate });\n;// CONCATENATED MODULE: ./src/utils/tracking.js\n const Tracking = function(component, state) {\r\n if (state === true) {\r\n window['jSuitesStateControl'] = window['jSuitesStateControl'].filter(function(v) {\r\n return v !== null;\r\n });\r\n\r\n // Start after all events\r\n setTimeout(function() {\r\n window['jSuitesStateControl'].push(component);\r\n }, 0);\r\n\r\n } else {\r\n var index = window['jSuitesStateControl'].indexOf(component);\r\n if (index >= 0) {\r\n window['jSuitesStateControl'].splice(index, 1);\r\n }\r\n }\r\n}\r\n\r\n/* harmony default export */ var tracking = (Tracking);\n;// CONCATENATED MODULE: ./src/utils/helpers.js\nconst Helpers = {};\r\n\r\n// Two digits\r\nHelpers.two = function(value) {\r\n value = '' + value;\r\n if (value.length == 1) {\r\n value = '0' + value;\r\n }\r\n return value;\r\n}\r\n\r\nHelpers.focus = function(el) {\r\n if (el.textContent.length) {\r\n // Handle contenteditable elements\r\n const range = document.createRange();\r\n const sel = window.getSelection();\r\n\r\n let node = el;\r\n // Go as deep as possible to the last text node\r\n while (node.lastChild) node = node.lastChild;\r\n // Ensure it's a text node\r\n if (node.nodeType === Node.TEXT_NODE) {\r\n range.setStart(node, node.length);\r\n } else {\r\n range.setStart(node, node.childNodes.length);\r\n }\r\n range.collapse(true);\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n\r\n el.scrollLeft = el.scrollWidth;\r\n }\r\n}\r\n\r\nHelpers.isNumeric = (function (num) {\r\n if (typeof(num) === 'string') {\r\n num = num.trim();\r\n }\r\n return !isNaN(num) && num !== null && num !== '';\r\n});\r\n\r\nHelpers.guid = function() {\r\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);\r\n return v.toString(16);\r\n });\r\n}\r\n\r\nHelpers.getNode = function() {\r\n let node = document.getSelection().anchorNode;\r\n if (node) {\r\n return (node.nodeType == 3 ? node.parentNode : node);\r\n } else {\r\n return null;\r\n }\r\n}\r\n/**\r\n * Generate hash from a string\r\n */\r\nHelpers.hash = function(str) {\r\n let hash = 0, i, chr;\r\n\r\n if (str.length === 0) {\r\n return hash;\r\n } else {\r\n for (i = 0; i < str.length; i++) {\r\n chr = str.charCodeAt(i);\r\n if (chr > 32) {\r\n hash = ((hash << 5) - hash) + chr;\r\n hash |= 0;\r\n }\r\n }\r\n }\r\n return hash;\r\n}\r\n\r\n/**\r\n * Generate a random color\r\n */\r\nHelpers.randomColor = function(h) {\r\n let lum = -0.25;\r\n let hex = String('#' + Math.random().toString(16).slice(2, 8).toUpperCase()).replace(/[^0-9a-f]/gi, '');\r\n if (hex.length < 6) {\r\n hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\r\n }\r\n let rgb = [], c;\r\n for (let i = 0; i < 3; i++) {\r\n c = parseInt(hex.substr(i * 2, 2), 16);\r\n c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);\r\n rgb.push((\"00\" + c).substr(c.length));\r\n }\r\n\r\n // Return hex\r\n if (h === true) {\r\n return '#' + Helpers.two(rgb[0].toString(16)) + Helpers.two(rgb[1].toString(16)) + Helpers.two(rgb[2].toString(16));\r\n }\r\n\r\n return rgb;\r\n}\r\n\r\nHelpers.getWindowWidth = function() {\r\n let w = window,\r\n d = document,\r\n e = d.documentElement,\r\n g = d.getElementsByTagName('body')[0],\r\n x = w.innerWidth || e.clientWidth || g.clientWidth;\r\n return x;\r\n}\r\n\r\nHelpers.getWindowHeight = function() {\r\n let w = window,\r\n d = document,\r\n e = d.documentElement,\r\n g = d.getElementsByTagName('body')[0],\r\n y = w.innerHeight|| e.clientHeight|| g.clientHeight;\r\n return y;\r\n}\r\n\r\nHelpers.getPosition = function(e) {\r\n let x;\r\n let y;\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n x = e.changedTouches[0].pageX;\r\n y = e.changedTouches[0].pageY;\r\n } else {\r\n x = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);\r\n y = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);\r\n }\r\n\r\n return [ x, y ];\r\n}\r\n\r\nHelpers.click = function(el) {\r\n if (el.click) {\r\n el.click();\r\n } else {\r\n let evt = new MouseEvent('click', {\r\n bubbles: true,\r\n cancelable: true,\r\n view: window\r\n });\r\n el.dispatchEvent(evt);\r\n }\r\n}\r\n\r\nHelpers.findElement = function(element, condition) {\r\n let foundElement = false;\r\n\r\n function path (element) {\r\n if (element && ! foundElement) {\r\n if (typeof(condition) == 'function') {\r\n foundElement = condition(element)\r\n } else if (typeof(condition) == 'string') {\r\n if (element.classList && element.classList.contains(condition)) {\r\n foundElement = element;\r\n }\r\n }\r\n }\r\n\r\n if (element.parentNode && ! foundElement) {\r\n path(element.parentNode);\r\n }\r\n }\r\n\r\n path(element);\r\n\r\n return foundElement;\r\n}\r\n\r\n/* harmony default export */ var helpers = (Helpers);\n;// CONCATENATED MODULE: ./src/utils/path.js\nconst isValidPathObj = function(o) {\r\n return o !== null && (typeof o === 'object' || typeof o === 'function');\r\n}\r\n\r\nfunction Path(pathString, value, remove) {\r\n // Ensure the path is a valid, non-empty string\r\n if (typeof pathString !== 'string' || pathString.length === 0) {\r\n return undefined;\r\n }\r\n\r\n // Split the path into individual keys and filter out empty keys\r\n const keys = pathString.split('.');\r\n if (keys.length === 0) {\r\n return undefined;\r\n }\r\n\r\n // Start with the root object\r\n let currentObject = this;\r\n\r\n // Read mode: retrieve a value\r\n if (typeof value === 'undefined' && typeof remove === 'undefined') {\r\n // Traverse all keys\r\n for (let i = 0; i < keys.length; i++) {\r\n const key = keys[i];\r\n // Check if the current object is valid and has the key\r\n if (currentObject != null && isValidPathObj(currentObject) && key in currentObject) {\r\n currentObject = currentObject[key];\r\n } else {\r\n // Return undefined if the path is invalid or currentObject is null/undefined\r\n return undefined;\r\n }\r\n }\r\n // Return the final value\r\n return currentObject;\r\n }\r\n\r\n // Write mode: set or delete a value\r\n // Traverse all keys except the last one\r\n for (let i = 0; i < keys.length - 1; i++) {\r\n const key = keys[i];\r\n\r\n // Check if the current object is invalid (null/undefined or non-object)\r\n if (currentObject == null || ! isValidPathObj(currentObject)) {\r\n console.warn(`Cannot set value: path '${pathString}' blocked by invalid object at '${key}'`);\r\n return false;\r\n }\r\n\r\n // If the key exists but is null/undefined or a non-object, replace it with an empty object\r\n if (\r\n key in currentObject &&\r\n (currentObject[key] == null || ! isValidPathObj(currentObject[key]))\r\n ) {\r\n currentObject[key] = {};\r\n } else if (!(key in currentObject)) {\r\n // If the key doesn't exist, create an empty object\r\n currentObject[key] = {};\r\n }\r\n\r\n // Move to the next level\r\n currentObject = currentObject[key];\r\n }\r\n\r\n // Handle the final key\r\n const finalKey = keys[keys.length - 1];\r\n\r\n // Check if the current object is valid for setting/deleting\r\n if (currentObject == null || ! isValidPathObj(currentObject)) {\r\n return false;\r\n }\r\n\r\n // Delete the property if remove is true\r\n if (remove === true) {\r\n if (finalKey in currentObject) {\r\n delete currentObject[finalKey];\r\n return true;\r\n }\r\n return false; // Nothing to delete\r\n }\r\n\r\n // Set the value\r\n currentObject[finalKey] = value;\r\n return true;\r\n}\n;// CONCATENATED MODULE: ./src/utils/sorting.js\nfunction Sorting(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n var defaults = {\r\n pointer: null,\r\n direction: null,\r\n ondragstart: null,\r\n ondragend: null,\r\n ondrop: null,\r\n }\r\n\r\n var dragElement = null;\r\n\r\n // Loop through the initial configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n el.classList.add('jsorting');\r\n\r\n el.addEventListener('dragstart', function(e) {\r\n let target = e.target;\r\n if (target.nodeType === 3) {\r\n if (target.parentNode.getAttribute('draggable') === 'true') {\r\n target = target.parentNode;\r\n } else {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return;\r\n }\r\n }\r\n\r\n if (target.getAttribute('draggable') === 'true') {\r\n let position = Array.prototype.indexOf.call(target.parentNode.children, target);\r\n dragElement = {\r\n element: target,\r\n o: position,\r\n d: position\r\n }\r\n target.style.opacity = '0.25';\r\n\r\n if (typeof (obj.options.ondragstart) == 'function') {\r\n obj.options.ondragstart(el, target, e);\r\n }\r\n\r\n e.dataTransfer.setDragImage(target,0,0);\r\n }\r\n });\r\n\r\n el.addEventListener('dragover', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement) {\r\n if (getElement(e.target)) {\r\n if (e.target.getAttribute('draggable') == 'true' && dragElement.element != e.target) {\r\n if (!obj.options.direction) {\r\n var condition = e.target.clientHeight / 2 > e.offsetY;\r\n } else {\r\n var condition = e.target.clientWidth / 2 > e.offsetX;\r\n }\r\n\r\n if (condition) {\r\n e.target.parentNode.insertBefore(dragElement.element, e.target);\r\n } else {\r\n e.target.parentNode.insertBefore(dragElement.element, e.target.nextSibling);\r\n }\r\n\r\n dragElement.d = Array.prototype.indexOf.call(e.target.parentNode.children, dragElement.element);\r\n }\r\n }\r\n }\r\n });\r\n\r\n el.addEventListener('dragleave', function(e) {\r\n e.preventDefault();\r\n });\r\n\r\n el.addEventListener('dragend', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement) {\r\n if (typeof(obj.options.ondragend) == 'function') {\r\n obj.options.ondragend(el, dragElement.element, e);\r\n }\r\n\r\n // Cancelled put element to the original position\r\n if (dragElement.o < dragElement.d) {\r\n e.target.parentNode.insertBefore(dragElement.element, e.target.parentNode.children[dragElement.o]);\r\n } else {\r\n e.target.parentNode.insertBefore(dragElement.element, e.target.parentNode.children[dragElement.o].nextSibling);\r\n }\r\n\r\n dragElement.element.style.opacity = '';\r\n dragElement = null;\r\n }\r\n });\r\n\r\n el.addEventListener('drop', function(e) {\r\n e.preventDefault();\r\n\r\n if (dragElement) {\r\n if (dragElement.o !== dragElement.d) {\r\n if (typeof (obj.options.ondrop) == 'function') {\r\n obj.options.ondrop(el, dragElement.o, dragElement.d, dragElement.element, e.target, e);\r\n }\r\n }\r\n\r\n dragElement.element.style.opacity = '';\r\n dragElement = null;\r\n }\r\n });\r\n\r\n var getElement = function(element) {\r\n var sorting = false;\r\n\r\n function path (element) {\r\n if (element.className) {\r\n if (element.classList.contains('jsorting')) {\r\n sorting = true;\r\n }\r\n }\r\n\r\n if (! sorting) {\r\n path(element.parentNode);\r\n }\r\n }\r\n\r\n path(element);\r\n\r\n return sorting;\r\n }\r\n\r\n for (var i = 0; i < el.children.length; i++) {\r\n if (! el.children[i].hasAttribute('draggable')) {\r\n el.children[i].setAttribute('draggable', 'true');\r\n }\r\n }\r\n\r\n el.val = function() {\r\n var id = null;\r\n var data = [];\r\n for (var i = 0; i < el.children.length; i++) {\r\n if (id = el.children[i].getAttribute('data-id')) {\r\n data.push(id);\r\n }\r\n }\r\n return data;\r\n }\r\n\r\n return el;\r\n}\n;// CONCATENATED MODULE: ./src/utils/lazyloading.js\nfunction LazyLoading(el, options) {\r\n var obj = {}\r\n\r\n // Mandatory options\r\n if (! options.loadUp || typeof(options.loadUp) != 'function') {\r\n options.loadUp = function() {\r\n return false;\r\n }\r\n }\r\n if (! options.loadDown || typeof(options.loadDown) != 'function') {\r\n options.loadDown = function() {\r\n return false;\r\n }\r\n }\r\n // Timer ms\r\n if (! options.timer) {\r\n options.timer = 100;\r\n }\r\n\r\n // Timer\r\n var timeControlLoading = null;\r\n\r\n // Controls\r\n var scrollControls = function(e) {\r\n if (timeControlLoading == null) {\r\n var event = false;\r\n var scrollTop = el.scrollTop;\r\n if (el.scrollTop + (el.clientHeight * 2) >= el.scrollHeight) {\r\n if (options.loadDown()) {\r\n if (scrollTop == el.scrollTop) {\r\n el.scrollTop = el.scrollTop - (el.clientHeight);\r\n }\r\n event = true;\r\n }\r\n } else if (el.scrollTop <= el.clientHeight) {\r\n if (options.loadUp()) {\r\n if (scrollTop == el.scrollTop) {\r\n el.scrollTop = el.scrollTop + (el.clientHeight);\r\n }\r\n event = true;\r\n }\r\n }\r\n\r\n timeControlLoading = setTimeout(function() {\r\n timeControlLoading = null;\r\n }, options.timer);\r\n\r\n if (event) {\r\n if (typeof(options.onupdate) == 'function') {\r\n options.onupdate();\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Onscroll\r\n el.onscroll = function(e) {\r\n scrollControls(e);\r\n }\r\n\r\n el.onwheel = function(e) {\r\n scrollControls(e);\r\n }\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/ajax.js\nfunction Ajax() {\r\n var Component = (function(options, complete) {\r\n if (Array.isArray(options)) {\r\n // Create multiple request controller\r\n var multiple = {\r\n instance: [],\r\n complete: complete,\r\n }\r\n\r\n if (options.length > 0) {\r\n for (var i = 0; i < options.length; i++) {\r\n options[i].multiple = multiple;\r\n multiple.instance.push(Component(options[i]));\r\n }\r\n }\r\n\r\n return multiple;\r\n }\r\n\r\n if (! options.data) {\r\n options.data = {};\r\n }\r\n\r\n if (options.type) {\r\n options.method = options.type;\r\n }\r\n\r\n // Default method\r\n if (! options.method) {\r\n options.method = 'GET';\r\n }\r\n\r\n // Default type\r\n if (! options.dataType) {\r\n options.dataType = 'json';\r\n }\r\n\r\n if (options.data) {\r\n // Parse object to variables format\r\n var parseData = function (value, key) {\r\n var vars = [];\r\n if (value) {\r\n var keys = Object.keys(value);\r\n if (keys.length) {\r\n for (var i = 0; i < keys.length; i++) {\r\n if (key) {\r\n var k = key + '[' + keys[i] + ']';\r\n } else {\r\n var k = keys[i];\r\n }\r\n\r\n if (value[k] instanceof FileList) {\r\n vars[k] = value[keys[i]];\r\n } else if (value[keys[i]] === null || value[keys[i]] === undefined) {\r\n vars[k] = '';\r\n } else if (typeof(value[keys[i]]) == 'object') {\r\n var r = parseData(value[keys[i]], k);\r\n var o = Object.keys(r);\r\n for (var j = 0; j < o.length; j++) {\r\n vars[o[j]] = r[o[j]];\r\n }\r\n } else {\r\n vars[k] = value[keys[i]];\r\n }\r\n }\r\n }\r\n }\r\n\r\n return vars;\r\n }\r\n\r\n var d = parseData(options.data);\r\n var k = Object.keys(d);\r\n\r\n // Data form\r\n if (options.method == 'GET') {\r\n if (k.length) {\r\n var data = [];\r\n for (var i = 0; i < k.length; i++) {\r\n data.push(k[i] + '=' + encodeURIComponent(d[k[i]]));\r\n }\r\n\r\n if (options.url.indexOf('?') < 0) {\r\n options.url += '?';\r\n }\r\n options.url += data.join('&');\r\n }\r\n } else {\r\n var data = new FormData();\r\n for (var i = 0; i < k.length; i++) {\r\n if (d[k[i]] instanceof FileList) {\r\n if (d[k[i]].length) {\r\n for (var j = 0; j < d[k[i]].length; j++) {\r\n data.append(k[i], d[k[i]][j], d[k[i]][j].name);\r\n }\r\n }\r\n } else {\r\n data.append(k[i], d[k[i]]);\r\n }\r\n }\r\n }\r\n }\r\n\r\n var httpRequest = new XMLHttpRequest();\r\n httpRequest.open(options.method, options.url, true);\r\n\r\n if (options.requestedWith) {\r\n httpRequest.setRequestHeader('X-Requested-With', options.requestedWith);\r\n } else {\r\n if (options.requestedWith !== false) {\r\n httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');\r\n }\r\n }\r\n\r\n // Content type\r\n if (options.contentType) {\r\n httpRequest.setRequestHeader('Content-Type', options.contentType);\r\n }\r\n\r\n // Headers\r\n if (options.method === 'POST') {\r\n httpRequest.setRequestHeader('Accept', 'application/json');\r\n } else {\r\n if (options.dataType === 'blob') {\r\n httpRequest.responseType = \"blob\";\r\n } else {\r\n if (! options.contentType) {\r\n if (options.dataType === 'json') {\r\n httpRequest.setRequestHeader('Content-Type', 'text/json');\r\n } else if (options.dataType === 'html') {\r\n httpRequest.setRequestHeader('Content-Type', 'text/html');\r\n }\r\n }\r\n }\r\n }\r\n\r\n // No cache\r\n if (options.cache !== true) {\r\n httpRequest.setRequestHeader('pragma', 'no-cache');\r\n httpRequest.setRequestHeader('cache-control', 'no-cache');\r\n }\r\n\r\n // Authentication\r\n if (options.withCredentials === true) {\r\n httpRequest.withCredentials = true\r\n }\r\n\r\n // Before send\r\n if (typeof(options.beforeSend) == 'function') {\r\n options.beforeSend(httpRequest);\r\n }\r\n\r\n // Before send\r\n if (typeof(Component.beforeSend) == 'function') {\r\n Component.beforeSend(httpRequest);\r\n }\r\n\r\n if (document.ajax && typeof(document.ajax.beforeSend) == 'function') {\r\n document.ajax.beforeSend(httpRequest);\r\n }\r\n\r\n httpRequest.onerror = function() {\r\n if (options.error && typeof(options.error) == 'function') {\r\n options.error({\r\n message: 'Network error: Unable to reach the server.',\r\n status: 0\r\n });\r\n }\r\n }\r\n\r\n httpRequest.ontimeout = function() {\r\n if (options.error && typeof(options.error) == 'function') {\r\n options.error({\r\n message: 'Request timed out after ' + httpRequest.timeout + 'ms.',\r\n status: 0\r\n });\r\n }\r\n }\r\n\r\n httpRequest.onload = function() {\r\n if (httpRequest.status >= 200 && httpRequest.status < 300) {\r\n if (options.dataType === 'json') {\r\n try {\r\n var result = JSON.parse(httpRequest.responseText);\r\n\r\n if (options.success && typeof(options.success) == 'function') {\r\n options.success(result);\r\n }\r\n } catch(err) {\r\n if (options.error && typeof(options.error) == 'function') {\r\n options.error(err, result);\r\n }\r\n }\r\n } else {\r\n if (options.dataType === 'blob') {\r\n var result = httpRequest.response;\r\n } else {\r\n var result = httpRequest.responseText;\r\n }\r\n\r\n if (options.success && typeof(options.success) == 'function') {\r\n options.success(result);\r\n }\r\n }\r\n } else {\r\n if (options.error && typeof(options.error) == 'function') {\r\n options.error(httpRequest.responseText, httpRequest.status);\r\n }\r\n }\r\n\r\n // Global queue\r\n if (Component.queue && Component.queue.length > 0) {\r\n Component.send(Component.queue.shift());\r\n }\r\n\r\n // Global complete method\r\n if (Component.requests && Component.requests.length) {\r\n // Get index of this request in the container\r\n var index = Component.requests.indexOf(httpRequest);\r\n // Remove from the ajax requests container\r\n Component.requests.splice(index, 1);\r\n // Deprecated: Last one?\r\n if (! Component.requests.length) {\r\n // Object event\r\n if (options.complete && typeof(options.complete) == 'function') {\r\n options.complete(result);\r\n }\r\n }\r\n // Group requests\r\n if (options.group) {\r\n if (Component.oncomplete && typeof(Component.oncomplete[options.group]) == 'function') {\r\n if (! Component.pending(options.group)) {\r\n Component.oncomplete[options.group]();\r\n Component.oncomplete[options.group] = null;\r\n }\r\n }\r\n }\r\n // Multiple requests controller\r\n if (options.multiple && options.multiple.instance) {\r\n // Get index of this request in the container\r\n var index = options.multiple.instance.indexOf(httpRequest);\r\n // Remove from the ajax requests container\r\n options.multiple.instance.splice(index, 1);\r\n // If this is the last one call method complete\r\n if (! options.multiple.instance.length) {\r\n if (options.multiple.complete && typeof(options.multiple.complete) == 'function') {\r\n options.multiple.complete(result);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Keep the options\r\n httpRequest.options = options;\r\n // Data\r\n httpRequest.data = data;\r\n\r\n // Queue\r\n if (options.queue === true && Component.requests.length > 0) {\r\n Component.queue.push(httpRequest);\r\n } else {\r\n Component.send(httpRequest)\r\n }\r\n\r\n return httpRequest;\r\n });\r\n\r\n Component.send = function(httpRequest) {\r\n if (httpRequest.data) {\r\n if (Array.isArray(httpRequest.data)) {\r\n httpRequest.send(httpRequest.data.join('&'));\r\n } else {\r\n httpRequest.send(httpRequest.data);\r\n }\r\n } else {\r\n httpRequest.send();\r\n }\r\n\r\n Component.requests.push(httpRequest);\r\n }\r\n\r\n Component.exists = function(url, __callback) {\r\n var http = new XMLHttpRequest();\r\n http.open('HEAD', url, false);\r\n http.send();\r\n if (http.status) {\r\n __callback(http.status);\r\n }\r\n }\r\n\r\n Component.pending = function(group) {\r\n var n = 0;\r\n var o = Component.requests;\r\n if (o && o.length) {\r\n for (var i = 0; i < o.length; i++) {\r\n if (! group || group == o[i].options.group) {\r\n n++\r\n }\r\n }\r\n }\r\n return n;\r\n }\r\n\r\n Component.oncomplete = {};\r\n Component.requests = [];\r\n Component.queue = [];\r\n\r\n return Component\r\n}\r\n\r\n/* harmony default export */ var ajax = (Ajax());\n;// CONCATENATED MODULE: ./src/plugins/animation.js\nfunction Animation() {\r\n const Component = {\r\n loading: {}\r\n }\r\n \r\n Component.loading.show = function(timeout) {\r\n if (! Component.loading.element) {\r\n Component.loading.element = document.createElement('div');\r\n Component.loading.element.className = 'jloading';\r\n }\r\n document.body.appendChild(Component.loading.element);\r\n \r\n // Max timeout in seconds\r\n if (timeout > 0) {\r\n setTimeout(function() {\r\n Component.loading.hide();\r\n }, timeout * 1000)\r\n }\r\n }\r\n \r\n Component.loading.hide = function() {\r\n if (Component.loading.element && Component.loading.element.parentNode) {\r\n document.body.removeChild(Component.loading.element);\r\n }\r\n }\r\n \r\n Component.slideLeft = function (element, direction, done) {\r\n if (direction == true) {\r\n element.classList.add('jslide-left-in');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-left-in');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n } else {\r\n element.classList.add('jslide-left-out');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-left-out');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n }\r\n }\r\n \r\n Component.slideRight = function (element, direction, done) {\r\n if (direction === true) {\r\n element.classList.add('jslide-right-in');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-right-in');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n } else {\r\n element.classList.add('jslide-right-out');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-right-out');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n }\r\n }\r\n \r\n Component.slideTop = function (element, direction, done) {\r\n if (direction === true) {\r\n element.classList.add('jslide-top-in');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-top-in');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n } else {\r\n element.classList.add('jslide-top-out');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-top-out');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n }\r\n }\r\n \r\n Component.slideBottom = function (element, direction, done) {\r\n if (direction === true) {\r\n element.classList.add('jslide-bottom-in');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-bottom-in');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 400);\r\n } else {\r\n element.classList.add('jslide-bottom-out');\r\n setTimeout(function () {\r\n element.classList.remove('jslide-bottom-out');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 100);\r\n }\r\n }\r\n \r\n Component.fadeIn = function (element, done) {\r\n element.style.display = '';\r\n element.classList.add('jfade-in');\r\n setTimeout(function () {\r\n element.classList.remove('jfade-in');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 2000);\r\n }\r\n \r\n Component.fadeOut = function (element, done) {\r\n element.classList.add('jfade-out');\r\n setTimeout(function () {\r\n element.style.display = 'none';\r\n element.classList.remove('jfade-out');\r\n if (typeof (done) == 'function') {\r\n done();\r\n }\r\n }, 1000);\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var animation = (Animation());\n// EXTERNAL MODULE: ./node_modules/@jsuites/utils/dist/index.js\nvar dist = __webpack_require__(791);\nvar dist_default = /*#__PURE__*/__webpack_require__.n(dist);\n;// CONCATENATED MODULE: ./src/plugins/calendar.js\n\r\n\r\n\r\n\r\n\r\n\r\nconst Mask = (dist_default()).Mask;\r\nconst HelpersDate = (dist_default()).Helpers;\r\n\r\nfunction Calendar() {\r\n var Component = (function (el, options) {\r\n // Already created, update options\r\n if (el.calendar) {\r\n return el.calendar.setOptions(options, true);\r\n }\r\n\r\n // New instance\r\n var obj = {type: 'calendar'};\r\n obj.options = {};\r\n\r\n // Date\r\n obj.date = null;\r\n\r\n /**\r\n * Update options\r\n */\r\n obj.setOptions = function (options, reset) {\r\n // Default configuration\r\n var defaults = {\r\n // Render type: [ default | year-month-picker ]\r\n type: 'default',\r\n // Restrictions\r\n validRange: null,\r\n // Starting weekday - 0 for sunday, 6 for saturday\r\n startingDay: null,\r\n // Date format\r\n format: 'DD/MM/YYYY',\r\n // Allow keyboard date entry\r\n readonly: true,\r\n // Today is default\r\n today: false,\r\n // Show timepicker\r\n time: false,\r\n // Show the reset button\r\n resetButton: true,\r\n // Placeholder\r\n placeholder: '',\r\n // Translations can be done here\r\n months: HelpersDate.monthsShort,\r\n monthsFull: HelpersDate.months,\r\n weekdays: HelpersDate.weekdays,\r\n textDone: dictionary.translate('Done'),\r\n textReset: dictionary.translate('Reset'),\r\n textUpdate: dictionary.translate('Update'),\r\n // Value\r\n value: null,\r\n // Fullscreen (this is automatic set for screensize < 800)\r\n fullscreen: false,\r\n // Create the calendar closed as default\r\n opened: false,\r\n // Events\r\n onopen: null,\r\n onclose: null,\r\n onchange: null,\r\n onupdate: null,\r\n // Internal mode controller\r\n mode: null,\r\n position: null,\r\n // Data type\r\n dataType: null,\r\n // Controls\r\n controls: true,\r\n // Auto select\r\n autoSelect: true,\r\n }\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof (obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Register custom months and weekdays with the dictionary for translation\r\n if (obj.options.monthsFull && obj.options.monthsFull !== defaults.monthsFull) {\r\n const englishMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n const translations = {};\r\n for (let i = 0; i < 12; i++) {\r\n if (obj.options.monthsFull[i]) {\r\n translations[englishMonths[i]] = obj.options.monthsFull[i];\r\n }\r\n }\r\n dictionary.setDictionary(translations);\r\n }\r\n\r\n if (obj.options.weekdays && obj.options.weekdays !== defaults.weekdays) {\r\n const englishWeekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\r\n const translations = {};\r\n for (let i = 0; i < 7; i++) {\r\n if (obj.options.weekdays[i]) {\r\n translations[englishWeekdays[i]] = obj.options.weekdays[i];\r\n }\r\n }\r\n dictionary.setDictionary(translations);\r\n }\r\n\r\n // Reset button\r\n if (obj.options.resetButton == false) {\r\n calendarReset.style.display = 'none';\r\n } else {\r\n calendarReset.style.display = '';\r\n }\r\n\r\n // Readonly\r\n if (obj.options.readonly) {\r\n el.setAttribute('readonly', 'readonly');\r\n } else {\r\n el.removeAttribute('readonly');\r\n }\r\n\r\n // Placeholder\r\n if (obj.options.placeholder) {\r\n el.setAttribute('placeholder', obj.options.placeholder);\r\n } else {\r\n el.removeAttribute('placeholder');\r\n }\r\n\r\n if (helpers.isNumeric(obj.options.value) && obj.options.value > 0) {\r\n obj.options.value = Component.numToDate(obj.options.value);\r\n // Data type numeric\r\n obj.options.dataType = 'numeric';\r\n }\r\n\r\n // Texts\r\n calendarReset.innerHTML = obj.options.textReset;\r\n calendarConfirm.innerHTML = obj.options.textDone;\r\n calendarControlsUpdateButton.innerHTML = obj.options.textUpdate;\r\n\r\n // Define mask\r\n if (obj.options.format) {\r\n el.setAttribute('data-mask', obj.options.format.toLowerCase());\r\n }\r\n\r\n // Value\r\n if (!obj.options.value && obj.options.today) {\r\n var value = Component.now();\r\n } else {\r\n var value = obj.options.value;\r\n }\r\n\r\n // Set internal date\r\n if (value) {\r\n // Force the update\r\n obj.options.value = null;\r\n // New value\r\n obj.setValue(value);\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n /**\r\n * Open the calendar\r\n */\r\n obj.open = function (value) {\r\n if (!calendar.classList.contains('jcalendar-focus')) {\r\n if (!calendar.classList.contains('jcalendar-inline')) {\r\n // Current\r\n Component.current = obj;\r\n // Start tracking\r\n tracking(obj, true);\r\n // Create the days\r\n obj.getDays();\r\n // Render months\r\n if (obj.options.type == 'year-month-picker') {\r\n obj.getMonths();\r\n }\r\n // Get time\r\n if (obj.options.time) {\r\n calendarSelectHour.value = obj.date[3];\r\n calendarSelectMin.value = obj.date[4];\r\n }\r\n\r\n // Show calendar\r\n calendar.classList.add('jcalendar-focus');\r\n\r\n // Get the position of the corner helper\r\n if (helpers.getWindowWidth() < 800 || obj.options.fullscreen) {\r\n calendar.classList.add('jcalendar-fullsize');\r\n // Animation\r\n animation.slideBottom(calendarContent, 1);\r\n } else {\r\n calendar.classList.remove('jcalendar-fullsize');\r\n\r\n var rect = el.getBoundingClientRect();\r\n var rectContent = calendarContent.getBoundingClientRect();\r\n\r\n if (obj.options.position) {\r\n calendarContainer.style.position = 'fixed';\r\n if (window.innerHeight < rect.bottom + rectContent.height) {\r\n calendarContainer.style.top = (rect.top - (rectContent.height + 2)) + 'px';\r\n } else {\r\n calendarContainer.style.top = (rect.top + rect.height + 2) + 'px';\r\n }\r\n calendarContainer.style.left = rect.left + 'px';\r\n } else {\r\n if (window.innerHeight < rect.bottom + rectContent.height) {\r\n var d = -1 * (rect.height + rectContent.height + 2);\r\n if (d + rect.top < 0) {\r\n d = -1 * (rect.top + rect.height);\r\n }\r\n calendarContainer.style.top = d + 'px';\r\n } else {\r\n calendarContainer.style.top = 2 + 'px';\r\n }\r\n\r\n if (window.innerWidth < rect.left + rectContent.width) {\r\n var d = window.innerWidth - (rect.left + rectContent.width + 20);\r\n calendarContainer.style.left = d + 'px';\r\n } else {\r\n calendarContainer.style.left = '0px';\r\n }\r\n }\r\n }\r\n\r\n // Events\r\n if (typeof (obj.options.onopen) == 'function') {\r\n obj.options.onopen(el);\r\n }\r\n }\r\n }\r\n }\r\n\r\n obj.close = function (ignoreEvents, update) {\r\n if (obj.options.autoSelect !== true && typeof(update) === 'undefined') {\r\n update = false;\r\n }\r\n if (calendar.classList.contains('jcalendar-focus')) {\r\n if (update !== false) {\r\n var element = calendar.querySelector('.jcalendar-selected');\r\n\r\n if (typeof (update) == 'string') {\r\n var value = update;\r\n } else if (!element || element.classList.contains('jcalendar-disabled')) {\r\n var value = obj.options.value\r\n } else {\r\n var value = obj.getValue();\r\n }\r\n\r\n obj.setValue(value);\r\n } else {\r\n let value = obj.options.value || '';\r\n obj.options.value = null;\r\n obj.setValue(value)\r\n }\r\n\r\n // Events\r\n if (!ignoreEvents && typeof (obj.options.onclose) == 'function') {\r\n obj.options.onclose(el);\r\n }\r\n // Hide\r\n calendar.classList.remove('jcalendar-focus');\r\n // Stop tracking\r\n tracking(obj, false);\r\n // Current\r\n Component.current = null;\r\n }\r\n\r\n return obj.options.value;\r\n }\r\n\r\n obj.prev = function () {\r\n // Check if the visualization is the days picker or years picker\r\n if (obj.options.mode == 'years') {\r\n obj.date[0] = obj.date[0] - 12;\r\n\r\n // Update picker table of days\r\n obj.getYears();\r\n } else if (obj.options.mode == 'months') {\r\n obj.date[0] = parseInt(obj.date[0]) - 1;\r\n // Update picker table of months\r\n obj.getMonths();\r\n } else {\r\n // Go to the previous month\r\n if (obj.date[1] < 2) {\r\n obj.date[0] = obj.date[0] - 1;\r\n obj.date[1] = 12;\r\n } else {\r\n obj.date[1] = obj.date[1] - 1;\r\n }\r\n\r\n // Update picker table of days\r\n obj.getDays();\r\n }\r\n }\r\n\r\n obj.next = function () {\r\n // Check if the visualization is the days picker or years picker\r\n if (obj.options.mode == 'years') {\r\n obj.date[0] = parseInt(obj.date[0]) + 12;\r\n\r\n // Update picker table of days\r\n obj.getYears();\r\n } else if (obj.options.mode == 'months') {\r\n obj.date[0] = parseInt(obj.date[0]) + 1;\r\n // Update picker table of months\r\n obj.getMonths();\r\n } else {\r\n // Go to the previous month\r\n if (obj.date[1] > 11) {\r\n obj.date[0] = parseInt(obj.date[0]) + 1;\r\n obj.date[1] = 1;\r\n } else {\r\n obj.date[1] = parseInt(obj.date[1]) + 1;\r\n }\r\n\r\n // Update picker table of days\r\n obj.getDays();\r\n }\r\n }\r\n\r\n /**\r\n * Set today\r\n */\r\n obj.setToday = function () {\r\n // Today\r\n var value = new Date().toISOString().substr(0, 10);\r\n // Change value\r\n obj.setValue(value);\r\n // Value\r\n return value;\r\n }\r\n\r\n obj.setValue = function (val) {\r\n if (!val) {\r\n val = '' + val;\r\n }\r\n // Values\r\n var newValue = val;\r\n var oldValue = obj.options.value;\r\n\r\n if (oldValue != newValue) {\r\n // Set label\r\n if (!newValue) {\r\n obj.date = null;\r\n var val = '';\r\n el.classList.remove('jcalendar_warning');\r\n el.title = '';\r\n } else {\r\n var value = obj.setLabel(newValue, obj.options);\r\n var date = newValue.split(' ');\r\n if (!date[1]) {\r\n date[1] = '00:00:00';\r\n }\r\n var time = date[1].split(':')\r\n var date = date[0].split('-');\r\n var y = parseInt(date[0]);\r\n var m = parseInt(date[1]);\r\n var d = parseInt(date[2]);\r\n var h = parseInt(time[0]);\r\n var i = parseInt(time[1]);\r\n obj.date = [y, m, d, h, i, 0];\r\n var val = obj.setLabel(newValue, obj.options);\r\n\r\n // Current selection day\r\n var current = Component.now(new Date(y, m - 1, d), true);\r\n\r\n // Available ranges\r\n if (obj.options.validRange) {\r\n if (!obj.options.validRange[0] || current >= obj.options.validRange[0]) {\r\n var test1 = true;\r\n } else {\r\n var test1 = false;\r\n }\r\n\r\n if (!obj.options.validRange[1] || current <= obj.options.validRange[1]) {\r\n var test2 = true;\r\n } else {\r\n var test2 = false;\r\n }\r\n\r\n if (!(test1 && test2)) {\r\n el.classList.add('jcalendar_warning');\r\n el.title = dictionary.translate('Date outside the valid range');\r\n } else {\r\n el.classList.remove('jcalendar_warning');\r\n el.title = '';\r\n }\r\n } else {\r\n el.classList.remove('jcalendar_warning');\r\n el.title = '';\r\n }\r\n }\r\n\r\n // New value\r\n obj.options.value = newValue;\r\n\r\n if (typeof (obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, newValue, oldValue);\r\n }\r\n\r\n // Lemonade JS\r\n if (el.value != val) {\r\n el.value = val;\r\n if (typeof (el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n }\r\n\r\n if (obj.date) {\r\n obj.getDays();\r\n // Render months\r\n if (obj.options.type == 'year-month-picker') {\r\n obj.getMonths();\r\n }\r\n }\r\n }\r\n\r\n obj.getValue = function () {\r\n if (obj.date) {\r\n if (obj.options.time) {\r\n return helpers.two(obj.date[0]) + '-' + helpers.two(obj.date[1]) + '-' + helpers.two(obj.date[2]) + ' ' + helpers.two(obj.date[3]) + ':' + helpers.two(obj.date[4]) + ':' + helpers.two(0);\r\n } else {\r\n return helpers.two(obj.date[0]) + '-' + helpers.two(obj.date[1]) + '-' + helpers.two(obj.date[2]) + ' ' + helpers.two(0) + ':' + helpers.two(0) + ':' + helpers.two(0);\r\n }\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n\r\n /**\r\n * Calendar\r\n */\r\n obj.update = function (element, v) {\r\n if (element.classList.contains('jcalendar-disabled')) {\r\n // Do nothing\r\n } else {\r\n var elements = calendar.querySelector('.jcalendar-selected');\r\n if (elements) {\r\n elements.classList.remove('jcalendar-selected');\r\n }\r\n element.classList.add('jcalendar-selected');\r\n\r\n if (element.classList.contains('jcalendar-set-month')) {\r\n obj.date[1] = v;\r\n obj.date[2] = 1; // first day of the month\r\n } else {\r\n obj.date[2] = element.innerText;\r\n }\r\n\r\n if (!obj.options.time) {\r\n obj.close(null, true);\r\n } else {\r\n obj.date[3] = calendarSelectHour.value;\r\n obj.date[4] = calendarSelectMin.value;\r\n }\r\n }\r\n\r\n // Update\r\n updateActions();\r\n }\r\n\r\n /**\r\n * Set to blank\r\n */\r\n obj.reset = function () {\r\n // Close calendar\r\n obj.setValue('');\r\n obj.date = null;\r\n obj.close(false, false);\r\n }\r\n\r\n /**\r\n * Get calendar days\r\n */\r\n obj.getDays = function () {\r\n // Mode\r\n obj.options.mode = 'days';\r\n\r\n // Setting current values in case of NULLs\r\n var date = new Date();\r\n\r\n // Current selection\r\n var year = obj.date && helpers.isNumeric(obj.date[0]) ? obj.date[0] : parseInt(date.getFullYear());\r\n var month = obj.date && helpers.isNumeric(obj.date[1]) ? obj.date[1] : parseInt(date.getMonth()) + 1;\r\n var day = obj.date && helpers.isNumeric(obj.date[2]) ? obj.date[2] : parseInt(date.getDate());\r\n var hour = obj.date && helpers.isNumeric(obj.date[3]) ? obj.date[3] : parseInt(date.getHours());\r\n var min = obj.date && helpers.isNumeric(obj.date[4]) ? obj.date[4] : parseInt(date.getMinutes());\r\n\r\n // Selection container\r\n obj.date = [year, month, day, hour, min, 0];\r\n\r\n // Update title\r\n calendarLabelYear.innerHTML = year;\r\n calendarLabelMonth.innerHTML = obj.options.months[month - 1];\r\n\r\n // Current month and Year\r\n var isCurrentMonthAndYear = (date.getMonth() == month - 1) && (date.getFullYear() == year) ? true : false;\r\n var currentDay = date.getDate();\r\n\r\n // Number of days in the month\r\n var date = new Date(year, month, 0, 0, 0);\r\n var numberOfDays = date.getDate();\r\n\r\n // First day\r\n var date = new Date(year, month - 1, 0, 0, 0);\r\n var firstDay = date.getDay() + 1;\r\n\r\n // Index value\r\n var index = obj.options.startingDay || 0;\r\n\r\n // First of day relative to the starting calendar weekday\r\n firstDay = firstDay - index;\r\n\r\n // Reset table\r\n calendarBody.innerHTML = '';\r\n\r\n // Weekdays Row\r\n var row = document.createElement('tr');\r\n row.setAttribute('align', 'center');\r\n calendarBody.appendChild(row);\r\n\r\n // Create weekdays row\r\n for (var i = 0; i < 7; i++) {\r\n var cell = document.createElement('td');\r\n cell.classList.add('jcalendar-weekday')\r\n cell.innerHTML = obj.options.weekdays[index].substr(0, 1);\r\n row.appendChild(cell);\r\n // Next week day\r\n index++;\r\n // Restart index\r\n if (index > 6) {\r\n index = 0;\r\n }\r\n }\r\n\r\n // Index of days\r\n var index = 0;\r\n var d = 0;\r\n\r\n // Calendar table\r\n for (var j = 0; j < 6; j++) {\r\n // Reset cells container\r\n var row = document.createElement('tr');\r\n row.setAttribute('align', 'center');\r\n row.style.height = '34px';\r\n\r\n // Create cells\r\n for (var i = 0; i < 7; i++) {\r\n // Create cell\r\n var cell = document.createElement('td');\r\n cell.classList.add('jcalendar-set-day');\r\n\r\n if (index >= firstDay && index < (firstDay + numberOfDays)) {\r\n // Day cell\r\n d++;\r\n cell.innerHTML = d;\r\n\r\n // Selected\r\n if (d == day) {\r\n cell.classList.add('jcalendar-selected');\r\n }\r\n\r\n // Current selection day is today\r\n if (isCurrentMonthAndYear && currentDay == d) {\r\n cell.style.fontWeight = 'bold';\r\n }\r\n\r\n // Current selection day\r\n var current = Component.now(new Date(year, month - 1, d), true);\r\n\r\n // Available ranges\r\n if (obj.options.validRange) {\r\n if (!obj.options.validRange[0] || current >= obj.options.validRange[0]) {\r\n var test1 = true;\r\n } else {\r\n var test1 = false;\r\n }\r\n\r\n if (!obj.options.validRange[1] || current <= obj.options.validRange[1]) {\r\n var test2 = true;\r\n } else {\r\n var test2 = false;\r\n }\r\n\r\n if (!(test1 && test2)) {\r\n cell.classList.add('jcalendar-disabled');\r\n }\r\n }\r\n }\r\n // Day cell\r\n row.appendChild(cell);\r\n // Index\r\n index++;\r\n }\r\n\r\n // Add cell to the calendar body\r\n calendarBody.appendChild(row);\r\n }\r\n\r\n // Show time controls\r\n if (obj.options.time) {\r\n calendarControlsTime.style.display = '';\r\n } else {\r\n calendarControlsTime.style.display = 'none';\r\n }\r\n\r\n // Update\r\n updateActions();\r\n }\r\n\r\n obj.getMonths = function () {\r\n // Mode\r\n obj.options.mode = 'months';\r\n\r\n // Loading month labels\r\n var months = obj.options.months;\r\n\r\n // Value\r\n var value = obj.options.value;\r\n\r\n // Current date\r\n var date = new Date();\r\n var currentYear = parseInt(date.getFullYear());\r\n var currentMonth = parseInt(date.getMonth()) + 1;\r\n var selectedYear = obj.date && helpers.isNumeric(obj.date[0]) ? obj.date[0] : currentYear;\r\n var selectedMonth = obj.date && helpers.isNumeric(obj.date[1]) ? obj.date[1] : currentMonth;\r\n\r\n // Update title\r\n calendarLabelYear.innerHTML = obj.date[0];\r\n calendarLabelMonth.innerHTML = months[selectedMonth - 1];\r\n\r\n // Table\r\n var table = document.createElement('table');\r\n table.setAttribute('width', '100%');\r\n\r\n // Row\r\n var row = null;\r\n\r\n // Calendar table\r\n for (var i = 0; i < 12; i++) {\r\n if (!(i % 4)) {\r\n // Reset cells container\r\n var row = document.createElement('tr');\r\n row.setAttribute('align', 'center');\r\n table.appendChild(row);\r\n }\r\n\r\n // Create cell\r\n var cell = document.createElement('td');\r\n cell.classList.add('jcalendar-set-month');\r\n cell.setAttribute('data-value', i + 1);\r\n cell.innerText = months[i];\r\n\r\n if (obj.options.validRange) {\r\n var current = selectedYear + '-' + helpers.two(i + 1);\r\n if (!obj.options.validRange[0] || current >= obj.options.validRange[0].substr(0, 7)) {\r\n var test1 = true;\r\n } else {\r\n var test1 = false;\r\n }\r\n\r\n if (!obj.options.validRange[1] || current <= obj.options.validRange[1].substr(0, 7)) {\r\n var test2 = true;\r\n } else {\r\n var test2 = false;\r\n }\r\n\r\n if (!(test1 && test2)) {\r\n cell.classList.add('jcalendar-disabled');\r\n }\r\n }\r\n\r\n if (i + 1 == selectedMonth) {\r\n cell.classList.add('jcalendar-selected');\r\n }\r\n\r\n if (currentYear == selectedYear && i + 1 == currentMonth) {\r\n cell.style.fontWeight = 'bold';\r\n }\r\n\r\n row.appendChild(cell);\r\n }\r\n\r\n calendarBody.innerHTML = '
';\r\n calendarBody.children[0].children[0].appendChild(table);\r\n\r\n // Update\r\n updateActions();\r\n }\r\n\r\n obj.getYears = function () {\r\n // Mode\r\n obj.options.mode = 'years';\r\n\r\n // Current date\r\n var date = new Date();\r\n var currentYear = date.getFullYear();\r\n var selectedYear = obj.date && helpers.isNumeric(obj.date[0]) ? obj.date[0] : parseInt(date.getFullYear());\r\n\r\n // Array of years\r\n var y = [];\r\n for (var i = 0; i < 25; i++) {\r\n y[i] = parseInt(obj.date[0]) + (i - 12);\r\n }\r\n\r\n // Assembling the year tables\r\n var table = document.createElement('table');\r\n table.setAttribute('width', '100%');\r\n\r\n for (var i = 0; i < 25; i++) {\r\n if (!(i % 5)) {\r\n // Reset cells container\r\n var row = document.createElement('tr');\r\n row.setAttribute('align', 'center');\r\n table.appendChild(row);\r\n }\r\n\r\n // Create cell\r\n var cell = document.createElement('td');\r\n cell.classList.add('jcalendar-set-year');\r\n cell.innerText = y[i];\r\n\r\n if (selectedYear == y[i]) {\r\n cell.classList.add('jcalendar-selected');\r\n }\r\n\r\n if (currentYear == y[i]) {\r\n cell.style.fontWeight = 'bold';\r\n }\r\n\r\n row.appendChild(cell);\r\n }\r\n\r\n calendarBody.innerHTML = '
';\r\n calendarBody.firstChild.firstChild.appendChild(table);\r\n\r\n // Update\r\n updateActions();\r\n }\r\n\r\n obj.setLabel = function (value, mixed) {\r\n return Component.getDateString(value, mixed);\r\n }\r\n\r\n obj.fromFormatted = function (value, format) {\r\n return Component.extractDateFromString(value, format);\r\n }\r\n\r\n var mouseUpControls = function (e) {\r\n var element = helpers.findElement(e.target, 'jcalendar-container');\r\n if (element) {\r\n var action = e.target.className;\r\n\r\n // Object id\r\n if (action == 'jcalendar-prev') {\r\n obj.prev();\r\n } else if (action == 'jcalendar-next') {\r\n obj.next();\r\n } else if (action == 'jcalendar-month') {\r\n obj.getMonths();\r\n } else if (action == 'jcalendar-year') {\r\n obj.getYears();\r\n } else if (action == 'jcalendar-set-year') {\r\n obj.date[0] = e.target.innerText;\r\n if (obj.options.type == 'year-month-picker') {\r\n obj.getMonths();\r\n } else {\r\n obj.getDays();\r\n }\r\n } else if (e.target.classList.contains('jcalendar-set-month')) {\r\n var month = parseInt(e.target.getAttribute('data-value'));\r\n if (obj.options.type == 'year-month-picker') {\r\n obj.update(e.target, month);\r\n } else {\r\n obj.date[1] = month;\r\n obj.getDays();\r\n }\r\n } else if (action == 'jcalendar-confirm' || action == 'jcalendar-update' || action == 'jcalendar-close') {\r\n obj.close(null, true);\r\n } else if (action == 'jcalendar-backdrop') {\r\n obj.close(false, false);\r\n } else if (action == 'jcalendar-reset') {\r\n obj.reset();\r\n } else if (e.target.classList.contains('jcalendar-set-day') && e.target.innerText) {\r\n obj.update(e.target);\r\n }\r\n } else {\r\n obj.close(false, false);\r\n }\r\n }\r\n\r\n var keyUpControls = function (e) {\r\n if (e.target.value && e.target.value.length > 3) {\r\n var test = Component.extractDateFromString(e.target.value, obj.options.format);\r\n if (test) {\r\n obj.setValue(test);\r\n }\r\n }\r\n }\r\n\r\n // Update actions button\r\n var updateActions = function () {\r\n var currentDay = calendar.querySelector('.jcalendar-selected');\r\n\r\n if (currentDay && currentDay.classList.contains('jcalendar-disabled')) {\r\n calendarControlsUpdateButton.setAttribute('disabled', 'disabled');\r\n calendarSelectHour.setAttribute('disabled', 'disabled');\r\n calendarSelectMin.setAttribute('disabled', 'disabled');\r\n } else {\r\n calendarControlsUpdateButton.removeAttribute('disabled');\r\n calendarSelectHour.removeAttribute('disabled');\r\n calendarSelectMin.removeAttribute('disabled');\r\n }\r\n\r\n // Event\r\n if (typeof (obj.options.onupdate) == 'function') {\r\n obj.options.onupdate(el, obj.getValue());\r\n }\r\n }\r\n\r\n var calendar = null;\r\n var calendarReset = null;\r\n var calendarConfirm = null;\r\n var calendarContainer = null;\r\n var calendarContent = null;\r\n var calendarLabelYear = null;\r\n var calendarLabelMonth = null;\r\n var calendarTable = null;\r\n var calendarBody = null;\r\n\r\n var calendarControls = null;\r\n var calendarControlsTime = null;\r\n var calendarControlsUpdate = null;\r\n var calendarControlsUpdateButton = null;\r\n var calendarSelectHour = null;\r\n var calendarSelectMin = null;\r\n\r\n var init = function () {\r\n // Get value from initial element if that is an input\r\n if (el.tagName == 'INPUT' && el.value) {\r\n options.value = el.value;\r\n }\r\n\r\n // Calendar DOM elements\r\n calendarReset = document.createElement('div');\r\n calendarReset.className = 'jcalendar-reset';\r\n\r\n calendarConfirm = document.createElement('div');\r\n calendarConfirm.className = 'jcalendar-confirm';\r\n\r\n calendarControls = document.createElement('div');\r\n calendarControls.className = 'jcalendar-controls'\r\n calendarControls.style.borderBottom = '1px solid #ddd';\r\n calendarControls.appendChild(calendarReset);\r\n calendarControls.appendChild(calendarConfirm);\r\n\r\n calendarContainer = document.createElement('div');\r\n calendarContainer.className = 'jcalendar-container';\r\n calendarContent = document.createElement('div');\r\n calendarContent.className = 'jcalendar-content';\r\n calendarContainer.appendChild(calendarContent);\r\n\r\n // Main element\r\n if (el.tagName == 'DIV') {\r\n calendar = el;\r\n calendar.classList.add('jcalendar-inline');\r\n } else {\r\n // Add controls to the screen\r\n calendarContent.appendChild(calendarControls);\r\n\r\n calendar = document.createElement('div');\r\n calendar.className = 'jcalendar';\r\n }\r\n calendar.classList.add('jcalendar-container');\r\n calendar.appendChild(calendarContainer);\r\n\r\n // Table container\r\n var calendarTableContainer = document.createElement('div');\r\n calendarTableContainer.className = 'jcalendar-table';\r\n calendarContent.appendChild(calendarTableContainer);\r\n\r\n // Previous button\r\n var calendarHeaderPrev = document.createElement('td');\r\n calendarHeaderPrev.setAttribute('colspan', '2');\r\n calendarHeaderPrev.className = 'jcalendar-prev';\r\n\r\n // Header with year and month\r\n calendarLabelYear = document.createElement('span');\r\n calendarLabelYear.className = 'jcalendar-year';\r\n calendarLabelMonth = document.createElement('span');\r\n calendarLabelMonth.className = 'jcalendar-month';\r\n\r\n var calendarHeaderTitle = document.createElement('td');\r\n calendarHeaderTitle.className = 'jcalendar-header';\r\n calendarHeaderTitle.setAttribute('colspan', '3');\r\n calendarHeaderTitle.appendChild(calendarLabelMonth);\r\n calendarHeaderTitle.appendChild(calendarLabelYear);\r\n\r\n var calendarHeaderNext = document.createElement('td');\r\n calendarHeaderNext.setAttribute('colspan', '2');\r\n calendarHeaderNext.className = 'jcalendar-next';\r\n\r\n var calendarHeader = document.createElement('thead');\r\n var calendarHeaderRow = document.createElement('tr');\r\n calendarHeaderRow.appendChild(calendarHeaderPrev);\r\n calendarHeaderRow.appendChild(calendarHeaderTitle);\r\n calendarHeaderRow.appendChild(calendarHeaderNext);\r\n calendarHeader.appendChild(calendarHeaderRow);\r\n\r\n calendarTable = document.createElement('table');\r\n calendarBody = document.createElement('tbody');\r\n calendarTable.setAttribute('cellpadding', '0');\r\n calendarTable.setAttribute('cellspacing', '0');\r\n calendarTable.appendChild(calendarHeader);\r\n calendarTable.appendChild(calendarBody);\r\n calendarTableContainer.appendChild(calendarTable);\r\n\r\n calendarSelectHour = document.createElement('select');\r\n calendarSelectHour.className = 'jcalendar-select';\r\n calendarSelectHour.onchange = function () {\r\n obj.date[3] = this.value;\r\n\r\n // Event\r\n if (typeof (obj.options.onupdate) == 'function') {\r\n obj.options.onupdate(el, obj.getValue());\r\n }\r\n }\r\n\r\n for (var i = 0; i < 24; i++) {\r\n var element = document.createElement('option');\r\n element.value = i;\r\n element.innerHTML = helpers.two(i);\r\n calendarSelectHour.appendChild(element);\r\n }\r\n\r\n calendarSelectMin = document.createElement('select');\r\n calendarSelectMin.className = 'jcalendar-select';\r\n calendarSelectMin.onchange = function () {\r\n obj.date[4] = this.value;\r\n\r\n // Event\r\n if (typeof (obj.options.onupdate) == 'function') {\r\n obj.options.onupdate(el, obj.getValue());\r\n }\r\n }\r\n\r\n for (var i = 0; i < 60; i++) {\r\n var element = document.createElement('option');\r\n element.value = i;\r\n element.innerHTML = helpers.two(i);\r\n calendarSelectMin.appendChild(element);\r\n }\r\n\r\n // Footer controls\r\n var calendarControlsFooter = document.createElement('div');\r\n calendarControlsFooter.className = 'jcalendar-controls';\r\n\r\n calendarControlsTime = document.createElement('div');\r\n calendarControlsTime.className = 'jcalendar-time';\r\n calendarControlsTime.style.maxWidth = '140px';\r\n calendarControlsTime.appendChild(calendarSelectHour);\r\n calendarControlsTime.appendChild(calendarSelectMin);\r\n\r\n calendarControlsUpdateButton = document.createElement('button');\r\n calendarControlsUpdateButton.setAttribute('type', 'button');\r\n calendarControlsUpdateButton.className = 'jcalendar-update';\r\n\r\n calendarControlsUpdate = document.createElement('div');\r\n calendarControlsUpdate.style.flexGrow = '10';\r\n calendarControlsUpdate.appendChild(calendarControlsUpdateButton);\r\n calendarControlsFooter.appendChild(calendarControlsTime);\r\n\r\n // Only show the update button for input elements\r\n if (el.tagName == 'INPUT') {\r\n calendarControlsFooter.appendChild(calendarControlsUpdate);\r\n }\r\n\r\n calendarContent.appendChild(calendarControlsFooter);\r\n\r\n var calendarBackdrop = document.createElement('div');\r\n calendarBackdrop.className = 'jcalendar-backdrop';\r\n calendar.appendChild(calendarBackdrop);\r\n\r\n // Handle events\r\n el.addEventListener(\"keyup\", keyUpControls);\r\n\r\n // Add global events\r\n calendar.addEventListener(\"swipeleft\", function (e) {\r\n animation.slideLeft(calendarTable, 0, function () {\r\n obj.next();\r\n animation.slideRight(calendarTable, 1);\r\n });\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n calendar.addEventListener(\"swiperight\", function (e) {\r\n animation.slideRight(calendarTable, 0, function () {\r\n obj.prev();\r\n animation.slideLeft(calendarTable, 1);\r\n });\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n if ('ontouchend' in document.documentElement === true) {\r\n calendar.addEventListener(\"touchend\", mouseUpControls);\r\n el.addEventListener(\"touchend\", obj.open);\r\n } else {\r\n calendar.addEventListener(\"mouseup\", mouseUpControls);\r\n el.addEventListener(\"mouseup\", obj.open);\r\n }\r\n\r\n // Global controls\r\n if (!Component.hasEvents) {\r\n // Execute only one time\r\n Component.hasEvents = true;\r\n // Enter and Esc\r\n document.addEventListener(\"keydown\", Component.keydown);\r\n }\r\n\r\n // Set configuration\r\n obj.setOptions(options);\r\n\r\n // Append element to the DOM\r\n if (el.tagName == 'INPUT') {\r\n el.parentNode.insertBefore(calendar, el.nextSibling);\r\n // Add properties\r\n el.setAttribute('autocomplete', 'off');\r\n // Element\r\n el.classList.add('jcalendar-input');\r\n // Value\r\n el.value = obj.setLabel(obj.getValue(), obj.options);\r\n } else {\r\n // Get days\r\n obj.getDays();\r\n // Hour\r\n if (obj.options.time) {\r\n calendarSelectHour.value = obj.date[3];\r\n calendarSelectMin.value = obj.date[4];\r\n }\r\n }\r\n\r\n // Controls - must be set before open() for correct height calculations\r\n if (obj.options.controls == false) {\r\n calendarContainer.classList.add('jcalendar-hide-controls');\r\n }\r\n\r\n // Default opened\r\n if (obj.options.opened == true) {\r\n obj.open();\r\n }\r\n\r\n // Change method\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function (val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Keep object available from the node\r\n el.calendar = calendar.calendar = obj;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n });\r\n\r\n Component.keydown = function (e) {\r\n var calendar = null;\r\n if (calendar = Component.current) {\r\n if (e.which == 13) {\r\n // ENTER\r\n calendar.close(false, true);\r\n } else if (e.which == 27) {\r\n // ESC\r\n calendar.close(false, false);\r\n }\r\n }\r\n }\r\n\r\n Component.prettify = function (d, texts) {\r\n if (!texts) {\r\n var texts = {\r\n justNow: 'Just now',\r\n xMinutesAgo: '{0}m ago',\r\n xHoursAgo: '{0}h ago',\r\n xDaysAgo: '{0}d ago',\r\n xWeeksAgo: '{0}w ago',\r\n xMonthsAgo: '{0} mon ago',\r\n xYearsAgo: '{0}y ago',\r\n }\r\n }\r\n\r\n if (d.indexOf('GMT') === -1 && d.indexOf('Z') === -1) {\r\n d += ' GMT';\r\n }\r\n\r\n var d1 = new Date();\r\n var d2 = new Date(d);\r\n var total = parseInt((d1 - d2) / 1000 / 60);\r\n\r\n String.prototype.format = function (o) {\r\n return this.replace('{0}', o);\r\n }\r\n\r\n if (total == 0) {\r\n var text = texts.justNow;\r\n } else if (total < 90) {\r\n var text = texts.xMinutesAgo.format(total);\r\n } else if (total < 1440) { // One day\r\n var text = texts.xHoursAgo.format(Math.round(total / 60));\r\n } else if (total < 20160) { // 14 days\r\n var text = texts.xDaysAgo.format(Math.round(total / 1440));\r\n } else if (total < 43200) { // 30 days\r\n var text = texts.xWeeksAgo.format(Math.round(total / 10080));\r\n } else if (total < 1036800) { // 24 months\r\n var text = texts.xMonthsAgo.format(Math.round(total / 43200));\r\n } else { // 24 months+\r\n var text = texts.xYearsAgo.format(Math.round(total / 525600));\r\n }\r\n\r\n return text;\r\n }\r\n\r\n Component.prettifyAll = function () {\r\n var elements = document.querySelectorAll('.prettydate');\r\n for (var i = 0; i < elements.length; i++) {\r\n if (elements[i].getAttribute('data-date')) {\r\n elements[i].innerHTML = Component.prettify(elements[i].getAttribute('data-date'));\r\n } else {\r\n if (elements[i].innerHTML) {\r\n elements[i].setAttribute('title', elements[i].innerHTML);\r\n elements[i].setAttribute('data-date', elements[i].innerHTML);\r\n elements[i].innerHTML = Component.prettify(elements[i].innerHTML);\r\n }\r\n }\r\n }\r\n }\r\n\r\n Component.now = HelpersDate.now;\r\n Component.toArray = HelpersDate.toArray;\r\n Component.dateToNum = HelpersDate.dateToNum\r\n Component.numToDate = HelpersDate.numToDate;\r\n Component.weekdays = HelpersDate.weekdays;\r\n Component.months = HelpersDate.months;\r\n Component.weekdaysShort = HelpersDate.weekdaysShort;\r\n Component.monthsShort = HelpersDate.monthsShort;\r\n\r\n // Legacy shortcut\r\n Component.extractDateFromString = Mask.extractDateFromString;\r\n Component.getDateString = Mask.getDateString;\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var calendar = (Calendar());\n;// CONCATENATED MODULE: ./src/plugins/palette.js\n// More palettes https://coolors.co/ or https://gka.github.io/palettes/#/10|s|003790,005647,ffffe0|ffffe0,ff005e,93003a|1|1\r\n\r\nfunction Palette() {\r\n\r\n var palette = {\r\n material: [\r\n [\"#ffebee\", \"#fce4ec\", \"#f3e5f5\", \"#e8eaf6\", \"#e3f2fd\", \"#e0f7fa\", \"#e0f2f1\", \"#e8f5e9\", \"#f1f8e9\", \"#f9fbe7\", \"#fffde7\", \"#fff8e1\", \"#fff3e0\", \"#fbe9e7\", \"#efebe9\", \"#fafafa\", \"#eceff1\"],\r\n [\"#ffcdd2\", \"#f8bbd0\", \"#e1bee7\", \"#c5cae9\", \"#bbdefb\", \"#b2ebf2\", \"#b2dfdb\", \"#c8e6c9\", \"#dcedc8\", \"#f0f4c3\", \"#fff9c4\", \"#ffecb3\", \"#ffe0b2\", \"#ffccbc\", \"#d7ccc8\", \"#f5f5f5\", \"#cfd8dc\"],\r\n [\"#ef9a9a\", \"#f48fb1\", \"#ce93d8\", \"#9fa8da\", \"#90caf9\", \"#80deea\", \"#80cbc4\", \"#a5d6a7\", \"#c5e1a5\", \"#e6ee9c\", \"#fff59d\", \"#ffe082\", \"#ffcc80\", \"#ffab91\", \"#bcaaa4\", \"#eeeeee\", \"#b0bec5\"],\r\n [\"#e57373\", \"#f06292\", \"#ba68c8\", \"#7986cb\", \"#64b5f6\", \"#4dd0e1\", \"#4db6ac\", \"#81c784\", \"#aed581\", \"#dce775\", \"#fff176\", \"#ffd54f\", \"#ffb74d\", \"#ff8a65\", \"#a1887f\", \"#e0e0e0\", \"#90a4ae\"],\r\n [\"#ef5350\", \"#ec407a\", \"#ab47bc\", \"#5c6bc0\", \"#42a5f5\", \"#26c6da\", \"#26a69a\", \"#66bb6a\", \"#9ccc65\", \"#d4e157\", \"#ffee58\", \"#ffca28\", \"#ffa726\", \"#ff7043\", \"#8d6e63\", \"#bdbdbd\", \"#78909c\"],\r\n [\"#f44336\", \"#e91e63\", \"#9c27b0\", \"#3f51b5\", \"#2196f3\", \"#00bcd4\", \"#009688\", \"#4caf50\", \"#8bc34a\", \"#cddc39\", \"#ffeb3b\", \"#ffc107\", \"#ff9800\", \"#ff5722\", \"#795548\", \"#9e9e9e\", \"#607d8b\"],\r\n [\"#e53935\", \"#d81b60\", \"#8e24aa\", \"#3949ab\", \"#1e88e5\", \"#00acc1\", \"#00897b\", \"#43a047\", \"#7cb342\", \"#c0ca33\", \"#fdd835\", \"#ffb300\", \"#fb8c00\", \"#f4511e\", \"#6d4c41\", \"#757575\", \"#546e7a\"],\r\n [\"#d32f2f\", \"#c2185b\", \"#7b1fa2\", \"#303f9f\", \"#1976d2\", \"#0097a7\", \"#00796b\", \"#388e3c\", \"#689f38\", \"#afb42b\", \"#fbc02d\", \"#ffa000\", \"#f57c00\", \"#e64a19\", \"#5d4037\", \"#616161\", \"#455a64\"],\r\n [\"#c62828\", \"#ad1457\", \"#6a1b9a\", \"#283593\", \"#1565c0\", \"#00838f\", \"#00695c\", \"#2e7d32\", \"#558b2f\", \"#9e9d24\", \"#f9a825\", \"#ff8f00\", \"#ef6c00\", \"#d84315\", \"#4e342e\", \"#424242\", \"#37474f\"],\r\n [\"#b71c1c\", \"#880e4f\", \"#4a148c\", \"#1a237e\", \"#0d47a1\", \"#006064\", \"#004d40\", \"#1b5e20\", \"#33691e\", \"#827717\", \"#f57f17\", \"#ff6f00\", \"#e65100\", \"#bf360c\", \"#3e2723\", \"#212121\", \"#263238\"],\r\n ],\r\n fire: [\r\n [\"0b1a6d\", \"840f38\", \"b60718\", \"de030b\", \"ff0c0c\", \"fd491c\", \"fc7521\", \"faa331\", \"fbb535\", \"ffc73a\"],\r\n [\"071147\", \"5f0b28\", \"930513\", \"be0309\", \"ef0000\", \"fa3403\", \"fb670b\", \"f9991b\", \"faad1e\", \"ffc123\"],\r\n [\"03071e\", \"370617\", \"6a040f\", \"9d0208\", \"d00000\", \"dc2f02\", \"e85d04\", \"f48c06\", \"faa307\", \"ffba08\"],\r\n [\"020619\", \"320615\", \"61040d\", \"8c0207\", \"bc0000\", \"c82a02\", \"d05203\", \"db7f06\", \"e19405\", \"efab00\"],\r\n [\"020515\", \"2d0513\", \"58040c\", \"7f0206\", \"aa0000\", \"b62602\", \"b94903\", \"c57205\", \"ca8504\", \"d89b00\"],\r\n ],\r\n baby: [\r\n [\"eddcd2\", \"fff1e6\", \"fde2e4\", \"fad2e1\", \"c5dedd\", \"dbe7e4\", \"f0efeb\", \"d6e2e9\", \"bcd4e6\", \"99c1de\"],\r\n [\"e1c4b3\", \"ffd5b5\", \"fab6ba\", \"f5a8c4\", \"aacecd\", \"bfd5cf\", \"dbd9d0\", \"baceda\", \"9dc0db\", \"7eb1d5\"],\r\n [\"daa990\", \"ffb787\", \"f88e95\", \"f282a9\", \"8fc4c3\", \"a3c8be\", \"cec9b3\", \"9dbcce\", \"82acd2\", \"649dcb\"],\r\n [\"d69070\", \"ff9c5e\", \"f66770\", \"f05f8f\", \"74bbb9\", \"87bfae\", \"c5b993\", \"83aac3\", \"699bca\", \"4d89c2\"],\r\n [\"c97d5d\", \"f58443\", \"eb4d57\", \"e54a7b\", \"66a9a7\", \"78ae9c\", \"b5a67e\", \"7599b1\", \"5c88b7\", \"4978aa\"],\r\n ],\r\n chart: [\r\n ['#C1D37F', '#4C5454', '#FFD275', '#66586F', '#D05D5B', '#C96480', '#95BF8F', '#6EA240', '#0F0F0E', '#EB8258', '#95A3B3', '#995D81'],\r\n ],\r\n }\r\n\r\n var Component = function (o) {\r\n // Otherwise get palette value\r\n if (palette[o]) {\r\n return palette[o];\r\n } else {\r\n return palette.material;\r\n }\r\n }\r\n\r\n Component.get = function (o) {\r\n // Otherwise get palette value\r\n if (palette[o]) {\r\n return palette[o];\r\n } else {\r\n return palette;\r\n }\r\n }\r\n\r\n Component.set = function (o, v) {\r\n palette[o] = v;\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var palette = (Palette());\n;// CONCATENATED MODULE: ./src/plugins/tabs.js\n\r\n\r\n\r\n\r\nfunction Tabs(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n data: [],\r\n position: null,\r\n allowCreate: false,\r\n allowChangePosition: false,\r\n onclick: null,\r\n onload: null,\r\n onchange: null,\r\n oncreate: null,\r\n ondelete: null,\r\n onbeforecreate: null,\r\n onchangeposition: null,\r\n animation: false,\r\n hideHeaders: false,\r\n padding: null,\r\n palette: null,\r\n maxWidth: null,\r\n }\r\n\r\n // Loop through the initial configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Class\r\n el.classList.add('jtabs');\r\n\r\n var prev = null;\r\n var next = null;\r\n var border = null;\r\n var header = null;\r\n var controls = null;\r\n var add = null;\r\n\r\n // Event handler references for cleanup\r\n var headersClickHandler = null;\r\n var headersContextMenuHandler = null;\r\n\r\n // Helpers\r\n const setBorder = function(index) {\r\n if (obj.options.animation) {\r\n setTimeout(function() {\r\n // Guard against destroyed state\r\n if (!obj.headers || !obj.headers.children[index]) {\r\n return;\r\n }\r\n let rect = obj.headers.children[index].getBoundingClientRect();\r\n\r\n if (obj.options.palette === 'modern') {\r\n border.style.width = rect.width - 4 + 'px';\r\n border.style.left = obj.headers.children[index].offsetLeft + 2 + 'px';\r\n } else {\r\n border.style.width = rect.width + 'px';\r\n border.style.left = obj.headers.children[index].offsetLeft + 'px';\r\n }\r\n\r\n if (obj.options.position === 'bottom') {\r\n border.style.top = '0px';\r\n } else {\r\n border.style.bottom = '0px';\r\n }\r\n }, 50);\r\n }\r\n }\r\n\r\n var updateControls = function(x) {\r\n // Guard against destroyed state\r\n if (!obj.headers) {\r\n return;\r\n }\r\n if (typeof(obj.headers.scrollTo) == 'function') {\r\n obj.headers.scrollTo({\r\n left: x,\r\n behavior: 'smooth',\r\n });\r\n } else {\r\n obj.headers.scrollLeft = x;\r\n }\r\n\r\n if (x <= 1) {\r\n prev.classList.add('disabled');\r\n } else {\r\n prev.classList.remove('disabled');\r\n }\r\n\r\n if (x >= obj.headers.scrollWidth - obj.headers.offsetWidth) {\r\n next.classList.add('disabled');\r\n } else {\r\n next.classList.remove('disabled');\r\n }\r\n\r\n if (obj.headers.scrollWidth <= obj.headers.offsetWidth) {\r\n prev.style.display = 'none';\r\n next.style.display = 'none';\r\n } else {\r\n prev.style.display = '';\r\n next.style.display = '';\r\n }\r\n }\r\n\r\n obj.setBorder = setBorder;\r\n\r\n // Set value\r\n obj.open = function(index) {\r\n // This is to force safari to update the children\r\n const items = Array.from(obj.content.children);\r\n if (! obj.content.children[index]) {\r\n return;\r\n }\r\n\r\n var previous = null;\r\n for (var i = 0; i < obj.headers.children.length; i++) {\r\n if (obj.headers.children[i].classList.contains('jtabs-selected')) {\r\n // Current one\r\n previous = i;\r\n }\r\n // Remote selected\r\n obj.headers.children[i].classList.remove('jtabs-selected');\r\n obj.headers.children[i].removeAttribute('aria-selected')\r\n if (obj.content.children[i]) {\r\n obj.content.children[i].classList.remove('jtabs-selected');\r\n }\r\n }\r\n\r\n obj.headers.children[index].classList.add('jtabs-selected');\r\n obj.headers.children[index].setAttribute('aria-selected', 'true')\r\n\r\n if (obj.content.children[index]) {\r\n obj.content.children[index].classList.add('jtabs-selected');\r\n }\r\n\r\n if (previous != index && typeof(obj.options.onchange) == 'function') {\r\n if (obj.content.children[index]) {\r\n obj.options.onchange(el, obj, index, obj.headers.children[index], obj.content.children[index]);\r\n }\r\n }\r\n\r\n // Hide\r\n if (obj.options.hideHeaders == true && (obj.headers.children.length < 3 && obj.options.allowCreate == false)) {\r\n obj.headers.parentNode.style.display = 'none';\r\n } else {\r\n obj.headers.parentNode.style.display = '';\r\n\r\n var x1 = obj.headers.children[index].offsetLeft;\r\n var x2 = x1 + obj.headers.children[index].offsetWidth;\r\n var r1 = obj.headers.scrollLeft;\r\n var r2 = r1 + obj.headers.offsetWidth;\r\n\r\n if (! (r1 <= x1 && r2 >= x2)) {\r\n // Out of the viewport\r\n updateControls(x1 - 1);\r\n }\r\n\r\n // Set border\r\n setBorder(index);\r\n }\r\n }\r\n\r\n obj.selectIndex = function(a) {\r\n var index = Array.prototype.indexOf.call(obj.headers.children, a);\r\n if (index >= 0) {\r\n obj.open(index);\r\n }\r\n\r\n return index;\r\n }\r\n\r\n obj.rename = function(i, title) {\r\n if (! title) {\r\n title = prompt('New title', obj.headers.children[i].innerText);\r\n }\r\n obj.headers.children[i].innerText = title;\r\n setBorder(obj.getActive());\r\n }\r\n\r\n obj.create = function(title, url) {\r\n if (typeof(obj.options.onbeforecreate) == 'function') {\r\n var ret = obj.options.onbeforecreate(el, title);\r\n if (ret === false) {\r\n return false;\r\n } else {\r\n title = ret;\r\n }\r\n }\r\n\r\n var div = obj.appendElement(title);\r\n\r\n if (typeof(obj.options.oncreate) == 'function') {\r\n obj.options.oncreate(el, div)\r\n }\r\n\r\n setBorder(obj.getActive());\r\n\r\n return div;\r\n }\r\n\r\n obj.remove = function(index) {\r\n return obj.deleteElement(index);\r\n }\r\n\r\n obj.nextNumber = function() {\r\n var num = 0;\r\n for (var i = 0; i < obj.headers.children.length; i++) {\r\n var tmp = obj.headers.children[i].innerText.match(/[0-9].*/);\r\n if (tmp > num) {\r\n num = parseInt(tmp);\r\n }\r\n }\r\n if (! num) {\r\n num = 1;\r\n } else {\r\n num++;\r\n }\r\n\r\n return num;\r\n }\r\n\r\n obj.deleteElement = function(index) {\r\n let current = obj.getActive();\r\n\r\n if (! obj.headers.children[index]) {\r\n return false;\r\n } else {\r\n obj.headers.removeChild(obj.headers.children[index]);\r\n obj.content.removeChild(obj.content.children[index]);\r\n }\r\n\r\n if (current === index) {\r\n obj.open(0);\r\n } else {\r\n let current = obj.getActive() || 0;\r\n setBorder(current);\r\n }\r\n\r\n if (typeof(obj.options.ondelete) == 'function') {\r\n obj.options.ondelete(el, index)\r\n }\r\n }\r\n\r\n obj.appendElement = function(title, cb, openTab, position) {\r\n if (! title) {\r\n var title = prompt('Title?', '');\r\n }\r\n\r\n if (title) {\r\n let headerId = helpers.guid();\r\n let contentId = helpers.guid();\r\n // Add content\r\n var div = document.createElement('div');\r\n div.setAttribute('id', contentId);\r\n div.setAttribute('role', 'tabpanel');\r\n div.setAttribute('aria-labelledby', headerId);\r\n\r\n // Add headers\r\n var h = document.createElement('div');\r\n h.setAttribute('id', headerId);\r\n h.setAttribute('role', 'tab');\r\n h.setAttribute('aria-controls', contentId);\r\n\r\n h.textContent = title;\r\n h.content = div;\r\n\r\n if (typeof(position) === 'undefined') {\r\n obj.content.appendChild(div);\r\n obj.headers.insertBefore(h, obj.headers.lastChild);\r\n } else {\r\n let r = obj.content.children[position];\r\n if (r) {\r\n obj.content.insertBefore(div, r);\r\n } else {\r\n obj.content.appendChild(div);\r\n }\r\n r = obj.headers.children[position] || obj.headers.lastChild;\r\n obj.headers.insertBefore(h, r);\r\n }\r\n\r\n // Sortable\r\n if (obj.options.allowChangePosition) {\r\n h.setAttribute('draggable', 'true');\r\n }\r\n\r\n // Open new tab\r\n if (openTab !== false) {\r\n // Open new tab\r\n obj.selectIndex(h);\r\n }\r\n\r\n // Callback\r\n if (typeof(cb) == 'function') {\r\n cb(div, h);\r\n }\r\n\r\n // Return element\r\n return div;\r\n }\r\n }\r\n\r\n obj.getActive = function() {\r\n for (var i = 0; i < obj.headers.children.length; i++) {\r\n if (obj.headers.children[i].classList.contains('jtabs-selected')) {\r\n return i;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n obj.updateContent = function(position, newContent) {\r\n if (typeof newContent !== 'string') {\r\n var contentItem = newContent;\r\n } else {\r\n var contentItem = document.createElement('div');\r\n contentItem.innerHTML = newContent;\r\n }\r\n\r\n if (obj.content.children[position].classList.contains('jtabs-selected')) {\r\n newContent.classList.add('jtabs-selected');\r\n }\r\n\r\n obj.content.replaceChild(newContent, obj.content.children[position]);\r\n\r\n setBorder();\r\n }\r\n\r\n obj.updatePosition = function(f, t, ignoreEvents, openTab) {\r\n // Ondrop update position of content\r\n if (f > t) {\r\n obj.content.insertBefore(obj.content.children[f], obj.content.children[t]);\r\n } else {\r\n obj.content.insertBefore(obj.content.children[f], obj.content.children[t].nextSibling);\r\n }\r\n\r\n // Open destination tab\r\n if (openTab !== false) {\r\n obj.open(t);\r\n } else {\r\n const activeIndex = obj.getActive();\r\n\r\n if (t < activeIndex) {\r\n obj.setBorder(activeIndex);\r\n }\r\n }\r\n\r\n // Call event\r\n if (! ignoreEvents && typeof(obj.options.onchangeposition) == 'function') {\r\n obj.options.onchangeposition(obj.headers, f, t);\r\n }\r\n }\r\n\r\n obj.move = function(f, t, ignoreEvents, openTab) {\r\n if (f > t) {\r\n obj.headers.insertBefore(obj.headers.children[f], obj.headers.children[t]);\r\n } else {\r\n obj.headers.insertBefore(obj.headers.children[f], obj.headers.children[t].nextSibling);\r\n }\r\n\r\n obj.updatePosition(f, t, ignoreEvents, openTab);\r\n }\r\n\r\n obj.setBorder = setBorder;\r\n\r\n obj.init = function() {\r\n el.textContent = '';\r\n\r\n // Make sure the component is blank\r\n obj.headers = document.createElement('div');\r\n obj.content = document.createElement('div');\r\n obj.headers.classList.add('jtabs-headers');\r\n obj.headers.setAttribute('role', 'tablist');\r\n obj.content.classList.add('jtabs-content');\r\n obj.content.setAttribute('role', 'region');\r\n obj.content.setAttribute('aria-label', 'Tab Panels');\r\n\r\n if (obj.options.palette) {\r\n el.classList.add('jtabs-modern');\r\n } else {\r\n el.classList.remove('jtabs-modern');\r\n }\r\n\r\n // Padding\r\n if (obj.options.padding) {\r\n obj.content.style.padding = parseInt(obj.options.padding) + 'px';\r\n }\r\n\r\n // Header\r\n header = document.createElement('div');\r\n header.className = 'jtabs-headers-container';\r\n header.appendChild(obj.headers);\r\n if (obj.options.maxWidth) {\r\n header.style.maxWidth = parseInt(obj.options.maxWidth) + 'px';\r\n }\r\n\r\n // Controls\r\n controls = document.createElement('div');\r\n controls.className = 'jtabs-controls';\r\n controls.setAttribute('draggable', 'false');\r\n header.appendChild(controls);\r\n\r\n // Append DOM elements\r\n if (obj.options.position == 'bottom') {\r\n el.appendChild(obj.content);\r\n el.appendChild(header);\r\n } else {\r\n el.appendChild(header);\r\n el.appendChild(obj.content);\r\n }\r\n\r\n // New button\r\n if (obj.options.allowCreate == true) {\r\n add = document.createElement('div');\r\n add.className = 'jtabs-add';\r\n add.onclick = function() {\r\n obj.create();\r\n }\r\n controls.appendChild(add);\r\n }\r\n\r\n prev = document.createElement('div');\r\n prev.className = 'jtabs-prev';\r\n prev.onclick = function() {\r\n updateControls(obj.headers.scrollLeft - obj.headers.offsetWidth);\r\n }\r\n controls.appendChild(prev);\r\n\r\n next = document.createElement('div');\r\n next.className = 'jtabs-next';\r\n next.onclick = function() {\r\n updateControls(obj.headers.scrollLeft + obj.headers.offsetWidth);\r\n }\r\n controls.appendChild(next);\r\n\r\n // Data\r\n for (var i = 0; i < obj.options.data.length; i++) {\r\n // Title\r\n if (obj.options.data[i].titleElement) {\r\n var headerItem = obj.options.data[i].titleElement;\r\n } else {\r\n var headerItem = document.createElement('div');\r\n }\r\n // Icon\r\n if (obj.options.data[i].icon) {\r\n var iconContainer = document.createElement('div');\r\n var icon = document.createElement('i');\r\n icon.classList.add('material-icons');\r\n icon.textContent = obj.options.data[i].icon;\r\n iconContainer.appendChild(icon);\r\n headerItem.appendChild(iconContainer);\r\n }\r\n // Title\r\n if (obj.options.data[i].title) {\r\n var title = document.createTextNode(obj.options.data[i].title);\r\n headerItem.appendChild(title);\r\n }\r\n // Width\r\n if (obj.options.data[i].width) {\r\n headerItem.style.width = obj.options.data[i].width;\r\n }\r\n // Content\r\n if (obj.options.data[i].contentElement) {\r\n var contentItem = obj.options.data[i].contentElement;\r\n } else {\r\n var contentItem = document.createElement('div');\r\n contentItem.innerHTML = obj.options.data[i].content;\r\n }\r\n obj.headers.appendChild(headerItem);\r\n obj.content.appendChild(contentItem);\r\n }\r\n\r\n // Animation\r\n border = document.createElement('div');\r\n border.className = 'jtabs-border';\r\n obj.headers.appendChild(border);\r\n\r\n if (obj.options.animation) {\r\n el.classList.add('jtabs-animation');\r\n }\r\n\r\n // Events\r\n headersClickHandler = function(e) {\r\n if (e.target.parentNode.classList.contains('jtabs-headers')) {\r\n var target = e.target;\r\n } else {\r\n if (e.target.tagName == 'I') {\r\n var target = e.target.parentNode.parentNode;\r\n } else {\r\n var target = e.target.parentNode;\r\n }\r\n }\r\n\r\n var index = obj.selectIndex(target);\r\n\r\n if (typeof(obj.options.onclick) == 'function') {\r\n obj.options.onclick(el, obj, index, obj.headers.children[index], obj.content.children[index]);\r\n }\r\n };\r\n obj.headers.addEventListener(\"click\", headersClickHandler);\r\n\r\n headersContextMenuHandler = function(e) {\r\n obj.selectIndex(e.target);\r\n };\r\n obj.headers.addEventListener(\"contextmenu\", headersContextMenuHandler);\r\n\r\n if (obj.headers.children.length) {\r\n // Open first tab\r\n obj.open(0);\r\n }\r\n\r\n // Update controls\r\n setTimeout(() => {\r\n updateControls(0);\r\n })\r\n\r\n if (obj.options.allowChangePosition == true) {\r\n Sorting(obj.headers, {\r\n direction: 1,\r\n ondrop: function(a,b,c) {\r\n obj.updatePosition(b,c);\r\n },\r\n });\r\n }\r\n\r\n if (typeof(obj.options.onload) == 'function') {\r\n obj.options.onload(el, obj);\r\n }\r\n }\r\n\r\n // Loading existing nodes as the data\r\n if (el.children[0] && el.children[0].children.length) {\r\n // Create from existing elements\r\n for (var i = 0; i < el.children[0].children.length; i++) {\r\n var item = obj.options.data && obj.options.data[i] ? obj.options.data[i] : {};\r\n\r\n if (el.children[1] && el.children[1].children[i]) {\r\n item.titleElement = el.children[0].children[i];\r\n item.contentElement = el.children[1].children[i];\r\n } else {\r\n item.contentElement = el.children[0].children[i];\r\n }\r\n\r\n obj.options.data[i] = item;\r\n }\r\n }\r\n\r\n // Remote controller flag\r\n var loadingRemoteData = false;\r\n\r\n // Create from data\r\n if (obj.options.data) {\r\n // Append children\r\n for (var i = 0; i < obj.options.data.length; i++) {\r\n if (obj.options.data[i].url) {\r\n ajax({\r\n url: obj.options.data[i].url,\r\n type: 'GET',\r\n dataType: 'text/html',\r\n index: i,\r\n success: function(result) {\r\n obj.options.data[this.index].content = result;\r\n },\r\n complete: function() {\r\n obj.init();\r\n }\r\n });\r\n\r\n // Flag loading\r\n loadingRemoteData = true;\r\n }\r\n }\r\n }\r\n\r\n if (! loadingRemoteData) {\r\n obj.init();\r\n }\r\n\r\n /**\r\n * Destroy the tabs instance and release all resources\r\n */\r\n obj.destroy = function() {\r\n // Remove event listeners from headers\r\n if (obj.headers) {\r\n if (headersClickHandler) {\r\n obj.headers.removeEventListener('click', headersClickHandler);\r\n }\r\n if (headersContextMenuHandler) {\r\n obj.headers.removeEventListener('contextmenu', headersContextMenuHandler);\r\n }\r\n }\r\n\r\n // Clear onclick handlers\r\n if (prev) {\r\n prev.onclick = null;\r\n }\r\n if (next) {\r\n next.onclick = null;\r\n }\r\n if (add) {\r\n add.onclick = null;\r\n }\r\n\r\n // Remove DOM elements\r\n if (header && header.parentNode) {\r\n header.parentNode.removeChild(header);\r\n }\r\n if (obj.content && obj.content.parentNode) {\r\n obj.content.parentNode.removeChild(obj.content);\r\n }\r\n\r\n // Remove class from element\r\n el.classList.remove('jtabs');\r\n el.classList.remove('jtabs-animation');\r\n el.classList.remove('jtabs-modern');\r\n\r\n // Remove instance reference\r\n delete el.tabs;\r\n\r\n // Clear options callbacks to release closures\r\n if (obj.options) {\r\n obj.options.onclick = null;\r\n obj.options.onload = null;\r\n obj.options.onchange = null;\r\n obj.options.oncreate = null;\r\n obj.options.ondelete = null;\r\n obj.options.onbeforecreate = null;\r\n obj.options.onchangeposition = null;\r\n }\r\n\r\n // Clear references\r\n obj.headers = null;\r\n obj.content = null;\r\n header = null;\r\n controls = null;\r\n prev = null;\r\n next = null;\r\n border = null;\r\n add = null;\r\n headersClickHandler = null;\r\n headersContextMenuHandler = null;\r\n }\r\n\r\n el.tabs = obj;\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/color.js\n\r\n\r\n\r\n\r\n\r\n\r\nfunction Color(el, options) {\r\n // Already created, update options\r\n if (el.color) {\r\n return el.color.setOptions(options, true);\r\n }\r\n\r\n // New instance\r\n var obj = { type: 'color' };\r\n obj.options = {};\r\n\r\n var container = null;\r\n var backdrop = null;\r\n var content = null;\r\n var resetButton = null;\r\n var closeButton = null;\r\n var tabs = null;\r\n var jsuitesTabs = null;\r\n\r\n /**\r\n * Update options\r\n */\r\n obj.setOptions = function(options, reset) {\r\n /**\r\n * @typedef {Object} defaults\r\n * @property {(string|Array)} value - Initial value of the compontent\r\n * @property {string} placeholder - The default instruction text on the element\r\n * @property {requestCallback} onchange - Method to be execute after any changes on the element\r\n * @property {requestCallback} onclose - Method to be execute when the element is closed\r\n * @property {string} doneLabel - Label for button done\r\n * @property {string} resetLabel - Label for button reset\r\n * @property {string} resetValue - Value for button reset\r\n * @property {Bool} showResetButton - Active or note for button reset - default false\r\n */\r\n var defaults = {\r\n placeholder: '',\r\n value: null,\r\n onopen: null,\r\n onclose: null,\r\n onchange: null,\r\n closeOnChange: true,\r\n palette: null,\r\n position: null,\r\n doneLabel: 'Done',\r\n resetLabel: 'Reset',\r\n fullscreen: false,\r\n opened: false,\r\n }\r\n\r\n if (! options) {\r\n options = {};\r\n }\r\n\r\n if (options && ! options.palette) {\r\n // Default palette\r\n options.palette = palette();\r\n }\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof(obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Update the text of the controls, if they have already been created\r\n if (resetButton) {\r\n resetButton.innerHTML = obj.options.resetLabel;\r\n }\r\n if (closeButton) {\r\n closeButton.innerHTML = obj.options.doneLabel;\r\n }\r\n\r\n // Update the pallete\r\n if (obj.options.palette && jsuitesTabs) {\r\n jsuitesTabs.updateContent(0, table());\r\n }\r\n\r\n // Value\r\n if (typeof obj.options.value === 'string') {\r\n el.value = obj.options.value;\r\n if (el.tagName === 'INPUT') {\r\n el.style.color = el.value;\r\n el.style.backgroundColor = el.value;\r\n }\r\n }\r\n\r\n // Placeholder\r\n if (obj.options.placeholder) {\r\n el.setAttribute('placeholder', obj.options.placeholder);\r\n } else {\r\n if (el.getAttribute('placeholder')) {\r\n el.removeAttribute('placeholder');\r\n }\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n obj.select = function(color) {\r\n // Remove current selected mark\r\n var selected = container.querySelector('.jcolor-selected');\r\n if (selected) {\r\n selected.classList.remove('jcolor-selected');\r\n }\r\n\r\n // Mark cell as selected\r\n if (obj.values[color]) {\r\n obj.values[color].classList.add('jcolor-selected');\r\n }\r\n\r\n obj.options.value = color;\r\n }\r\n\r\n /**\r\n * Open color pallete\r\n */\r\n obj.open = function() {\r\n if (! container.classList.contains('jcolor-focus')) {\r\n // Start tracking\r\n tracking(obj, true);\r\n\r\n // Show color picker\r\n container.classList.add('jcolor-focus');\r\n\r\n // Select current color\r\n if (obj.options.value) {\r\n obj.select(obj.options.value);\r\n }\r\n\r\n // Reset margin\r\n content.style.marginTop = '';\r\n content.style.marginLeft = '';\r\n\r\n var rectContent = content.getBoundingClientRect();\r\n var availableWidth = helpers.getWindowWidth();\r\n var availableHeight = helpers.getWindowHeight();\r\n\r\n if (availableWidth < 800 || obj.options.fullscreen == true) {\r\n content.classList.add('jcolor-fullscreen');\r\n animation.slideBottom(content, 1);\r\n backdrop.style.display = 'block';\r\n } else {\r\n if (content.classList.contains('jcolor-fullscreen')) {\r\n content.classList.remove('jcolor-fullscreen');\r\n backdrop.style.display = '';\r\n }\r\n\r\n if (obj.options.position) {\r\n content.style.position = 'fixed';\r\n } else {\r\n content.style.position = '';\r\n }\r\n\r\n if (rectContent.left + rectContent.width > availableWidth) {\r\n content.style.marginLeft = -1 * (rectContent.left + rectContent.width - (availableWidth - 20)) + 'px';\r\n }\r\n if (rectContent.top + rectContent.height > availableHeight) {\r\n content.style.marginTop = -1 * (rectContent.top + rectContent.height - (availableHeight - 20)) + 'px';\r\n }\r\n }\r\n\r\n\r\n if (typeof(obj.options.onopen) == 'function') {\r\n obj.options.onopen(el, obj);\r\n }\r\n\r\n jsuitesTabs.setBorder(jsuitesTabs.getActive());\r\n\r\n // Update sliders\r\n if (obj.options.value) {\r\n var rgb = HexToRgb(obj.options.value);\r\n\r\n rgbInputs.forEach(function(rgbInput, index) {\r\n rgbInput.value = rgb[index];\r\n rgbInput.dispatchEvent(new Event('input'));\r\n });\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Close color pallete\r\n */\r\n obj.close = function(ignoreEvents) {\r\n if (container && container.classList.contains('jcolor-focus')) {\r\n // Remove focus\r\n container.classList.remove('jcolor-focus');\r\n // Make sure backdrop is hidden\r\n if (backdrop) {\r\n backdrop.style.display = '';\r\n }\r\n // Call related events\r\n if (! ignoreEvents && typeof(obj.options.onclose) == 'function') {\r\n obj.options.onclose(el, obj);\r\n }\r\n // Stop the object\r\n tracking(obj, false);\r\n }\r\n\r\n return obj.options.value ? obj.options.value : null;\r\n }\r\n\r\n /**\r\n * Set value\r\n */\r\n obj.setValue = function(color) {\r\n if (! color) {\r\n color = '';\r\n }\r\n\r\n if (color != obj.options.value) {\r\n obj.options.value = color;\r\n slidersResult = color;\r\n\r\n // Remove current selecded mark\r\n obj.select(color);\r\n\r\n // Onchange\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, color, obj);\r\n }\r\n\r\n // Changes\r\n if (el.value != obj.options.value) {\r\n // Set input value\r\n el.value = obj.options.value;\r\n if (el.tagName === 'INPUT') {\r\n el.style.color = el.value;\r\n el.style.backgroundColor = el.value;\r\n }\r\n\r\n // Element onchange native\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n\r\n if (obj.options.closeOnChange == true) {\r\n obj.close();\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Get value\r\n */\r\n obj.getValue = function() {\r\n return obj.options.value;\r\n }\r\n\r\n var backdropClickControl = false;\r\n\r\n // Converts a number in decimal to hexadecimal\r\n var decToHex = function(num) {\r\n var hex = num.toString(16);\r\n return hex.length === 1 ? \"0\" + hex : hex;\r\n }\r\n\r\n // Converts a color in rgb to hexadecimal\r\n var rgbToHex = function(r, g, b) {\r\n return \"#\" + decToHex(r) + decToHex(g) + decToHex(b);\r\n }\r\n\r\n // Converts a number in hexadecimal to decimal\r\n var hexToDec = function(hex) {\r\n return parseInt('0x' + hex);\r\n }\r\n\r\n // Converts a color in hexadecimal to rgb\r\n var HexToRgb = function(hex) {\r\n return [hexToDec(hex.substr(1, 2)), hexToDec(hex.substr(3, 2)), hexToDec(hex.substr(5, 2))]\r\n }\r\n\r\n var table = function() {\r\n // Content of the first tab\r\n var tableContainer = document.createElement('div');\r\n tableContainer.className = 'jcolor-grid';\r\n\r\n // Cells\r\n obj.values = [];\r\n\r\n // Table pallete\r\n var t = document.createElement('table');\r\n t.setAttribute('cellpadding', '7');\r\n t.setAttribute('cellspacing', '0');\r\n\r\n for (var j = 0; j < obj.options.palette.length; j++) {\r\n var tr = document.createElement('tr');\r\n for (var i = 0; i < obj.options.palette[j].length; i++) {\r\n var td = document.createElement('td');\r\n var color = obj.options.palette[j][i];\r\n if (color.length < 7 && color.substr(0,1) !== '#') {\r\n color = '#' + color;\r\n }\r\n td.style.backgroundColor = color;\r\n td.setAttribute('data-value', color);\r\n td.innerHTML = '';\r\n tr.appendChild(td);\r\n\r\n // Selected color\r\n if (obj.options.value == color) {\r\n td.classList.add('jcolor-selected');\r\n }\r\n\r\n // Possible values\r\n obj.values[color] = td;\r\n }\r\n t.appendChild(tr);\r\n }\r\n\r\n // Append to the table\r\n tableContainer.appendChild(t);\r\n\r\n return tableContainer;\r\n }\r\n\r\n // Canvas where the image will be rendered\r\n var canvas = document.createElement('canvas');\r\n canvas.width = 200;\r\n canvas.height = 160;\r\n var context = canvas.getContext(\"2d\");\r\n\r\n var resizeCanvas = function() {\r\n // Specifications necessary to correctly obtain colors later in certain positions\r\n var m = tabs.firstChild.getBoundingClientRect();\r\n canvas.width = m.width - 14;\r\n gradient()\r\n }\r\n\r\n var gradient = function() {\r\n var g = context.createLinearGradient(0, 0, canvas.width, 0);\r\n // Create color gradient\r\n g.addColorStop(0, \"rgb(255,0,0)\");\r\n g.addColorStop(0.15, \"rgb(255,0,255)\");\r\n g.addColorStop(0.33, \"rgb(0,0,255)\");\r\n g.addColorStop(0.49, \"rgb(0,255,255)\");\r\n g.addColorStop(0.67, \"rgb(0,255,0)\");\r\n g.addColorStop(0.84, \"rgb(255,255,0)\");\r\n g.addColorStop(1, \"rgb(255,0,0)\");\r\n context.fillStyle = g;\r\n context.fillRect(0, 0, canvas.width, canvas.height);\r\n g = context.createLinearGradient(0, 0, 0, canvas.height);\r\n g.addColorStop(0, \"rgba(255,255,255,1)\");\r\n g.addColorStop(0.5, \"rgba(255,255,255,0)\");\r\n g.addColorStop(0.5, \"rgba(0,0,0,0)\");\r\n g.addColorStop(1, \"rgba(0,0,0,1)\");\r\n context.fillStyle = g;\r\n context.fillRect(0, 0, canvas.width, canvas.height);\r\n }\r\n\r\n var hsl = function() {\r\n var element = document.createElement('div');\r\n element.className = \"jcolor-hsl\";\r\n\r\n var point = document.createElement('div');\r\n point.className = 'jcolor-point';\r\n\r\n var div = document.createElement('div');\r\n div.appendChild(canvas);\r\n div.appendChild(point);\r\n element.appendChild(div);\r\n\r\n // Moves the marquee point to the specified position\r\n var update = function(buttons, x, y) {\r\n if (buttons === 1) {\r\n var rect = element.getBoundingClientRect();\r\n var left = x - rect.left;\r\n var top = y - rect.top;\r\n if (left < 0) {\r\n left = 0;\r\n }\r\n if (top < 0) {\r\n top = 0;\r\n }\r\n if (left > rect.width) {\r\n left = rect.width;\r\n }\r\n if (top > rect.height) {\r\n top = rect.height;\r\n }\r\n point.style.left = left + 'px';\r\n point.style.top = top + 'px';\r\n var pixel = context.getImageData(left, top, 1, 1).data;\r\n slidersResult = rgbToHex(pixel[0], pixel[1], pixel[2]);\r\n }\r\n }\r\n\r\n // Applies the point's motion function to the div that contains it\r\n element.addEventListener('mousedown', function(e) {\r\n update(e.buttons, e.clientX, e.clientY);\r\n });\r\n\r\n element.addEventListener('mousemove', function(e) {\r\n update(e.buttons, e.clientX, e.clientY);\r\n });\r\n\r\n element.addEventListener('touchmove', function(e) {\r\n update(1, e.changedTouches[0].clientX, e.changedTouches[0].clientY);\r\n });\r\n\r\n return element;\r\n }\r\n\r\n var slidersResult = '';\r\n\r\n var rgbInputs = [];\r\n\r\n var changeInputColors = function() {\r\n if (slidersResult !== '') {\r\n for (var j = 0; j < rgbInputs.length; j++) {\r\n var currentColor = HexToRgb(slidersResult);\r\n\r\n currentColor[j] = 0;\r\n\r\n var newGradient = 'linear-gradient(90deg, rgb(';\r\n newGradient += currentColor.join(', ');\r\n newGradient += '), rgb(';\r\n\r\n currentColor[j] = 255;\r\n\r\n newGradient += currentColor.join(', ');\r\n newGradient += '))';\r\n\r\n rgbInputs[j].style.backgroundImage = newGradient;\r\n }\r\n }\r\n }\r\n\r\n var sliders = function() {\r\n // Content of the third tab\r\n var slidersElement = document.createElement('div');\r\n slidersElement.className = 'jcolor-sliders';\r\n\r\n var slidersBody = document.createElement('div');\r\n\r\n // Creates a range-type input with the specified name\r\n var createSliderInput = function(name) {\r\n var inputContainer = document.createElement('div');\r\n inputContainer.className = 'jcolor-sliders-input-container';\r\n\r\n var label = document.createElement('label');\r\n label.innerText = name;\r\n\r\n var subContainer = document.createElement('div');\r\n subContainer.className = 'jcolor-sliders-input-subcontainer';\r\n\r\n var input = document.createElement('input');\r\n input.type = 'range';\r\n input.min = 0;\r\n input.max = 255;\r\n input.value = 0;\r\n\r\n input.setAttribute('aria-label', \"Color value\");\r\n input.setAttribute('aria-valuemin', \"0\");\r\n input.setAttribute('aria-valuemax', \"255\");\r\n input.setAttribute('aria-valuenow', \"0\");\r\n\r\n inputContainer.appendChild(label);\r\n subContainer.appendChild(input);\r\n\r\n var value = document.createElement('div');\r\n value.innerText = input.value;\r\n\r\n input.addEventListener('input', function() {\r\n value.innerText = input.value;\r\n });\r\n\r\n subContainer.appendChild(value);\r\n inputContainer.appendChild(subContainer);\r\n\r\n slidersBody.appendChild(inputContainer);\r\n\r\n return input;\r\n }\r\n\r\n // Creates red, green and blue inputs\r\n rgbInputs = [\r\n createSliderInput('Red'),\r\n createSliderInput('Green'),\r\n createSliderInput('Blue'),\r\n ];\r\n\r\n slidersElement.appendChild(slidersBody);\r\n\r\n // Element that prints the current color\r\n var slidersResultColor = document.createElement('div');\r\n slidersResultColor.className = 'jcolor-sliders-final-color';\r\n\r\n var resultElement = document.createElement('div');\r\n resultElement.style.visibility = 'hidden';\r\n resultElement.innerText = 'a';\r\n slidersResultColor.appendChild(resultElement)\r\n\r\n // Update the element that prints the current color\r\n var updateResult = function() {\r\n var resultColor = rgbToHex(parseInt(rgbInputs[0].value), parseInt(rgbInputs[1].value), parseInt(rgbInputs[2].value));\r\n\r\n resultElement.innerText = resultColor;\r\n resultElement.style.color = resultColor;\r\n resultElement.style.removeProperty('visibility');\r\n\r\n slidersResult = resultColor;\r\n }\r\n\r\n // Apply the update function to color inputs\r\n rgbInputs.forEach(function(rgbInput) {\r\n rgbInput.addEventListener('input', function() {\r\n updateResult();\r\n changeInputColors();\r\n });\r\n });\r\n\r\n slidersElement.appendChild(slidersResultColor);\r\n\r\n return slidersElement;\r\n }\r\n\r\n var init = function() {\r\n // Initial options\r\n obj.setOptions(options);\r\n\r\n // Add a proper input tag when the element is an input\r\n if (el.tagName == 'INPUT') {\r\n el.classList.add('jcolor-input');\r\n el.readOnly = true;\r\n }\r\n\r\n // Table container\r\n container = document.createElement('div');\r\n container.className = 'jcolor';\r\n\r\n // Table container\r\n backdrop = document.createElement('div');\r\n backdrop.className = 'jcolor-backdrop';\r\n container.appendChild(backdrop);\r\n\r\n // Content\r\n content = document.createElement('div');\r\n content.className = 'jcolor-content';\r\n\r\n // Controls\r\n var controls = document.createElement('div');\r\n controls.className = 'jcolor-controls';\r\n content.appendChild(controls);\r\n\r\n // Reset button\r\n resetButton = document.createElement('div');\r\n resetButton.className = 'jcolor-reset';\r\n resetButton.innerHTML = obj.options.resetLabel;\r\n controls.appendChild(resetButton);\r\n\r\n // Close button\r\n closeButton = document.createElement('div');\r\n closeButton.className = 'jcolor-close';\r\n closeButton.innerHTML = obj.options.doneLabel;\r\n controls.appendChild(closeButton);\r\n\r\n // Element that will be used to create the tabs\r\n tabs = document.createElement('div');\r\n content.appendChild(tabs);\r\n\r\n // Starts the jSuites tabs component\r\n jsuitesTabs = Tabs(tabs, {\r\n animation: true,\r\n data: [\r\n {\r\n title: 'Grid',\r\n contentElement: table(),\r\n },\r\n {\r\n title: 'Spectrum',\r\n contentElement: hsl(),\r\n },\r\n {\r\n title: 'Sliders',\r\n contentElement: sliders(),\r\n }\r\n ],\r\n onchange: function(element, instance, index) {\r\n if (index === 1) {\r\n resizeCanvas();\r\n } else {\r\n var color = slidersResult !== '' ? slidersResult : obj.getValue();\r\n\r\n if (index === 2 && color) {\r\n var rgb = HexToRgb(color);\r\n\r\n rgbInputs.forEach(function(rgbInput, index) {\r\n rgbInput.value = rgb[index];\r\n rgbInput.dispatchEvent(new Event('input'));\r\n });\r\n }\r\n }\r\n },\r\n palette: 'modern',\r\n });\r\n\r\n container.appendChild(content);\r\n\r\n // Insert picker after the element\r\n if (el.tagName == 'INPUT') {\r\n el.parentNode.insertBefore(container, el.nextSibling);\r\n } else {\r\n el.appendChild(container);\r\n }\r\n\r\n containerClickHandler = function(e) {\r\n if (e.target.tagName == 'TD') {\r\n var value = e.target.getAttribute('data-value');\r\n if (value) {\r\n obj.setValue(value);\r\n }\r\n } else if (e.target.classList.contains('jcolor-reset')) {\r\n obj.setValue('');\r\n obj.close();\r\n } else if (e.target.classList.contains('jcolor-close')) {\r\n if (jsuitesTabs.getActive() > 0) {\r\n obj.setValue(slidersResult);\r\n }\r\n obj.close();\r\n } else if (e.target.classList.contains('jcolor-backdrop')) {\r\n obj.close();\r\n } else {\r\n obj.open();\r\n }\r\n };\r\n container.addEventListener(\"click\", containerClickHandler);\r\n\r\n /**\r\n * If element is focus open the picker\r\n */\r\n elMouseupHandler = function(e) {\r\n obj.open();\r\n };\r\n el.addEventListener(\"mouseup\", elMouseupHandler);\r\n\r\n // If the picker is open on the spectrum tab, it changes the canvas size when the window size is changed\r\n windowResizeHandler = function() {\r\n if (container.classList.contains('jcolor-focus') && jsuitesTabs.getActive() == 1) {\r\n resizeCanvas();\r\n }\r\n };\r\n window.addEventListener('resize', windowResizeHandler);\r\n\r\n // Default opened\r\n if (obj.options.opened == true) {\r\n obj.open();\r\n }\r\n\r\n // Change\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Keep object available from the node\r\n el.color = obj;\r\n\r\n // Container shortcut\r\n container.color = obj;\r\n }\r\n\r\n obj.toHex = function(rgb) {\r\n var hex = function(x) {\r\n return (\"0\" + parseInt(x).toString(16)).slice(-2);\r\n }\r\n if (rgb) {\r\n if (/^#[0-9A-F]{6}$/i.test(rgb)) {\r\n return rgb;\r\n } else {\r\n rgb = rgb.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\r\n if (rgb && rgb.length) {\r\n return \"#\" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Store event handler references for cleanup\r\n var containerClickHandler = null;\r\n var elMouseupHandler = null;\r\n var windowResizeHandler = null;\r\n\r\n /**\r\n * Destroy the color picker instance and release all resources\r\n */\r\n obj.destroy = function() {\r\n // Close if open (removes from tracking)\r\n obj.close(true);\r\n\r\n // Remove event listeners\r\n if (container && containerClickHandler) {\r\n container.removeEventListener('click', containerClickHandler);\r\n }\r\n if (el && elMouseupHandler) {\r\n el.removeEventListener('mouseup', elMouseupHandler);\r\n }\r\n if (windowResizeHandler) {\r\n window.removeEventListener('resize', windowResizeHandler);\r\n }\r\n\r\n // Destroy the tabs component if it has destroy method\r\n if (jsuitesTabs && typeof jsuitesTabs.destroy === 'function') {\r\n jsuitesTabs.destroy();\r\n }\r\n\r\n // Clear rgbInputs references\r\n rgbInputs = [];\r\n\r\n // Remove container from DOM\r\n if (container && container.parentNode) {\r\n container.parentNode.removeChild(container);\r\n }\r\n\r\n // Clean up element\r\n if (el.tagName === 'INPUT') {\r\n el.classList.remove('jcolor-input');\r\n el.readOnly = false;\r\n el.style.color = '';\r\n el.style.backgroundColor = '';\r\n }\r\n\r\n // Remove instance properties from el\r\n delete el.color;\r\n delete el.change;\r\n delete el.val;\r\n\r\n // Clear options callbacks to release closures\r\n if (obj.options) {\r\n obj.options.onchange = null;\r\n obj.options.onclose = null;\r\n obj.options.onopen = null;\r\n obj.options.onload = null;\r\n }\r\n\r\n // Clear references\r\n container = null;\r\n backdrop = null;\r\n content = null;\r\n resetButton = null;\r\n closeButton = null;\r\n tabs = null;\r\n jsuitesTabs = null;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/contextmenu.js\n\r\n\r\n\r\nfunction Contextmenu() {\r\n\r\n var Component = function(el, options) {\r\n // New instance\r\n var obj = {type: 'contextmenu'};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n items: null,\r\n onclick: null,\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Class definition\r\n el.classList.add('jcontextmenu');\r\n\r\n /**\r\n * Open contextmenu\r\n */\r\n obj.open = function (e, items) {\r\n if (items) {\r\n // Update content\r\n obj.options.items = items;\r\n // Create items\r\n obj.create(items);\r\n }\r\n\r\n // Close current contextmenu\r\n if (Component.current) {\r\n Component.current.close();\r\n }\r\n\r\n // Add to the opened components monitor\r\n tracking(obj, true);\r\n\r\n // Show context menu\r\n el.classList.add('jcontextmenu-focus');\r\n\r\n // Current\r\n Component.current = obj;\r\n\r\n // Coordinates\r\n if ((obj.options.items && obj.options.items.length > 0) || el.children.length) {\r\n if (e.target) {\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n x = e.changedTouches[0].clientX;\r\n y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n } else {\r\n var x = e.x;\r\n var y = e.y;\r\n }\r\n\r\n var rect = el.getBoundingClientRect();\r\n\r\n if (window.innerHeight < y + rect.height) {\r\n var h = y - rect.height;\r\n if (h < 0) {\r\n h = 0;\r\n }\r\n el.style.top = h + 'px';\r\n } else {\r\n el.style.top = y + 'px';\r\n }\r\n\r\n if (window.innerWidth < x + rect.width) {\r\n if (x - rect.width > 0) {\r\n el.style.left = (x - rect.width) + 'px';\r\n } else {\r\n el.style.left = '10px';\r\n }\r\n } else {\r\n el.style.left = x + 'px';\r\n }\r\n }\r\n }\r\n\r\n obj.isOpened = function () {\r\n return el.classList.contains('jcontextmenu-focus') ? true : false;\r\n }\r\n\r\n /**\r\n * Close menu\r\n */\r\n obj.close = function () {\r\n if (el.classList.contains('jcontextmenu-focus')) {\r\n el.classList.remove('jcontextmenu-focus');\r\n }\r\n tracking(obj, false);\r\n }\r\n\r\n /**\r\n * Create items based on the declared objectd\r\n * @param {object} items - List of object\r\n */\r\n obj.create = function (items) {\r\n // Update content\r\n el.innerHTML = '';\r\n\r\n // Add header contextmenu\r\n var itemHeader = createHeader();\r\n el.appendChild(itemHeader);\r\n\r\n // Append items\r\n for (var i = 0; i < items.length; i++) {\r\n var itemContainer = createItemElement(items[i]);\r\n el.appendChild(itemContainer);\r\n }\r\n }\r\n\r\n /**\r\n * createHeader for context menu\r\n * @private\r\n * @returns {HTMLElement}\r\n */\r\n function createHeader() {\r\n var header = document.createElement('div');\r\n header.classList.add(\"header\");\r\n header.addEventListener(\"click\", function (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n var title = document.createElement('a');\r\n title.classList.add(\"title\");\r\n title.innerHTML = dictionary.translate(\"Menu\");\r\n\r\n header.appendChild(title);\r\n\r\n var closeButton = document.createElement('a');\r\n closeButton.classList.add(\"close\");\r\n closeButton.innerHTML = dictionary.translate(\"close\");\r\n closeButton.addEventListener(\"click\", function (e) {\r\n obj.close();\r\n });\r\n\r\n header.appendChild(closeButton);\r\n\r\n return header;\r\n }\r\n\r\n /**\r\n * Private function for create a new Item element\r\n * @param {type} item\r\n * @returns {jsuitesL#15.jSuites.contextmenu.createItemElement.itemContainer}\r\n */\r\n function createItemElement(item) {\r\n if (item.type && (item.type == 'line' || item.type == 'divisor')) {\r\n var itemContainer = document.createElement('hr');\r\n } else {\r\n var itemContainer = document.createElement('div');\r\n var itemText = document.createElement('a');\r\n itemText.innerHTML = item.title;\r\n\r\n if (item.tooltip) {\r\n itemContainer.setAttribute('title', item.tooltip);\r\n }\r\n\r\n if (item.icon) {\r\n itemContainer.setAttribute('data-icon', item.icon);\r\n }\r\n\r\n if (item.id) {\r\n itemContainer.id = item.id;\r\n }\r\n\r\n if (item.disabled) {\r\n itemContainer.className = 'jcontextmenu-disabled';\r\n } else if (item.onclick) {\r\n let method = item.onclick;\r\n itemContainer.addEventListener(\"mousedown\", function (e) {\r\n e.preventDefault();\r\n });\r\n itemContainer.addEventListener(\"mouseup\", function (e) {\r\n method(this, e);\r\n });\r\n }\r\n itemContainer.appendChild(itemText);\r\n\r\n if (item.submenu) {\r\n var itemIconSubmenu = document.createElement('span');\r\n itemIconSubmenu.innerHTML = \"►\";\r\n itemContainer.appendChild(itemIconSubmenu);\r\n itemContainer.classList.add('jcontexthassubmenu');\r\n var el_submenu = document.createElement('div');\r\n // Class definition\r\n el_submenu.classList.add('jcontextmenu');\r\n // Focusable\r\n el_submenu.setAttribute('tabindex', '900');\r\n\r\n // Append items\r\n var submenu = item.submenu;\r\n for (var i = 0; i < submenu.length; i++) {\r\n var itemContainerSubMenu = createItemElement(submenu[i]);\r\n el_submenu.appendChild(itemContainerSubMenu);\r\n }\r\n\r\n itemContainer.appendChild(el_submenu);\r\n\r\n // Submenu positioning logic:\r\n // Case 1: Default (enough space to the right) - submenu opens to the right of the parent menu item.\r\n // Case 2: Not enough space to the right, but enough to the left - submenu opens to the left of the parent menu item.\r\n // Case 3: Not enough space on either side (e.g., very narrow viewport) - submenu opens below the parent menu item.\r\n itemContainer.addEventListener('mouseenter', function () {\r\n // Reset to default\r\n el_submenu.style.left = '';\r\n el_submenu.style.right = '';\r\n el_submenu.style.minWidth = itemContainer.offsetWidth + 'px';\r\n\r\n // Temporarily show submenu to measure\r\n el_submenu.style.display = 'block';\r\n el_submenu.style.opacity = '0';\r\n el_submenu.style.pointerEvents = 'none';\r\n\r\n // Use getBoundingClientRect to determine position\r\n var parentRect = itemContainer.getBoundingClientRect();\r\n var submenuRect = el_submenu.getBoundingClientRect();\r\n var viewportWidth = window.innerWidth || document.documentElement.clientWidth;\r\n\r\n // Calculate the right edge if rendered to the right\r\n var rightEdge = parentRect.right + submenuRect.width;\r\n var leftEdge = parentRect.left - submenuRect.width;\r\n\r\n // If rendering to the right would overflow, render to the left\r\n if (rightEdge > viewportWidth && leftEdge >= 0) {\r\n el_submenu.style.left = 'auto';\r\n el_submenu.style.right = '99%';\r\n } \r\n // If both right and left would overflow, render to the right of the left border (worst case)\r\n else if (rightEdge > viewportWidth && leftEdge < 0) {\r\n el_submenu.style.left = '32px';\r\n el_submenu.style.right = 'auto';\r\n el_submenu.style.top = '100%';\r\n }\r\n // Default: render to the right\r\n else {\r\n el_submenu.style.left = '99%';\r\n el_submenu.style.right = 'auto';\r\n }\r\n\r\n // Restore visibility\r\n el_submenu.style.opacity = '';\r\n el_submenu.style.pointerEvents = '';\r\n el_submenu.style.display = '';\r\n });\r\n\r\n // Also reset submenu position on mouseleave to avoid stale styles\r\n itemContainer.addEventListener('mouseleave', function () {\r\n el_submenu.style.left = '';\r\n el_submenu.style.right = '';\r\n el_submenu.style.minWidth = '';\r\n });\r\n } else if (item.shortcut) {\r\n var itemShortCut = document.createElement('span');\r\n itemShortCut.innerHTML = item.shortcut;\r\n itemContainer.appendChild(itemShortCut);\r\n }\r\n }\r\n return itemContainer;\r\n }\r\n\r\n if (typeof (obj.options.onclick) == 'function') {\r\n el.addEventListener('click', function (e) {\r\n obj.options.onclick(obj, e);\r\n });\r\n }\r\n\r\n // Create items\r\n if (obj.options.items) {\r\n obj.create(obj.options.items);\r\n }\r\n\r\n window.addEventListener(\"mousewheel\", function () {\r\n obj.close();\r\n });\r\n\r\n el.contextmenu = obj;\r\n\r\n return obj;\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var contextmenu = (Contextmenu());\n;// CONCATENATED MODULE: ./src/plugins/dropdown.js\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction Dropdown() {\r\n\r\n var Component = (function (el, options) {\r\n // Already created, update options\r\n if (el.dropdown) {\r\n return el.dropdown.setOptions(options, true);\r\n }\r\n\r\n // New instance\r\n var obj = {type: 'dropdown'};\r\n obj.options = {};\r\n\r\n // Success\r\n var success = function (data, val) {\r\n // Set data\r\n if (data && data.length) {\r\n // Sort\r\n if (obj.options.sortResults !== false) {\r\n if (typeof obj.options.sortResults == \"function\") {\r\n data.sort(obj.options.sortResults);\r\n } else {\r\n data.sort(sortData);\r\n }\r\n }\r\n\r\n obj.setData(data);\r\n }\r\n\r\n // Onload method\r\n if (typeof (obj.options.onload) == 'function') {\r\n obj.options.onload(el, obj, data, val);\r\n }\r\n\r\n // Set value\r\n if (val) {\r\n applyValue(val);\r\n }\r\n\r\n // Component value\r\n if (val === undefined || val === null) {\r\n obj.options.value = '';\r\n }\r\n el.value = obj.options.value;\r\n\r\n // Open dropdown\r\n if (obj.options.opened == true) {\r\n obj.open();\r\n }\r\n }\r\n\r\n\r\n // Default sort\r\n var sortData = function (itemA, itemB) {\r\n var testA, testB;\r\n if (typeof itemA == \"string\") {\r\n testA = itemA;\r\n } else {\r\n if (itemA.text) {\r\n testA = itemA.text;\r\n } else if (itemA.name) {\r\n testA = itemA.name;\r\n }\r\n }\r\n\r\n if (typeof itemB == \"string\") {\r\n testB = itemB;\r\n } else {\r\n if (itemB.text) {\r\n testB = itemB.text;\r\n } else if (itemB.name) {\r\n testB = itemB.name;\r\n }\r\n }\r\n\r\n if (typeof testA == \"string\" || typeof testB == \"string\") {\r\n if (typeof testA != \"string\") {\r\n testA = \"\" + testA;\r\n }\r\n if (typeof testB != \"string\") {\r\n testB = \"\" + testB;\r\n }\r\n return testA.localeCompare(testB);\r\n } else {\r\n return testA - testB;\r\n }\r\n }\r\n\r\n /**\r\n * Reset the options for the dropdown\r\n */\r\n var resetValue = function () {\r\n // Reset value container\r\n obj.value = {};\r\n // Remove selected\r\n for (var i = 0; i < obj.items.length; i++) {\r\n if (obj.items[i].selected == true) {\r\n if (obj.items[i].element) {\r\n obj.items[i].element.classList.remove('jdropdown-selected')\r\n }\r\n obj.items[i].selected = null;\r\n }\r\n }\r\n // Reset options\r\n obj.options.value = '';\r\n // Reset value\r\n el.value = '';\r\n }\r\n\r\n /**\r\n * Apply values to the dropdown\r\n */\r\n var applyValue = function (values) {\r\n // Reset the current values\r\n resetValue();\r\n\r\n // Read values\r\n if (values !== null) {\r\n if (!values) {\r\n if (typeof (obj.value['']) !== 'undefined') {\r\n obj.value[''] = '';\r\n }\r\n } else {\r\n if (!Array.isArray(values)) {\r\n values = ('' + values).split(';');\r\n }\r\n for (var i = 0; i < values.length; i++) {\r\n obj.value[values[i]] = '';\r\n }\r\n }\r\n }\r\n\r\n // Update the DOM\r\n for (var i = 0; i < obj.items.length; i++) {\r\n if (typeof (obj.value[Value(i)]) !== 'undefined') {\r\n if (obj.items[i].element) {\r\n obj.items[i].element.classList.add('jdropdown-selected')\r\n }\r\n obj.items[i].selected = true;\r\n\r\n // Keep label\r\n obj.value[Value(i)] = Text(i);\r\n }\r\n }\r\n\r\n // Global value\r\n obj.options.value = Object.keys(obj.value).join(';');\r\n\r\n // Update labels\r\n obj.header.value = obj.getText();\r\n }\r\n\r\n // Get the value of one item\r\n var Value = function (k, v) {\r\n // Legacy purposes\r\n if (!obj.options.format) {\r\n var property = 'value';\r\n } else {\r\n var property = 'id';\r\n }\r\n\r\n if (obj.items[k]) {\r\n if (v !== undefined) {\r\n return obj.items[k].data[property] = v;\r\n } else {\r\n return obj.items[k].data[property];\r\n }\r\n }\r\n\r\n return '';\r\n }\r\n\r\n // Get the label of one item\r\n var Text = function (k, v) {\r\n // Legacy purposes\r\n if (!obj.options.format) {\r\n var property = 'text';\r\n } else {\r\n var property = 'name';\r\n }\r\n\r\n if (obj.items[k]) {\r\n if (v !== undefined) {\r\n return obj.items[k].data[property] = v;\r\n } else {\r\n return obj.items[k].data[property];\r\n }\r\n }\r\n\r\n return '';\r\n }\r\n\r\n var getValue = function () {\r\n return Object.keys(obj.value);\r\n }\r\n\r\n var getText = function () {\r\n var data = [];\r\n var k = Object.keys(obj.value);\r\n for (var i = 0; i < k.length; i++) {\r\n data.push(obj.value[k[i]]);\r\n }\r\n return data;\r\n }\r\n\r\n obj.setOptions = function (options, reset) {\r\n if (!options) {\r\n options = {};\r\n }\r\n\r\n // Default configuration\r\n var defaults = {\r\n url: null,\r\n data: [],\r\n format: 0,\r\n multiple: false,\r\n autocomplete: false,\r\n remoteSearch: false,\r\n lazyLoading: false,\r\n type: null,\r\n width: null,\r\n maxWidth: null,\r\n opened: false,\r\n value: null,\r\n placeholder: '',\r\n newOptions: false,\r\n position: false,\r\n onchange: null,\r\n onload: null,\r\n onopen: null,\r\n onclose: null,\r\n onfocus: null,\r\n onblur: null,\r\n oninsert: null,\r\n onbeforeinsert: null,\r\n onsearch: null,\r\n onbeforesearch: null,\r\n sortResults: false,\r\n autofocus: false,\r\n prompt: null,\r\n allowEmpty: true,\r\n }\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof (obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Force autocomplete search\r\n if (obj.options.remoteSearch == true || obj.options.type === 'searchbar') {\r\n obj.options.autocomplete = true;\r\n }\r\n\r\n // New options\r\n if (obj.options.newOptions == true) {\r\n obj.header.classList.add('jdropdown-add');\r\n } else {\r\n obj.header.classList.remove('jdropdown-add');\r\n }\r\n\r\n // Autocomplete\r\n if (obj.options.autocomplete == true) {\r\n obj.header.removeAttribute('readonly');\r\n } else {\r\n obj.header.setAttribute('readonly', 'readonly');\r\n }\r\n\r\n // Place holder\r\n if (obj.options.placeholder) {\r\n obj.header.setAttribute('placeholder', obj.options.placeholder);\r\n } else {\r\n obj.header.removeAttribute('placeholder');\r\n }\r\n\r\n // Remove specific dropdown typing to add again\r\n el.classList.remove('jdropdown-searchbar');\r\n el.classList.remove('jdropdown-picker');\r\n el.classList.remove('jdropdown-list');\r\n\r\n if (obj.options.type == 'searchbar') {\r\n el.classList.add('jdropdown-searchbar');\r\n } else if (obj.options.type == 'list') {\r\n el.classList.add('jdropdown-list');\r\n } else if (obj.options.type == 'picker') {\r\n el.classList.add('jdropdown-picker');\r\n } else {\r\n if (helpers.getWindowWidth() < 800) {\r\n if (obj.options.autocomplete) {\r\n el.classList.add('jdropdown-searchbar');\r\n obj.options.type = 'searchbar';\r\n } else {\r\n el.classList.add('jdropdown-picker');\r\n obj.options.type = 'picker';\r\n }\r\n } else {\r\n if (obj.options.width) {\r\n el.style.width = obj.options.width;\r\n el.style.minWidth = obj.options.width;\r\n } else {\r\n el.style.removeProperty('width');\r\n el.style.removeProperty('min-width');\r\n }\r\n\r\n el.classList.add('jdropdown-default');\r\n obj.options.type = 'default';\r\n }\r\n }\r\n\r\n // Close button\r\n if (obj.options.type == 'searchbar') {\r\n containerHeader.appendChild(closeButton);\r\n } else {\r\n container.insertBefore(closeButton, container.firstChild);\r\n }\r\n\r\n // Load the content\r\n if (obj.options.url && !options.data) {\r\n ajax({\r\n url: obj.options.url,\r\n method: 'GET',\r\n dataType: 'json',\r\n success: function (data) {\r\n if (data) {\r\n success(data, obj.options.value);\r\n }\r\n }\r\n });\r\n } else {\r\n success(obj.options.data, obj.options.value);\r\n }\r\n\r\n // Return the instance\r\n return obj;\r\n }\r\n\r\n // Helpers\r\n var containerHeader = null;\r\n var container = null;\r\n var content = null;\r\n var closeButton = null;\r\n var resetButton = null;\r\n var backdrop = null;\r\n\r\n var keyTimer = null;\r\n\r\n /**\r\n * Init dropdown\r\n */\r\n var init = function () {\r\n // Do not accept null\r\n if (!options) {\r\n options = {};\r\n }\r\n\r\n // If the element is a SELECT tag, create a configuration object\r\n if (el.tagName == 'SELECT') {\r\n var ret = Component.extractFromDom(el, options);\r\n el = ret.el;\r\n options = ret.options;\r\n }\r\n\r\n // Place holder\r\n if (!options.placeholder && el.getAttribute('placeholder')) {\r\n options.placeholder = el.getAttribute('placeholder');\r\n }\r\n\r\n // Value container\r\n obj.value = {};\r\n // Containers\r\n obj.items = [];\r\n obj.groups = [];\r\n // Search options\r\n obj.search = '';\r\n obj.results = null;\r\n\r\n // Create dropdown\r\n el.classList.add('jdropdown');\r\n\r\n // Header container\r\n containerHeader = document.createElement('div');\r\n containerHeader.className = 'jdropdown-container-header';\r\n\r\n // Header\r\n obj.header = document.createElement('input');\r\n obj.header.className = 'jdropdown-header jss_object';\r\n obj.header.type = 'text';\r\n obj.header.setAttribute('autocomplete', 'off');\r\n obj.header.onfocus = function () {\r\n if (typeof (obj.options.onfocus) == 'function') {\r\n obj.options.onfocus(el);\r\n }\r\n }\r\n\r\n obj.header.onblur = function () {\r\n if (typeof (obj.options.onblur) == 'function') {\r\n obj.options.onblur(el);\r\n }\r\n }\r\n\r\n obj.header.onkeyup = function (e) {\r\n if (obj.options.autocomplete == true && !keyTimer) {\r\n if (obj.search != obj.header.value.trim()) {\r\n keyTimer = setTimeout(function () {\r\n obj.find(obj.header.value.trim());\r\n keyTimer = null;\r\n }, 400);\r\n }\r\n\r\n if (!el.classList.contains('jdropdown-focus')) {\r\n obj.open();\r\n }\r\n } else {\r\n if (!obj.options.autocomplete) {\r\n obj.next(e.key);\r\n }\r\n }\r\n }\r\n\r\n // Global controls\r\n if (!Component.hasEvents) {\r\n // Execute only one time\r\n Component.hasEvents = true;\r\n // Enter and Esc\r\n document.addEventListener(\"keydown\", Component.keydown);\r\n }\r\n\r\n // Container\r\n container = document.createElement('div');\r\n container.className = 'jdropdown-container';\r\n\r\n // Dropdown content\r\n content = document.createElement('div');\r\n content.className = 'jdropdown-content';\r\n\r\n // Close button\r\n closeButton = document.createElement('div');\r\n closeButton.className = 'jdropdown-close';\r\n closeButton.textContent = 'Done';\r\n\r\n // Reset button\r\n resetButton = document.createElement('div');\r\n resetButton.className = 'jdropdown-reset';\r\n resetButton.textContent = 'x';\r\n resetButton.onclick = function () {\r\n obj.reset();\r\n obj.close();\r\n }\r\n\r\n // Create backdrop\r\n backdrop = document.createElement('div');\r\n backdrop.className = 'jdropdown-backdrop';\r\n\r\n // Append elements\r\n containerHeader.appendChild(obj.header);\r\n\r\n container.appendChild(content);\r\n el.appendChild(containerHeader);\r\n el.appendChild(container);\r\n el.appendChild(backdrop);\r\n\r\n // Set the otiptions\r\n obj.setOptions(options);\r\n\r\n if ('ontouchsend' in document.documentElement === true) {\r\n el.addEventListener('touchsend', Component.mouseup);\r\n } else {\r\n el.addEventListener('mouseup', Component.mouseup);\r\n }\r\n\r\n // Lazyloading\r\n if (obj.options.lazyLoading == true) {\r\n LazyLoading(content, {\r\n loadUp: obj.loadUp,\r\n loadDown: obj.loadDown,\r\n });\r\n }\r\n\r\n content.onwheel = function (e) {\r\n e.stopPropagation();\r\n }\r\n\r\n // Change method\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function (val) {\r\n if (val === undefined) {\r\n return obj.getValue(obj.options.multiple ? true : false);\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Keep object available from the node\r\n el.dropdown = obj;\r\n }\r\n\r\n /**\r\n * Get the current remote source of data URL\r\n */\r\n obj.getUrl = function () {\r\n return obj.options.url;\r\n }\r\n\r\n /**\r\n * Set the new data from a remote source\r\n * @param {string} url - url from the remote source\r\n * @param {function} callback - callback when the data is loaded\r\n */\r\n obj.setUrl = function (url, callback) {\r\n obj.options.url = url;\r\n\r\n ajax({\r\n url: obj.options.url,\r\n method: 'GET',\r\n dataType: 'json',\r\n success: function (data) {\r\n obj.setData(data);\r\n // Callback\r\n if (typeof (callback) == 'function') {\r\n callback(obj);\r\n }\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Set ID for one item\r\n */\r\n obj.setId = function (item, v) {\r\n // Legacy purposes\r\n if (!obj.options.format) {\r\n var property = 'value';\r\n } else {\r\n var property = 'id';\r\n }\r\n\r\n if (typeof (item) == 'object') {\r\n item[property] = v;\r\n } else {\r\n obj.items[item].data[property] = v;\r\n }\r\n }\r\n\r\n const add = function(title, id) {\r\n if (! title) {\r\n let current = obj.options.autocomplete == true ? obj.header.value : '';\r\n title = prompt(dictionary.translate('Add A New Option'), current);\r\n if (! title) {\r\n return false;\r\n }\r\n }\r\n\r\n // Id\r\n if (! id) {\r\n id = helpers.guid();\r\n }\r\n\r\n // Create new item\r\n if (!obj.options.format) {\r\n var item = {\r\n value: id,\r\n text: title,\r\n }\r\n } else {\r\n var item = {\r\n id: id,\r\n name: title,\r\n }\r\n }\r\n\r\n // Callback\r\n if (typeof (obj.options.onbeforeinsert) == 'function') {\r\n let ret = obj.options.onbeforeinsert(obj, item);\r\n if (ret === false) {\r\n return false;\r\n } else if (ret) {\r\n item = ret;\r\n }\r\n }\r\n\r\n // Add item to the main list\r\n obj.options.data.push(item);\r\n\r\n // Create DOM\r\n var newItem = obj.createItem(item);\r\n\r\n // Append DOM to the list\r\n content.appendChild(newItem.element);\r\n\r\n // Callback\r\n if (typeof (obj.options.oninsert) == 'function') {\r\n obj.options.oninsert(obj, item, newItem);\r\n }\r\n\r\n // Show content\r\n if (content.style.display == 'none') {\r\n content.style.display = '';\r\n }\r\n\r\n // Search?\r\n if (obj.results) {\r\n obj.results.push(newItem);\r\n }\r\n\r\n return item;\r\n }\r\n\r\n /**\r\n * Add a new item\r\n * @param {string} title - title of the new item\r\n * @param {string} id - value/id of the new item\r\n */\r\n obj.add = function (title, id) {\r\n if (typeof (obj.options.prompt) == 'function') {\r\n return obj.options.prompt.call(obj, add);\r\n }\r\n return add(title, id);\r\n }\r\n\r\n /**\r\n * Create a new item\r\n */\r\n obj.createItem = function (data, group, groupName) {\r\n // Keep the correct source of data\r\n if (!obj.options.format) {\r\n if (!data.value && data.id !== undefined) {\r\n data.value = data.id;\r\n //delete data.id;\r\n }\r\n if (!data.text && data.name !== undefined) {\r\n data.text = data.name;\r\n //delete data.name;\r\n }\r\n } else {\r\n if (!data.id && data.value !== undefined) {\r\n data.id = data.value;\r\n //delete data.value;\r\n }\r\n if (!data.name && data.text !== undefined) {\r\n data.name = data.text\r\n //delete data.text;\r\n }\r\n }\r\n\r\n // Create item\r\n var item = {};\r\n item.element = document.createElement('div');\r\n item.element.className = 'jdropdown-item';\r\n item.element.indexValue = obj.items.length;\r\n item.data = data;\r\n\r\n // Groupd DOM\r\n if (group) {\r\n item.group = group;\r\n }\r\n\r\n // Id\r\n if (data.id) {\r\n item.element.setAttribute('id', data.id);\r\n }\r\n\r\n // Disabled\r\n if (data.disabled == true) {\r\n item.element.setAttribute('data-disabled', true);\r\n }\r\n\r\n // Tooltip\r\n if (data.tooltip) {\r\n item.element.setAttribute('title', data.tooltip);\r\n }\r\n\r\n // Image\r\n if (data.image) {\r\n var image = document.createElement('img');\r\n image.className = 'jdropdown-image';\r\n image.src = data.image;\r\n if (!data.title) {\r\n image.classList.add('jdropdown-image-small');\r\n }\r\n item.element.appendChild(image);\r\n } else if (data.icon) {\r\n var icon = document.createElement('span');\r\n icon.className = \"jdropdown-icon material-icons\";\r\n icon.innerText = data.icon;\r\n if (!data.title) {\r\n icon.classList.add('jdropdown-icon-small');\r\n }\r\n if (data.color) {\r\n icon.style.color = data.color;\r\n }\r\n item.element.appendChild(icon);\r\n } else if (data.color) {\r\n var color = document.createElement('div');\r\n color.className = 'jdropdown-color';\r\n color.style.backgroundColor = data.color;\r\n item.element.appendChild(color);\r\n }\r\n\r\n // Set content\r\n if (!obj.options.format) {\r\n var text = data.text;\r\n } else {\r\n var text = data.name;\r\n }\r\n\r\n var node = document.createElement('div');\r\n node.className = 'jdropdown-description';\r\n node.textContent = text || ' ';\r\n\r\n // Title\r\n if (data.title) {\r\n var title = document.createElement('div');\r\n title.className = 'jdropdown-title';\r\n title.innerText = data.title;\r\n node.appendChild(title);\r\n }\r\n\r\n // Set content\r\n if (!obj.options.format) {\r\n var val = data.value;\r\n } else {\r\n var val = data.id;\r\n }\r\n\r\n // Value\r\n if (obj.value[val]) {\r\n item.element.classList.add('jdropdown-selected');\r\n item.selected = true;\r\n }\r\n\r\n // Keep DOM accessible\r\n obj.items.push(item);\r\n\r\n // Add node to item\r\n item.element.appendChild(node);\r\n\r\n return item;\r\n }\r\n\r\n obj.appendData = function (data) {\r\n // Create elements\r\n if (data.length) {\r\n // Helpers\r\n var items = [];\r\n var groups = [];\r\n\r\n // Prepare data\r\n for (var i = 0; i < data.length; i++) {\r\n // Process groups\r\n if (data[i].group) {\r\n if (!groups[data[i].group]) {\r\n groups[data[i].group] = [];\r\n }\r\n groups[data[i].group].push(i);\r\n } else {\r\n items.push(i);\r\n }\r\n }\r\n\r\n // Number of items counter\r\n var counter = 0;\r\n\r\n // Groups\r\n var groupNames = Object.keys(groups);\r\n\r\n // Append groups in case exists\r\n if (groupNames.length > 0) {\r\n for (var i = 0; i < groupNames.length; i++) {\r\n // Group container\r\n var group = document.createElement('div');\r\n group.className = 'jdropdown-group';\r\n // Group name\r\n var groupName = document.createElement('div');\r\n groupName.className = 'jdropdown-group-name';\r\n groupName.textContent = groupNames[i];\r\n // Group arrow\r\n var groupArrow = document.createElement('i');\r\n groupArrow.className = 'jdropdown-group-arrow jdropdown-group-arrow-down';\r\n groupName.appendChild(groupArrow);\r\n // Group items\r\n var groupContent = document.createElement('div');\r\n groupContent.className = 'jdropdown-group-items';\r\n for (var j = 0; j < groups[groupNames[i]].length; j++) {\r\n var item = obj.createItem(data[groups[groupNames[i]][j]], group, groupNames[i]);\r\n\r\n if (obj.options.lazyLoading == false || counter < 200) {\r\n groupContent.appendChild(item.element);\r\n counter++;\r\n }\r\n }\r\n // Group itens\r\n group.appendChild(groupName);\r\n group.appendChild(groupContent);\r\n // Keep group DOM\r\n obj.groups.push(group);\r\n // Only add to the screen if children on the group\r\n if (groupContent.children.length > 0) {\r\n // Add DOM to the content\r\n content.appendChild(group);\r\n }\r\n }\r\n }\r\n\r\n if (items.length) {\r\n for (var i = 0; i < items.length; i++) {\r\n var item = obj.createItem(data[items[i]]);\r\n if (obj.options.lazyLoading == false || counter < 200) {\r\n content.appendChild(item.element);\r\n counter++;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n obj.setData = function (data) {\r\n // Reset current value\r\n resetValue();\r\n\r\n // Make sure the content container is blank\r\n content.textContent = '';\r\n\r\n // Reset\r\n obj.header.value = '';\r\n\r\n // Reset items and values\r\n obj.items = [];\r\n\r\n // Prepare data\r\n if (data && data.length) {\r\n for (var i = 0; i < data.length; i++) {\r\n // Compatibility\r\n if (typeof (data[i]) != 'object') {\r\n // Correct format\r\n if (!obj.options.format) {\r\n data[i] = {\r\n value: data[i],\r\n text: data[i]\r\n }\r\n } else {\r\n data[i] = {\r\n id: data[i],\r\n name: data[i]\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Append data\r\n obj.appendData(data);\r\n\r\n // Update data\r\n obj.options.data = data;\r\n } else {\r\n // Update data\r\n obj.options.data = [];\r\n }\r\n\r\n obj.close();\r\n }\r\n\r\n obj.getData = function () {\r\n return obj.options.data;\r\n }\r\n\r\n /**\r\n * Get position of the item\r\n */\r\n obj.getPosition = function (val) {\r\n for (var i = 0; i < obj.items.length; i++) {\r\n if (Value(i) == val) {\r\n return i;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n /**\r\n * Get dropdown current text\r\n */\r\n obj.getText = function (asArray) {\r\n // Get value\r\n var v = getText();\r\n // Return value\r\n if (asArray) {\r\n return v;\r\n } else {\r\n return v.join('; ');\r\n }\r\n }\r\n\r\n /**\r\n * Get dropdown current value\r\n */\r\n obj.getValue = function (asArray) {\r\n // Get value\r\n var v = getValue();\r\n // Return value\r\n if (asArray) {\r\n return v;\r\n } else {\r\n return v.join(';');\r\n }\r\n }\r\n\r\n /**\r\n * Change event\r\n */\r\n var change = function (oldValue) {\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof (el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n\r\n // Events\r\n if (typeof (obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, obj, oldValue, obj.options.value);\r\n }\r\n }\r\n\r\n /**\r\n * Set value\r\n */\r\n obj.setValue = function (newValue) {\r\n // Current value\r\n var oldValue = obj.getValue();\r\n // New value\r\n if (Array.isArray(newValue)) {\r\n newValue = newValue.join(';')\r\n }\r\n\r\n if (oldValue !== newValue) {\r\n // Set value\r\n applyValue(newValue);\r\n\r\n // Change\r\n change(oldValue);\r\n }\r\n }\r\n\r\n obj.resetSelected = function () {\r\n obj.setValue(null);\r\n }\r\n\r\n obj.selectIndex = function (index, force) {\r\n // Make sure is a number\r\n var index = parseInt(index);\r\n\r\n // Only select those existing elements\r\n if (obj.items && obj.items[index] && (force === true || obj.items[index].data.disabled !== true)) {\r\n // Reset cursor to a new position\r\n obj.setCursor(index, false);\r\n\r\n // Behaviour\r\n if (!obj.options.multiple) {\r\n // Update value\r\n if (obj.items[index].selected) {\r\n if (obj.options.allowEmpty !== false) {\r\n obj.setValue(null);\r\n }\r\n } else {\r\n obj.setValue(Value(index));\r\n }\r\n\r\n // Close component\r\n obj.close();\r\n } else {\r\n // Old value\r\n var oldValue = obj.options.value;\r\n\r\n // Toggle option\r\n if (obj.items[index].selected) {\r\n obj.items[index].element.classList.remove('jdropdown-selected');\r\n obj.items[index].selected = false;\r\n\r\n delete obj.value[Value(index)];\r\n } else {\r\n // Select element\r\n obj.items[index].element.classList.add('jdropdown-selected');\r\n obj.items[index].selected = true;\r\n\r\n // Set value\r\n obj.value[Value(index)] = Text(index);\r\n }\r\n\r\n // Global value\r\n obj.options.value = Object.keys(obj.value).join(';');\r\n\r\n // Update labels for multiple dropdown\r\n if (obj.options.autocomplete == false) {\r\n obj.header.value = getText().join('; ');\r\n }\r\n\r\n // Events\r\n change(oldValue);\r\n }\r\n }\r\n }\r\n\r\n obj.selectItem = function (item) {\r\n obj.selectIndex(item.indexValue);\r\n }\r\n\r\n var exists = function (k, result) {\r\n for (var j = 0; j < result.length; j++) {\r\n if (!obj.options.format) {\r\n if (result[j].value == k) {\r\n return true;\r\n }\r\n } else {\r\n if (result[j].id == k) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n obj.find = function (str) {\r\n if (obj.search == str.trim()) {\r\n return false;\r\n }\r\n\r\n // Search term\r\n obj.search = str;\r\n\r\n // Reset index\r\n obj.setCursor();\r\n\r\n // Remove nodes from all groups\r\n if (obj.groups.length) {\r\n for (var i = 0; i < obj.groups.length; i++) {\r\n obj.groups[i].lastChild.textContent = '';\r\n }\r\n }\r\n\r\n // Remove all nodes\r\n content.textContent = '';\r\n\r\n // Remove current items in the remote search\r\n if (obj.options.remoteSearch == true) {\r\n // Reset results\r\n obj.results = null;\r\n // URL\r\n var url = obj.options.url;\r\n\r\n // Ajax call\r\n let o = {\r\n url: url,\r\n method: 'GET',\r\n data: { q: str },\r\n dataType: 'json',\r\n success: function (result) {\r\n // Reset items\r\n obj.items = [];\r\n\r\n // Add the current selected items to the results in case they are not there\r\n var current = Object.keys(obj.value);\r\n if (current.length) {\r\n for (var i = 0; i < current.length; i++) {\r\n if (!exists(current[i], result)) {\r\n if (!obj.options.format) {\r\n result.unshift({value: current[i], text: obj.value[current[i]]});\r\n } else {\r\n result.unshift({id: current[i], name: obj.value[current[i]]});\r\n }\r\n }\r\n }\r\n }\r\n // Append data\r\n obj.appendData(result);\r\n // Show or hide results\r\n if (!result.length) {\r\n content.style.display = 'none';\r\n } else {\r\n content.style.display = '';\r\n }\r\n\r\n if (typeof(obj.options.onsearch) === 'function') {\r\n obj.options.onsearch(obj, result);\r\n }\r\n }\r\n }\r\n\r\n if (typeof(obj.options.onbeforesearch) === 'function') {\r\n let ret = obj.options.onbeforesearch(obj, o);\r\n if (ret === false) {\r\n return;\r\n } else if (typeof(ret) === 'object') {\r\n o = ret;\r\n }\r\n }\r\n\r\n // Remote search\r\n ajax(o);\r\n } else {\r\n // Search terms\r\n str = new RegExp(str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'gi');\r\n\r\n // Reset search\r\n var results = [];\r\n\r\n // Append options\r\n for (var i = 0; i < obj.items.length; i++) {\r\n // Item label\r\n var label = Text(i);\r\n // Item title\r\n var title = obj.items[i].data.title || '';\r\n // Group name\r\n var groupName = obj.items[i].data.group || '';\r\n // Synonym\r\n var synonym = obj.items[i].data.synonym || '';\r\n if (synonym) {\r\n synonym = synonym.join(' ');\r\n }\r\n\r\n if (str == null || obj.items[i].selected == true || label.toString().match(str) || title.match(str) || groupName.match(str) || synonym.match(str)) {\r\n results.push(obj.items[i]);\r\n }\r\n }\r\n\r\n if (!results.length) {\r\n content.style.display = 'none';\r\n\r\n // Results\r\n obj.results = null;\r\n } else {\r\n content.style.display = '';\r\n\r\n // Results\r\n obj.results = results;\r\n\r\n // Show 200 items at once\r\n var number = results.length || 0;\r\n\r\n // Lazyloading\r\n if (obj.options.lazyLoading == true && number > 200) {\r\n number = 200;\r\n }\r\n\r\n for (var i = 0; i < number; i++) {\r\n if (obj.results[i].group) {\r\n if (!obj.results[i].group.parentNode) {\r\n content.appendChild(obj.results[i].group);\r\n }\r\n obj.results[i].group.lastChild.appendChild(obj.results[i].element);\r\n } else {\r\n content.appendChild(obj.results[i].element);\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Auto focus\r\n if (obj.options.autofocus == true) {\r\n obj.first();\r\n }\r\n }\r\n\r\n obj.open = function () {\r\n // Focus\r\n if (!el.classList.contains('jdropdown-focus')) {\r\n // Current dropdown\r\n Component.current = obj;\r\n\r\n // Start tracking\r\n tracking(obj, true);\r\n\r\n // Add focus\r\n el.classList.add('jdropdown-focus');\r\n\r\n // Animation\r\n if (helpers.getWindowWidth() < 800) {\r\n if (obj.options.type == null || obj.options.type == 'picker') {\r\n animation.slideBottom(container, 1);\r\n }\r\n }\r\n\r\n // Filter\r\n if (obj.options.autocomplete == true) {\r\n obj.header.value = obj.search;\r\n obj.header.focus();\r\n }\r\n\r\n // Set cursor for the first or first selected element\r\n var k = getValue();\r\n if (k[0]) {\r\n var cursor = obj.getPosition(k[0]);\r\n if (cursor !== false) {\r\n obj.setCursor(cursor);\r\n }\r\n }\r\n\r\n // Container Size\r\n if (!obj.options.type || obj.options.type == 'default') {\r\n var rect = el.getBoundingClientRect();\r\n var rectContainer = container.getBoundingClientRect();\r\n\r\n if (obj.options.position) {\r\n container.style.position = 'fixed';\r\n if (window.innerHeight < rect.bottom + rectContainer.height) {\r\n container.style.top = '';\r\n container.style.bottom = (window.innerHeight - rect.top) + 1 + 'px';\r\n } else {\r\n container.style.top = rect.bottom + 'px';\r\n container.style.bottom = '';\r\n }\r\n container.style.left = rect.left + 'px';\r\n } else {\r\n if (window.innerHeight < rect.bottom + rectContainer.height) {\r\n container.style.top = '';\r\n container.style.bottom = rect.height + 1 + 'px';\r\n } else {\r\n container.style.top = '';\r\n container.style.bottom = '';\r\n }\r\n }\r\n\r\n container.style.minWidth = rect.width + 'px';\r\n\r\n if (obj.options.maxWidth) {\r\n container.style.maxWidth = obj.options.maxWidth;\r\n }\r\n\r\n if (!obj.items.length && obj.options.autocomplete == true) {\r\n content.style.display = 'none';\r\n } else {\r\n content.style.display = '';\r\n }\r\n }\r\n }\r\n\r\n // Events\r\n if (typeof (obj.options.onopen) == 'function') {\r\n obj.options.onopen(el);\r\n }\r\n }\r\n\r\n obj.close = function (ignoreEvents) {\r\n if (el.classList.contains('jdropdown-focus')) {\r\n // Update labels\r\n obj.header.value = obj.getText();\r\n // Remove cursor\r\n obj.setCursor();\r\n // Events\r\n if (!ignoreEvents && typeof (obj.options.onclose) == 'function') {\r\n obj.options.onclose(el);\r\n }\r\n // Blur\r\n if (obj.header.blur) {\r\n obj.header.blur();\r\n }\r\n // Remove focus\r\n el.classList.remove('jdropdown-focus');\r\n // Start tracking\r\n tracking(obj, false);\r\n // Current dropdown\r\n Component.current = null;\r\n }\r\n\r\n return obj.getValue();\r\n }\r\n\r\n /**\r\n * Set cursor\r\n */\r\n obj.setCursor = function (index, setPosition) {\r\n // Remove current cursor\r\n if (obj.currentIndex != null) {\r\n // Remove visual cursor\r\n if (obj.items && obj.items[obj.currentIndex]) {\r\n obj.items[obj.currentIndex].element.classList.remove('jdropdown-cursor');\r\n }\r\n }\r\n\r\n if (index == undefined) {\r\n obj.currentIndex = null;\r\n } else {\r\n index = parseInt(index);\r\n\r\n // Cursor only for visible items\r\n if (obj.items[index].element.parentNode) {\r\n obj.items[index].element.classList.add('jdropdown-cursor');\r\n obj.currentIndex = index;\r\n\r\n // Update scroll to the cursor element\r\n if (setPosition !== false && obj.items[obj.currentIndex].element) {\r\n var container = content.scrollTop;\r\n var element = obj.items[obj.currentIndex].element;\r\n content.scrollTop = element.offsetTop - element.scrollTop + element.clientTop - 95;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Compatibility\r\n obj.resetCursor = obj.setCursor;\r\n obj.updateCursor = obj.setCursor;\r\n\r\n /**\r\n * Reset cursor and selected items\r\n */\r\n obj.reset = function () {\r\n // Reset cursor\r\n obj.setCursor();\r\n\r\n // Reset selected\r\n obj.setValue(null);\r\n }\r\n\r\n /**\r\n * First available item\r\n */\r\n obj.first = function () {\r\n if (obj.options.lazyLoading === true) {\r\n obj.loadFirst();\r\n }\r\n\r\n var items = content.querySelectorAll('.jdropdown-item');\r\n if (items.length) {\r\n var newIndex = items[0].indexValue;\r\n obj.setCursor(newIndex);\r\n }\r\n }\r\n\r\n /**\r\n * Last available item\r\n */\r\n obj.last = function () {\r\n if (obj.options.lazyLoading === true) {\r\n obj.loadLast();\r\n }\r\n\r\n var items = content.querySelectorAll('.jdropdown-item');\r\n if (items.length) {\r\n var newIndex = items[items.length - 1].indexValue;\r\n obj.setCursor(newIndex);\r\n }\r\n }\r\n\r\n obj.next = function (letter) {\r\n var newIndex = null;\r\n\r\n if (letter) {\r\n if (letter.length == 1) {\r\n // Current index\r\n var current = obj.currentIndex || -1;\r\n // Letter\r\n letter = letter.toLowerCase();\r\n\r\n var e = null;\r\n var l = null;\r\n var items = content.querySelectorAll('.jdropdown-item');\r\n if (items.length) {\r\n for (var i = 0; i < items.length; i++) {\r\n if (items[i].indexValue > current) {\r\n if (e = obj.items[items[i].indexValue]) {\r\n if (l = e.element.innerText[0]) {\r\n l = l.toLowerCase();\r\n if (letter == l) {\r\n newIndex = items[i].indexValue;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n obj.setCursor(newIndex);\r\n }\r\n }\r\n } else {\r\n if (obj.currentIndex == undefined || obj.currentIndex == null) {\r\n obj.first();\r\n } else {\r\n var element = obj.items[obj.currentIndex].element;\r\n\r\n var next = element.nextElementSibling;\r\n if (next) {\r\n if (next.classList.contains('jdropdown-group')) {\r\n next = next.lastChild.firstChild;\r\n }\r\n newIndex = next.indexValue;\r\n } else {\r\n if (element.parentNode.classList.contains('jdropdown-group-items')) {\r\n if (next = element.parentNode.parentNode.nextElementSibling) {\r\n if (next.classList.contains('jdropdown-group')) {\r\n next = next.lastChild.firstChild;\r\n } else if (next.classList.contains('jdropdown-item')) {\r\n newIndex = next.indexValue;\r\n } else {\r\n next = null;\r\n }\r\n }\r\n\r\n if (next) {\r\n newIndex = next.indexValue;\r\n }\r\n }\r\n }\r\n\r\n if (newIndex !== null) {\r\n obj.setCursor(newIndex);\r\n }\r\n }\r\n }\r\n }\r\n\r\n obj.prev = function () {\r\n var newIndex = null;\r\n\r\n if (obj.currentIndex === null) {\r\n obj.first();\r\n } else {\r\n var element = obj.items[obj.currentIndex].element;\r\n\r\n var prev = element.previousElementSibling;\r\n if (prev) {\r\n if (prev.classList.contains('jdropdown-group')) {\r\n prev = prev.lastChild.lastChild;\r\n }\r\n newIndex = prev.indexValue;\r\n } else {\r\n if (element.parentNode.classList.contains('jdropdown-group-items')) {\r\n if (prev = element.parentNode.parentNode.previousElementSibling) {\r\n if (prev.classList.contains('jdropdown-group')) {\r\n prev = prev.lastChild.lastChild;\r\n } else if (prev.classList.contains('jdropdown-item')) {\r\n newIndex = prev.indexValue;\r\n } else {\r\n prev = null\r\n }\r\n }\r\n\r\n if (prev) {\r\n newIndex = prev.indexValue;\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (newIndex !== null) {\r\n obj.setCursor(newIndex);\r\n }\r\n }\r\n\r\n obj.loadFirst = function () {\r\n // Search\r\n if (obj.results) {\r\n var results = obj.results;\r\n } else {\r\n var results = obj.items;\r\n }\r\n\r\n // Show 200 items at once\r\n var number = results.length || 0;\r\n\r\n // Lazyloading\r\n if (obj.options.lazyLoading == true && number > 200) {\r\n number = 200;\r\n }\r\n\r\n // Reset container\r\n content.textContent = '';\r\n\r\n // First 200 items\r\n for (var i = 0; i < number; i++) {\r\n if (results[i].group) {\r\n if (!results[i].group.parentNode) {\r\n content.appendChild(results[i].group);\r\n }\r\n results[i].group.lastChild.appendChild(results[i].element);\r\n } else {\r\n content.appendChild(results[i].element);\r\n }\r\n }\r\n\r\n // Scroll go to the begin\r\n content.scrollTop = 0;\r\n }\r\n\r\n obj.loadLast = function () {\r\n // Search\r\n if (obj.results) {\r\n var results = obj.results;\r\n } else {\r\n var results = obj.items;\r\n }\r\n\r\n // Show first page\r\n var number = results.length;\r\n\r\n // Max 200 items\r\n if (number > 200) {\r\n number = number - 200;\r\n\r\n // Reset container\r\n content.textContent = '';\r\n\r\n // First 200 items\r\n for (var i = number; i < results.length; i++) {\r\n if (results[i].group) {\r\n if (!results[i].group.parentNode) {\r\n content.appendChild(results[i].group);\r\n }\r\n results[i].group.lastChild.appendChild(results[i].element);\r\n } else {\r\n content.appendChild(results[i].element);\r\n }\r\n }\r\n\r\n // Scroll go to the begin\r\n content.scrollTop = content.scrollHeight;\r\n }\r\n }\r\n\r\n obj.loadUp = function () {\r\n var test = false;\r\n\r\n // Search\r\n if (obj.results) {\r\n var results = obj.results;\r\n } else {\r\n var results = obj.items;\r\n }\r\n\r\n var items = content.querySelectorAll('.jdropdown-item');\r\n var fistItem = items[0].indexValue;\r\n fistItem = obj.items[fistItem];\r\n var index = results.indexOf(fistItem) - 1;\r\n\r\n if (index > 0) {\r\n var number = 0;\r\n\r\n while (index > 0 && results[index] && number < 200) {\r\n if (results[index].group) {\r\n if (!results[index].group.parentNode) {\r\n content.insertBefore(results[index].group, content.firstChild);\r\n }\r\n results[index].group.lastChild.insertBefore(results[index].element, results[index].group.lastChild.firstChild);\r\n } else {\r\n content.insertBefore(results[index].element, content.firstChild);\r\n }\r\n\r\n index--;\r\n number++;\r\n }\r\n\r\n // New item added\r\n test = true;\r\n }\r\n\r\n return test;\r\n }\r\n\r\n obj.loadDown = function () {\r\n var test = false;\r\n\r\n // Search\r\n if (obj.results) {\r\n var results = obj.results;\r\n } else {\r\n var results = obj.items;\r\n }\r\n\r\n var items = content.querySelectorAll('.jdropdown-item');\r\n var lastItem = items[items.length - 1].indexValue;\r\n lastItem = obj.items[lastItem];\r\n var index = results.indexOf(lastItem) + 1;\r\n\r\n if (index < results.length) {\r\n var number = 0;\r\n while (index < results.length && results[index] && number < 200) {\r\n if (results[index].group) {\r\n if (!results[index].group.parentNode) {\r\n content.appendChild(results[index].group);\r\n }\r\n results[index].group.lastChild.appendChild(results[index].element);\r\n } else {\r\n content.appendChild(results[index].element);\r\n }\r\n\r\n index++;\r\n number++;\r\n }\r\n\r\n // New item added\r\n test = true;\r\n }\r\n\r\n return test;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n });\r\n\r\n Component.keydown = function (e) {\r\n var dropdown = null;\r\n if (dropdown = Component.current) {\r\n if (e.which == 13 || e.which == 9) { // enter or tab\r\n if (dropdown.header.value && dropdown.currentIndex == null && dropdown.options.newOptions) {\r\n // if they typed something in, but it matched nothing, and newOptions are allowed, start that flow\r\n dropdown.add();\r\n } else {\r\n // Quick Select/Filter\r\n if (dropdown.currentIndex == null && dropdown.options.autocomplete == true && dropdown.header.value != \"\") {\r\n dropdown.find(dropdown.header.value);\r\n }\r\n dropdown.selectIndex(dropdown.currentIndex);\r\n }\r\n } else if (e.which == 38) { // up arrow\r\n if (dropdown.currentIndex == null) {\r\n dropdown.first();\r\n } else if (dropdown.currentIndex > 0) {\r\n dropdown.prev();\r\n }\r\n e.preventDefault();\r\n } else if (e.which == 40) { // down arrow\r\n if (dropdown.currentIndex == null) {\r\n dropdown.first();\r\n } else if (dropdown.currentIndex + 1 < dropdown.items.length) {\r\n dropdown.next();\r\n }\r\n e.preventDefault();\r\n } else if (e.which == 36) {\r\n dropdown.first();\r\n if (!e.target.classList.contains('jdropdown-header')) {\r\n e.preventDefault();\r\n }\r\n } else if (e.which == 35) {\r\n dropdown.last();\r\n if (!e.target.classList.contains('jdropdown-header')) {\r\n e.preventDefault();\r\n }\r\n } else if (e.which == 27) {\r\n dropdown.close();\r\n } else if (e.which == 33) { // page up\r\n if (dropdown.currentIndex == null) {\r\n dropdown.first();\r\n } else if (dropdown.currentIndex > 0) {\r\n for (var i = 0; i < 7; i++) {\r\n dropdown.prev()\r\n }\r\n }\r\n e.preventDefault();\r\n } else if (e.which == 34) { // page down\r\n if (dropdown.currentIndex == null) {\r\n dropdown.first();\r\n } else if (dropdown.currentIndex + 1 < dropdown.items.length) {\r\n for (var i = 0; i < 7; i++) {\r\n dropdown.next()\r\n }\r\n }\r\n e.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n Component.mouseup = function (e) {\r\n var element = helpers.findElement(e.target, 'jdropdown');\r\n if (element) {\r\n var dropdown = element.dropdown;\r\n if (e.target.classList.contains('jdropdown-header')) {\r\n if (element.classList.contains('jdropdown-focus') && element.classList.contains('jdropdown-default')) {\r\n var rect = element.getBoundingClientRect();\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n if (rect.width - (x - rect.left) < 30) {\r\n if (e.target.classList.contains('jdropdown-add')) {\r\n dropdown.add();\r\n } else {\r\n dropdown.close();\r\n }\r\n } else {\r\n if (dropdown.options.autocomplete == false) {\r\n dropdown.close();\r\n }\r\n }\r\n } else {\r\n dropdown.open();\r\n }\r\n } else if (e.target.classList.contains('jdropdown-group-name')) {\r\n var items = e.target.nextSibling.children;\r\n if (e.target.nextSibling.style.display != 'none') {\r\n for (var i = 0; i < items.length; i++) {\r\n if (items[i].style.display != 'none') {\r\n dropdown.selectItem(items[i]);\r\n }\r\n }\r\n }\r\n } else if (e.target.classList.contains('jdropdown-group-arrow')) {\r\n if (e.target.classList.contains('jdropdown-group-arrow-down')) {\r\n e.target.classList.remove('jdropdown-group-arrow-down');\r\n e.target.classList.add('jdropdown-group-arrow-up');\r\n e.target.parentNode.nextSibling.style.display = 'none';\r\n } else {\r\n e.target.classList.remove('jdropdown-group-arrow-up');\r\n e.target.classList.add('jdropdown-group-arrow-down');\r\n e.target.parentNode.nextSibling.style.display = '';\r\n }\r\n } else if (e.target.classList.contains('jdropdown-item')) {\r\n dropdown.selectItem(e.target);\r\n } else if (e.target.classList.contains('jdropdown-image')) {\r\n dropdown.selectItem(e.target.parentNode);\r\n } else if (e.target.classList.contains('jdropdown-description')) {\r\n dropdown.selectItem(e.target.parentNode);\r\n } else if (e.target.classList.contains('jdropdown-title')) {\r\n dropdown.selectItem(e.target.parentNode.parentNode);\r\n } else if (e.target.classList.contains('jdropdown-close') || e.target.classList.contains('jdropdown-backdrop')) {\r\n dropdown.close();\r\n }\r\n }\r\n }\r\n\r\n Component.extractFromDom = function (el, options) {\r\n // Keep reference\r\n var select = el;\r\n if (!options) {\r\n options = {};\r\n }\r\n // Prepare configuration\r\n if (el.getAttribute('multiple') && (!options || options.multiple == undefined)) {\r\n options.multiple = true;\r\n }\r\n if (el.getAttribute('placeholder') && (!options || options.placeholder == undefined)) {\r\n options.placeholder = el.getAttribute('placeholder');\r\n }\r\n if (el.getAttribute('data-autocomplete') && (!options || options.autocomplete == undefined)) {\r\n options.autocomplete = true;\r\n }\r\n if (!options || options.width == undefined) {\r\n options.width = el.offsetWidth;\r\n }\r\n if (el.value && (!options || options.value == undefined)) {\r\n options.value = el.value;\r\n }\r\n if (!options || options.data == undefined) {\r\n options.data = [];\r\n for (var j = 0; j < el.children.length; j++) {\r\n if (el.children[j].tagName == 'OPTGROUP') {\r\n for (var i = 0; i < el.children[j].children.length; i++) {\r\n options.data.push({\r\n value: el.children[j].children[i].value,\r\n text: el.children[j].children[i].textContent,\r\n group: el.children[j].getAttribute('label'),\r\n });\r\n }\r\n } else {\r\n options.data.push({\r\n value: el.children[j].value,\r\n text: el.children[j].textContent,\r\n });\r\n }\r\n }\r\n }\r\n if (!options || options.onchange == undefined) {\r\n options.onchange = function (a, b, c, d) {\r\n if (options.multiple == true) {\r\n if (obj.items[b].classList.contains('jdropdown-selected')) {\r\n select.options[b].setAttribute('selected', 'selected');\r\n } else {\r\n select.options[b].removeAttribute('selected');\r\n }\r\n } else {\r\n select.value = d;\r\n }\r\n }\r\n }\r\n // Create DIV\r\n var div = document.createElement('div');\r\n el.parentNode.insertBefore(div, el);\r\n el.style.display = 'none';\r\n el = div;\r\n\r\n return {el: el, options: options};\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var dropdown = (Dropdown());\n;// CONCATENATED MODULE: ./src/plugins/picker.js\n\r\n\r\n\r\nfunction Picker(el, options) {\r\n // Already created, update options\r\n if (el.picker) {\r\n return el.picker.setOptions(options, true);\r\n }\r\n\r\n // New instance\r\n var obj = { type: 'picker' };\r\n obj.options = {};\r\n\r\n var dropdownHeader = null;\r\n var dropdownContent = null;\r\n\r\n /**\r\n * The element passed is a DOM element\r\n */\r\n var isDOM = function(o) {\r\n return (o instanceof Element || o instanceof HTMLDocument);\r\n }\r\n\r\n /**\r\n * Create the content options\r\n */\r\n var createContent = function() {\r\n dropdownContent.innerHTML = '';\r\n\r\n // Create items\r\n var keys = Object.keys(obj.options.data);\r\n\r\n // Go though all options\r\n for (var i = 0; i < keys.length; i++) {\r\n // Item\r\n var dropdownItem = document.createElement('div');\r\n dropdownItem.classList.add('jpicker-item');\r\n dropdownItem.setAttribute('role', 'option');\r\n dropdownItem.k = keys[i];\r\n dropdownItem.v = obj.options.data[keys[i]];\r\n // Label\r\n var item = obj.getLabel(keys[i], dropdownItem);\r\n if (isDOM(item)) {\r\n dropdownItem.appendChild(item);\r\n } else {\r\n dropdownItem.innerHTML = item;\r\n }\r\n // Append\r\n dropdownContent.appendChild(dropdownItem);\r\n }\r\n }\r\n\r\n /**\r\n * Set or reset the options for the picker\r\n */\r\n obj.setOptions = function(options, reset) {\r\n // Default configuration\r\n var defaults = {\r\n value: 0,\r\n data: null,\r\n render: null,\r\n onchange: null,\r\n onmouseover: null,\r\n onselect: null,\r\n onopen: null,\r\n onclose: null,\r\n onload: null,\r\n width: null,\r\n header: true,\r\n right: false,\r\n bottom: false,\r\n content: false,\r\n columns: null,\r\n grid: null,\r\n height: null,\r\n }\r\n\r\n // Legacy purpose only\r\n if (options && options.options) {\r\n options.data = options.options;\r\n }\r\n\r\n // Loop through the initial configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof(obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Start using the options\r\n if (obj.options.header === false) {\r\n dropdownHeader.style.display = 'none';\r\n } else {\r\n dropdownHeader.style.display = '';\r\n }\r\n\r\n // Width\r\n if (obj.options.width) {\r\n dropdownHeader.style.width = parseInt(obj.options.width) + 'px';\r\n } else {\r\n dropdownHeader.style.width = '';\r\n }\r\n\r\n // Height\r\n if (obj.options.height) {\r\n dropdownContent.style.maxHeight = obj.options.height + 'px';\r\n dropdownContent.style.overflow = 'scroll';\r\n } else {\r\n dropdownContent.style.overflow = '';\r\n }\r\n\r\n if (obj.options.columns > 0) {\r\n if (! obj.options.grid) {\r\n dropdownContent.classList.add('jpicker-columns');\r\n dropdownContent.style.width = obj.options.width ? obj.options.width : 36 * obj.options.columns + 'px';\r\n } else {\r\n dropdownContent.classList.add('jpicker-grid');\r\n dropdownContent.style.gridTemplateColumns = 'repeat(' + obj.options.grid + ', 1fr)';\r\n }\r\n }\r\n\r\n if (isNaN(parseInt(obj.options.value))) {\r\n obj.options.value = 0;\r\n }\r\n\r\n // Create list from data\r\n createContent();\r\n\r\n // Set value\r\n obj.setValue(obj.options.value);\r\n\r\n // Set options all returns the own instance\r\n return obj;\r\n }\r\n\r\n obj.getValue = function() {\r\n return obj.options.value;\r\n }\r\n\r\n obj.setValue = function(k, e) {\r\n // Set label\r\n obj.setLabel(k);\r\n\r\n // Update value\r\n obj.options.value = String(k);\r\n\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n\r\n if (dropdownContent.children[k] && dropdownContent.children[k].getAttribute('type') !== 'generic') {\r\n obj.close();\r\n }\r\n\r\n // Call method\r\n if (e) {\r\n if (typeof (obj.options.onchange) == 'function') {\r\n var v = obj.options.data[k];\r\n\r\n obj.options.onchange(el, obj, v, v, k, e);\r\n }\r\n }\r\n }\r\n\r\n obj.getLabel = function(v, item) {\r\n var label = obj.options.data[v] || null;\r\n if (typeof(obj.options.render) == 'function') {\r\n label = obj.options.render(label, item);\r\n }\r\n return label;\r\n }\r\n\r\n obj.setLabel = function(v) {\r\n var item;\r\n\r\n if (obj.options.content) {\r\n item = document.createElement('i');\r\n item.textContent = obj.options.content;\r\n item.classList.add('material-icons');\r\n } else {\r\n item = obj.getLabel(v, null);\r\n }\r\n\r\n // Label\r\n if (isDOM(item)) {\r\n dropdownHeader.textContent = '';\r\n dropdownHeader.appendChild(item);\r\n } else {\r\n dropdownHeader.innerHTML = item;\r\n }\r\n }\r\n\r\n obj.open = function() {\r\n if (! el.classList.contains('jpicker-focus')) {\r\n // Start tracking the element\r\n tracking(obj, true);\r\n\r\n // Open picker\r\n el.classList.add('jpicker-focus');\r\n el.focus();\r\n\r\n var top = 0;\r\n var left = 0;\r\n\r\n dropdownContent.style.marginLeft = '';\r\n\r\n var rectHeader = dropdownHeader.getBoundingClientRect();\r\n var rectContent = dropdownContent.getBoundingClientRect();\r\n\r\n if (window.innerHeight < rectHeader.bottom + rectContent.height || obj.options.bottom) {\r\n top = -1 * (rectContent.height + 4);\r\n } else {\r\n top = rectHeader.height + 4;\r\n }\r\n\r\n if (obj.options.right === true) {\r\n left = -1 * rectContent.width + rectHeader.width;\r\n }\r\n\r\n if (rectContent.left + left < 0) {\r\n left = left + rectContent.left + 10;\r\n }\r\n if (rectContent.left + rectContent.width > window.innerWidth) {\r\n left = -1 * (10 + rectContent.left + rectContent.width - window.innerWidth);\r\n }\r\n\r\n dropdownContent.style.marginTop = parseInt(top) + 'px';\r\n dropdownContent.style.marginLeft = parseInt(left) + 'px';\r\n\r\n //dropdownContent.style.marginTop\r\n if (typeof obj.options.onopen == 'function') {\r\n obj.options.onopen(el, obj);\r\n }\r\n }\r\n }\r\n\r\n obj.close = function() {\r\n if (el.classList.contains('jpicker-focus')) {\r\n el.classList.remove('jpicker-focus');\r\n\r\n // Start tracking the element\r\n tracking(obj, false);\r\n\r\n if (typeof obj.options.onclose == 'function') {\r\n obj.options.onclose(el, obj);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Destroy the picker instance and release all resources\r\n */\r\n obj.destroy = function() {\r\n // Close if open (removes from tracking)\r\n obj.close();\r\n\r\n // Remove event listeners\r\n el.onmousedown = null;\r\n if (dropdownContent) {\r\n dropdownContent.onclick = null;\r\n }\r\n\r\n // Remove created DOM elements\r\n if (dropdownHeader && dropdownHeader.parentNode) {\r\n dropdownHeader.parentNode.removeChild(dropdownHeader);\r\n }\r\n if (dropdownContent && dropdownContent.parentNode) {\r\n dropdownContent.parentNode.removeChild(dropdownContent);\r\n }\r\n\r\n // Remove classes and attributes from el\r\n el.classList.remove('jpicker');\r\n el.classList.remove('jpicker-focus');\r\n el.removeAttribute('role');\r\n el.removeAttribute('aria-haspopup');\r\n el.removeAttribute('aria-expanded');\r\n el.removeAttribute('aria-controls');\r\n el.removeAttribute('tabindex');\r\n\r\n // Remove instance properties from el\r\n delete el.picker;\r\n delete el.value;\r\n delete el.change;\r\n delete el.val;\r\n\r\n // Clear options callbacks to release closures\r\n if (obj.options) {\r\n obj.options.onchange = null;\r\n obj.options.onclose = null;\r\n obj.options.onopen = null;\r\n obj.options.onload = null;\r\n obj.options.onselect = null;\r\n obj.options.onmouseover = null;\r\n obj.options.render = null;\r\n }\r\n\r\n // Clear references\r\n dropdownHeader = null;\r\n dropdownContent = null;\r\n }\r\n\r\n /**\r\n * Create floating picker\r\n */\r\n var init = function() {\r\n let id = helpers.guid();\r\n\r\n // Class\r\n el.classList.add('jpicker');\r\n el.setAttribute('role', 'combobox');\r\n el.setAttribute('aria-haspopup', 'listbox');\r\n el.setAttribute('aria-expanded', 'false');\r\n el.setAttribute('aria-controls', id);\r\n el.setAttribute('tabindex', '0');\r\n el.onmousedown = function(e) {\r\n if (! el.classList.contains('jpicker-focus')) {\r\n obj.open();\r\n }\r\n }\r\n\r\n // Dropdown Header\r\n dropdownHeader = document.createElement('div');\r\n dropdownHeader.classList.add('jpicker-header');\r\n\r\n // Dropdown content\r\n dropdownContent = document.createElement('div');\r\n dropdownContent.setAttribute('id', id);\r\n dropdownContent.setAttribute('role', 'listbox');\r\n dropdownContent.classList.add('jpicker-content');\r\n dropdownContent.onclick = function(e) {\r\n var item = helpers.findElement(e.target, 'jpicker-item');\r\n if (item) {\r\n if (item.parentNode === dropdownContent) {\r\n // Update label\r\n obj.setValue(item.k, e);\r\n }\r\n }\r\n }\r\n // Append content and header\r\n el.appendChild(dropdownHeader);\r\n el.appendChild(dropdownContent);\r\n\r\n // Default value\r\n el.value = options.value || 0;\r\n\r\n // Set options\r\n obj.setOptions(options);\r\n\r\n if (typeof(obj.options.onload) == 'function') {\r\n obj.options.onload(el, obj);\r\n }\r\n\r\n // Change\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Reference\r\n el.picker = obj;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/toolbar.js\n\r\n\r\n\r\n\r\n\r\nfunction Toolbar(el, options) {\r\n // New instance\r\n var obj = { type:'toolbar' };\r\n obj.options = {};\r\n\r\n // Track internal components for cleanup\r\n var internalComponents = [];\r\n\r\n // Event handler references for cleanup\r\n var elClickHandler = null;\r\n var windowResizeHandler = null;\r\n\r\n // Default configuration\r\n var defaults = {\r\n app: null,\r\n container: false,\r\n badge: false,\r\n title: false,\r\n responsive: false,\r\n maxWidth: null,\r\n bottom: true,\r\n items: [],\r\n }\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n if (! el && options.app && options.app.el) {\r\n el = document.createElement('div');\r\n options.app.el.appendChild(el);\r\n }\r\n\r\n // Arrow\r\n var toolbarArrow = document.createElement('div');\r\n toolbarArrow.classList.add('jtoolbar-item');\r\n toolbarArrow.classList.add('jtoolbar-arrow');\r\n\r\n let arrow = document.createElement('i');\r\n arrow.classList.add('material-icons');\r\n arrow.textContent = 'more_vert';\r\n toolbarArrow.appendChild(arrow);\r\n\r\n var toolbarFloating = document.createElement('div');\r\n toolbarFloating.classList.add('jtoolbar-floating');\r\n toolbarArrow.appendChild(toolbarFloating);\r\n\r\n obj.selectItem = function(element) {\r\n var elements = toolbarContent.children;\r\n for (var i = 0; i < elements.length; i++) {\r\n if (element != elements[i]) {\r\n elements[i].classList.remove('jtoolbar-selected');\r\n }\r\n }\r\n element.classList.add('jtoolbar-selected');\r\n }\r\n\r\n obj.hide = function() {\r\n animation.slideBottom(el, 0, function() {\r\n el.style.display = 'none';\r\n });\r\n }\r\n\r\n obj.show = function() {\r\n el.style.display = '';\r\n animation.slideBottom(el, 1);\r\n }\r\n\r\n obj.get = function() {\r\n return el;\r\n }\r\n\r\n obj.setBadge = function(index, value) {\r\n toolbarContent.children[index].children[1].firstChild.innerHTML = value;\r\n }\r\n\r\n obj.destroy = function() {\r\n // Close if open (removes from tracking)\r\n obj.close();\r\n\r\n // Destroy all internal components (pickers, etc.)\r\n for (var i = 0; i < internalComponents.length; i++) {\r\n var comp = internalComponents[i];\r\n if (comp) {\r\n // First destroy any nested components created in onload (stored on the picker instance)\r\n if (comp.components && comp.components.length) {\r\n for (var j = 0; j < comp.components.length; j++) {\r\n if (comp.components[j] && typeof comp.components[j].destroy === 'function') {\r\n comp.components[j].destroy();\r\n }\r\n }\r\n comp.components = null;\r\n }\r\n // Then destroy the picker/component itself\r\n if (typeof comp.destroy === 'function') {\r\n comp.destroy();\r\n }\r\n }\r\n }\r\n internalComponents = [];\r\n\r\n // Clear onclick handlers from DOM elements (releases bound function references)\r\n if (toolbarContent) {\r\n var items = toolbarContent.querySelectorAll('.jtoolbar-item');\r\n for (var i = 0; i < items.length; i++) {\r\n items[i].onclick = null;\r\n items[i].updateState = null;\r\n }\r\n }\r\n if (toolbarFloating) {\r\n var items = toolbarFloating.querySelectorAll('.jtoolbar-item');\r\n for (var i = 0; i < items.length; i++) {\r\n items[i].onclick = null;\r\n items[i].updateState = null;\r\n }\r\n }\r\n\r\n // Clear options items callbacks to release closures\r\n if (obj.options && obj.options.items) {\r\n for (var i = 0; i < obj.options.items.length; i++) {\r\n var item = obj.options.items[i];\r\n // Clear all callback references\r\n item.onclick = null;\r\n item.onchange = null;\r\n item.onload = null;\r\n item.render = null;\r\n item.updateState = null;\r\n item.onopen = null;\r\n item.onclose = null;\r\n }\r\n obj.options.items = null;\r\n }\r\n\r\n // Remove event listeners\r\n if (elClickHandler) {\r\n el.removeEventListener('click', elClickHandler);\r\n elClickHandler = null;\r\n }\r\n if (windowResizeHandler) {\r\n window.removeEventListener('resize', windowResizeHandler);\r\n windowResizeHandler = null;\r\n }\r\n\r\n // Clear DOM\r\n el.innerHTML = '';\r\n\r\n // Clear references\r\n toolbarContent = null;\r\n toolbarFloating = null;\r\n toolbarArrow = null;\r\n\r\n // Remove classes\r\n el.classList.remove('jtoolbar');\r\n el.classList.remove('jtoolbar-container');\r\n el.classList.remove('jtoolbar-mobile');\r\n el.classList.remove('jtoolbar-disabled');\r\n\r\n // Remove instance reference\r\n delete el.toolbar;\r\n }\r\n\r\n obj.update = function(a, b) {\r\n for (var i = 0; i < toolbarContent.children.length; i++) {\r\n // Toolbar element\r\n var toolbarItem = toolbarContent.children[i];\r\n // State management\r\n if (typeof(toolbarItem.updateState) == 'function') {\r\n toolbarItem.updateState(el, obj, toolbarItem, a, b);\r\n }\r\n }\r\n for (var i = 0; i < toolbarFloating.children.length; i++) {\r\n // Toolbar element\r\n var toolbarItem = toolbarFloating.children[i];\r\n // State management\r\n if (typeof(toolbarItem.updateState) == 'function') {\r\n toolbarItem.updateState(el, obj, toolbarItem, a, b);\r\n }\r\n }\r\n }\r\n\r\n obj.create = function(items) {\r\n // Reset anything in the toolbar\r\n toolbarContent.innerHTML = '';\r\n // Create elements in the toolbar\r\n for (var i = 0; i < items.length; i++) {\r\n var toolbarItem = document.createElement('div');\r\n toolbarItem.classList.add('jtoolbar-item');\r\n\r\n if (items[i].width) {\r\n toolbarItem.style.width = parseInt(items[i].width) + 'px'; \r\n }\r\n\r\n if (items[i].k) {\r\n toolbarItem.k = items[i].k;\r\n }\r\n\r\n if (items[i].tooltip) {\r\n toolbarItem.setAttribute('title', items[i].tooltip);\r\n toolbarItem.setAttribute('aria-label', items[i].tooltip);\r\n }\r\n\r\n // Id\r\n if (items[i].id) {\r\n toolbarItem.setAttribute('id', items[i].id);\r\n }\r\n\r\n // Selected\r\n if (items[i].updateState) {\r\n toolbarItem.updateState = items[i].updateState;\r\n }\r\n\r\n if (items[i].active) {\r\n toolbarItem.classList.add('jtoolbar-active');\r\n }\r\n\r\n if (items[i].disabled) {\r\n toolbarItem.classList.add('jtoolbar-disabled');\r\n }\r\n\r\n if (items[i].type == 'select' || items[i].type == 'dropdown') {\r\n var picker = Picker(toolbarItem, items[i]);\r\n internalComponents.push(picker);\r\n } else if (items[i].type == 'divisor') {\r\n toolbarItem.classList.add('jtoolbar-divisor');\r\n } else if (items[i].type == 'label') {\r\n toolbarItem.classList.add('jtoolbar-label');\r\n toolbarItem.innerHTML = items[i].content;\r\n } else {\r\n // Material icons\r\n var toolbarIcon = document.createElement('i');\r\n if (typeof(items[i].class) === 'undefined') {\r\n toolbarIcon.classList.add('material-icons');\r\n } else {\r\n var c = items[i].class.split(' ');\r\n for (var j = 0; j < c.length; j++) {\r\n toolbarIcon.classList.add(c[j]);\r\n }\r\n }\r\n toolbarIcon.innerHTML = items[i].content ? items[i].content : '';\r\n toolbarItem.setAttribute('role', 'button');\r\n toolbarItem.appendChild(toolbarIcon);\r\n\r\n // Badge options\r\n if (obj.options.badge == true) {\r\n var toolbarBadge = document.createElement('div');\r\n toolbarBadge.classList.add('jbadge');\r\n var toolbarBadgeContent = document.createElement('div');\r\n toolbarBadgeContent.innerHTML = items[i].badge ? items[i].badge : '';\r\n toolbarBadge.appendChild(toolbarBadgeContent);\r\n toolbarItem.appendChild(toolbarBadge);\r\n }\r\n\r\n // Title\r\n if (items[i].title) {\r\n if (obj.options.title == true) {\r\n var toolbarTitle = document.createElement('span');\r\n toolbarTitle.innerHTML = items[i].title;\r\n toolbarItem.appendChild(toolbarTitle);\r\n } else {\r\n toolbarItem.setAttribute('title', items[i].title);\r\n }\r\n }\r\n\r\n if (obj.options.app && items[i].route) {\r\n // Route\r\n toolbarItem.route = items[i].route;\r\n // Onclick for route\r\n toolbarItem.onclick = function() {\r\n obj.options.app.pages(this.route);\r\n }\r\n // Create pages\r\n obj.options.app.pages(items[i].route, {\r\n toolbarItem: toolbarItem,\r\n closed: true\r\n });\r\n }\r\n\r\n // Render\r\n if (typeof(items[i].render) === 'function') {\r\n items[i].render(toolbarItem, items[i]);\r\n }\r\n }\r\n\r\n if (items[i].onclick) {\r\n toolbarItem.onclick = items[i].onclick.bind(items[i], el, obj, toolbarItem);\r\n }\r\n\r\n toolbarContent.appendChild(toolbarItem);\r\n }\r\n\r\n // Fits to the page\r\n setTimeout(function() {\r\n obj.refresh();\r\n }, 0);\r\n }\r\n\r\n obj.open = function() {\r\n toolbarArrow.classList.add('jtoolbar-arrow-selected');\r\n\r\n var rectElement = el.getBoundingClientRect();\r\n var rect = toolbarFloating.getBoundingClientRect();\r\n if (rect.bottom > window.innerHeight || obj.options.bottom) {\r\n toolbarFloating.style.bottom = '0';\r\n } else {\r\n toolbarFloating.style.removeProperty('bottom');\r\n }\r\n\r\n toolbarFloating.style.right = '0';\r\n\r\n toolbarArrow.children[1].focus();\r\n // Start tracking\r\n tracking(obj, true);\r\n }\r\n\r\n obj.close = function() {\r\n if (toolbarArrow) {\r\n toolbarArrow.classList.remove('jtoolbar-arrow-selected')\r\n }\r\n // End tracking\r\n tracking(obj, false);\r\n }\r\n\r\n obj.refresh = function() {\r\n if (obj.options.responsive == true) {\r\n // Width of the c\r\n var rect = el.parentNode.getBoundingClientRect();\r\n if (! obj.options.maxWidth) {\r\n obj.options.maxWidth = rect.width;\r\n }\r\n // Available parent space\r\n var available = parseInt(obj.options.maxWidth);\r\n // Remove arrow\r\n if (toolbarArrow && toolbarArrow.parentNode) {\r\n toolbarArrow.parentNode.removeChild(toolbarArrow);\r\n }\r\n // Move all items to the toolbar\r\n while (toolbarFloating && toolbarFloating.firstChild) {\r\n toolbarContent.appendChild(toolbarFloating.firstChild);\r\n }\r\n // Toolbar is larger than the parent, move elements to the floating element\r\n if (available < toolbarContent.offsetWidth) {\r\n // Give space to the floating element\r\n available -= 50;\r\n // Move to the floating option\r\n while (toolbarContent.lastChild && available < toolbarContent.offsetWidth) {\r\n toolbarFloating.insertBefore(toolbarContent.lastChild, toolbarFloating.firstChild);\r\n }\r\n }\r\n // Show arrow\r\n if (toolbarFloating && toolbarFloating.children.length > 0) {\r\n toolbarContent.appendChild(toolbarArrow);\r\n }\r\n }\r\n }\r\n\r\n obj.setReadonly = function(state) {\r\n state = state ? 'add' : 'remove';\r\n el.classList[state]('jtoolbar-disabled');\r\n }\r\n\r\n elClickHandler = function(e) {\r\n var element = helpers.findElement(e.target, 'jtoolbar-item');\r\n if (element) {\r\n obj.selectItem(element);\r\n }\r\n\r\n if (e.target.classList.contains('jtoolbar-arrow') || e.target.parentNode.classList.contains('jtoolbar-arrow')) {\r\n obj.open();\r\n }\r\n };\r\n el.addEventListener('click', elClickHandler);\r\n\r\n windowResizeHandler = function() {\r\n obj.refresh();\r\n };\r\n window.addEventListener('resize', windowResizeHandler);\r\n\r\n // Toolbar\r\n el.classList.add('jtoolbar');\r\n // Reset content\r\n el.innerHTML = '';\r\n // Container\r\n if (obj.options.container == true) {\r\n el.classList.add('jtoolbar-container');\r\n }\r\n // Content\r\n var toolbarContent = document.createElement('div');\r\n el.appendChild(toolbarContent);\r\n // Special toolbar for mobile applications\r\n if (obj.options.app) {\r\n el.classList.add('jtoolbar-mobile');\r\n }\r\n // Create toolbar\r\n obj.create(obj.options.items);\r\n // Shortcut\r\n el.toolbar = obj;\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/utils/filter.js\n\r\n// Valid tags (removed iframe for security)\r\nconst validTags = [\r\n 'html','body','address','span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'blockquote',\r\n 'strong', 'em', 'ul', 'ol', 'li', 'a', 'code', 'pre', 'hr', 'br', 'img',\r\n 'figure', 'picture', 'figcaption', 'table', 'thead', 'tbody', 'tfoot', 'tr',\r\n 'th', 'td', 'caption', 'u', 'del', 'ins', 'sub', 'sup', 'small', 'mark',\r\n 'input', 'textarea', 'select', 'option', 'button', 'label', 'fieldset',\r\n 'legend', 'audio', 'video', 'abbr', 'cite', 'kbd', 'section', 'article',\r\n 'nav', 'aside', 'header', 'footer', 'main', 'details', 'summary', 'svg', 'line', 'source'\r\n];\r\n\r\n// Dangerous tags that should be completely removed\r\nconst dangerousTags = ['script', 'object', 'embed', 'applet', 'meta', 'base', 'link', 'iframe'];\r\n\r\n// Valid properties (added id, class, title, alt for better editor support)\r\nconst validProperty = ['width', 'height', 'align', 'border', 'src', 'href', 'tabindex', 'id', 'class', 'title', 'alt'];\r\n\r\n// Tags that are allowed to have src attribute\r\nconst tagsAllowedSrc = ['img', 'audio', 'video', 'source'];\r\n\r\n// Tags that are allowed to have href attribute\r\nconst tagsAllowedHref = ['a'];\r\n\r\n// Valid CSS attributes\r\nconst validStyle = ['color', 'font-weight', 'font-size', 'background', 'background-color', 'margin', 'padding', 'text-align', 'text-decoration'];\r\n\r\n// Function to decode HTML entities (prevents bypassing with javascript:)\r\nfunction decodeHTMLEntities(text) {\r\n if (!text) return '';\r\n const textArea = document.createElement('textarea');\r\n textArea.innerHTML = text;\r\n return textArea.value;\r\n}\r\n\r\n// Function to check if a URL scheme is dangerous\r\nfunction isDangerousURL(url) {\r\n if (!url) return false;\r\n const decoded = decodeHTMLEntities(url).toLowerCase().trim();\r\n // Remove whitespace and null bytes that can be used to bypass filters\r\n const cleaned = decoded.replace(/[\\s\\0]/g, '');\r\n\r\n return cleaned.startsWith('javascript:') ||\r\n cleaned.startsWith('data:text/') ||\r\n cleaned.startsWith('data:application/') ||\r\n cleaned.startsWith('vbscript:') ||\r\n cleaned.includes('= 0) {\r\n let k = v.shift();\r\n v = v.join(':');\r\n // Sanitize the CSS value\r\n const sanitizedValue = sanitizeStyleValue(v);\r\n if (sanitizedValue) {\r\n style.push(k + ':' + sanitizedValue);\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Process image\r\n if (tagName === 'img') {\r\n const src = element.getAttribute('src');\r\n if (!src || isDangerousURL(src)) {\r\n if (element.parentNode) {\r\n element.parentNode.removeChild(element);\r\n }\r\n return;\r\n } else {\r\n element.setAttribute('tabindex', '900');\r\n // Check attributes for persistence\r\n img.push(src);\r\n }\r\n }\r\n\r\n // Collect all attribute names first\r\n let attr = [];\r\n for (let i = 0; i < element.attributes.length; i++) {\r\n attr.push(element.attributes[i].name);\r\n }\r\n\r\n // Process attributes\r\n if (attr.length) {\r\n attr.forEach(function (v) {\r\n const attrName = v.toLowerCase();\r\n\r\n // Remove all event handlers (onclick, onerror, onload, etc.)\r\n if (attrName.startsWith('on')) {\r\n element.removeAttribute(v);\r\n return;\r\n }\r\n\r\n // Check if attribute is in whitelist\r\n if (validProperty.indexOf(attrName) === -1) {\r\n element.removeAttribute(v);\r\n } else {\r\n // Validate whitelisted attributes\r\n let attrValue = element.getAttribute(v);\r\n\r\n // Special handling for src attribute\r\n if (attrName === 'src') {\r\n if (tagsAllowedSrc.indexOf(tagName) === -1) {\r\n // src not allowed on this tag\r\n element.removeAttribute(v);\r\n return;\r\n }\r\n if (isDangerousURL(attrValue)) {\r\n element.removeAttribute(v);\r\n return;\r\n }\r\n }\r\n\r\n // Special handling for href attribute\r\n if (attrName === 'href') {\r\n if (tagsAllowedHref.indexOf(tagName) === -1) {\r\n // href not allowed on this tag\r\n element.removeAttribute(v);\r\n return;\r\n }\r\n if (isDangerousURL(attrValue)) {\r\n element.removeAttribute(v);\r\n return;\r\n }\r\n }\r\n\r\n // Protection XSS - check for dangerous characters\r\n if (attrValue && attrValue.indexOf('<') !== -1) {\r\n element.setAttribute(v, attrValue.replace(/ 0; i--) {\r\n parse(element.children[i - 1], img);\r\n }\r\n }\r\n}\r\n\r\nconst filter = function(data, img) {\r\n if (data) {\r\n data = data.replace(new RegExp('', 'gsi'), '');\r\n }\r\n let parser = new DOMParser();\r\n let d = parser.parseFromString(data, \"text/html\");\r\n parse(d.body, img);\r\n let div = document.createElement('div');\r\n div.innerHTML = d.body.innerHTML;\r\n return div;\r\n}\r\n\r\n/* harmony default export */ var utils_filter = (filter);\n;// CONCATENATED MODULE: ./src/plugins/editor.js\n\r\n\r\n\r\n\r\n\r\n\r\nfunction Editor() {\r\n var Component = (function(el, options) {\r\n // New instance\r\n var obj = { type:'editor' };\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n // Load data from a remove location\r\n url: null,\r\n // Initial HTML content\r\n value: '',\r\n // Initial snippet\r\n snippet: null,\r\n // Add toolbar\r\n toolbar: true,\r\n toolbarOnTop: false,\r\n // Website parser is to read websites and images from cross domain\r\n remoteParser: null,\r\n // Placeholder\r\n placeholder: null,\r\n // Parse URL\r\n filterPaste: true,\r\n // Accept drop files\r\n dropZone: true,\r\n dropAsSnippet: false,\r\n acceptImages: true,\r\n acceptFiles: false,\r\n maxFileSize: 5000000,\r\n allowImageResize: true,\r\n // Style\r\n maxHeight: null,\r\n height: null,\r\n focus: false,\r\n // Events\r\n onclick: null,\r\n onfocus: null,\r\n onblur: null,\r\n onload: null,\r\n onkeyup: null,\r\n onkeydown: null,\r\n onchange: null,\r\n extensions: null,\r\n type: null,\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Private controllers\r\n var editorTimer = null;\r\n var editorAction = null;\r\n var files = [];\r\n\r\n // Keep the reference for the container\r\n obj.el = el;\r\n\r\n if (typeof(obj.options.onclick) == 'function') {\r\n el.onclick = function(e) {\r\n obj.options.onclick(el, obj, e);\r\n }\r\n }\r\n\r\n // Prepare container\r\n el.classList.add('jeditor-container');\r\n\r\n // Snippet\r\n var snippet = document.createElement('div');\r\n snippet.className = 'jsnippet';\r\n snippet.setAttribute('contenteditable', false);\r\n\r\n // Toolbar\r\n var toolbar = document.createElement('div');\r\n toolbar.className = 'jeditor-toolbar';\r\n\r\n obj.editor = document.createElement('div');\r\n obj.editor.setAttribute('contenteditable', true);\r\n obj.editor.setAttribute('spellcheck', false);\r\n obj.editor.classList.add('jeditor');\r\n\r\n // Placeholder\r\n if (obj.options.placeholder) {\r\n obj.editor.setAttribute('data-placeholder', obj.options.placeholder);\r\n }\r\n\r\n // Max height\r\n if (obj.options.maxHeight || obj.options.height) {\r\n obj.editor.style.overflowY = 'auto';\r\n\r\n if (obj.options.maxHeight) {\r\n obj.editor.style.maxHeight = obj.options.maxHeight;\r\n }\r\n if (obj.options.height) {\r\n obj.editor.style.height = obj.options.height;\r\n }\r\n }\r\n\r\n // Set editor initial value\r\n if (obj.options.url) {\r\n ajax({\r\n url: obj.options.url,\r\n dataType: 'html',\r\n success: function(result) {\r\n obj.editor.innerHTML = result;\r\n\r\n Component.setCursor(obj.editor, obj.options.focus == 'initial' ? true : false);\r\n }\r\n })\r\n } else {\r\n if (obj.options.value) {\r\n obj.editor.innerHTML = obj.options.value;\r\n } else {\r\n // Create from existing elements\r\n for (var i = 0; i < el.children.length; i++) {\r\n obj.editor.appendChild(el.children[i]);\r\n }\r\n }\r\n }\r\n\r\n // Make sure element is empty\r\n el.innerHTML = '';\r\n\r\n /**\r\n * Onchange event controllers\r\n */\r\n var change = function(e) {\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, obj, e);\r\n }\r\n\r\n // Update value\r\n obj.options.value = obj.getData();\r\n\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Extract images from a HTML string\r\n */\r\n var extractImageFromHtml = function(html) {\r\n let img = [];\r\n // Create temp element\r\n var div = document.createElement('div');\r\n utils_filter(html, img);\r\n if (img.length) {\r\n for (var i = 0; i < img.length; i++) {\r\n obj.addImage(img[i]);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Insert node at caret\r\n */\r\n var insertNodeAtCaret = function(newNode) {\r\n var sel, range;\r\n\r\n if (window.getSelection) {\r\n sel = window.getSelection();\r\n if (sel.rangeCount) {\r\n range = sel.getRangeAt(0);\r\n var selectedText = range.toString();\r\n range.deleteContents();\r\n range.insertNode(newNode);\r\n // move the cursor after element\r\n range.setStartAfter(newNode);\r\n range.setEndAfter(newNode);\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n }\r\n }\r\n }\r\n\r\n var updateTotalImages = function() {\r\n var o = null;\r\n if (o = snippet.children[0]) {\r\n // Make sure is a grid\r\n if (! o.classList.contains('jslider-grid')) {\r\n o.classList.add('jslider-grid');\r\n }\r\n // Quantify of images\r\n var number = o.children.length;\r\n // Set the configuration of the grid\r\n o.setAttribute('data-number', number > 4 ? 4 : number);\r\n // Total of images inside the grid\r\n if (number > 4) {\r\n o.setAttribute('data-total', number - 4);\r\n } else {\r\n o.removeAttribute('data-total');\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Append image to the snippet\r\n */\r\n var appendImage = function(image) {\r\n if (! snippet.innerHTML) {\r\n obj.appendSnippet({});\r\n }\r\n snippet.children[0].appendChild(image);\r\n updateTotalImages();\r\n }\r\n\r\n /**\r\n * Append snippet\r\n * @Param object data\r\n */\r\n obj.appendSnippet = function(data) {\r\n // Reset snippet\r\n snippet.innerHTML = '';\r\n\r\n // Attributes\r\n var a = [ 'image', 'title', 'description', 'host', 'url' ];\r\n\r\n for (var i = 0; i < a.length; i++) {\r\n var div = document.createElement('div');\r\n div.className = 'jsnippet-' + a[i];\r\n div.setAttribute('data-k', a[i]);\r\n snippet.appendChild(div);\r\n if (data[a[i]]) {\r\n if (a[i] == 'image') {\r\n if (! Array.isArray(data.image)) {\r\n data.image = [ data.image ];\r\n }\r\n for (var j = 0; j < data.image.length; j++) {\r\n var img = document.createElement('img');\r\n img.src = data.image[j];\r\n div.appendChild(img);\r\n }\r\n } else {\r\n div.innerHTML = data[a[i]];\r\n }\r\n }\r\n }\r\n\r\n obj.editor.appendChild(document.createElement('br'));\r\n obj.editor.appendChild(snippet);\r\n }\r\n\r\n /**\r\n * Set editor value\r\n */\r\n obj.setData = function(o) {\r\n if (typeof(o) == 'object') {\r\n obj.editor.innerHTML = o.content;\r\n } else {\r\n obj.editor.innerHTML = o;\r\n }\r\n\r\n if (obj.options.focus) {\r\n Component.setCursor(obj.editor, true);\r\n }\r\n\r\n // Reset files container\r\n files = [];\r\n }\r\n\r\n obj.getFiles = function() {\r\n var f = obj.editor.querySelectorAll('.jfile');\r\n var d = [];\r\n for (var i = 0; i < f.length; i++) {\r\n if (files[f[i].src]) {\r\n d.push(files[f[i].src]);\r\n }\r\n }\r\n return d;\r\n }\r\n\r\n obj.getText = function() {\r\n return obj.editor.innerText;\r\n }\r\n\r\n /**\r\n * Get editor data\r\n */\r\n obj.getData = function(json) {\r\n if (! json) {\r\n var data = obj.editor.innerHTML;\r\n } else {\r\n var data = {\r\n content : '',\r\n }\r\n\r\n // Get snippet\r\n if (snippet.innerHTML) {\r\n var index = 0;\r\n data.snippet = {};\r\n for (var i = 0; i < snippet.children.length; i++) {\r\n // Get key from element\r\n var key = snippet.children[i].getAttribute('data-k');\r\n if (key) {\r\n if (key == 'image') {\r\n if (! data.snippet.image) {\r\n data.snippet.image = [];\r\n }\r\n // Get all images\r\n for (var j = 0; j < snippet.children[i].children.length; j++) {\r\n data.snippet.image.push(snippet.children[i].children[j].getAttribute('src'))\r\n }\r\n } else {\r\n data.snippet[key] = snippet.children[i].innerHTML;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Get files\r\n var f = Object.keys(files);\r\n if (f.length) {\r\n data.files = [];\r\n for (var i = 0; i < f.length; i++) {\r\n data.files.push(files[f[i]]);\r\n }\r\n }\r\n\r\n // Get content\r\n var d = document.createElement('div');\r\n d.innerHTML = obj.editor.innerHTML;\r\n var s = d.querySelector('.jsnippet');\r\n if (s) {\r\n s.remove();\r\n }\r\n\r\n var text = d.innerHTML;\r\n text = text.replace(/ /g, \"\\n\");\r\n text = text.replace(/<\\/div>/g, \"<\\/div>\\n\");\r\n text = text.replace(/<(?:.|\\n)*?>/gm, \"\");\r\n data.content = text.trim();\r\n\r\n // Process extensions\r\n processExtensions('getData', data);\r\n }\r\n\r\n return data;\r\n }\r\n\r\n // Reset\r\n obj.reset = function() {\r\n obj.editor.innerHTML = '';\r\n snippet.innerHTML = '';\r\n files = [];\r\n }\r\n\r\n obj.addPdf = function(data) {\r\n if (data.result.substr(0,4) != 'data') {\r\n console.error('Invalid source');\r\n } else {\r\n var canvas = document.createElement('canvas');\r\n canvas.width = 60;\r\n canvas.height = 60;\r\n\r\n var img = new Image();\r\n var ctx = canvas.getContext('2d');\r\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n\r\n canvas.toBlob(function(blob) {\r\n var newImage = document.createElement('img');\r\n newImage.src = window.URL.createObjectURL(blob);\r\n newImage.title = data.name;\r\n newImage.className = 'jfile pdf';\r\n\r\n files[newImage.src] = {\r\n file: newImage.src,\r\n extension: 'pdf',\r\n content: data.result,\r\n }\r\n\r\n //insertNodeAtCaret(newImage);\r\n document.execCommand('insertHtml', false, newImage.outerHTML);\r\n });\r\n }\r\n }\r\n\r\n obj.addImage = function(src, asSnippet) {\r\n if (! obj.options.acceptImages) {\r\n return;\r\n }\r\n\r\n if (! src) {\r\n src = '';\r\n }\r\n\r\n if (src.substr(0,4) != 'data' && ! obj.options.remoteParser) {\r\n console.error('remoteParser not defined in your initialization');\r\n } else {\r\n // This is to process cross domain images\r\n if (src.substr(0,4) == 'data') {\r\n var extension = src.split(';')\r\n extension = extension[0].split('/');\r\n extension = extension[1];\r\n } else {\r\n var extension = src.substr(src.lastIndexOf('.') + 1);\r\n // Work for cross browsers\r\n src = obj.options.remoteParser + src;\r\n }\r\n\r\n var img = new Image();\r\n\r\n img.onload = function onload() {\r\n var canvas = document.createElement('canvas');\r\n canvas.width = img.width;\r\n canvas.height = img.height;\r\n\r\n var ctx = canvas.getContext('2d');\r\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n\r\n canvas.toBlob(function(blob) {\r\n var newImage = document.createElement('img');\r\n newImage.src = window.URL.createObjectURL(blob);\r\n newImage.classList.add('jfile');\r\n newImage.setAttribute('tabindex', '900');\r\n newImage.setAttribute('width', img.width);\r\n newImage.setAttribute('height', img.height);\r\n files[newImage.src] = {\r\n file: newImage.src,\r\n extension: extension,\r\n content: canvas.toDataURL(),\r\n }\r\n\r\n if (obj.options.dropAsSnippet || asSnippet) {\r\n appendImage(newImage);\r\n // Just to understand the attachment is part of a snippet\r\n files[newImage.src].snippet = true;\r\n } else {\r\n //insertNodeAtCaret(newImage);\r\n document.execCommand('insertHtml', false, newImage.outerHTML);\r\n }\r\n\r\n change();\r\n });\r\n };\r\n\r\n img.src = src;\r\n }\r\n }\r\n\r\n obj.addFile = function(files) {\r\n var reader = [];\r\n\r\n for (var i = 0; i < files.length; i++) {\r\n if (files[i].size > obj.options.maxFileSize) {\r\n alert('The file is too big');\r\n } else {\r\n // Only PDF or Images\r\n var type = files[i].type.split('/');\r\n\r\n if (type[0] == 'image') {\r\n type = 1;\r\n } else if (type[1] == 'pdf') {\r\n type = 2;\r\n } else {\r\n type = 0;\r\n }\r\n\r\n if (type) {\r\n // Create file\r\n reader[i] = new FileReader();\r\n reader[i].index = i;\r\n reader[i].type = type;\r\n reader[i].name = files[i].name;\r\n reader[i].date = files[i].lastModified;\r\n reader[i].size = files[i].size;\r\n reader[i].addEventListener(\"load\", function (data) {\r\n // Get result\r\n if (data.target.type == 2) {\r\n if (obj.options.acceptFiles == true) {\r\n obj.addPdf(data.target);\r\n }\r\n } else {\r\n obj.addImage(data.target.result);\r\n }\r\n }, false);\r\n\r\n reader[i].readAsDataURL(files[i])\r\n } else {\r\n alert('The extension is not allowed');\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Destroy\r\n obj.destroy = function() {\r\n obj.editor.removeEventListener('mouseup', editorMouseUp);\r\n obj.editor.removeEventListener('mousedown', editorMouseDown);\r\n obj.editor.removeEventListener('mousemove', editorMouseMove);\r\n obj.editor.removeEventListener('keyup', editorKeyUp);\r\n obj.editor.removeEventListener('keydown', editorKeyDown);\r\n obj.editor.removeEventListener('dragstart', editorDragStart);\r\n obj.editor.removeEventListener('dragenter', editorDragEnter);\r\n obj.editor.removeEventListener('dragover', editorDragOver);\r\n obj.editor.removeEventListener('drop', editorDrop);\r\n obj.editor.removeEventListener('paste', editorPaste);\r\n obj.editor.removeEventListener('blur', editorBlur);\r\n obj.editor.removeEventListener('focus', editorFocus);\r\n\r\n el.editor = null;\r\n el.classList.remove('jeditor-container');\r\n\r\n toolbar.remove();\r\n snippet.remove();\r\n obj.editor.remove();\r\n }\r\n\r\n obj.upload = function() {\r\n helpers.click(obj.file);\r\n }\r\n\r\n var select = function(e) {\r\n var s = window.getSelection()\r\n var r = document.createRange();\r\n r.selectNode(e);\r\n s.addRange(r)\r\n }\r\n\r\n var editorPaste = function(e) {\r\n if (obj.options.filterPaste == true) {\r\n if (e.clipboardData || e.originalEvent.clipboardData) {\r\n var html = (e.originalEvent || e).clipboardData.getData('text/html');\r\n var text = (e.originalEvent || e).clipboardData.getData('text/plain');\r\n var file = (e.originalEvent || e).clipboardData.files\r\n } else if (window.clipboardData) {\r\n var html = window.clipboardData.getData('Html');\r\n var text = window.clipboardData.getData('Text');\r\n var file = window.clipboardData.files\r\n }\r\n\r\n if (file.length) {\r\n // Paste a image from the clipboard\r\n obj.addFile(file);\r\n } else {\r\n if (! html) {\r\n html = text.split('\\r\\n');\r\n if (! e.target.innerText) {\r\n html.map(function(v) {\r\n var d = document.createElement('div');\r\n d.innerText = v;\r\n obj.editor.appendChild(d);\r\n });\r\n } else {\r\n html = html.map(function(v) {\r\n return '
' + v + '
';\r\n });\r\n document.execCommand('insertText', false, html.join(''));\r\n }\r\n } else {\r\n let img = [];\r\n var d = utils_filter(html, img);\r\n if (img.length) {\r\n for (var i = 0; i < img.length; i++) {\r\n obj.addImage(img[i]);\r\n }\r\n }\r\n // Paste to the editor\r\n //insertNodeAtCaret(d);\r\n document.execCommand('insertHtml', false, d.innerHTML);\r\n }\r\n }\r\n\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n var editorDragStart = function(e) {\r\n if (editorAction && editorAction.e) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n var editorDragEnter = function(e) {\r\n if (editorAction || obj.options.dropZone == false) {\r\n // Do nothing\r\n } else {\r\n el.classList.add('jeditor-dragging');\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n var editorDragOver = function(e) {\r\n if (editorAction || obj.options.dropZone == false) {\r\n // Do nothing\r\n } else {\r\n if (editorTimer) {\r\n clearTimeout(editorTimer);\r\n }\r\n\r\n editorTimer = setTimeout(function() {\r\n el.classList.remove('jeditor-dragging');\r\n }, 100);\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n var editorDrop = function(e) {\r\n if (editorAction || obj.options.dropZone === false) {\r\n // Do nothing\r\n } else {\r\n // Position caret on the drop\r\n let range = null;\r\n if (document.caretRangeFromPoint) {\r\n range=document.caretRangeFromPoint(e.clientX, e.clientY);\r\n } else if (e.rangeParent) {\r\n range=document.createRange();\r\n range.setStart(e.rangeParent,e.rangeOffset);\r\n }\r\n let sel = window.getSelection();\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n sel.anchorNode.parentNode.focus();\r\n\r\n let html = (e.originalEvent || e).dataTransfer.getData('text/html');\r\n let text = (e.originalEvent || e).dataTransfer.getData('text/plain');\r\n let file = (e.originalEvent || e).dataTransfer.files;\r\n\r\n if (file.length) {\r\n obj.addFile(file);\r\n } else if (text) {\r\n extractImageFromHtml(html);\r\n }\r\n\r\n el.classList.remove('jeditor-dragging');\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n var editorBlur = function(e) {\r\n // Process extensions\r\n processExtensions('onevent', e);\r\n // Apply changes\r\n change(e);\r\n // Blur\r\n if (typeof(obj.options.onblur) == 'function') {\r\n obj.options.onblur(el, obj, e);\r\n }\r\n }\r\n\r\n var editorFocus = function(e) {\r\n // Focus\r\n if (typeof(obj.options.onfocus) == 'function') {\r\n obj.options.onfocus(el, obj, e);\r\n }\r\n }\r\n\r\n var editorKeyUp = function(e) {\r\n if (! obj.editor.innerHTML) {\r\n obj.editor.innerHTML = '
';\r\n }\r\n if (typeof(obj.options.onkeyup) == 'function') {\r\n obj.options.onkeyup(el, obj, e);\r\n }\r\n }\r\n\r\n var editorKeyDown = function(e) {\r\n // Process extensions\r\n processExtensions('onevent', e);\r\n\r\n if (e.key == 'Delete') {\r\n if (e.target.tagName == 'IMG') {\r\n var parent = e.target.parentNode;\r\n select(e.target);\r\n if (parent.classList.contains('jsnippet-image')) {\r\n updateTotalImages();\r\n }\r\n }\r\n }\r\n\r\n if (typeof(obj.options.onkeydown) == 'function') {\r\n obj.options.onkeydown(el, obj, e);\r\n }\r\n }\r\n\r\n var editorMouseUp = function(e) {\r\n if (editorAction && editorAction.e) {\r\n editorAction.e.classList.remove('resizing');\r\n\r\n if (editorAction.e.changed == true) {\r\n var image = editorAction.e.cloneNode()\r\n image.width = parseInt(editorAction.e.style.width) || editorAction.e.getAttribute('width');\r\n image.height = parseInt(editorAction.e.style.height) || editorAction.e.getAttribute('height');\r\n editorAction.e.style.width = '';\r\n editorAction.e.style.height = '';\r\n select(editorAction.e);\r\n document.execCommand('insertHtml', false, image.outerHTML);\r\n }\r\n }\r\n\r\n editorAction = false;\r\n }\r\n\r\n var editorMouseDown = function(e) {\r\n var close = function(snippet) {\r\n var rect = snippet.getBoundingClientRect();\r\n if (rect.width - (e.clientX - rect.left) < 40 && e.clientY - rect.top < 40) {\r\n snippet.innerHTML = '';\r\n snippet.remove();\r\n }\r\n }\r\n\r\n if (e.target.tagName == 'IMG') {\r\n if (e.target.style.cursor) {\r\n var rect = e.target.getBoundingClientRect();\r\n editorAction = {\r\n e: e.target,\r\n x: e.clientX,\r\n y: e.clientY,\r\n w: rect.width,\r\n h: rect.height,\r\n d: e.target.style.cursor,\r\n }\r\n\r\n if (! e.target.getAttribute('width')) {\r\n e.target.setAttribute('width', rect.width)\r\n }\r\n\r\n if (! e.target.getAttribute('height')) {\r\n e.target.setAttribute('height', rect.height)\r\n }\r\n\r\n var s = window.getSelection();\r\n if (s.rangeCount) {\r\n for (var i = 0; i < s.rangeCount; i++) {\r\n s.removeRange(s.getRangeAt(i));\r\n }\r\n }\r\n\r\n e.target.classList.add('resizing');\r\n } else {\r\n editorAction = true;\r\n }\r\n } else {\r\n if (e.target.classList.contains('jsnippet')) {\r\n close(e.target);\r\n } else if (e.target.parentNode.classList.contains('jsnippet')) {\r\n close(e.target.parentNode);\r\n }\r\n\r\n editorAction = true;\r\n }\r\n }\r\n\r\n var editorMouseMove = function(e) {\r\n if (e.target.tagName == 'IMG' && ! e.target.parentNode.classList.contains('jsnippet-image') && obj.options.allowImageResize == true) {\r\n if (e.target.getAttribute('tabindex')) {\r\n var rect = e.target.getBoundingClientRect();\r\n if (e.clientY - rect.top < 5) {\r\n if (rect.width - (e.clientX - rect.left) < 5) {\r\n e.target.style.cursor = 'ne-resize';\r\n } else if (e.clientX - rect.left < 5) {\r\n e.target.style.cursor = 'nw-resize';\r\n } else {\r\n e.target.style.cursor = 'n-resize';\r\n }\r\n } else if (rect.height - (e.clientY - rect.top) < 5) {\r\n if (rect.width - (e.clientX - rect.left) < 5) {\r\n e.target.style.cursor = 'se-resize';\r\n } else if (e.clientX - rect.left < 5) {\r\n e.target.style.cursor = 'sw-resize';\r\n } else {\r\n e.target.style.cursor = 's-resize';\r\n }\r\n } else if (rect.width - (e.clientX - rect.left) < 5) {\r\n e.target.style.cursor = 'e-resize';\r\n } else if (e.clientX - rect.left < 5) {\r\n e.target.style.cursor = 'w-resize';\r\n } else {\r\n e.target.style.cursor = '';\r\n }\r\n }\r\n }\r\n\r\n // Move\r\n if (e.which == 1 && editorAction && editorAction.d) {\r\n if (editorAction.d == 'e-resize' || editorAction.d == 'ne-resize' || editorAction.d == 'se-resize') {\r\n editorAction.e.style.width = (editorAction.w + (e.clientX - editorAction.x));\r\n\r\n if (e.shiftKey) {\r\n var newHeight = (e.clientX - editorAction.x) * (editorAction.h / editorAction.w);\r\n editorAction.e.style.height = editorAction.h + newHeight;\r\n } else {\r\n var newHeight = null;\r\n }\r\n }\r\n\r\n if (! newHeight) {\r\n if (editorAction.d == 's-resize' || editorAction.d == 'se-resize' || editorAction.d == 'sw-resize') {\r\n if (! e.shiftKey) {\r\n editorAction.e.style.height = editorAction.h + (e.clientY - editorAction.y);\r\n }\r\n }\r\n }\r\n\r\n editorAction.e.changed = true;\r\n }\r\n }\r\n\r\n var processExtensions = function(method, data) {\r\n if (obj.options.extensions) {\r\n var ext = Object.keys(obj.options.extensions);\r\n if (ext.length) {\r\n for (var i = 0; i < ext.length; i++)\r\n if (obj.options.extensions[ext[i]] && typeof(obj.options.extensions[ext[i]][method]) == 'function') {\r\n obj.options.extensions[ext[i]][method].call(obj, data);\r\n }\r\n }\r\n }\r\n }\r\n\r\n var loadExtensions = function() {\r\n if (obj.options.extensions) {\r\n var ext = Object.keys(obj.options.extensions);\r\n if (ext.length) {\r\n for (var i = 0; i < ext.length; i++) {\r\n if (obj.options.extensions[ext[i]] && typeof (obj.options.extensions[ext[i]]) == 'function') {\r\n obj.options.extensions[ext[i]] = obj.options.extensions[ext[i]](el, obj);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('mouseup', editorMouseUp);\r\n document.addEventListener('mousemove', editorMouseMove);\r\n obj.editor.addEventListener('mousedown', editorMouseDown);\r\n obj.editor.addEventListener('keyup', editorKeyUp);\r\n obj.editor.addEventListener('keydown', editorKeyDown);\r\n obj.editor.addEventListener('dragstart', editorDragStart);\r\n obj.editor.addEventListener('dragenter', editorDragEnter);\r\n obj.editor.addEventListener('dragover', editorDragOver);\r\n obj.editor.addEventListener('drop', editorDrop);\r\n obj.editor.addEventListener('paste', editorPaste);\r\n obj.editor.addEventListener('focus', editorFocus);\r\n obj.editor.addEventListener('blur', editorBlur);\r\n\r\n // Append editor to the container\r\n el.appendChild(obj.editor);\r\n // Snippet\r\n if (obj.options.snippet) {\r\n obj.appendSnippet(obj.options.snippet);\r\n }\r\n\r\n // Add toolbar\r\n if (obj.options.toolbar) {\r\n // Default toolbar configuration\r\n if (Array.isArray(obj.options.toolbar)) {\r\n var toolbarOptions = {\r\n container: true,\r\n responsive: true,\r\n items: obj.options.toolbar\r\n }\r\n } else if (obj.options.toolbar === true) {\r\n var toolbarOptions = {\r\n container: true,\r\n responsive: true,\r\n items: [],\r\n }\r\n } else {\r\n var toolbarOptions = obj.options.toolbar;\r\n }\r\n\r\n // Default items\r\n if (! (toolbarOptions.items && toolbarOptions.items.length)) {\r\n toolbarOptions.items = Component.getDefaultToolbar(obj);\r\n }\r\n\r\n if (obj.options.toolbarOnTop) {\r\n // Add class\r\n el.classList.add('toolbar-on-top');\r\n // Append to the DOM\r\n el.insertBefore(toolbar, el.firstChild);\r\n } else {\r\n // Add padding to the editor\r\n obj.editor.style.padding = '15px';\r\n // Append to the DOM\r\n el.appendChild(toolbar);\r\n }\r\n\r\n // Create toolbar\r\n Toolbar(toolbar, toolbarOptions);\r\n\r\n toolbar.addEventListener('click', function() {\r\n obj.editor.focus();\r\n })\r\n }\r\n\r\n // Upload file\r\n obj.file = document.createElement('input');\r\n obj.file.style.display = 'none';\r\n obj.file.type = 'file';\r\n obj.file.setAttribute('accept', 'image/*');\r\n obj.file.onchange = function() {\r\n obj.addFile(this.files);\r\n }\r\n el.appendChild(obj.file);\r\n\r\n // Focus to the editor\r\n if (obj.options.focus) {\r\n Component.setCursor(obj.editor, obj.options.focus == 'initial' ? true : false);\r\n }\r\n\r\n // Change method\r\n el.change = obj.setData;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n // Data type\r\n var o = el.getAttribute('data-html') === 'true' ? false : true;\r\n return obj.getData(o);\r\n } else {\r\n obj.setData(val);\r\n }\r\n }\r\n\r\n loadExtensions();\r\n\r\n el.editor = obj;\r\n\r\n // Onload\r\n if (typeof(obj.options.onload) == 'function') {\r\n obj.options.onload(el, obj, obj.editor);\r\n }\r\n\r\n return obj;\r\n });\r\n\r\n Component.setCursor = function(element, first) {\r\n element.focus();\r\n document.execCommand('selectAll');\r\n var sel = window.getSelection();\r\n var range = sel.getRangeAt(0);\r\n if (first == true) {\r\n var node = range.startContainer;\r\n var size = 0;\r\n } else {\r\n var node = range.endContainer;\r\n var size = node.length;\r\n }\r\n range.setStart(node, size);\r\n range.setEnd(node, size);\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n }\r\n\r\n Component.getDefaultToolbar = function(obj) {\r\n\r\n var color = function(a,b,c) {\r\n if (! c.color) {\r\n var t = null;\r\n var colorPicker = Color(c, {\r\n onchange: function(o, v) {\r\n if (c.k === 'color') {\r\n document.execCommand('foreColor', false, v);\r\n } else {\r\n document.execCommand('backColor', false, v);\r\n }\r\n }\r\n });\r\n c.color.open();\r\n }\r\n }\r\n\r\n var items = [];\r\n\r\n items.push({\r\n content: 'undo',\r\n onclick: function() {\r\n document.execCommand('undo');\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'redo',\r\n onclick: function() {\r\n document.execCommand('redo');\r\n }\r\n });\r\n\r\n items.push({\r\n type: 'divisor'\r\n });\r\n\r\n if (obj.options.toolbarOnTop) {\r\n items.push({\r\n type: 'select',\r\n width: '140px',\r\n options: ['Default', 'Verdana', 'Arial', 'Courier New'],\r\n render: function (e) {\r\n return '' + e + '';\r\n },\r\n onchange: function (a,b,c,d,e) {\r\n document.execCommand(\"fontName\", false, d);\r\n }\r\n });\r\n\r\n items.push({\r\n type: 'select',\r\n content: 'format_size',\r\n options: ['x-small', 'small', 'medium', 'large', 'x-large'],\r\n render: function (e) {\r\n return '' + e + '';\r\n },\r\n onchange: function (a,b,c,d,e) {\r\n //var html = `${text}`;\r\n //document.execCommand('insertHtml', false, html);\r\n document.execCommand(\"fontSize\", false, parseInt(e)+1);\r\n //var f = window.getSelection().anchorNode.parentNode\r\n //f.removeAttribute(\"size\");\r\n //f.style.fontSize = d;\r\n }\r\n });\r\n\r\n items.push({\r\n type: 'select',\r\n options: ['format_align_left', 'format_align_center', 'format_align_right', 'format_align_justify'],\r\n render: function (e) {\r\n return '' + e + '';\r\n },\r\n onchange: function (a,b,c,d,e) {\r\n var options = ['JustifyLeft','justifyCenter','justifyRight','justifyFull'];\r\n document.execCommand(options[e]);\r\n }\r\n });\r\n\r\n items.push({\r\n type: 'divisor'\r\n });\r\n\r\n items.push({\r\n content: 'format_color_text',\r\n k: 'color',\r\n onclick: color,\r\n });\r\n\r\n items.push({\r\n content: 'format_color_fill',\r\n k: 'background-color',\r\n onclick: color,\r\n });\r\n }\r\n\r\n items.push({\r\n content: 'format_bold',\r\n onclick: function(a,b,c) {\r\n document.execCommand('bold');\r\n\r\n if (document.queryCommandState(\"bold\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'format_italic',\r\n onclick: function(a,b,c) {\r\n document.execCommand('italic');\r\n\r\n if (document.queryCommandState(\"italic\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'format_underline',\r\n onclick: function(a,b,c) {\r\n document.execCommand('underline');\r\n\r\n if (document.queryCommandState(\"underline\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n type:'divisor'\r\n });\r\n\r\n items.push({\r\n content: 'format_list_bulleted',\r\n onclick: function(a,b,c) {\r\n document.execCommand('insertUnorderedList');\r\n\r\n if (document.queryCommandState(\"insertUnorderedList\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'format_list_numbered',\r\n onclick: function(a,b,c) {\r\n document.execCommand('insertOrderedList');\r\n\r\n if (document.queryCommandState(\"insertOrderedList\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'format_indent_increase',\r\n onclick: function(a,b,c) {\r\n document.execCommand('indent', true, null);\r\n\r\n if (document.queryCommandState(\"indent\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n items.push({\r\n content: 'format_indent_decrease',\r\n onclick: function(a,b,c) {\r\n document.execCommand('outdent');\r\n\r\n if (document.queryCommandState(\"outdent\")) {\r\n c.classList.add('selected');\r\n } else {\r\n c.classList.remove('selected');\r\n }\r\n }\r\n });\r\n\r\n if (obj.options.toolbarOnTop) {\r\n items.push({\r\n type: 'divisor'\r\n });\r\n\r\n items.push({\r\n content: 'photo',\r\n onclick: function () {\r\n obj.upload();\r\n }\r\n });\r\n\r\n items.push({\r\n type: 'select',\r\n content: 'table_view',\r\n columns: 8,\r\n grid: 8,\r\n right: true,\r\n options: [\r\n '0x0', '1x0', '2x0', '3x0', '4x0', '5x0', '6x0', '7x0',\r\n '0x1', '1x1', '2x1', '3x1', '4x1', '5x1', '6x1', '7x1',\r\n '0x2', '1x2', '2x2', '3x2', '4x2', '5x2', '6x2', '7x2',\r\n '0x3', '1x3', '2x3', '3x3', '4x3', '5x3', '6x3', '7x3',\r\n '0x4', '1x4', '2x4', '3x4', '4x4', '5x4', '6x4', '7x4',\r\n '0x5', '1x5', '2x5', '3x5', '4x5', '5x5', '6x5', '7x5',\r\n '0x6', '1x6', '2x6', '3x6', '4x6', '5x6', '6x6', '7x6',\r\n '0x7', '1x7', '2x7', '3x7', '4x7', '5x7', '6x7', '7x7',\r\n ],\r\n render: function (e, item) {\r\n if (item) {\r\n item.onmouseover = this.onmouseover;\r\n e = e.split('x');\r\n item.setAttribute('data-x', e[0]);\r\n item.setAttribute('data-y', e[1]);\r\n }\r\n var element = document.createElement('div');\r\n item.style.margin = '1px';\r\n item.style.border = '1px solid #ddd';\r\n return element;\r\n },\r\n onmouseover: function (e) {\r\n var x = parseInt(e.target.getAttribute('data-x'));\r\n var y = parseInt(e.target.getAttribute('data-y'));\r\n for (var i = 0; i < e.target.parentNode.children.length; i++) {\r\n var element = e.target.parentNode.children[i];\r\n var ex = parseInt(element.getAttribute('data-x'));\r\n var ey = parseInt(element.getAttribute('data-y'));\r\n if (ex <= x && ey <= y) {\r\n element.style.backgroundColor = '#cae1fc';\r\n element.style.borderColor = '#2977ff';\r\n } else {\r\n element.style.backgroundColor = '';\r\n element.style.borderColor = '#ddd';\r\n }\r\n }\r\n },\r\n onchange: function (a, b, c) {\r\n c = c.split('x');\r\n var table = document.createElement('table');\r\n var tbody = document.createElement('tbody');\r\n for (var y = 0; y <= c[1]; y++) {\r\n var tr = document.createElement('tr');\r\n for (var x = 0; x <= c[0]; x++) {\r\n var td = document.createElement('td');\r\n td.innerHTML = '';\r\n tr.appendChild(td);\r\n }\r\n tbody.appendChild(tr);\r\n }\r\n table.appendChild(tbody);\r\n table.setAttribute('width', '100%');\r\n table.setAttribute('cellpadding', '6');\r\n table.setAttribute('cellspacing', '0');\r\n document.execCommand('insertHTML', false, table.outerHTML);\r\n }\r\n });\r\n }\r\n\r\n return items;\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var editor = (Editor());\r\n\n;// CONCATENATED MODULE: ./src/plugins/floating.js\nfunction Floating() {\r\n var Component = (function (el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n type: 'big',\r\n title: 'Untitled',\r\n width: 510,\r\n height: 472,\r\n }\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Private methods\r\n\r\n var setContent = function () {\r\n var temp = document.createElement('div');\r\n while (el.children[0]) {\r\n temp.appendChild(el.children[0]);\r\n }\r\n\r\n obj.content = document.createElement('div');\r\n obj.content.className = 'jfloating_content';\r\n obj.content.innerHTML = el.innerHTML;\r\n\r\n while (temp.children[0]) {\r\n obj.content.appendChild(temp.children[0]);\r\n }\r\n\r\n obj.container = document.createElement('div');\r\n obj.container.className = 'jfloating';\r\n obj.container.appendChild(obj.content);\r\n\r\n if (obj.options.title) {\r\n obj.container.setAttribute('title', obj.options.title);\r\n } else {\r\n obj.container.classList.add('no-title');\r\n }\r\n\r\n // validate element dimensions\r\n if (obj.options.width) {\r\n obj.container.style.width = parseInt(obj.options.width) + 'px';\r\n }\r\n\r\n if (obj.options.height) {\r\n obj.container.style.height = parseInt(obj.options.height) + 'px';\r\n }\r\n\r\n el.innerHTML = '';\r\n el.appendChild(obj.container);\r\n }\r\n\r\n var setEvents = function () {\r\n if (obj.container) {\r\n obj.container.addEventListener('click', function (e) {\r\n var rect = e.target.getBoundingClientRect();\r\n\r\n if (e.target.classList.contains('jfloating')) {\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n if (rect.width - (x - rect.left) < 50 && (y - rect.top) < 50) {\r\n setTimeout(function () {\r\n obj.close();\r\n }, 100);\r\n } else {\r\n obj.setState();\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n var setType = function () {\r\n obj.container.classList.add('jfloating-' + obj.options.type);\r\n }\r\n\r\n obj.state = {\r\n isMinized: false,\r\n }\r\n\r\n obj.setState = function () {\r\n if (obj.state.isMinized) {\r\n obj.container.classList.remove('jfloating-minimized');\r\n } else {\r\n obj.container.classList.add('jfloating-minimized');\r\n }\r\n obj.state.isMinized = !obj.state.isMinized;\r\n }\r\n\r\n obj.close = function () {\r\n Components.elements.splice(Component.elements.indexOf(obj.container), 1);\r\n obj.updatePosition();\r\n el.remove();\r\n }\r\n\r\n obj.updatePosition = function () {\r\n for (var i = 0; i < Component.elements.length; i++) {\r\n var floating = Component.elements[i];\r\n var prevFloating = Component.elements[i - 1];\r\n floating.style.right = i * (prevFloating ? prevFloating.offsetWidth : floating.offsetWidth) * 1.01 + 'px';\r\n }\r\n }\r\n\r\n obj.init = function () {\r\n // Set content into root\r\n setContent();\r\n\r\n // Set dialog events\r\n setEvents();\r\n\r\n // Set dialog type\r\n setType();\r\n\r\n // Update floating position\r\n Component.elements.push(obj.container);\r\n obj.updatePosition();\r\n\r\n el.floating = obj;\r\n }\r\n\r\n obj.init();\r\n\r\n return obj;\r\n });\r\n\r\n Component.elements = [];\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var floating = (Floating());\n;// CONCATENATED MODULE: ./src/plugins/validations.js\n\r\n\r\nconst validations_HelpersDate = (dist_default()).Helpers;\r\nfunction Validations() {\r\n /**\r\n * Options: Object,\r\n * Properties:\r\n * Constraint,\r\n * Reference,\r\n * Value\r\n */\r\n\r\n const isNumeric = function(num) {\r\n return !isNaN(num) && num !== null && (typeof num !== 'string' || num.trim() !== '');\r\n }\r\n\r\n const numberCriterias = {\r\n 'between': function(value, range) {\r\n return value >= range[0] && value <= range[1];\r\n },\r\n 'not between': function(value, range) {\r\n return value < range[0] || value > range[1];\r\n },\r\n '<': function(value, range) {\r\n return value < range[0];\r\n },\r\n '<=': function(value, range) {\r\n return value <= range[0];\r\n },\r\n '>': function(value, range) {\r\n return value > range[0];\r\n },\r\n '>=': function(value, range) {\r\n return value >= range[0];\r\n },\r\n '=': function(value, range) {\r\n return value == range[0];\r\n },\r\n '!=': function(value, range) {\r\n return value != range[0];\r\n },\r\n }\r\n\r\n const dateCriterias = {\r\n 'valid date': function() {\r\n return true;\r\n },\r\n '=': function(value, range) {\r\n return value === range[0];\r\n },\r\n '!=': function(value, range) {\r\n return value !== range[0];\r\n },\r\n '<': function(value, range) {\r\n return value < range[0];\r\n },\r\n '<=': function(value, range) {\r\n return value <= range[0];\r\n },\r\n '>': function(value, range) {\r\n return value > range[0];\r\n },\r\n '>=': function(value, range) {\r\n return value >= range[0];\r\n },\r\n 'between': function(value, range) {\r\n return value >= range[0] && value <= range[1];\r\n },\r\n 'not between': function(value, range) {\r\n return value < range[0] || value > range[1];\r\n },\r\n }\r\n\r\n const textCriterias = {\r\n 'contains': function(value, range) {\r\n return value.includes(range[0]);\r\n },\r\n 'not contains': function(value, range) {\r\n return !value.includes(range[0]);\r\n },\r\n 'begins with': function(value, range) {\r\n return value.startsWith(range[0]);\r\n },\r\n 'ends with': function(value, range) {\r\n return value.endsWith(range[0]);\r\n },\r\n '=': function(value, range) {\r\n return value === range[0];\r\n },\r\n '!=': function(value, range) {\r\n return value !== range[0];\r\n },\r\n 'valid email': function(value) {\r\n var pattern = new RegExp(/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/);\r\n\r\n return pattern.test(value);\r\n },\r\n 'valid url': function(value) {\r\n var pattern = new RegExp(/(((https?:\\/\\/)|(www\\.))[-A-Z0-9+&@#\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\\/%=~_|]+)/ig);\r\n\r\n return pattern.test(value);\r\n },\r\n }\r\n\r\n // Component router\r\n const component = function(value, options) {\r\n if (typeof(component[options.type]) === 'function') {\r\n if (options.allowBlank && (typeof value === 'undefined' || value === '' || value === null)) {\r\n return true;\r\n }\r\n return component[options.type].call(this, value, options);\r\n }\r\n return null;\r\n }\r\n \r\n component.url = function(data) {\r\n var pattern = new RegExp(/(((https?:\\/\\/)|(www\\.))[-A-Z0-9+&@#\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\\/%=~_|]+)/ig);\r\n return pattern.test(data) ? true : false;\r\n }\r\n\r\n component.email = function(data) {\r\n var pattern = new RegExp(/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/);\r\n return data && pattern.test(data) ? true : false;\r\n }\r\n \r\n component.required = function(data) {\r\n return data && data.trim() ? true : false;\r\n }\r\n\r\n component.empty = function(data) {\r\n return typeof data === 'undefined' || data === null || (typeof data === 'string' && !data.toString().trim());\r\n }\r\n\r\n component['not exist'] = component.empty;\r\n\r\n component.notEmpty = function(data) {\r\n return !component.empty(data);\r\n }\r\n\r\n component.exist = component.notEmpty;\r\n\r\n component.number = function(data, options) {\r\n if (! isNumeric(data)) {\r\n return false;\r\n }\r\n\r\n if (!options || !options.criteria) {\r\n return true;\r\n }\r\n\r\n if (!numberCriterias[options.criteria]) {\r\n return false;\r\n }\r\n\r\n let values = options.value.map(function(num) {\r\n return parseFloat(num);\r\n })\r\n\r\n return numberCriterias[options.criteria](data, values);\r\n };\r\n\r\n component.login = function(data) {\r\n let pattern = new RegExp(/^[a-zA-Z0-9._-]+$/);\r\n return data && pattern.test(data) ? true : false;\r\n }\r\n\r\n component.list = function(data, options) {\r\n let dataType = typeof data;\r\n if (dataType !== 'string' && dataType !== 'number') {\r\n return false;\r\n }\r\n let list;\r\n if (typeof(options.value[0]) === 'string') {\r\n if (options.source) {\r\n list = options.source;\r\n } else {\r\n list = options.value[0].split(',');\r\n }\r\n } else {\r\n list = options.value[0];\r\n }\r\n\r\n if (! Array.isArray(list)) {\r\n return false;\r\n } else {\r\n let validOption = list.findIndex(function (item) {\r\n return item == data;\r\n });\r\n\r\n return validOption > -1;\r\n }\r\n }\r\n\r\n const getCurrentDateWithoutTime = function() {\r\n let date = new Date();\r\n date.setHours(0, 0, 0, 0);\r\n return date;\r\n }\r\n\r\n const relativeDates = {\r\n 'one year ago': function() {\r\n let date = getCurrentDateWithoutTime();\r\n\r\n date.setFullYear(date.getFullYear() - 1);\r\n\r\n return date;\r\n },\r\n 'one month ago': function() {\r\n let date = getCurrentDateWithoutTime();\r\n\r\n date.setMonth(date.getMonth() - 1);\r\n\r\n return date;\r\n },\r\n 'one week ago': function() {\r\n let date = getCurrentDateWithoutTime();\r\n\r\n date.setDate(date.getDate() - 7);\r\n\r\n return date;\r\n },\r\n yesterday: function() {\r\n let date = getCurrentDateWithoutTime();\r\n\r\n date.setDate(date.getDate() - 1);\r\n\r\n return date;\r\n },\r\n today: getCurrentDateWithoutTime,\r\n tomorrow: function() {\r\n let date = getCurrentDateWithoutTime();\r\n\r\n date.setDate(date.getDate() + 1);\r\n\r\n return date;\r\n },\r\n };\r\n\r\n component.date = function(data, options) {\r\n if (isNumeric(data) && data > 0 && data < 1000000) {\r\n data = validations_HelpersDate.numToDate(data);\r\n }\r\n\r\n if (new Date(data) == 'Invalid Date') {\r\n return false;\r\n }\r\n\r\n if (!options || !options.criteria) {\r\n return true;\r\n }\r\n\r\n if (!dateCriterias[options.criteria]) {\r\n return false;\r\n }\r\n\r\n let values = options.value.map(function(date) {\r\n if (typeof date === 'string' && relativeDates[date]) {\r\n return relativeDates[date]().getTime();\r\n }\r\n\r\n return new Date(date).getTime();\r\n });\r\n\r\n return dateCriterias[options.criteria](new Date(data).getTime(), values);\r\n }\r\n\r\n component.text = function(data, options) {\r\n if (typeof data === 'undefined' || data === null) {\r\n data = '';\r\n } else if (typeof data !== 'string') {\r\n return false;\r\n }\r\n\r\n if (!options || !options.criteria) {\r\n return true;\r\n }\r\n\r\n if (!textCriterias[options.criteria]) {\r\n return false;\r\n }\r\n\r\n return textCriterias[options.criteria](data, options.value);\r\n }\r\n\r\n component.textLength = function(data, options) {\r\n let textLength;\r\n if (typeof data === 'string') {\r\n textLength = data.length;\r\n } else if (typeof data !== 'undefined' && data !== null && typeof data.toString === 'function') {\r\n textLength = data.toString().length;\r\n } else {\r\n textLength = 0;\r\n }\r\n\r\n return component.number(textLength, options);\r\n }\r\n\r\n component.time = function(data, options) {\r\n if (! isNumeric(data)) {\r\n return false;\r\n }\r\n\r\n if (!options || !options.criteria) {\r\n return true;\r\n }\r\n\r\n if (!numberCriterias[options.criteria]) {\r\n return false;\r\n }\r\n\r\n let values = options.value.map(function(num) {\r\n return parseInt(parseFloat(num) * 10**17) / 10**17;\r\n })\r\n\r\n return numberCriterias[options.criteria](parseInt(parseFloat(data) * 10**17) / 10**17, values);\r\n };\r\n\r\n return component;\r\n}\r\n\r\n/* harmony default export */ var validations = (Validations());\n;// CONCATENATED MODULE: ./src/plugins/form.js\n\r\n\r\n\r\n\r\nfunction Form() {\r\n var Component = (function(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n url: null,\r\n message: 'Are you sure? There are unsaved information in your form',\r\n ignore: false,\r\n currentHash: null,\r\n submitButton:null,\r\n validations: null,\r\n onbeforeload: null,\r\n onload: null,\r\n onbeforesave: null,\r\n onsave: null,\r\n onbeforeremove: null,\r\n onremove: null,\r\n onerror: function(el, message) {\r\n alert(message);\r\n }\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Validations\r\n if (! obj.options.validations) {\r\n obj.options.validations = {};\r\n }\r\n\r\n // Submit Button\r\n if (! obj.options.submitButton) {\r\n obj.options.submitButton = el.querySelector('input[type=submit]');\r\n }\r\n\r\n if (obj.options.submitButton && obj.options.url) {\r\n obj.options.submitButton.onclick = function() {\r\n obj.save();\r\n }\r\n }\r\n\r\n if (! obj.options.validations.email) {\r\n obj.options.validations.email = validations.email;\r\n }\r\n\r\n if (! obj.options.validations.length) {\r\n obj.options.validations.length = validations.length;\r\n }\r\n\r\n if (! obj.options.validations.required) {\r\n obj.options.validations.required = validations.required;\r\n }\r\n\r\n obj.setUrl = function(url) {\r\n obj.options.url = url;\r\n }\r\n\r\n obj.load = function() {\r\n ajax({\r\n url: obj.options.url,\r\n method: 'GET',\r\n dataType: 'json',\r\n queue: true,\r\n success: function(data) {\r\n // Overwrite values from the backend\r\n if (typeof(obj.options.onbeforeload) == 'function') {\r\n var ret = obj.options.onbeforeload(el, data);\r\n if (ret) {\r\n data = ret;\r\n }\r\n }\r\n // Apply values to the form\r\n Component.setElements(el, data);\r\n // Onload methods\r\n if (typeof(obj.options.onload) == 'function') {\r\n obj.options.onload(el, data);\r\n }\r\n }\r\n });\r\n }\r\n\r\n obj.save = function() {\r\n var test = obj.validate();\r\n\r\n if (test) {\r\n obj.options.onerror(el, test);\r\n } else {\r\n var data = Component.getElements(el, true);\r\n\r\n if (typeof(obj.options.onbeforesave) == 'function') {\r\n var data = obj.options.onbeforesave(el, data);\r\n\r\n if (data === false) {\r\n return;\r\n }\r\n }\r\n\r\n ajax({\r\n url: obj.options.url,\r\n method: 'POST',\r\n dataType: 'json',\r\n data: data,\r\n success: function(result) {\r\n if (typeof(obj.options.onsave) == 'function') {\r\n obj.options.onsave(el, data, result);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n obj.remove = function() {\r\n if (typeof(obj.options.onbeforeremove) == 'function') {\r\n var ret = obj.options.onbeforeremove(el, obj);\r\n if (ret === false) {\r\n return false;\r\n }\r\n }\r\n\r\n ajax({\r\n url: obj.options.url,\r\n method: 'DELETE',\r\n dataType: 'json',\r\n success: function(result) {\r\n if (typeof(obj.options.onremove) == 'function') {\r\n obj.options.onremove(el, obj, result);\r\n }\r\n\r\n obj.reset();\r\n }\r\n });\r\n }\r\n\r\n var addError = function(element) {\r\n // Add error in the element\r\n element.classList.add('error');\r\n // Submit button\r\n if (obj.options.submitButton) {\r\n obj.options.submitButton.setAttribute('disabled', true);\r\n }\r\n // Return error message\r\n var error = element.getAttribute('data-error') || 'There is an error in the form';\r\n element.setAttribute('title', error);\r\n return error;\r\n }\r\n\r\n var delError = function(element) {\r\n var error = false;\r\n // Remove class from this element\r\n element.classList.remove('error');\r\n element.removeAttribute('title');\r\n // Get elements in the form\r\n var elements = el.querySelectorAll(\"input, select, textarea, div[name]\");\r\n // Run all elements\r\n for (var i = 0; i < elements.length; i++) {\r\n if (elements[i].getAttribute('data-validation')) {\r\n if (elements[i].classList.contains('error')) {\r\n error = true;\r\n }\r\n }\r\n }\r\n\r\n if (obj.options.submitButton) {\r\n if (error) {\r\n obj.options.submitButton.setAttribute('disabled', true);\r\n } else {\r\n obj.options.submitButton.removeAttribute('disabled');\r\n }\r\n }\r\n }\r\n\r\n obj.validateElement = function(element) {\r\n // Test results\r\n var test = false;\r\n // Value\r\n var value = Component.getValue(element);\r\n // Validation\r\n var validation = element.getAttribute('data-validation');\r\n // Parse\r\n if (typeof(obj.options.validations[validation]) == 'function' && ! obj.options.validations[validation](value, element)) {\r\n // Not passed in the test\r\n test = addError(element);\r\n } else {\r\n if (element.classList.contains('error')) {\r\n delError(element);\r\n }\r\n }\r\n\r\n return test;\r\n }\r\n\r\n obj.reset = function() {\r\n // Get elements in the form\r\n var name = null;\r\n var elements = el.querySelectorAll(\"input, select, textarea, div[name]\");\r\n // Run all elements\r\n for (var i = 0; i < elements.length; i++) {\r\n if (name = elements[i].getAttribute('name')) {\r\n if (elements[i].type == 'checkbox' || elements[i].type == 'radio') {\r\n elements[i].checked = false;\r\n } else {\r\n if (typeof(elements[i].val) == 'function') {\r\n elements[i].val('');\r\n } else {\r\n elements[i].value = '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Run form validation\r\n obj.validate = function() {\r\n var test = [];\r\n // Get elements in the form\r\n var elements = el.querySelectorAll(\"input, select, textarea, div[name]\");\r\n // Run all elements\r\n for (var i = 0; i < elements.length; i++) {\r\n // Required\r\n if (elements[i].getAttribute('data-validation')) {\r\n var res = obj.validateElement(elements[i]);\r\n if (res) {\r\n test.push(res);\r\n }\r\n }\r\n }\r\n if (test.length > 0) {\r\n return test.join(' ');\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n // Check the form\r\n obj.getError = function() {\r\n // Validation\r\n return obj.validation() ? true : false;\r\n }\r\n\r\n // Return the form hash\r\n obj.setHash = function() {\r\n return obj.getHash(Component.getElements(el));\r\n }\r\n\r\n // Get the form hash\r\n obj.getHash = function(str) {\r\n var hash = 0, i, chr;\r\n\r\n if (str.length === 0) {\r\n return hash;\r\n } else {\r\n for (i = 0; i < str.length; i++) {\r\n chr = str.charCodeAt(i);\r\n hash = ((hash << 5) - hash) + chr;\r\n hash |= 0;\r\n }\r\n }\r\n\r\n return hash;\r\n }\r\n\r\n // Is there any change in the form since start tracking?\r\n obj.isChanged = function() {\r\n var hash = obj.setHash();\r\n return (obj.options.currentHash != hash);\r\n }\r\n\r\n // Restart tracking\r\n obj.resetTracker = function() {\r\n obj.options.currentHash = obj.setHash();\r\n obj.options.ignore = false;\r\n }\r\n\r\n // Ignore flag\r\n obj.setIgnore = function(ignoreFlag) {\r\n obj.options.ignore = ignoreFlag ? true : false;\r\n }\r\n\r\n // Start tracking in one second\r\n setTimeout(function() {\r\n obj.options.currentHash = obj.setHash();\r\n }, 1000);\r\n\r\n // Validations\r\n el.addEventListener(\"keyup\", function(e) {\r\n if (e.target.getAttribute('data-validation')) {\r\n obj.validateElement(e.target);\r\n }\r\n });\r\n\r\n // Alert\r\n if (! Component.hasEvents) {\r\n window.addEventListener(\"beforeunload\", function (e) {\r\n if (obj.isChanged() && obj.options.ignore == false) {\r\n var confirmationMessage = obj.options.message? obj.options.message : \"\\o/\";\r\n\r\n if (confirmationMessage) {\r\n if (typeof e == 'undefined') {\r\n e = window.event;\r\n }\r\n\r\n if (e) {\r\n e.returnValue = confirmationMessage;\r\n }\r\n\r\n return confirmationMessage;\r\n } else {\r\n return void(0);\r\n }\r\n }\r\n });\r\n\r\n Component.hasEvents = true;\r\n }\r\n\r\n el.form = obj;\r\n\r\n return obj;\r\n });\r\n\r\n // Get value from one element\r\n Component.getValue = function(element) {\r\n var value = null;\r\n if (element.type == 'checkbox') {\r\n if (element.checked == true) {\r\n value = element.value || true;\r\n }\r\n } else if (element.type == 'radio') {\r\n if (element.checked == true) {\r\n value = element.value;\r\n }\r\n } else if (element.type == 'file') {\r\n value = element.files;\r\n } else if (element.tagName == 'select' && element.multiple == true) {\r\n value = [];\r\n var options = element.querySelectorAll(\"options[selected]\");\r\n for (var j = 0; j < options.length; j++) {\r\n value.push(options[j].value);\r\n }\r\n } else if (typeof(element.val) == 'function') {\r\n value = element.val();\r\n } else {\r\n value = element.value || '';\r\n }\r\n\r\n return value;\r\n }\r\n\r\n // Get form elements\r\n Component.getElements = function(el, asArray) {\r\n var data = {};\r\n var name = null;\r\n var elements = el.querySelectorAll(\"input, select, textarea, div[name]\");\r\n\r\n for (var i = 0; i < elements.length; i++) {\r\n if (name = elements[i].getAttribute('name')) {\r\n data[name] = Component.getValue(elements[i]) || '';\r\n }\r\n }\r\n\r\n return asArray == true ? data : JSON.stringify(data);\r\n }\r\n\r\n //Get form elements\r\n Component.setElements = function(el, data) {\r\n var name = null;\r\n var value = null;\r\n var elements = el.querySelectorAll(\"input, select, textarea, div[name]\");\r\n for (var i = 0; i < elements.length; i++) {\r\n // Attributes\r\n var type = elements[i].getAttribute('type');\r\n if (name = elements[i].getAttribute('name')) {\r\n // Transform variable names in pathname\r\n name = name.replace(new RegExp(/\\[(.*?)\\]/ig), '.$1');\r\n value = null;\r\n // Seach for the data in the path\r\n if (name.match(/\\./)) {\r\n var tmp = Path.call(data, name) || '';\r\n if (typeof(tmp) !== 'undefined') {\r\n value = tmp;\r\n }\r\n } else {\r\n if (typeof(data[name]) !== 'undefined') {\r\n value = data[name];\r\n }\r\n }\r\n // Set the values\r\n if (value !== null) {\r\n if (type == 'checkbox' || type == 'radio') {\r\n elements[i].checked = value ? true : false;\r\n } else if (type == 'file') {\r\n // Do nothing\r\n } else {\r\n if (typeof (elements[i].val) == 'function') {\r\n elements[i].val(value);\r\n } else {\r\n elements[i].value = value;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var plugins_form = (Form());\n;// CONCATENATED MODULE: ./src/plugins/mask.js\n/*\r\n Add '*' as a valid symbol\r\n Formats such as 'DD\"th of \"MMMM\", \"YYYY'\r\n Conditional masking\r\n (000) 00000-00\r\n $ (#,##0.00);$ (-#,##0.00)\r\n $ (-#,##0.00)\r\n j.mask.render(0, { mask: 'mm:ss.0' }\r\n j.mask.render(0, { mask: '[h]:mm:ss' }, true)\r\n */\r\n\r\n\r\n\r\n\r\n/* harmony default export */ var mask = (dist.Mask);\r\n\n;// CONCATENATED MODULE: ./src/plugins/modal.js\n\r\n\r\n\r\n\r\nfunction Modal() {\r\n\r\n var Events = function() {\r\n // Position\r\n var tracker = null;\r\n\r\n var keyDown = function (e) {\r\n if (e.which == 27) {\r\n var modals = document.querySelectorAll('.jmodal');\r\n for (var i = 0; i < modals.length; i++) {\r\n modals[i].parentNode.modal.close();\r\n }\r\n }\r\n }\r\n\r\n var mouseUp = function (e) {\r\n let element = e.composedPath();\r\n var item = helpers.findElement(element[0], 'jmodal');\r\n if (item) {\r\n // Get target info\r\n var rect = item.getBoundingClientRect();\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n if (rect.width - (x - rect.left) < 50 && (y - rect.top) < 50) {\r\n item.parentNode.modal.close();\r\n }\r\n }\r\n\r\n if (tracker) {\r\n tracker.element.style.cursor = 'auto';\r\n tracker = null;\r\n }\r\n }\r\n\r\n var mouseDown = function (e) {\r\n let element = e.composedPath();\r\n var item = helpers.findElement(element[0], 'jmodal');\r\n if (item) {\r\n // Get target info\r\n var rect = item.getBoundingClientRect();\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n if (rect.width - (x - rect.left) < 50 && (y - rect.top) < 50) {\r\n // Do nothing\r\n } else {\r\n if (y - rect.top < 50) {\r\n if (document.selection) {\r\n document.selection.empty();\r\n } else if (window.getSelection) {\r\n window.getSelection().removeAllRanges();\r\n }\r\n\r\n tracker = {\r\n left: rect.left,\r\n top: rect.top,\r\n x: e.clientX,\r\n y: e.clientY,\r\n width: rect.width,\r\n height: rect.height,\r\n element: item,\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n var mouseMove = function (e) {\r\n if (tracker) {\r\n e = e || window.event;\r\n if (e.buttons) {\r\n var mouseButton = e.buttons;\r\n } else if (e.button) {\r\n var mouseButton = e.button;\r\n } else {\r\n var mouseButton = e.which;\r\n }\r\n\r\n if (mouseButton) {\r\n tracker.element.style.top = (tracker.top + (e.clientY - tracker.y) + (tracker.height / 2)) + 'px';\r\n tracker.element.style.left = (tracker.left + (e.clientX - tracker.x) + (tracker.width / 2)) + 'px';\r\n tracker.element.style.cursor = 'move';\r\n } else {\r\n tracker.element.style.cursor = 'auto';\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('keydown', keyDown);\r\n document.addEventListener('mouseup', mouseUp);\r\n document.addEventListener('mousedown', mouseDown);\r\n document.addEventListener('mousemove', mouseMove);\r\n }\r\n\r\n var Component = (function (el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n url: null,\r\n onopen: null,\r\n onclose: null,\r\n onload: null,\r\n closed: false,\r\n width: null,\r\n height: null,\r\n title: null,\r\n padding: null,\r\n backdrop: true,\r\n icon: null,\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Title\r\n if (!obj.options.title && el.getAttribute('title')) {\r\n obj.options.title = el.getAttribute('title');\r\n }\r\n\r\n var temp = document.createElement('div');\r\n while (el.children[0]) {\r\n temp.appendChild(el.children[0]);\r\n }\r\n\r\n obj.title = document.createElement('div');\r\n obj.title.className = 'jmodal_title';\r\n if (obj.options.icon) {\r\n obj.title.setAttribute('data-icon', obj.options.icon);\r\n }\r\n\r\n obj.content = document.createElement('div');\r\n obj.content.className = 'jmodal_content';\r\n obj.content.innerHTML = el.innerHTML;\r\n\r\n while (temp.children[0]) {\r\n obj.content.appendChild(temp.children[0]);\r\n }\r\n\r\n obj.container = document.createElement('div');\r\n obj.container.className = 'jmodal';\r\n obj.container.appendChild(obj.title);\r\n obj.container.appendChild(obj.content);\r\n\r\n if (obj.options.padding) {\r\n obj.content.style.padding = obj.options.padding;\r\n }\r\n if (obj.options.width) {\r\n obj.container.style.width = obj.options.width;\r\n }\r\n if (obj.options.height) {\r\n obj.container.style.height = obj.options.height;\r\n }\r\n if (obj.options.title) {\r\n var title = document.createElement('h4');\r\n title.innerText = obj.options.title;\r\n obj.title.appendChild(title);\r\n }\r\n\r\n el.innerHTML = '';\r\n el.style.display = 'none';\r\n el.appendChild(obj.container);\r\n\r\n // Backdrop\r\n if (obj.options.backdrop) {\r\n var backdrop = document.createElement('div');\r\n backdrop.className = 'jmodal_backdrop';\r\n backdrop.onclick = function () {\r\n obj.close();\r\n }\r\n el.appendChild(backdrop);\r\n }\r\n\r\n obj.open = function () {\r\n el.style.display = 'block';\r\n // Fullscreen\r\n var rect = obj.container.getBoundingClientRect();\r\n if (helpers.getWindowWidth() < rect.width) {\r\n obj.container.style.top = '';\r\n obj.container.style.left = '';\r\n obj.container.classList.add('jmodal_fullscreen');\r\n animation.slideBottom(obj.container, 1);\r\n } else {\r\n if (obj.options.backdrop) {\r\n backdrop.style.display = 'block';\r\n }\r\n }\r\n // Event\r\n if (typeof (obj.options.onopen) == 'function') {\r\n obj.options.onopen(el, obj);\r\n }\r\n }\r\n\r\n obj.resetPosition = function () {\r\n obj.container.style.top = '';\r\n obj.container.style.left = '';\r\n }\r\n\r\n obj.isOpen = function () {\r\n return el.style.display != 'none' ? true : false;\r\n }\r\n\r\n obj.close = function () {\r\n if (obj.isOpen()) {\r\n el.style.display = 'none';\r\n if (obj.options.backdrop) {\r\n // Backdrop\r\n backdrop.style.display = '';\r\n }\r\n // Remove fullscreen class\r\n obj.container.classList.remove('jmodal_fullscreen');\r\n // Event\r\n if (typeof (obj.options.onclose) == 'function') {\r\n obj.options.onclose(el, obj);\r\n }\r\n }\r\n }\r\n\r\n if (obj.options.url) {\r\n ajax({\r\n url: obj.options.url,\r\n method: 'GET',\r\n dataType: 'text/html',\r\n success: function (data) {\r\n obj.content.innerHTML = data;\r\n\r\n if (!obj.options.closed) {\r\n obj.open();\r\n }\r\n\r\n if (typeof (obj.options.onload) === 'function') {\r\n obj.options.onload(obj);\r\n }\r\n }\r\n });\r\n } else {\r\n if (!obj.options.closed) {\r\n obj.open();\r\n }\r\n\r\n if (typeof (obj.options.onload) === 'function') {\r\n obj.options.onload(obj);\r\n }\r\n }\r\n\r\n // Keep object available from the node\r\n el.modal = obj;\r\n\r\n // Create events when the first modal is create only\r\n Events();\r\n\r\n // Execute the events only once\r\n Events = function() {};\r\n\r\n return obj;\r\n });\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var modal = (Modal());\n;// CONCATENATED MODULE: ./src/plugins/notification.js\n\r\n\r\n\r\nfunction Notification() {\r\n var Component = function (options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n icon: null,\r\n name: 'Notification',\r\n date: null,\r\n error: null,\r\n title: null,\r\n message: null,\r\n timeout: 4000,\r\n autoHide: true,\r\n closeable: true,\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n var notification = document.createElement('div');\r\n notification.className = 'jnotification';\r\n\r\n if (obj.options.error) {\r\n notification.classList.add('jnotification-error');\r\n }\r\n\r\n var notificationContainer = document.createElement('div');\r\n notificationContainer.className = 'jnotification-container';\r\n notification.appendChild(notificationContainer);\r\n\r\n var notificationHeader = document.createElement('div');\r\n notificationHeader.className = 'jnotification-header';\r\n notificationContainer.appendChild(notificationHeader);\r\n\r\n var notificationImage = document.createElement('div');\r\n notificationImage.className = 'jnotification-image';\r\n notificationHeader.appendChild(notificationImage);\r\n\r\n if (obj.options.icon) {\r\n var notificationIcon = document.createElement('img');\r\n notificationIcon.src = obj.options.icon;\r\n notificationImage.appendChild(notificationIcon);\r\n }\r\n\r\n var notificationName = document.createElement('div');\r\n notificationName.className = 'jnotification-name';\r\n notificationName.innerHTML = obj.options.name;\r\n notificationHeader.appendChild(notificationName);\r\n\r\n if (obj.options.closeable == true) {\r\n var notificationClose = document.createElement('div');\r\n notificationClose.className = 'jnotification-close';\r\n notificationClose.onclick = function () {\r\n obj.hide();\r\n }\r\n notificationHeader.appendChild(notificationClose);\r\n }\r\n\r\n var notificationDate = document.createElement('div');\r\n notificationDate.className = 'jnotification-date';\r\n notificationHeader.appendChild(notificationDate);\r\n\r\n var notificationContent = document.createElement('div');\r\n notificationContent.className = 'jnotification-content';\r\n notificationContainer.appendChild(notificationContent);\r\n\r\n if (obj.options.title) {\r\n var notificationTitle = document.createElement('div');\r\n notificationTitle.className = 'jnotification-title';\r\n notificationTitle.innerHTML = obj.options.title;\r\n notificationContent.appendChild(notificationTitle);\r\n }\r\n\r\n var notificationMessage = document.createElement('div');\r\n notificationMessage.className = 'jnotification-message';\r\n notificationMessage.innerHTML = obj.options.message;\r\n notificationContent.appendChild(notificationMessage);\r\n\r\n obj.show = function () {\r\n document.body.appendChild(notification);\r\n if (helpers.getWindowWidth() > 800) {\r\n animation.fadeIn(notification);\r\n } else {\r\n animation.slideTop(notification, 1);\r\n }\r\n }\r\n\r\n obj.hide = function () {\r\n if (helpers.getWindowWidth() > 800) {\r\n animation.fadeOut(notification, function () {\r\n if (notification.parentNode) {\r\n notification.parentNode.removeChild(notification);\r\n if (notificationTimeout) {\r\n clearTimeout(notificationTimeout);\r\n }\r\n }\r\n });\r\n } else {\r\n animation.slideTop(notification, 0, function () {\r\n if (notification.parentNode) {\r\n notification.parentNode.removeChild(notification);\r\n if (notificationTimeout) {\r\n clearTimeout(notificationTimeout);\r\n }\r\n }\r\n });\r\n }\r\n };\r\n\r\n obj.show();\r\n\r\n if (obj.options.autoHide == true) {\r\n var notificationTimeout = setTimeout(function () {\r\n obj.hide();\r\n }, obj.options.timeout);\r\n }\r\n\r\n if (helpers.getWindowWidth() < 800) {\r\n notification.addEventListener(\"swipeup\", function (e) {\r\n obj.hide();\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n Component.isVisible = function () {\r\n var j = document.querySelector('.jnotification');\r\n return j && j.parentNode ? true : false;\r\n }\r\n\r\n return Component;\r\n}\r\n\r\n/* harmony default export */ var notification = (Notification());\n;// CONCATENATED MODULE: ./src/plugins/progressbar.js\nfunction Progressbar(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n value: 0,\r\n onchange: null,\r\n width: null,\r\n };\r\n\r\n // Loop through the initial configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Class\r\n el.classList.add('jprogressbar');\r\n el.setAttribute('tabindex', 1);\r\n el.setAttribute('data-value', obj.options.value);\r\n\r\n var bar = document.createElement('div');\r\n bar.style.width = obj.options.value + '%';\r\n bar.style.color = '#fff';\r\n el.appendChild(bar);\r\n\r\n if (obj.options.width) {\r\n el.style.width = obj.options.width;\r\n }\r\n\r\n // Set value\r\n obj.setValue = function(value) {\r\n value = parseInt(value);\r\n obj.options.value = value;\r\n bar.style.width = value + '%';\r\n el.setAttribute('data-value', value + '%');\r\n\r\n if (value < 6) {\r\n el.style.color = '#000';\r\n } else {\r\n el.style.color = '#fff';\r\n }\r\n\r\n // Update value\r\n obj.options.value = value;\r\n\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, value);\r\n }\r\n\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n }\r\n\r\n obj.getValue = function() {\r\n return obj.options.value;\r\n }\r\n\r\n var action = function(e) {\r\n if (e.which) {\r\n // Get target info\r\n var rect = el.getBoundingClientRect();\r\n\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n obj.setValue(Math.round((x - rect.left) / rect.width * 100));\r\n }\r\n }\r\n\r\n // Events\r\n if ('touchstart' in document.documentElement === true) {\r\n el.addEventListener('touchstart', action);\r\n el.addEventListener('touchend', action);\r\n } else {\r\n el.addEventListener('mousedown', action);\r\n el.addEventListener(\"mousemove\", action);\r\n }\r\n\r\n // Change\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Reference\r\n el.progressbar = obj;\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/rating.js\nfunction Rating(el, options) {\r\n // Already created, update options\r\n if (el.rating) {\r\n return el.rating.setOptions(options, true);\r\n }\r\n\r\n // New instance\r\n var obj = {};\r\n obj.options = {};\r\n\r\n obj.setOptions = function(options, reset) {\r\n // Default configuration\r\n var defaults = {\r\n number: 5,\r\n value: 0,\r\n tooltip: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ],\r\n onchange: null,\r\n };\r\n\r\n // Loop through the initial configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof(obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Make sure the container is empty\r\n el.innerHTML = '';\r\n\r\n // Add elements\r\n for (var i = 0; i < obj.options.number; i++) {\r\n var div = document.createElement('div');\r\n div.setAttribute('data-index', (i + 1))\r\n div.setAttribute('title', obj.options.tooltip[i])\r\n el.appendChild(div);\r\n }\r\n\r\n // Selected option\r\n if (obj.options.value) {\r\n for (var i = 0; i < obj.options.number; i++) {\r\n if (i < obj.options.value) {\r\n el.children[i].classList.add('jrating-selected');\r\n }\r\n }\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n // Set value\r\n obj.setValue = function(index) {\r\n for (var i = 0; i < obj.options.number; i++) {\r\n if (i < index) {\r\n el.children[i].classList.add('jrating-selected');\r\n } else {\r\n el.children[i].classList.remove('jrating-over');\r\n el.children[i].classList.remove('jrating-selected');\r\n }\r\n }\r\n\r\n obj.options.value = index;\r\n\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, index);\r\n }\r\n\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n }\r\n\r\n obj.getValue = function() {\r\n return obj.options.value;\r\n }\r\n\r\n var init = function() {\r\n // Start plugin\r\n obj.setOptions(options);\r\n\r\n // Class\r\n el.classList.add('jrating');\r\n\r\n // Events\r\n el.addEventListener(\"click\", function(e) {\r\n var index = e.target.getAttribute('data-index');\r\n if (index != undefined) {\r\n if (index == obj.options.value) {\r\n obj.setValue(0);\r\n } else {\r\n obj.setValue(index);\r\n }\r\n }\r\n });\r\n\r\n el.addEventListener(\"mouseover\", function(e) {\r\n var index = e.target.getAttribute('data-index');\r\n for (var i = 0; i < obj.options.number; i++) {\r\n if (i < index) {\r\n el.children[i].classList.add('jrating-over');\r\n } else {\r\n el.children[i].classList.remove('jrating-over');\r\n }\r\n }\r\n });\r\n\r\n el.addEventListener(\"mouseout\", function(e) {\r\n for (var i = 0; i < obj.options.number; i++) {\r\n el.children[i].classList.remove('jrating-over');\r\n }\r\n });\r\n\r\n // Change\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n // Reference\r\n el.rating = obj;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/search.js\n\r\n\r\n\r\nfunction Search(el, options) {\r\n if (el.search) {\r\n return el.search;\r\n }\r\n\r\n var index = null;\r\n\r\n var select = function(e) {\r\n if (e.target.classList.contains('jsearch_item')) {\r\n var element = e.target;\r\n } else {\r\n var element = e.target.parentNode;\r\n }\r\n\r\n obj.selectIndex(element);\r\n e.preventDefault();\r\n }\r\n\r\n var createList = function(data) {\r\n if (typeof(obj.options.onsearch) == 'function') {\r\n var ret = obj.options.onsearch(obj, data);\r\n if (ret) {\r\n data = ret;\r\n }\r\n }\r\n\r\n // Reset container\r\n container.innerHTML = '';\r\n // Print results\r\n if (! data.length) {\r\n // Show container\r\n el.style.display = '';\r\n } else {\r\n // Show container\r\n el.style.display = 'block';\r\n\r\n // Show items (only 10)\r\n var len = data.length < 11 ? data.length : 10;\r\n for (var i = 0; i < len; i++) {\r\n if (typeof(data[i]) == 'string') {\r\n var text = data[i];\r\n var value = data[i];\r\n } else {\r\n // Legacy\r\n var text = data[i].text;\r\n if (! text && data[i].name) {\r\n text = data[i].name;\r\n }\r\n var value = data[i].value;\r\n if (! value && data[i].id) {\r\n value = data[i].id;\r\n }\r\n }\r\n\r\n var div = document.createElement('div');\r\n div.setAttribute('data-value', value);\r\n div.setAttribute('data-text', text);\r\n div.className = 'jsearch_item';\r\n\r\n if (data[i].id) {\r\n div.setAttribute('id', data[i].id)\r\n }\r\n\r\n if (obj.options.forceSelect && i == 0) {\r\n div.classList.add('selected');\r\n }\r\n var img = document.createElement('img');\r\n if (data[i].image) {\r\n img.src = data[i].image;\r\n } else {\r\n img.style.display = 'none';\r\n }\r\n div.appendChild(img);\r\n\r\n var item = document.createElement('div');\r\n item.innerHTML = text;\r\n div.appendChild(item);\r\n\r\n // Append item to the container\r\n container.appendChild(div);\r\n }\r\n }\r\n }\r\n\r\n var execute = function(str) {\r\n if (str != obj.terms) {\r\n // New terms\r\n obj.terms = str;\r\n // New index\r\n if (obj.options.forceSelect) {\r\n index = 0;\r\n } else {\r\n index = null;\r\n }\r\n // Array or remote search\r\n if (Array.isArray(obj.options.data)) {\r\n var test = function(o) {\r\n if (typeof(o) == 'string') {\r\n if ((''+o).toLowerCase().search(str.toLowerCase()) >= 0) {\r\n return true;\r\n }\r\n } else {\r\n for (var key in o) {\r\n var value = o[key];\r\n if ((''+value).toLowerCase().search(str.toLowerCase()) >= 0) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n var results = obj.options.data.filter(function(item) {\r\n return test(item);\r\n });\r\n\r\n // Show items\r\n createList(results);\r\n } else {\r\n // Get remove results\r\n ajax({\r\n url: obj.options.data + str,\r\n method: 'GET',\r\n dataType: 'json',\r\n success: function(data) {\r\n // Show items\r\n createList(data);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n // Search timer\r\n var timer = null;\r\n\r\n // Search methods\r\n var obj = function(str) {\r\n if (timer) {\r\n clearTimeout(timer);\r\n }\r\n timer = setTimeout(function() {\r\n execute(str);\r\n }, 500);\r\n }\r\n if(options.forceSelect === null) {\r\n options.forceSelect = true;\r\n }\r\n obj.options = {\r\n data: options.data || null,\r\n input: options.input || null,\r\n searchByNode: options.searchByNode || null,\r\n onselect: options.onselect || null,\r\n forceSelect: options.forceSelect,\r\n onsearch: options.onsearch || null,\r\n onbeforesearch: options.onbeforesearch || null,\r\n };\r\n\r\n obj.selectIndex = function(item) {\r\n var id = item.getAttribute('id');\r\n var text = item.getAttribute('data-text');\r\n var value = item.getAttribute('data-value');\r\n var image = item.children[0].src || '';\r\n // Onselect\r\n if (typeof(obj.options.onselect) == 'function') {\r\n obj.options.onselect(obj, text, value, id, image);\r\n }\r\n // Close container\r\n obj.close();\r\n }\r\n\r\n obj.open = function() {\r\n el.style.display = 'block';\r\n }\r\n\r\n obj.close = function() {\r\n if (timer) {\r\n clearTimeout(timer);\r\n }\r\n // Current terms\r\n obj.terms = '';\r\n // Remove results\r\n container.innerHTML = '';\r\n // Hide\r\n el.style.display = '';\r\n }\r\n\r\n obj.isOpened = function() {\r\n return el.style.display ? true : false;\r\n }\r\n\r\n obj.keydown = function(e) {\r\n if (obj.isOpened()) {\r\n if (e.key == 'Enter') {\r\n // Enter\r\n if (index!==null && container.children[index]) {\r\n obj.selectIndex(container.children[index]);\r\n e.preventDefault();\r\n } else {\r\n obj.close();\r\n }\r\n } else if (e.key === 'ArrowUp') {\r\n // Up\r\n if (index!==null && container.children[0]) {\r\n container.children[index].classList.remove('selected');\r\n if(!obj.options.forceSelect && index === 0) {\r\n index = null;\r\n } else {\r\n index = Math.max(0, index-1);\r\n container.children[index].classList.add('selected');\r\n }\r\n }\r\n e.preventDefault();\r\n } else if (e.key === 'ArrowDown') {\r\n // Down\r\n if(index == null) {\r\n index = -1;\r\n } else {\r\n container.children[index].classList.remove('selected');\r\n }\r\n if (index < 9 && container.children[index+1]) {\r\n index++;\r\n }\r\n container.children[index].classList.add('selected');\r\n e.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n obj.keyup = function(e) {\r\n if (! obj.options.searchByNode && obj.options.input) {\r\n if (obj.options.input.tagName === 'DIV') {\r\n var terms = obj.options.input.innerText;\r\n } else {\r\n var terms = obj.options.input.value;\r\n }\r\n } else {\r\n // Current node\r\n var node = helpers.getNode();\r\n if (node) {\r\n var terms = node.innerText;\r\n }\r\n }\r\n\r\n if (typeof(obj.options.onbeforesearch) == 'function') {\r\n var ret = obj.options.onbeforesearch(obj, terms);\r\n if (ret) {\r\n terms = ret;\r\n } else {\r\n if (ret === false) {\r\n // Ignore event\r\n return;\r\n }\r\n }\r\n }\r\n\r\n obj(terms);\r\n }\r\n\r\n obj.blur = function(e) {\r\n obj.close();\r\n }\r\n\r\n // Add events\r\n if (obj.options.input) {\r\n obj.options.input.addEventListener(\"keyup\", obj.keyup);\r\n obj.options.input.addEventListener(\"keydown\", obj.keydown);\r\n obj.options.input.addEventListener(\"blur\", obj.blur);\r\n }\r\n\r\n // Append element\r\n var container = document.createElement('div');\r\n container.classList.add('jsearch_container');\r\n container.onmousedown = select;\r\n el.appendChild(container);\r\n\r\n el.classList.add('jsearch');\r\n el.search = obj;\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/slider.js\nfunction Slider(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n obj.currentImage = null;\r\n\r\n if (options) {\r\n obj.options = options;\r\n }\r\n\r\n // Focus\r\n el.setAttribute('tabindex', '900')\r\n\r\n // Items\r\n obj.options.items = [];\r\n\r\n if (! el.classList.contains('jslider')) {\r\n el.classList.add('jslider');\r\n el.classList.add('unselectable');\r\n\r\n if (obj.options.height) {\r\n el.style.minHeight = parseInt(obj.options.height) + 'px';\r\n }\r\n if (obj.options.width) {\r\n el.style.width = parseInt(obj.options.width) + 'px';\r\n }\r\n if (obj.options.grid) {\r\n el.classList.add('jslider-grid');\r\n var number = el.children.length;\r\n if (number > 4) {\r\n el.setAttribute('data-total', number - 4);\r\n }\r\n el.setAttribute('data-number', (number > 4 ? 4 : number));\r\n }\r\n\r\n // Add slider counter\r\n var counter = document.createElement('div');\r\n counter.classList.add('jslider-counter');\r\n\r\n // Move children inside\r\n if (el.children.length > 0) {\r\n // Keep children items\r\n for (var i = 0; i < el.children.length; i++) {\r\n obj.options.items.push(el.children[i]);\r\n \r\n // counter click event\r\n var item = document.createElement('div');\r\n item.onclick = function() {\r\n var index = Array.prototype.slice.call(counter.children).indexOf(this);\r\n obj.show(obj.currentImage = obj.options.items[index]);\r\n }\r\n counter.appendChild(item);\r\n }\r\n }\r\n // Add caption\r\n var caption = document.createElement('div');\r\n caption.className = 'jslider-caption';\r\n\r\n // Add close buttom\r\n var controls = document.createElement('div');\r\n var close = document.createElement('div');\r\n close.className = 'jslider-close';\r\n close.innerHTML = '';\r\n \r\n close.onclick = function() {\r\n obj.close();\r\n }\r\n controls.appendChild(caption);\r\n controls.appendChild(close);\r\n }\r\n\r\n obj.updateCounter = function(index) {\r\n for (var i = 0; i < counter.children.length; i ++) {\r\n if (counter.children[i].classList.contains('jslider-counter-focus')) {\r\n counter.children[i].classList.remove('jslider-counter-focus');\r\n break;\r\n }\r\n }\r\n counter.children[index].classList.add('jslider-counter-focus');\r\n }\r\n\r\n obj.show = function(target) {\r\n if (! target) {\r\n var target = el.children[0];\r\n }\r\n\r\n // Focus element\r\n el.classList.add('jslider-focus');\r\n el.classList.remove('jslider-grid');\r\n el.appendChild(controls);\r\n el.appendChild(counter);\r\n\r\n // Update counter\r\n var index = obj.options.items.indexOf(target);\r\n obj.updateCounter(index);\r\n\r\n // Remove display\r\n for (var i = 0; i < el.children.length; i++) {\r\n el.children[i].style.display = '';\r\n }\r\n target.style.display = 'block';\r\n\r\n // Is there any previous\r\n if (target.previousElementSibling) {\r\n el.classList.add('jslider-left');\r\n } else {\r\n el.classList.remove('jslider-left');\r\n }\r\n\r\n // Is there any next\r\n if (target.nextElementSibling && target.nextElementSibling.tagName == 'IMG') {\r\n el.classList.add('jslider-right');\r\n } else {\r\n el.classList.remove('jslider-right');\r\n }\r\n\r\n obj.currentImage = target;\r\n\r\n // Vertical image\r\n if (obj.currentImage.offsetHeight > obj.currentImage.offsetWidth) {\r\n obj.currentImage.classList.add('jslider-vertical');\r\n }\r\n\r\n controls.children[0].innerText = obj.currentImage.getAttribute('title');\r\n }\r\n\r\n obj.open = function() {\r\n obj.show();\r\n\r\n // Event\r\n if (typeof(obj.options.onopen) == 'function') {\r\n obj.options.onopen(el);\r\n }\r\n }\r\n\r\n obj.close = function() {\r\n // Remove control classes\r\n el.classList.remove('jslider-focus');\r\n el.classList.remove('jslider-left');\r\n el.classList.remove('jslider-right');\r\n // Show as a grid depending on the configuration\r\n if (obj.options.grid) {\r\n el.classList.add('jslider-grid');\r\n }\r\n // Remove display\r\n for (var i = 0; i < el.children.length; i++) {\r\n el.children[i].style.display = '';\r\n }\r\n // Remove controls from the component\r\n counter.remove();\r\n controls.remove();\r\n // Current image\r\n obj.currentImage = null;\r\n // Event\r\n if (typeof(obj.options.onclose) == 'function') {\r\n obj.options.onclose(el);\r\n }\r\n }\r\n\r\n obj.reset = function() {\r\n el.innerHTML = '';\r\n }\r\n\r\n obj.next = function() {\r\n var nextImage = obj.currentImage.nextElementSibling;\r\n if (nextImage && nextImage.tagName === 'IMG') {\r\n obj.show(obj.currentImage.nextElementSibling);\r\n }\r\n }\r\n \r\n obj.prev = function() {\r\n if (obj.currentImage.previousElementSibling) {\r\n obj.show(obj.currentImage.previousElementSibling);\r\n }\r\n }\r\n\r\n var mouseUp = function(e) {\r\n // Open slider\r\n if (e.target.tagName == 'IMG') {\r\n obj.show(e.target);\r\n } else if (! e.target.classList.contains('jslider-close') && ! (e.target.parentNode.classList.contains('jslider-counter') || e.target.classList.contains('jslider-counter'))){\r\n // Arrow controls\r\n var offsetX = e.offsetX || e.changedTouches[0].clientX;\r\n if (e.target.clientWidth - offsetX < 40) {\r\n // Show next image\r\n obj.next();\r\n } else if (offsetX < 40) {\r\n // Show previous image\r\n obj.prev();\r\n }\r\n }\r\n }\r\n\r\n if ('ontouchend' in document.documentElement === true) {\r\n el.addEventListener('touchend', mouseUp);\r\n } else {\r\n el.addEventListener('mouseup', mouseUp);\r\n }\r\n\r\n // Add global events\r\n el.addEventListener(\"swipeleft\", function(e) {\r\n obj.next();\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n el.addEventListener(\"swiperight\", function(e) {\r\n obj.prev();\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n el.addEventListener('keydown', function(e) {\r\n if (e.which == 27) {\r\n obj.close();\r\n }\r\n });\r\n\r\n el.slider = obj;\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/tags.js\n\r\n\r\n\r\n\r\nfunction Tags(el, options) {\r\n // Redefine configuration\r\n if (el.tags) {\r\n return el.tags.setOptions(options, true);\r\n }\r\n\r\n var obj = { type:'tags' };\r\n obj.options = {};\r\n\r\n // Limit\r\n var limit = function() {\r\n return obj.options.limit && el.children.length >= obj.options.limit ? true : false;\r\n }\r\n\r\n // Search helpers\r\n var search = null;\r\n var searchContainer = null;\r\n\r\n obj.setOptions = function(options, reset) {\r\n /**\r\n * @typedef {Object} defaults\r\n * @property {(string|Array)} value - Initial value of the compontent\r\n * @property {number} limit - Max number of tags inside the element\r\n * @property {string} search - The URL for suggestions\r\n * @property {string} placeholder - The default instruction text on the element\r\n * @property {validation} validation - Method to validate the tags\r\n * @property {requestCallback} onbeforechange - Method to be execute before any changes on the element\r\n * @property {requestCallback} onchange - Method to be execute after any changes on the element\r\n * @property {requestCallback} onfocus - Method to be execute when on focus\r\n * @property {requestCallback} onblur - Method to be execute when on blur\r\n * @property {requestCallback} onload - Method to be execute when the element is loaded\r\n */\r\n var defaults = {\r\n value: '',\r\n limit: null,\r\n search: null,\r\n placeholder: null,\r\n validation: null,\r\n onbeforepaste: null,\r\n onbeforechange: null,\r\n onremoveitem: null,\r\n onlimit: null,\r\n onchange: null,\r\n onfocus: null,\r\n onblur: null,\r\n onload: null,\r\n }\r\n\r\n // Loop through though the default configuration\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n if (typeof(obj.options[property]) == 'undefined' || reset === true) {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n }\r\n\r\n // Placeholder\r\n if (obj.options.placeholder) {\r\n el.setAttribute('data-placeholder', obj.options.placeholder);\r\n } else {\r\n el.removeAttribute('data-placeholder');\r\n }\r\n el.placeholder = obj.options.placeholder;\r\n\r\n // Update value\r\n obj.setValue(obj.options.value);\r\n\r\n // Validate items\r\n filter();\r\n\r\n // Create search box\r\n if (obj.options.search) {\r\n if (! searchContainer) {\r\n searchContainer = document.createElement('div');\r\n el.parentNode.insertBefore(searchContainer, el.nextSibling);\r\n\r\n // Create container\r\n search = Search(searchContainer, {\r\n data: obj.options.search,\r\n onselect: function(a,b,c) {\r\n obj.selectIndex(b,c);\r\n }\r\n });\r\n }\r\n } else {\r\n if (searchContainer) {\r\n search = null;\r\n searchContainer.remove();\r\n searchContainer = null;\r\n }\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n /**\r\n * Add a new tag to the element\r\n * @param {(?string|Array)} value - The value of the new element\r\n */\r\n obj.add = function(value, focus) {\r\n if (typeof(obj.options.onbeforechange) == 'function') {\r\n var ret = obj.options.onbeforechange(el, obj, obj.options.value, value);\r\n if (ret === false) {\r\n return false;\r\n } else { \r\n if (ret != null) {\r\n value = ret;\r\n }\r\n }\r\n }\r\n\r\n // Make sure search is closed\r\n if (search) {\r\n search.close();\r\n }\r\n\r\n if (limit()) {\r\n if (typeof(obj.options.onlimit) == 'function') {\r\n obj.options.onlimit(obj, obj.options.limit);\r\n } else {\r\n alert(dictionary.translate('You reach the limit number of entries') + ' ' + obj.options.limit);\r\n }\r\n } else {\r\n // Get node\r\n var node = helpers.getNode();\r\n\r\n if (node && node.parentNode && node.parentNode.classList.contains('jtags') &&\r\n node.nextSibling && (! (node.nextSibling.innerText && node.nextSibling.innerText.trim()))) {\r\n div = node.nextSibling;\r\n } else {\r\n // Remove not used last item\r\n if (el.lastChild) {\r\n if (! el.lastChild.innerText.trim()) {\r\n el.removeChild(el.lastChild);\r\n }\r\n }\r\n\r\n // Mix argument string or array\r\n if (! value || typeof(value) == 'string') {\r\n var div = createElement(value, value, node);\r\n } else {\r\n for (var i = 0; i <= value.length; i++) {\r\n if (! limit()) {\r\n if (! value[i] || typeof(value[i]) == 'string') {\r\n var t = value[i] || '';\r\n var v = null;\r\n } else {\r\n var t = value[i].text;\r\n var v = value[i].value;\r\n }\r\n\r\n // Add element\r\n var div = createElement(t, v);\r\n }\r\n }\r\n }\r\n\r\n // Change\r\n change();\r\n }\r\n\r\n // Place caret\r\n if (focus) {\r\n setFocus(div);\r\n }\r\n }\r\n }\r\n\r\n obj.setLimit = function(limit) {\r\n obj.options.limit = limit;\r\n var n = el.children.length - limit;\r\n while (el.children.length > limit) {\r\n el.removeChild(el.lastChild);\r\n }\r\n }\r\n\r\n // Remove a item node\r\n obj.remove = function(node) {\r\n // Remove node\r\n node.parentNode.removeChild(node);\r\n // Make sure element is not blank\r\n if (! el.children.length) {\r\n obj.add('', true);\r\n } else {\r\n change();\r\n }\r\n\r\n if (typeof(obj.options.onremoveitem) == 'function') {\r\n obj.options.onremoveitem(el, obj, node);\r\n }\r\n }\r\n\r\n /**\r\n * Get all tags in the element\r\n * @return {Array} data - All tags as an array\r\n */\r\n obj.getData = function() {\r\n var data = [];\r\n for (var i = 0; i < el.children.length; i++) {\r\n // Get value\r\n var text = el.children[i].innerText.replace(\"\\n\", \"\");\r\n // Get id\r\n var value = el.children[i].getAttribute('data-value');\r\n if (! value) {\r\n value = text;\r\n }\r\n // Item\r\n if (text || value) {\r\n data.push({ text: text, value: value });\r\n }\r\n }\r\n return data;\r\n }\r\n\r\n /**\r\n * Get the value of one tag. Null for all tags\r\n * @param {?number} index - Tag index number. Null for all tags.\r\n * @return {string} value - All tags separated by comma\r\n */\r\n obj.getValue = function(index) {\r\n var value = null;\r\n\r\n if (index != null) {\r\n // Get one individual value\r\n value = el.children[index].getAttribute('data-value');\r\n if (! value) {\r\n value = el.children[index].innerText.replace(\"\\n\", \"\");\r\n }\r\n } else {\r\n // Get all\r\n var data = [];\r\n for (var i = 0; i < el.children.length; i++) {\r\n value = el.children[i].innerText.replace(\"\\n\", \"\");\r\n if (value) {\r\n data.push(obj.getValue(i));\r\n }\r\n }\r\n value = data.join(',');\r\n }\r\n\r\n return value;\r\n }\r\n\r\n /**\r\n * Set the value of the element based on a string separeted by (,|;|\\r\\n)\r\n * @param {mixed} value - A string or array object with values\r\n */\r\n obj.setValue = function(mixed) {\r\n if (! mixed) {\r\n obj.reset();\r\n } else {\r\n if (el.value != mixed) {\r\n if (Array.isArray(mixed)) {\r\n obj.add(mixed);\r\n } else {\r\n // Remove whitespaces\r\n var text = (''+mixed).trim();\r\n // Tags\r\n var data = extractTags(text);\r\n // Reset\r\n el.innerHTML = '';\r\n // Add tags to the element\r\n obj.add(data);\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Reset the data from the element\r\n */\r\n obj.reset = function() {\r\n // Empty class\r\n el.classList.add('jtags-empty');\r\n // Empty element\r\n el.innerHTML = '';\r\n // Execute changes\r\n change();\r\n }\r\n\r\n /**\r\n * Verify if all tags in the element are valid\r\n * @return {boolean}\r\n */\r\n obj.isValid = function() {\r\n var test = 0;\r\n for (var i = 0; i < el.children.length; i++) {\r\n if (el.children[i].classList.contains('jtags_error')) {\r\n test++;\r\n }\r\n }\r\n return test == 0 ? true : false;\r\n }\r\n\r\n /**\r\n * Add one element from the suggestions to the element\r\n * @param {object} item - Node element in the suggestions container\r\n */ \r\n obj.selectIndex = function(text, value) {\r\n var node = helpers.getNode();\r\n if (node) {\r\n // Append text to the caret\r\n node.innerText = text;\r\n // Set node id\r\n if (value) {\r\n node.setAttribute('data-value', value);\r\n }\r\n // Remove any error\r\n node.classList.remove('jtags_error');\r\n if (! limit()) {\r\n // Add new item\r\n obj.add('', true);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Search for suggestions\r\n * @param {object} node - Target node for any suggestions\r\n */\r\n obj.search = function(node) {\r\n // Search for\r\n var terms = node.innerText;\r\n }\r\n\r\n // Destroy tags element\r\n obj.destroy = function() {\r\n // Bind events\r\n el.removeEventListener('mouseup', tagsMouseUp);\r\n el.removeEventListener('keydown', tagsKeyDown);\r\n el.removeEventListener('keyup', tagsKeyUp);\r\n el.removeEventListener('paste', tagsPaste);\r\n el.removeEventListener('focus', tagsFocus);\r\n el.removeEventListener('blur', tagsBlur);\r\n\r\n // Remove element\r\n el.parentNode.removeChild(el);\r\n }\r\n\r\n var setFocus = function(node) {\r\n if (el.children.length) {\r\n var range = document.createRange();\r\n var sel = window.getSelection();\r\n if (! node) {\r\n var node = el.childNodes[el.childNodes.length-1];\r\n }\r\n range.setStart(node, node.length)\r\n range.collapse(true)\r\n sel.removeAllRanges()\r\n sel.addRange(range)\r\n el.scrollLeft = el.scrollWidth;\r\n }\r\n }\r\n\r\n var createElement = function(label, value, node) {\r\n var div = document.createElement('div');\r\n div.textContent = label ? label : '';\r\n if (value) {\r\n div.setAttribute('data-value', value);\r\n }\r\n\r\n if (node && node.parentNode.classList.contains('jtags')) {\r\n el.insertBefore(div, node.nextSibling);\r\n } else {\r\n el.appendChild(div);\r\n }\r\n\r\n return div;\r\n }\r\n\r\n var change = function() {\r\n // Value\r\n var value = obj.getValue();\r\n\r\n if (value != obj.options.value) {\r\n obj.options.value = value;\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, obj, obj.options.value);\r\n }\r\n\r\n // Lemonade JS\r\n if (el.value != obj.options.value) {\r\n el.value = obj.options.value;\r\n if (typeof(el.oninput) == 'function') {\r\n el.oninput({\r\n type: 'input',\r\n target: el,\r\n value: el.value\r\n });\r\n }\r\n }\r\n }\r\n\r\n filter();\r\n }\r\n\r\n /**\r\n * Filter tags\r\n */\r\n var filter = function() {\r\n for (var i = 0; i < el.children.length; i++) {\r\n if (el.children[i].tagName === 'DIV') {\r\n // Create label design\r\n if (!obj.getValue(i)) {\r\n el.children[i].classList.remove('jtags_label');\r\n } else {\r\n el.children[i].classList.add('jtags_label');\r\n\r\n // Validation in place\r\n if (typeof (obj.options.validation) == 'function') {\r\n if (obj.getValue(i)) {\r\n if (!obj.options.validation(el.children[i], el.children[i].innerText, el.children[i].getAttribute('data-value'))) {\r\n el.children[i].classList.add('jtags_error');\r\n } else {\r\n el.children[i].classList.remove('jtags_error');\r\n }\r\n } else {\r\n el.children[i].classList.remove('jtags_error');\r\n }\r\n } else {\r\n el.children[i].classList.remove('jtags_error');\r\n }\r\n }\r\n }\r\n }\r\n\r\n isEmpty();\r\n }\r\n\r\n var isEmpty = function() {\r\n // Can't be empty\r\n if (! el.innerText.trim()) {\r\n if (! el.children.length || el.children[0].tagName === 'BR') {\r\n el.innerHTML = '';\r\n setFocus(createElement());\r\n }\r\n } else {\r\n el.classList.remove('jtags-empty');\r\n }\r\n }\r\n\r\n /**\r\n * Extract tags from a string\r\n * @param {string} text - Raw string\r\n * @return {Array} data - Array with extracted tags\r\n */\r\n var extractTags = function(text) {\r\n /** @type {Array} */\r\n var data = [];\r\n\r\n /** @type {string} */\r\n var word = '';\r\n\r\n // Remove whitespaces\r\n text = text.trim();\r\n\r\n if (text) {\r\n for (var i = 0; i < text.length; i++) {\r\n if (text[i] == ',' || text[i] == ';' || text[i] == '\\n') {\r\n if (word) {\r\n data.push(word.trim());\r\n word = '';\r\n }\r\n } else {\r\n word += text[i];\r\n }\r\n }\r\n\r\n if (word) {\r\n data.push(word);\r\n }\r\n }\r\n\r\n return data;\r\n }\r\n\r\n /** @type {number} */\r\n var anchorOffset = 0;\r\n\r\n /**\r\n * Processing event keydown on the element\r\n * @param e {object}\r\n */\r\n var tagsKeyDown = function(e) {\r\n // Anchoroffset\r\n anchorOffset = window.getSelection().anchorOffset;\r\n\r\n // Verify if is empty\r\n isEmpty();\r\n\r\n // Comma\r\n if (e.key === 'Tab' || e.key === ';' || e.key === ',') {\r\n var n = window.getSelection().anchorOffset;\r\n if (n > 1) {\r\n if (limit()) {\r\n if (typeof(obj.options.onlimit) == 'function') {\r\n obj.options.onlimit(obj, obj.options.limit)\r\n }\r\n } else {\r\n obj.add('', true);\r\n }\r\n }\r\n e.preventDefault();\r\n } else if (e.key == 'Enter') {\r\n if (! search || ! search.isOpened()) {\r\n var n = window.getSelection().anchorOffset;\r\n if (n > 1) {\r\n if (! limit()) {\r\n obj.add('', true);\r\n }\r\n }\r\n e.preventDefault();\r\n }\r\n } else if (e.key == 'Backspace') {\r\n // Back space - do not let last item to be removed\r\n if (el.children.length == 1 && window.getSelection().anchorOffset < 1) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n // Search events\r\n if (search) {\r\n search.keydown(e);\r\n }\r\n\r\n // Verify if is empty\r\n isEmpty();\r\n }\r\n\r\n /**\r\n * Processing event keyup on the element\r\n * @param e {object}\r\n */\r\n var tagsKeyUp = function(e) {\r\n if (e.which == 39) {\r\n // Right arrow\r\n var n = window.getSelection().anchorOffset;\r\n if (n > 1 && n == anchorOffset) {\r\n obj.add('', true);\r\n }\r\n } else if (e.which == 13 || e.which == 38 || e.which == 40) {\r\n e.preventDefault();\r\n } else {\r\n if (search) {\r\n search.keyup(e);\r\n }\r\n }\r\n\r\n filter();\r\n }\r\n\r\n /**\r\n * Processing event paste on the element\r\n * @param e {object}\r\n */\r\n var tagsPaste = function(e) {\r\n if (e.clipboardData || e.originalEvent.clipboardData) {\r\n var text = (e.originalEvent || e).clipboardData.getData('text/plain');\r\n } else if (window.clipboardData) {\r\n var text = window.clipboardData.getData('Text');\r\n }\r\n\r\n var data = extractTags(text);\r\n\r\n if (typeof(obj.options.onbeforepaste) == 'function') {\r\n var ret = obj.options.onbeforepaste(el, obj, data);\r\n if (ret === false) {\r\n e.preventDefault();\r\n return false;\r\n } else {\r\n if (ret) {\r\n data = ret;\r\n }\r\n }\r\n }\r\n\r\n if (data.length > 1) {\r\n obj.add(data, true);\r\n e.preventDefault();\r\n } else if (data[0]) {\r\n document.execCommand('insertText', false, data[0])\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n /**\r\n * Processing event mouseup on the element\r\n * @param e {object}\r\n */\r\n var tagsMouseUp = function(e) {\r\n if (e.target.parentNode && e.target.parentNode.classList.contains('jtags')) {\r\n if (e.target.classList.contains('jtags_label') || e.target.classList.contains('jtags_error')) {\r\n var rect = e.target.getBoundingClientRect();\r\n if (rect.width - (e.clientX - rect.left) < 16) {\r\n obj.remove(e.target);\r\n }\r\n }\r\n }\r\n\r\n // Set focus in the last item\r\n if (e.target == el) {\r\n setFocus();\r\n }\r\n }\r\n\r\n var tagsFocus = function() {\r\n if (! el.classList.contains('jtags-focus')) {\r\n if (! el.children.length || obj.getValue(el.children.length - 1)) {\r\n if (! limit()) {\r\n createElement('');\r\n }\r\n }\r\n\r\n if (typeof(obj.options.onfocus) == 'function') {\r\n obj.options.onfocus(el, obj, obj.getValue());\r\n }\r\n\r\n el.classList.add('jtags-focus');\r\n }\r\n }\r\n\r\n var tagsBlur = function() {\r\n if (el.classList.contains('jtags-focus')) {\r\n if (search) {\r\n search.close();\r\n }\r\n\r\n for (var i = 0; i < el.children.length - 1; i++) {\r\n // Create label design\r\n if (! obj.getValue(i)) {\r\n el.removeChild(el.children[i]);\r\n }\r\n }\r\n\r\n change();\r\n\r\n el.classList.remove('jtags-focus');\r\n\r\n if (typeof(obj.options.onblur) == 'function') {\r\n obj.options.onblur(el, obj, obj.getValue());\r\n }\r\n }\r\n }\r\n\r\n var init = function() {\r\n // Bind events\r\n if ('touchend' in document.documentElement === true) {\r\n el.addEventListener('touchend', tagsMouseUp);\r\n } else {\r\n el.addEventListener('mouseup', tagsMouseUp);\r\n }\r\n\r\n el.addEventListener('keydown', tagsKeyDown);\r\n el.addEventListener('keyup', tagsKeyUp);\r\n el.addEventListener('paste', tagsPaste);\r\n el.addEventListener('focus', tagsFocus);\r\n el.addEventListener('blur', tagsBlur);\r\n\r\n // Editable\r\n el.setAttribute('contenteditable', true);\r\n\r\n // Prepare container\r\n el.classList.add('jtags');\r\n\r\n // Initial options\r\n obj.setOptions(options);\r\n\r\n if (typeof(obj.options.onload) == 'function') {\r\n obj.options.onload(el, obj);\r\n }\r\n\r\n // Change methods\r\n el.change = obj.setValue;\r\n\r\n // Global generic value handler\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return obj.getValue();\r\n } else {\r\n obj.setValue(val);\r\n }\r\n }\r\n\r\n el.tags = obj;\r\n }\r\n\r\n init();\r\n\r\n return obj;\r\n}\n;// CONCATENATED MODULE: ./src/plugins/upload.js\n\r\n\r\n\r\n\r\n\r\nfunction Upload(el, options) {\r\n var obj = {};\r\n obj.options = {};\r\n\r\n // Default configuration\r\n var defaults = {\r\n type: 'image',\r\n extension: '*',\r\n input: false,\r\n minWidth: false,\r\n maxWidth: null,\r\n maxHeight: null,\r\n maxJpegSizeBytes: null, // For example, 350Kb would be 350000\r\n onchange: null,\r\n multiple: false,\r\n remoteParser: null,\r\n };\r\n\r\n // Loop through our object\r\n for (var property in defaults) {\r\n if (options && options.hasOwnProperty(property)) {\r\n obj.options[property] = options[property];\r\n } else {\r\n obj.options[property] = defaults[property];\r\n }\r\n }\r\n\r\n // Multiple\r\n if (obj.options.multiple == true) {\r\n el.setAttribute('data-multiple', true);\r\n }\r\n\r\n // Container\r\n el.content = [];\r\n\r\n // Upload icon\r\n el.classList.add('jupload');\r\n\r\n if (obj.options.input == true) {\r\n el.classList.add('input');\r\n }\r\n\r\n obj.add = function(data) {\r\n // Reset container for single files\r\n if (obj.options.multiple == false) {\r\n el.content = [];\r\n el.innerText = '';\r\n }\r\n\r\n // Append to the element\r\n if (obj.options.type == 'image') {\r\n var img = document.createElement('img');\r\n img.setAttribute('src', data.file);\r\n img.setAttribute('tabindex', -1);\r\n if (! el.getAttribute('name')) {\r\n img.className = 'jfile';\r\n img.content = data;\r\n }\r\n el.appendChild(img);\r\n } else {\r\n if (data.name) {\r\n var name = data.name;\r\n } else {\r\n var name = data.file;\r\n }\r\n var div = document.createElement('div');\r\n div.innerText = name || obj.options.type;\r\n div.classList.add('jupload-item');\r\n div.setAttribute('tabindex', -1);\r\n el.appendChild(div);\r\n }\r\n\r\n if (data.content) {\r\n data.file = helpers.guid();\r\n }\r\n\r\n // Push content\r\n el.content.push(data);\r\n\r\n // Onchange\r\n if (typeof(obj.options.onchange) == 'function') {\r\n obj.options.onchange(el, data);\r\n }\r\n }\r\n\r\n obj.addFromFile = function(file) {\r\n var type = file.type.split('/');\r\n if (type[0] == obj.options.type) {\r\n var readFile = new FileReader();\r\n readFile.addEventListener(\"load\", function (v) {\r\n var data = {\r\n file: v.srcElement.result,\r\n extension: file.name.substr(file.name.lastIndexOf('.') + 1),\r\n name: file.name,\r\n size: file.size,\r\n lastmodified: file.lastModified,\r\n content: v.srcElement.result,\r\n }\r\n\r\n obj.add(data);\r\n });\r\n\r\n readFile.readAsDataURL(file);\r\n } else {\r\n alert(dictionary.translate('This extension is not allowed'));\r\n }\r\n }\r\n\r\n obj.addFromUrl = function(src) {\r\n if (src.substr(0,4) != 'data' && ! obj.options.remoteParser) {\r\n console.error('remoteParser not defined in your initialization');\r\n } else {\r\n // This is to process cross domain images\r\n if (src.substr(0,4) == 'data') {\r\n var extension = src.split(';')\r\n extension = extension[0].split('/');\r\n var type = extension[0].replace('data:','');\r\n if (type == obj.options.type) {\r\n var data = {\r\n file: src,\r\n name: '',\r\n extension: extension[1],\r\n content: src,\r\n }\r\n obj.add(data);\r\n } else {\r\n alert(obj.options.text.extensionNotAllowed);\r\n }\r\n } else {\r\n var extension = src.substr(src.lastIndexOf('.') + 1);\r\n // Work for cross browsers\r\n src = obj.options.remoteParser + src;\r\n // Get remove content\r\n ajax({\r\n url: src,\r\n type: 'GET',\r\n dataType: 'blob',\r\n success: function(data) {\r\n //add(extension[0].replace('data:',''), data);\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n var getDataURL = function(canvas, type) {\r\n var compression = 0.92;\r\n var lastContentLength = null;\r\n var content = canvas.toDataURL(type, compression);\r\n while (obj.options.maxJpegSizeBytes && type === 'image/jpeg' &&\r\n content.length > obj.options.maxJpegSizeBytes && content.length !== lastContentLength) {\r\n // Apply the compression\r\n compression *= 0.9;\r\n lastContentLength = content.length;\r\n content = canvas.toDataURL(type, compression);\r\n }\r\n return content;\r\n }\r\n\r\n var mime = obj.options.type + '/' + obj.options.extension;\r\n var input = document.createElement('input');\r\n input.type = 'file';\r\n input.setAttribute('accept', mime);\r\n input.onchange = function() {\r\n for (var i = 0; i < this.files.length; i++) {\r\n obj.addFromFile(this.files[i]);\r\n }\r\n }\r\n\r\n // Allow multiple files\r\n if (obj.options.multiple == true) {\r\n input.setAttribute('multiple', true);\r\n }\r\n\r\n var current = null;\r\n\r\n el.addEventListener(\"click\", function(e) {\r\n current = null;\r\n if (! el.children.length || e.target === el) {\r\n helpers.click(input);\r\n } else {\r\n if (e.target.parentNode == el) {\r\n current = e.target;\r\n }\r\n }\r\n });\r\n\r\n el.addEventListener(\"dblclick\", function(e) {\r\n helpers.click(input);\r\n });\r\n\r\n el.addEventListener('dragenter', function(e) {\r\n el.style.border = '1px dashed #000';\r\n });\r\n\r\n el.addEventListener('dragleave', function(e) {\r\n el.style.border = '1px solid #eee';\r\n });\r\n\r\n el.addEventListener('dragstop', function(e) {\r\n el.style.border = '1px solid #eee';\r\n });\r\n\r\n el.addEventListener('dragover', function(e) {\r\n e.preventDefault();\r\n });\r\n\r\n el.addEventListener('keydown', function(e) {\r\n if (current && e.which == 46) {\r\n var index = Array.prototype.indexOf.call(el.children, current);\r\n if (index >= 0) {\r\n el.content.splice(index, 1);\r\n current.remove();\r\n current = null;\r\n }\r\n }\r\n });\r\n\r\n el.addEventListener('drop', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n var html = (e.originalEvent || e).dataTransfer.getData('text/html');\r\n var file = (e.originalEvent || e).dataTransfer.files;\r\n\r\n if (file.length) {\r\n for (var i = 0; i < e.dataTransfer.files.length; i++) {\r\n obj.addFromFile(e.dataTransfer.files[i]);\r\n }\r\n } else if (html) {\r\n if (obj.options.multiple == false) {\r\n el.innerText = '';\r\n }\r\n\r\n // Create temp element\r\n let img = [];\r\n utils_filter(html, img);\r\n if (img.length) {\r\n for (var i = 0; i < img.length; i++) {\r\n obj.addFromUrl(img[i]);\r\n }\r\n }\r\n }\r\n\r\n el.style.border = '1px solid #eee';\r\n\r\n return false;\r\n });\r\n\r\n el.val = function(val) {\r\n if (val === undefined) {\r\n return el.content && el.content.length ? el.content : null;\r\n } else {\r\n // Reset\r\n el.innerText = '';\r\n el.content = [];\r\n\r\n if (val) {\r\n if (Array.isArray(val)) {\r\n for (var i = 0; i < val.length; i++) {\r\n if (typeof(val[i]) == 'string') {\r\n obj.add({ file: val[i] });\r\n } else {\r\n obj.add(val[i]);\r\n }\r\n }\r\n } else if (typeof(val) == 'string') {\r\n obj.add({ file: val });\r\n }\r\n }\r\n }\r\n }\r\n\r\n el.upload = el.image = obj;\r\n\r\n return obj;\r\n}\r\n\n// EXTERNAL MODULE: ./packages/sha512/sha512.js\nvar sha512 = __webpack_require__(195);\nvar sha512_default = /*#__PURE__*/__webpack_require__.n(sha512);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/calendar/dist/index.js\nvar calendar_dist = __webpack_require__(763);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/color/dist/index.js\nvar color_dist = __webpack_require__(541);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/contextmenu/dist/index.js\nvar contextmenu_dist = __webpack_require__(238);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/dropdown/dist/index.js\nvar dropdown_dist = __webpack_require__(692);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/modal/dist/index.js\nvar modal_dist = __webpack_require__(72);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/switch/dist/index.js\nvar switch_dist = __webpack_require__(539);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/tabs/dist/index.js\nvar tabs_dist = __webpack_require__(560);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/topmenu/dist/index.js\nvar topmenu_dist = __webpack_require__(330);\n// EXTERNAL MODULE: ./node_modules/@lemonadejs/rating/dist/index.js\nvar rating_dist = __webpack_require__(867);\n;// CONCATENATED MODULE: ./src/jsuites.js\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nvar jSuites = {\r\n // Helpers\r\n ...dictionary,\r\n ...helpers,\r\n /** Current version */\r\n version: '6.4.0',\r\n /** Bind new extensions to Jsuites */\r\n setExtensions: function(o) {\r\n if (typeof(o) == 'object') {\r\n var k = Object.keys(o);\r\n for (var i = 0; i < k.length; i++) {\r\n jSuites[k[i]] = o[k[i]];\r\n }\r\n }\r\n },\r\n tracking: tracking,\r\n path: Path,\r\n sorting: Sorting,\r\n lazyLoading: LazyLoading,\r\n // Plugins\r\n ajax: ajax,\r\n animation: animation,\r\n calendar: calendar,\r\n color: Color,\r\n contextmenu: contextmenu,\r\n dropdown: dropdown,\r\n editor: editor,\r\n floating: floating,\r\n form: plugins_form,\r\n mask: mask,\r\n modal: modal,\r\n notification: notification,\r\n palette: palette,\r\n picker: Picker,\r\n progressbar: Progressbar,\r\n rating: Rating,\r\n search: Search,\r\n slider: Slider,\r\n tabs: Tabs,\r\n tags: Tags,\r\n toolbar: Toolbar,\r\n upload: Upload,\r\n validations: validations,\r\n}\r\n\r\n// Legacy\r\njSuites.image = Upload;\r\njSuites.image.create = function(data) {\r\n var img = document.createElement('img');\r\n img.setAttribute('src', data.file);\r\n img.className = 'jfile';\r\n img.setAttribute('tabindex', -1);\r\n img.content = data;\r\n\r\n return img;\r\n}\r\n\r\njSuites.tracker = plugins_form;\r\njSuites.loading = animation.loading;\r\njSuites.sha512 = (sha512_default());\r\n\r\n\r\n/** Core events */\r\nconst Events = function() {\r\n\r\n if (typeof(window['jSuitesStateControl']) === 'undefined') {\r\n window['jSuitesStateControl'] = [];\r\n } else {\r\n // Do nothing\r\n return;\r\n }\r\n\r\n const find = function(DOMElement, component) {\r\n if (DOMElement[component.type] && DOMElement[component.type] == component) {\r\n return true;\r\n }\r\n if (DOMElement.component && DOMElement.component == component) {\r\n return true;\r\n }\r\n if (DOMElement.parentNode) {\r\n return find(DOMElement.parentNode, component);\r\n }\r\n return false;\r\n }\r\n\r\n const isOpened = function(e) {\r\n let state = window['jSuitesStateControl'];\r\n if (state && state.length > 0) {\r\n for (let i = 0; i < state.length; i++) {\r\n if (state[i] && ! find(e, state[i])) {\r\n state[i].close();\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Width of the border\r\n let cornerSize = 15;\r\n\r\n // Current element\r\n let element = null;\r\n\r\n // Controllers\r\n let editorAction = false;\r\n\r\n // Event state\r\n let state = {\r\n x: null,\r\n y: null,\r\n }\r\n\r\n // Tooltip element\r\n let tooltip = document.createElement('div')\r\n tooltip.classList.add('jtooltip');\r\n\r\n const isWebcomponent = function(e) {\r\n return e && (e.shadowRoot || (e.tagName && e.tagName.includes('-')));\r\n }\r\n\r\n const getElement = function(e) {\r\n let d;\r\n let element;\r\n // Which component I am clicking\r\n let path = e.path || (e.composedPath && e.composedPath());\r\n\r\n // If path available get the first element in the chain\r\n if (path) {\r\n element = path[0];\r\n // Adjustment sales force\r\n if (element && isWebcomponent(element) && ! element.shadowRoot && e.toElement) {\r\n element = e.toElement;\r\n }\r\n } else {\r\n // Try to guess using the coordinates\r\n if (e.target && isWebcomponent(e.target)) {\r\n d = e.target.shadowRoot;\r\n } else {\r\n d = document;\r\n }\r\n // Get the first target element\r\n element = d.elementFromPoint(x, y);\r\n }\r\n return element;\r\n }\r\n\r\n // Events\r\n const mouseDown = function(e) {\r\n // Verify current components tracking\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n let element = getElement(e);\r\n // Editable\r\n let editable = element && element.tagName === 'DIV' && element.getAttribute('contentEditable');\r\n // Check if this is the floating\r\n let item = jSuites.findElement(element, 'jpanel');\r\n // Jfloating found\r\n if (item && ! item.classList.contains(\"readonly\") && ! editable) {\r\n // Keep the tracking information\r\n let rect = item.getBoundingClientRect();\r\n let angle = 0;\r\n if (item.style.rotate) {\r\n // Extract the angle value from the match and convert it to a number\r\n angle = parseFloat(item.style.rotate);\r\n }\r\n let action = 'move';\r\n if (element.getAttribute('data-action')) {\r\n action = element.getAttribute('data-action');\r\n } else {\r\n if (item.style.cursor) {\r\n action = 'resize';\r\n } else {\r\n item.style.cursor = 'move';\r\n }\r\n }\r\n\r\n // Action\r\n editorAction = {\r\n action: action,\r\n a: angle,\r\n e: item,\r\n x: x,\r\n y: y,\r\n l: rect.left,\r\n t: rect.top,\r\n b: rect.bottom,\r\n r: rect.right,\r\n w: rect.width,\r\n h: rect.height,\r\n d: item.style.cursor,\r\n actioned: false,\r\n }\r\n // Make sure width and height styling is OK\r\n if (! item.style.width) {\r\n item.style.width = rect.width + 'px';\r\n }\r\n if (! item.style.height) {\r\n item.style.height = rect.height + 'px';\r\n }\r\n } else {\r\n // No floating action found\r\n editorAction = false;\r\n }\r\n\r\n isOpened(element);\r\n\r\n focus(e);\r\n }\r\n\r\n const calculateAngle = function(x1, y1, x2, y2, x3, y3) {\r\n // Calculate dx and dy for the first line\r\n const dx1 = x2 - x1;\r\n const dy1 = y2 - y1;\r\n // Calculate dx and dy for the second line\r\n const dx2 = x3 - x1;\r\n const dy2 = y3 - y1;\r\n // Calculate the angle for the first line\r\n let angle1 = Math.atan2(dy1, dx1);\r\n // Calculate the angle for the second line\r\n let angle2 = Math.atan2(dy2, dx2);\r\n // Calculate the angle difference in radians\r\n let angleDifference = angle2 - angle1;\r\n // Convert the angle difference to degrees\r\n angleDifference = angleDifference * (180 / Math.PI);\r\n // Normalize the angle difference to be within [0, 360) degrees\r\n if (angleDifference < 0) {\r\n angleDifference += 360;\r\n }\r\n return angleDifference;\r\n }\r\n\r\n const mouseUp = function(e) {\r\n if (editorAction && editorAction.e) {\r\n if (typeof(editorAction.e.refresh) == 'function' && state.actioned) {\r\n editorAction.e.refresh();\r\n }\r\n editorAction.e.style.cursor = '';\r\n }\r\n\r\n // Reset\r\n state = {\r\n x: null,\r\n y: null,\r\n }\r\n\r\n editorAction = false;\r\n }\r\n\r\n const mouseMove = function(e) {\r\n if (editorAction) {\r\n let x = e.clientX || e.pageX;\r\n let y = e.clientY || e.pageY;\r\n\r\n if (state.x == null && state.y == null) {\r\n state.x = x;\r\n state.y = y;\r\n }\r\n\r\n // Action on going\r\n if (editorAction.action === 'move') {\r\n var dx = x - state.x;\r\n var dy = y - state.y;\r\n var top = editorAction.e.offsetTop + dy;\r\n var left = editorAction.e.offsetLeft + dx;\r\n\r\n // Update position\r\n editorAction.e.style.top = top + 'px';\r\n editorAction.e.style.left = left + 'px';\r\n\r\n // Update element\r\n if (typeof (editorAction.e.refresh) == 'function') {\r\n state.actioned = true;\r\n editorAction.e.refresh('position', top, left);\r\n }\r\n } else if (editorAction.action === 'rotate') {\r\n let ox = editorAction.l+editorAction.w/2;\r\n let oy = editorAction.t+editorAction.h/2;\r\n let angle = calculateAngle(ox, oy, editorAction.x, editorAction.y, x, y);\r\n angle = angle + editorAction.a % 360;\r\n angle = Math.round(angle / 2) * 2;\r\n editorAction.e.style.rotate = `${angle}deg`;\r\n // Update element\r\n if (typeof (editorAction.e.refresh) == 'function') {\r\n state.actioned = true;\r\n editorAction.e.refresh('rotate', angle);\r\n }\r\n } else if (editorAction.action === 'resize') {\r\n let top = null;\r\n let left = null;\r\n let width = null;\r\n let height = null;\r\n\r\n if (editorAction.d == 'e-resize' || editorAction.d == 'ne-resize' || editorAction.d == 'se-resize') {\r\n width = editorAction.e.offsetWidth + (x - state.x);\r\n\r\n if (e.shiftKey) {\r\n height = editorAction.e.offsetHeight + (x - state.x) * (editorAction.e.offsetHeight / editorAction.e.offsetWidth);\r\n }\r\n } else if (editorAction.d === 'w-resize' || editorAction.d == 'nw-resize'|| editorAction.d == 'sw-resize') {\r\n left = editorAction.e.offsetLeft + (x - state.x);\r\n width = editorAction.e.offsetLeft + editorAction.e.offsetWidth - left;\r\n\r\n if (e.shiftKey) {\r\n height = editorAction.e.offsetHeight - (x - state.x) * (editorAction.e.offsetHeight / editorAction.e.offsetWidth);\r\n }\r\n }\r\n\r\n if (editorAction.d == 's-resize' || editorAction.d == 'se-resize' || editorAction.d == 'sw-resize') {\r\n if (! height) {\r\n height = editorAction.e.offsetHeight + (y - state.y);\r\n }\r\n } else if (editorAction.d === 'n-resize' || editorAction.d == 'ne-resize' || editorAction.d == 'nw-resize') {\r\n top = editorAction.e.offsetTop + (y - state.y);\r\n height = editorAction.e.offsetTop + editorAction.e.offsetHeight - top;\r\n }\r\n\r\n if (top) {\r\n editorAction.e.style.top = top + 'px';\r\n }\r\n if (left) {\r\n editorAction.e.style.left = left + 'px';\r\n }\r\n if (width) {\r\n editorAction.e.style.width = width + 'px';\r\n }\r\n if (height) {\r\n editorAction.e.style.height = height + 'px';\r\n }\r\n\r\n // Update element\r\n if (typeof(editorAction.e.refresh) == 'function') {\r\n state.actioned = true;\r\n editorAction.e.refresh('dimensions', width, height);\r\n }\r\n }\r\n\r\n state.x = x;\r\n state.y = y;\r\n } else {\r\n let element = getElement(e);\r\n // Resize action\r\n let item = jSuites.findElement(element, 'jpanel');\r\n // Found eligible component\r\n if (item) {\r\n // Resizing action\r\n let controls = item.classList.contains('jpanel-controls');\r\n if (controls) {\r\n let position = element.getAttribute('data-position');\r\n if (position) {\r\n item.style.cursor = position;\r\n } else {\r\n item.style.cursor = '';\r\n }\r\n } else if (item.getAttribute('tabindex')) {\r\n let rect = item.getBoundingClientRect();\r\n //console.log(e.clientY - rect.top, rect.width - (e.clientX - rect.left), cornerSize)\r\n if (e.clientY - rect.top < cornerSize) {\r\n if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'ne-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'nw-resize';\r\n } else {\r\n item.style.cursor = 'n-resize';\r\n }\r\n } else if (rect.height - (e.clientY - rect.top) < cornerSize) {\r\n if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'se-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'sw-resize';\r\n } else {\r\n item.style.cursor = 's-resize';\r\n }\r\n } else if (rect.width - (e.clientX - rect.left) < cornerSize) {\r\n item.style.cursor = 'e-resize';\r\n } else if (e.clientX - rect.left < cornerSize) {\r\n item.style.cursor = 'w-resize';\r\n } else {\r\n item.style.cursor = '';\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n let position = ['n','ne','e','se','s','sw','w','nw','rotate'];\r\n position.forEach(function(v, k) {\r\n position[k] = document.createElement('div');\r\n position[k].classList.add('jpanel-action');\r\n if (v === 'rotate') {\r\n position[k].setAttribute('data-action', 'rotate');\r\n } else {\r\n position[k].setAttribute('data-action', 'resize');\r\n position[k].setAttribute('data-position', v + '-resize');\r\n }\r\n });\r\n\r\n let currentElement;\r\n\r\n const focus = function(e) {\r\n let element = getElement(e);\r\n // Check if this is the floating\r\n let item = jSuites.findElement(element, 'jpanel');\r\n if (item && ! item.classList.contains(\"readonly\") && item.classList.contains('jpanel-controls')) {\r\n item.append(...position);\r\n\r\n if (! item.classList.contains('jpanel-rotate')) {\r\n position[position.length-1].remove();\r\n }\r\n\r\n currentElement = item;\r\n } else {\r\n blur(e);\r\n }\r\n }\r\n\r\n const blur = function(e) {\r\n if (currentElement) {\r\n position.forEach(function(v) {\r\n v.remove();\r\n });\r\n currentElement = null;\r\n }\r\n }\r\n\r\n const mouseOver = function(e) {\r\n let element = getElement(e);\r\n var message = element.getAttribute('data-tooltip');\r\n if (message) {\r\n // Instructions\r\n tooltip.innerText = message;\r\n\r\n // Position\r\n if (e.changedTouches && e.changedTouches[0]) {\r\n var x = e.changedTouches[0].clientX;\r\n var y = e.changedTouches[0].clientY;\r\n } else {\r\n var x = e.clientX;\r\n var y = e.clientY;\r\n }\r\n\r\n tooltip.style.top = y + 'px';\r\n tooltip.style.left = x + 'px';\r\n document.body.appendChild(tooltip);\r\n } else if (tooltip.innerText) {\r\n tooltip.innerText = '';\r\n document.body.removeChild(tooltip);\r\n }\r\n }\r\n\r\n const contextMenu = function(e) {\r\n var item = document.activeElement;\r\n if (item && typeof(item.contextmenu) == 'function') {\r\n // Create edition\r\n item.contextmenu(e);\r\n\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n } else {\r\n // Search for possible context menus\r\n item = jSuites.findElement(e.target, function(o) {\r\n return o.tagName && o.getAttribute('aria-contextmenu-id');\r\n });\r\n\r\n if (item) {\r\n var o = document.querySelector('#' + item);\r\n if (! o) {\r\n console.error('JSUITES: contextmenu id not found: ' + item);\r\n } else {\r\n o.contextmenu.open(e);\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n }\r\n }\r\n\r\n const keyDown = function(e) {\r\n let item = document.activeElement;\r\n if (item) {\r\n if (e.key === \"Delete\" && typeof(item.delete) == 'function') {\r\n item.delete();\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n let state = window['jSuitesStateControl'];\r\n if (state && state.length > 0) {\r\n item = state[state.length - 1];\r\n if (item) {\r\n if (e.key === \"Escape\" && typeof(item.isOpened) == 'function' && typeof(item.close) == 'function') {\r\n if (item.isOpened()) {\r\n item.close();\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n const input = function(e) {\r\n if (e.target.getAttribute('data-mask') || e.target.mask) {\r\n jSuites.mask.oninput(e);\r\n }\r\n }\r\n\r\n document.addEventListener('focusin', focus);\r\n document.addEventListener('mouseup', mouseUp);\r\n document.addEventListener(\"mousedown\", mouseDown);\r\n document.addEventListener('mousemove', mouseMove);\r\n document.addEventListener('mouseover', mouseOver);\r\n document.addEventListener('keydown', keyDown);\r\n document.addEventListener('contextmenu', contextMenu);\r\n document.addEventListener('input', input);\r\n}\r\n\r\nif (typeof(document) !== \"undefined\") {\r\n Events();\r\n}\r\n\r\n/* harmony default export */ var jsuites = (jSuites);\n}();\njSuites = __webpack_exports__[\"default\"];\n/******/ })()\n;\n\n return jSuites;\n})));"]}