g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}\nfunction g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D=\"function\"===typeof setTimeout?setTimeout:null,E=\"function\"===typeof clearTimeout?clearTimeout:null,F=\"undefined\"!==typeof setImmediate?setImmediate:null;\n\"undefined\"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}}\nfunction J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if(\"function\"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1;\nfunction M(){return exports.unstable_now()-Qa||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Similar to invariant but only logs a warning if the condition is not met.\n * This can be used to log issues in development environments in critical\n * paths. Removing the logging code for production environments will keep the\n * same logic and follow the same code paths.\n */\n\nvar __DEV__ = process.env.NODE_ENV !== 'production';\n\nvar warning = function() {};\n\nif (__DEV__) {\n var printWarning = function printWarning(format, args) {\n var len = arguments.length;\n args = new Array(len > 1 ? len - 1 : 0);\n for (var key = 1; key < len; key++) {\n args[key - 1] = arguments[key];\n }\n var argIndex = 0;\n var message = 'Warning: ' +\n format.replace(/%s/g, function() {\n return args[argIndex++];\n });\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n }\n\n warning = function(condition, format, args) {\n var len = arguments.length;\n args = new Array(len > 2 ? len - 2 : 0);\n for (var key = 2; key < len; key++) {\n args[key - 2] = arguments[key];\n }\n if (format === undefined) {\n throw new Error(\n '`warning(condition, format, ...args)` requires a warning ' +\n 'message argument'\n );\n }\n if (!condition) {\n printWarning.apply(null, [format].concat(args));\n }\n };\n}\n\nmodule.exports = warning;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\tloaded: false,\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Flag the module as loaded\n\tmodule.loaded = true;\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = (chunkId) => {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = (chunkId) => {\n\t// return url for filenames based on template\n\treturn \"static/js/\" + chunkId + \".\" + \"8765c1cb\" + \".chunk.js\";\n};","// This function allow to reference async chunks\n__webpack_require__.miniCssF = (chunkId) => {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var inProgress = {};\nvar dataWebpackPrefix = \"demo-app:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = (url, done, key, chunkId) => {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = (prev, event) => {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach((fn) => (fn(event)));\n\t\tif(prev) return prev(event);\n\t}\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.nmd = (module) => {\n\tmodule.paths = [];\n\tif (!module.children) module.children = [];\n\treturn module;\n};","__webpack_require__.p = \"/resizable-panes/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t792: 0\n};\n\n__webpack_require__.f.j = (chunkId, promises) => {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(true) { // all chunks have JS\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = (event) => {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n// no on chunks loaded\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkdemo_app\"] = self[\"webpackChunkdemo_app\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// Need to make Plain\nexport const DIRECTIONS = {\n DOWN: -1,\n NONE: 0,\n UP: 1\n}\n\nexport const CHANGE = {\n ADD: 1,\n REMOVE: 2\n}\n\nexport const RATIO = 'ratio'\nexport const SET_SIZE = 'setSize'\n\nexport const BUTTOM_FIRST = '1'\nexport const TOP_FIRST = '2'\n\nexport const RESIZER = 'resizer'\n\nexport const VISIBILITY = 'visibility'\nexport const SIZE = 'size'\nexport const DEFAULT_MIN_SIZE_KEY = 'defaultMinSize'\nexport const DEFAULT_MAX_SIZE_KEY = 'defaultMaxSize'\n\nexport const MIN_WIDTH = 'minWidth'\nexport const MIN_HEIGHT = 'minHeight'\n\nexport const RESIZE_HTML_EVENT = 'resize'\n\n// written same name as of event to optimize the code\nexport const MIN_SIZE_STATE = 'onMinSize'\nexport const MAX_SIZE_STATE = 'onMaxSize'\nexport const NORMAL_SIZE_STATE = 'onNormalSize'\n\nexport const EVENT_NAMES = {\n mouseup: 'mouseup',\n mousemove: 'mousemove',\n mousedown: 'mousedown',\n touchmove: 'touchmove',\n touchend: 'touchend',\n touchstart: 'touchstart'\n}\n","import {IPane, IResizablePaneProviderProps} from '../@types'\nimport {deleteUndefined, noop} from '../utils/util'\n\nexport const checkPaneModelErrors = (size: number, minSize: number, maxSize: number, id: string) => {\n if (size < minSize) {\n throw new Error(`Size(${size}) can not be smaller than minSize(${minSize}) for pane id ${id}`)\n }\n\n if (size > maxSize) {\n throw new Error(`Size(${size}) can not be greatter than maxSize(${maxSize}) for pane id ${id}`)\n }\n}\n\nexport const attachDefaultPaneProps = (paneProps: IPane, resizableProps: IResizablePaneProviderProps) => {\n const propsWithNoUndefined = deleteUndefined({...paneProps})\n\n const {\n onMinSize = noop,\n onMaxSize = noop,\n onNormalSize = noop,\n\n resizerClass,\n activeResizerClass,\n resizerSize,\n detectionRadius\n } = resizableProps\n\n return {\n onMinSize,\n onMaxSize,\n onNormalSize,\n resizerSize,\n resizerClass,\n detectionRadius,\n activeResizerClass,\n minSize: 0,\n maxSize: Infinity,\n ...propsWithNoUndefined\n }\n}\n","import {IResizerApi, ISizeState, IStoreResizableItemsModel} from '../@types'\nimport {\n CHANGE,\n DEFAULT_MAX_SIZE_KEY,\n DEFAULT_MIN_SIZE_KEY,\n MAX_SIZE_STATE, MIN_SIZE_STATE, NORMAL_SIZE_STATE,\n RATIO, SIZE, VISIBILITY\n} from '../utils/constant'\nimport {filterKeys, ratioAndRoundOff} from '../utils/util'\nimport {PaneModel} from './pane-model'\nimport {checkPaneModelErrors} from './utils'\n\nexport const changePaneSizePlain = (pane: PaneModel, newSize: number) => {\n const {minSize, maxSize} = pane\n let acceptedSize = pane.minSize\n if (newSize >= minSize && newSize <= maxSize) {\n acceptedSize = newSize\n } else if (newSize > maxSize) {\n acceptedSize = maxSize\n }\n pane.size = acceptedSize\n return acceptedSize\n}\n\nexport const changePaneSize = (pane: PaneModel, sizeChange: number,\n operation: number) => {\n const {axisSize} = pane\n const newSize = axisSize + (operation === CHANGE.ADD ? sizeChange : -sizeChange)\n\n const acceptedSize = changePaneSizePlain(pane, newSize)\n return Math.abs(acceptedSize - newSize)\n}\n\n// No visibility check required here, we are only using this method for visible panes\nexport const setVisibilitySize = (pane: PaneModel, sizeChange: number,\n operation: number) => {\n const newSize = pane.size + (operation === CHANGE.ADD ? sizeChange : -sizeChange)\n restoreLimits(pane)\n const acceptedSize = changePaneSizePlain(pane, newSize)\n return acceptedSize === newSize\n}\n\nconst setVisibilityHelper = (pane: PaneModel, isPartiallyHidden: boolean) => {\n if (pane.isHandle) {\n pane.size = isPartiallyHidden ? 0 : pane.resizerSize\n }\n}\n\nexport const setPaneVisibility = (pane: PaneModel, visibility: boolean, isPartiallyHidden = false) => {\n if (pane) {\n pane.visibility = visibility\n if (visibility) {\n pane.maxSize = pane.defaultMaxSize\n pane.minSize = pane.defaultMinSize\n setVisibilityHelper(pane, isPartiallyHidden)\n } else {\n pane.maxSize = 0\n pane.minSize = 0\n }\n if (pane.api && pane.api.destroy) { pane.api.destroy(visibility) }\n }\n}\n\nexport const setPaneOldVisibilityModel = (pane: PaneModel) => {\n pane.oldVisibleSize = pane.size\n pane.oldVisibility = pane.visibility\n}\n\nexport const syncPaneToOldVisibilityModel = (pane: PaneModel) => {\n pane.size = pane.oldVisibleSize\n pane.visibility = pane.oldVisibility\n}\n\nexport const storePaneForNewSetSizeKey = (pane: PaneModel) => {\n pane.initialSetSize = pane.size\n}\n\nexport const restorePaneBeforeSetSize = (pane: PaneModel) => {\n pane.size = pane.initialSetSize\n}\n\nexport const syncPaneSizeToRatioSize = (pane: PaneModel) => {\n pane.size = pane.sizeRatio\n pane.defaultMinSize = pane.minSizeRatio\n pane.defaultMaxSize = pane.maxSizeRatio\n}\n\nexport const syncPaneRatioSizeToSize = (pane: PaneModel) => {\n pane.sizeRatio = pane.size\n pane.minSizeRatio = pane.defaultMinSize\n pane.maxSizeRatio = pane.defaultMaxSize\n}\n\nexport const restorePane = (pane: PaneModel) => {\n pane.size = pane.defaultSize\n restoreLimits(pane)\n setPaneVisibility(pane, pane.defaultVisibility)\n}\n\nexport const restoreLimits = (pane: PaneModel) => {\n pane.minSize = pane.defaultMinSize\n pane.maxSize = pane.defaultMaxSize\n}\n\n// pane method runs only for visible panes\nexport const resetMax = (pane: PaneModel) => {\n pane.maxSize = pane.defaultMaxSize\n return pane.maxSize\n}\n\n// pane method runs only for visible panes\nexport const resetMin = (pane: PaneModel) => {\n pane.minSize = pane.defaultMinSize\n return pane.minSize\n}\n\nexport const synMaxToSize = (pane: PaneModel) => {\n pane.maxSize = pane.size\n return pane.size\n}\n\nexport const synMinToSize = (pane: PaneModel) => {\n pane.minSize = pane.size\n return pane.size\n}\n\n// pane method runs only for visible panes\nexport const getMinDiff = (pane: PaneModel) => {\n return pane.size - pane.defaultMinSize\n}\n\nexport const getMaxDiff = (pane: PaneModel) => {\n return pane.defaultMaxSize - pane.size\n}\n\nexport const synSizeToMinSize = (pane: PaneModel) => {\n pane.size = pane.minSize\n}\n\nexport const synSizeToMaxSize = (pane: PaneModel) => {\n pane.size = pane.maxSize\n}\n\nexport const syncAxisSize = (pane: PaneModel) => {\n pane.axisSize = pane.size\n}\n\n// export const setPreSize = (pane: PaneModel) => {\n// pane.size = pane.preSize\n// }\n\n// Task will run for only visible Items\nexport const setUISize = (pane: PaneModel) => {\n // if (pane.api) {\n pane.api.setSize(getSize(pane))\n\n // pane.preSize = pane.size\n}\n\n// eslint-disable-next-line complexity\nexport const updatSizeState = (pane: PaneModel) => {\n if (pane.visibility && !pane.isHandle) {\n const {size, id} = pane\n\n let newSetSize : ISizeState\n if (size === pane.defaultMaxSize) {\n newSetSize = MAX_SIZE_STATE\n } else if (size === pane.defaultMinSize) {\n newSetSize = MIN_SIZE_STATE\n } else {\n newSetSize = NORMAL_SIZE_STATE\n }\n\n if (pane.sizeState !== newSetSize) {\n pane.props[newSetSize](id, size)\n pane.sizeState = newSetSize\n }\n }\n}\n\nexport const getStoreModel = (pane: PaneModel): IStoreResizableItemsModel => {\n const t = filterKeys(pane, 'id', SIZE,\n 'defaultSize', DEFAULT_MIN_SIZE_KEY, VISIBILITY, 'storedSize')\n return {\n ...t,\n [DEFAULT_MAX_SIZE_KEY]: pane[DEFAULT_MAX_SIZE_KEY].toString()\n }\n}\n\nexport const getSize = (pane: PaneModel) => {\n return pane.visibility ? pane.size : 0\n}\n\nexport const getRatioSize = (pane: PaneModel) => {\n return pane.visibility ? pane.sizeRatio : 0\n}\n\nexport const initializeSize = (pane: PaneModel, size: number) => {\n pane.size = size\n pane.storedSize = size\n}\n\nexport const initializeSizes = (pane: PaneModel, size: number, minSize: number, maxSize: number,\n defaultSize: number, storedSize: number, visibility: boolean) => {\n initializeSize(pane, size)\n pane.defaultSize = defaultSize\n pane.minSize = minSize\n pane.maxSize = maxSize\n pane.defaultMinSize = minSize\n pane.defaultMaxSize = maxSize\n pane.storedSize = storedSize\n pane.visibility = visibility\n}\n\n// We never come here for the case of store\nexport const toRatioModePane = (\n pane: PaneModel, containerSize: number,\n maxRatioValue: number, isOnResize: boolean) => {\n const {\n minSize, size, maxSize\n } = pane.props\n\n // need optimization\n const [minSizeToUse, sizeToUse, maxSizeToUse] = isOnResize\n ? [pane.minSizeRatio, pane.size, pane.maxSizeRatio]\n : [minSize, size, maxSize]\n\n const storeSizeCalculated = ratioAndRoundOff(containerSize, maxRatioValue, sizeToUse)\n\n let minSizeCalculated, maxSizeCalculated\n if (pane.minMaxUnit !== RATIO) {\n minSizeCalculated = pane.defaultMinSize\n maxSizeCalculated = pane.defaultMaxSize\n } else {\n minSizeCalculated = ratioAndRoundOff(containerSize, maxRatioValue, minSizeToUse)\n maxSizeCalculated = ratioAndRoundOff(containerSize, maxRatioValue, maxSizeToUse)\n }\n\n if (!isOnResize) {\n if (pane.minMaxUnit !== RATIO) {\n checkPaneModelErrors(storeSizeCalculated, minSizeCalculated, maxSizeCalculated, pane.id)\n } else {\n checkPaneModelErrors(size, minSize, maxSize, pane.id)\n }\n }\n\n initializeSizes(pane, storeSizeCalculated, minSizeCalculated,\n maxSizeCalculated, storeSizeCalculated, storeSizeCalculated, pane.visibility)\n}\n\nexport const registerResizableItem = (pane: PaneModel, api: IResizerApi) => {\n pane.api = api\n if (pane.isHandle) {\n const size = pane.resizerSize\n api.setSize(size)\n initializeSizes(pane, size, size, size, size, size, pane.visibility)\n }\n}\n","import {IAnyMap, IPaneModelKey, IStoreResizableItemsModel} from '../@types'\nimport {DIRECTIONS, RESIZER, SIZE} from './constant'\nimport {PaneModel} from '../models'\nimport {getSize} from '../models/pane'\n\nexport type INoop = (_: any) => any\n\nexport const noop: INoop = (_: any): any => _\n\nexport const findById = (list: T[] | any[], _id: string) =>\n list.find(({id}) => id === _id)\n\nexport const createMap = (paneList: PaneModel[] | IStoreResizableItemsModel[], ...keys: IPaneModelKey[]) => {\n const map: IAnyMap = {}\n paneList.forEach((pane) => {\n const getValue = (key: string) => key === SIZE ? getSize(pane as PaneModel) : pane[key]\n\n const {id} = pane\n if (keys.length === 1) {\n map[id] = getValue(keys[0])\n } else {\n map[id] = keys.reduce((acc: any, key) => {\n acc[key] = getValue(key)\n return acc\n }, {})\n }\n })\n return map\n}\n\n// export const isUndefinedOrNull = (value: any) => value === undefined || value === null\n\nexport const findIndex = (list: any[], value: any, key = 'id') =>\n list.findIndex((item) => item[key] === value)\n\nexport const ratioToNumber = (totalSize: number, maxRatioValue: number, size: number) =>\n Number((totalSize * (size / maxRatioValue)).toFixed(0))\n\nexport const ratioAndRoundOff = (totalSize: number, maxRatioValue: number, size: number) => Math.round(\n ratioToNumber(totalSize, maxRatioValue, size)\n)\n\nexport const filterKeys = (obj: T, ...keys: (keyof T)[]) => {\n const retObj: any = {}\n keys.forEach(key => {\n retObj[key] = obj[key]\n })\n\n return retObj\n}\n\nexport const isItUp = (direction: number) => direction === DIRECTIONS.UP\nexport const isItDown = (direction: number) => direction === DIRECTIONS.DOWN\n\nexport const getResizerId = (paneId: string) => `${RESIZER}-${paneId}`\n\n// need to make pure\nexport const deleteUndefined = (anyObject: any) => {\n Object.keys(anyObject).forEach(key => {\n if (anyObject[key] === undefined) {\n delete anyObject[key]\n }\n })\n return anyObject\n}\n\nexport const reverse = (list: T[]): T[] => [...list].reverse()\nexport const filterEmpty = (list: any[]) => list.filter(_ => _)\n\nexport const sortNumber = (list: number[]) => {\n return [...list].sort((a, b) => {\n if (a > b) {\n return -1\n } else if (b > a) {\n return 1\n }\n return 0\n })\n}\n","import {\n IPane,\n IResizablePaneProviderProps,\n IResizerApi,\n ISizeState,\n UnitTypes\n} from '../@types'\nimport {\n NORMAL_SIZE_STATE,\n RATIO\n} from '../utils/constant'\nimport {ResizeStorage} from '../utils/storage'\nimport {getResizerId} from '../utils/util'\nimport {\n initializeSizes,\n syncPaneRatioSizeToSize\n} from './pane'\nimport {attachDefaultPaneProps, checkPaneModelErrors} from './utils'\n\nexport class PaneModel {\n isHandle: boolean\n\n initialSetSize: number\n\n resizerSize: number\n detectionRadius: number\n\n id: string\n api: any | IResizerApi\n size: number\n sizeRatio: number\n minSizeRatio: number\n maxSizeRatio: number\n\n sizeState: ISizeState = NORMAL_SIZE_STATE\n\n minMaxUnit: UnitTypes\n\n preSize: number\n // get _size () {\n // return this.size\n // }\n\n // set _size (val:number) {\n // if (val === 63) {\n // debugger\n // }\n // this.size = val\n // }\n\n defaultSize: number\n minSize: number\n defaultMinSize: number\n maxSize: number\n defaultMaxSize: number\n\n visibility: boolean\n defaultVisibility: boolean\n\n storedSize: number = 0\n\n vertical: boolean\n\n axisSize: number = 0\n\n oldVisibleSize: number = 0\n oldVisibility: boolean = true\n props:IPane\n // Development Variables\n\n // eslint-disable-next-line complexity\n constructor (\n paneProps: IPane,\n resizableProps: IResizablePaneProviderProps,\n store: ResizeStorage, isHandle: boolean) {\n this.props = attachDefaultPaneProps(paneProps, resizableProps)\n\n const {\n id, minSize, size, maxSize, resizerSize, detectionRadius\n } = this.props\n\n const {visibility, vertical, minMaxUnit, unit} = resizableProps\n\n this.minMaxUnit = minMaxUnit ?? unit\n\n if (unit !== RATIO) {\n checkPaneModelErrors(size, minSize, maxSize, id)\n }\n\n // // it can be removed with change in default props\n const show = visibility[id] ?? true\n this.defaultVisibility = show\n\n const storedPane = store.getStoredPane(id)\n if (storedPane) {\n const {size, defaultMaxSize, defaultMinSize, defaultSize, visibility, storedSize} = storedPane\n initializeSizes(this, size, defaultMinSize, defaultMaxSize as number, defaultSize, storedSize, visibility)\n } else {\n initializeSizes(this, size, minSize, maxSize, size, size, show)\n }\n\n this.id = id\n this.vertical = vertical\n syncPaneRatioSizeToSize(this)\n\n this.isHandle = isHandle\n if (isHandle) {\n this.id = getResizerId(id)\n this.resizerSize = resizerSize\n this.detectionRadius = detectionRadius\n }\n }\n}\n","import {IResizableApi, IResizableEvent, IResizableItem, IResizablePaneProviderProps} from '../@types'\nimport {PaneModel} from './pane-model'\n\nexport class ResizableModel {\n // Need to clear on all operations\n isSetRatioMode = false\n newVisibilityModel = false\n isViewSizeChanged = false\n\n setSizeKey: string\n\n vertical: boolean\n\n direction: number\n axisCoordinate: number\n\n index: number\n topAxis: number\n bottomAxis: number\n\n handleId: string\n\n items: IResizableItem[]\n\n panesList: PaneModel[]\n resizersList: IResizableItem[]\n\n previousTouchEvent: any\n detectionDetails: [number, number, string][]\n onMouseDown: ([mouseCoordinate]: IResizableEvent, handleId: string) => void\n onMoveResize: ([mouseCoordinate, movement]: IResizableEvent) => void\n onMouseUp: () => void\n\n api: IResizableApi\n registerItem: (api: any, id: string) => void\n registerContainer: any\n props: IResizablePaneProviderProps\n\n getPaneSizeStyle: (id: string) => any\n\n getContainerRect: () => any\n\n register (subModel: any) {\n Object.assign(this, subModel)\n }\n}\n","import {ReactElement} from 'react'\nimport {IResizableItem, IResizablePaneProviderProps} from '../@types'\nimport {PaneModel, ResizableModel} from '../models'\nimport {ResizeStorage} from './storage'\nimport {CHANGE} from './constant'\nimport {\n getRatioSize,\n getSize, initializeSize, restorePane, setUISize, synMaxToSize,\n synMinToSize,\n syncAxisSize, updatSizeState\n}\n from '../models/pane'\n\nexport const syncAxisSizesFn = (panesList: PaneModel[]) =>\n panesList.forEach(syncAxisSize)\n\nexport const setUISizesFn = (items: IResizableItem[]) => {\n items.forEach(setUISize)\n}\n\nexport const getVisibleItems = (list: IResizableItem[]) => list.filter(item => item.visibility)\n\nexport function getSum (list: T[], getNumber: (item:T) => number, start = 0, end = list.length - 1) {\n let sum = 0\n for (let i = start; i <= end; i++) {\n sum += getNumber(list[i])\n }\n return sum\n}\n\nexport const synPanesMaxToSize = (panesList: PaneModel[], start: number, end: number) =>\n getSum(panesList, synMaxToSize, start, end)\n\nexport const synPanesMinToSize = (panesList: PaneModel[], start: number, end: number) =>\n getSum(panesList, synMinToSize, start, end)\n\nexport const getItemsSizeSum = (panesList: PaneModel[], start?: number, end?: number) =>\n getSum(panesList, getSize, start, end)\n\nexport const getRatioSizeSum = (panesList: PaneModel[]) =>\n getSum(panesList, getRatioSize)\n\nexport const getMaxSizeSum = (panesList: PaneModel[], start?: number, end?: number) =>\n getSum(panesList, (pane) => pane.maxSize, start, end)\n\nexport const getMinSizeSum = (panesList: PaneModel[], start: number, end: number) =>\n getSum(panesList, (pane) => pane.minSize, start, end)\n\n// Need to check for hidden element\nexport const restoreFn = (items: IResizableItem[]) => {\n items.forEach(restorePane)\n setUISizesFn(items)\n}\n\n// It is used when we rapidly move out of axis\nexport const setMaxLimits = (resizable: ResizableModel,\n firstInningMethod: any, secondInningMethod: any, direction: number) => {\n const {items, index} = resizable\n const visibleItems = getVisibleItems(items)\n\n for (let i = 0; i < visibleItems.length; i++) {\n if (i <= index) {\n firstInningMethod(visibleItems[i], direction)\n } else {\n secondInningMethod(visibleItems[i], direction)\n }\n }\n}\n\nexport const updatSizeStateAllPanes = (panesList: PaneModel[]) => {\n panesList.forEach(updatSizeState)\n}\n\nconst fixChangeCallBack = (pane: PaneModel, change: number, operation: number) => {\n const newSize = pane.size + (operation === CHANGE.ADD ? change : -change)\n initializeSize(pane, newSize)\n}\n\nexport const change1PixelToPanes = (panesList: PaneModel[], sizeChange: number,\n operation: number) => {\n let count = 0\n const len = panesList.length\n let index: number\n\n while (sizeChange > 1) {\n index = count % len\n\n if (panesList[index].visibility) {\n fixChangeCallBack(panesList[index], 1, operation)\n --sizeChange\n }\n ++count\n }\n\n while (1) {\n index = count % len\n\n if (panesList[index].visibility) {\n fixChangeCallBack(panesList[index], sizeChange, operation)\n return\n }\n ++count\n }\n}\n\nexport const getPanesAndResizers = (items: IResizableItem[]): [ panesList: IResizableItem[],\n resizersList: IResizableItem[]] => {\n const panesList = items.filter((item) => !item.isHandle)\n const resizersList = items.filter((item) => item.isHandle)\n return [\n panesList,\n resizersList\n ]\n}\n\nexport const createPaneModelListAndResizerModelList = (\n children: ReactElement[],\n resizableProps: IResizablePaneProviderProps,\n store: ResizeStorage\n): IResizableItem[] => {\n const items: IResizableItem[] = []\n children.forEach(child =>\n items.push(\n new PaneModel(child.props, resizableProps, store, false),\n new PaneModel(child.props, resizableProps, store, true)\n )\n )\n items.pop()\n return items\n}\n","function throttle(function_, wait) {\n\tlet timeoutId;\n\tlet lastCallTime = 0;\n\n\treturn function throttled(...arguments_) { // eslint-disable-line func-names\n\t\tclearTimeout(timeoutId);\n\n\t\tconst now = Date.now();\n\t\tconst timeSinceLastCall = now - lastCallTime;\n\t\tconst delayForNextCall = wait - timeSinceLastCall;\n\n\t\tif (delayForNextCall <= 0) {\n\t\t\tlastCallTime = now;\n\t\t\tfunction_.apply(this, arguments_);\n\t\t} else {\n\t\t\ttimeoutId = setTimeout(() => {\n\t\t\t\tlastCallTime = Date.now();\n\t\t\t\tfunction_.apply(this, arguments_);\n\t\t\t}, delayForNextCall);\n\t\t}\n\t};\n}\n\nmodule.exports = throttle;\n","import {IClearFlagsParam, IResizableItem} from '../@types'\nimport {CHANGE, RATIO, SET_SIZE, VISIBILITY} from './constant'\nimport {PaneModel, ResizableModel} from '../models'\nimport {\n changePaneSize, getMaxDiff, getMinDiff,\n resetMax, resetMin, syncPaneRatioSizeToSize, syncPaneSizeToRatioSize, toRatioModePane\n} from '../models/pane'\nimport {\n change1PixelToPanes, getMaxSizeSum, getMinSizeSum,\n getItemsSizeSum, getRatioSizeSum, getVisibleItems, setUISizesFn,\n synPanesMaxToSize, synPanesMinToSize\n} from './panes'\nimport {findIndex, isItUp, reverse} from './util'\n\nexport const movingLogic = (mouseCoordinate: number, resizable: ResizableModel) => {\n let sizeChange: number\n\n const {items, direction, index, axisCoordinate} = resizable\n\n const visibleItems = getVisibleItems(items)\n\n let decreasingItems: IResizableItem[]\n let increasingItems: IResizableItem []\n\n const firstHalf = reverse(visibleItems.slice(0, index + 1))\n const secondHalf = visibleItems.slice(index + 1)\n\n if (isItUp(direction)) {\n sizeChange = axisCoordinate - mouseCoordinate\n increasingItems = secondHalf\n decreasingItems = firstHalf\n } else {\n sizeChange = mouseCoordinate - axisCoordinate\n increasingItems = firstHalf\n decreasingItems = secondHalf\n }\n\n if (sizeChange < 0) {\n // throw new Error('eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee')\n } else if (sizeChange === 0) {\n return\n }\n\n let reverseSizeChange = sizeChange\n\n decreasingItems.forEach(item => {\n sizeChange = changePaneSize(item, sizeChange, CHANGE.REMOVE)\n })\n\n reverseSizeChange -= sizeChange\n\n increasingItems.forEach(item => {\n reverseSizeChange = changePaneSize(item, reverseSizeChange, CHANGE.ADD)\n })\n}\n\nexport const getHandleIndex = (items: IResizableItem[], handleId: string) => {\n const visibleItems = getVisibleItems(items)\n const handleIndex = findIndex(visibleItems, handleId)\n return handleIndex\n}\n\nexport const setCurrentMinMax = (resizable: ResizableModel) => {\n const {containerSize} = getMaxContainerSizes(resizable)\n\n const {items, index} = resizable\n const visibleItems = getVisibleItems(items)\n\n const nextIdx = index + 1\n const aMaxChangeUp = getMinDiff(visibleItems[index])\n const bMaxChangeUp = getMaxDiff(visibleItems[nextIdx])\n\n minMaxLogicUp(visibleItems, aMaxChangeUp - bMaxChangeUp, index, nextIdx, 0, containerSize)\n\n const aMaxChangeDown = getMinDiff(visibleItems[nextIdx])\n const bMaxChangeDown = getMaxDiff(visibleItems[index])\n minMaxLogicDown(visibleItems, bMaxChangeDown - aMaxChangeDown, index, nextIdx, 0, containerSize)\n}\n\nexport const calculateAxes = (resizable: ResizableModel) => {\n const {items, index} = resizable\n const {maxTopAxis} = getMaxContainerSizes(resizable)\n const visibleItemsList = getVisibleItems(items)\n\n resizable.bottomAxis = maxTopAxis + getMaxSizeSum(visibleItemsList, 0, index - 1)\n resizable.topAxis = maxTopAxis + getMinSizeSum(visibleItemsList, 0, index - 1)\n}\n\n// aIndex will decrease and bIndex will increase\n// eslint-disable-next-line complexity\nexport const minMaxLogicUp = (\n panesList: PaneModel[], value: number,\n aIndex: number, bIndex: number,\n sum: number, maxPaneSize: number) => {\n const lastIndex = panesList.length - 1\n\n let nextValue: number\n let nextAIndex = aIndex\n let nextBIndex = bIndex\n\n const paneA = panesList[aIndex]\n const paneB = panesList[bIndex]\n\n const toMinA = () => {\n sum += resetMin(paneA)\n }\n\n const toMaxB = () => {\n sum += resetMax(paneB)\n }\n\n switch (true) {\n case aIndex > 0 && bIndex < lastIndex:\n switch (true) {\n case value < 0:\n toMinA()\n nextAIndex = aIndex - 1\n nextValue = getMinDiff(panesList[nextAIndex]) + value\n break\n\n case value === 0:\n toMinA()\n toMaxB()\n nextAIndex = aIndex - 1\n nextBIndex = bIndex + 1\n nextValue = getMinDiff(panesList[nextAIndex]) - getMaxDiff(panesList[nextBIndex])\n break\n\n case value > 0:\n toMaxB()\n nextBIndex = bIndex + 1\n nextValue = value - getMaxDiff(panesList[nextBIndex])\n break\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex === 0 && bIndex < lastIndex:\n switch (true) {\n case value < 0:\n toMinA()\n sum += synPanesMaxToSize(panesList, bIndex + 1, lastIndex)\n paneB.maxSize = maxPaneSize - sum\n return\n\n case value === 0:\n toMinA()\n toMaxB()\n synPanesMaxToSize(panesList, bIndex + 1, lastIndex)\n return\n\n case value > 0:\n // not change from previous switch\n toMaxB()\n nextBIndex = bIndex + 1\n nextValue = value - getMaxDiff(panesList[nextBIndex])\n break\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex > 0 && bIndex === lastIndex:\n switch (true) {\n case value < 0:\n toMinA()\n nextAIndex = aIndex - 1\n nextValue = getMinDiff(panesList[nextAIndex]) + value\n break\n\n case value === 0:\n toMinA()\n toMaxB()\n synPanesMinToSize(panesList, 0, aIndex - 1)\n return\n\n case value > 0:\n toMaxB()\n sum += synPanesMinToSize(panesList, 0, aIndex - 1)\n paneA.minSize = maxPaneSize - sum\n return\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex === 0 && bIndex === lastIndex:\n // return for every case\n switch (true) {\n case value < 0:\n toMinA()\n paneB.maxSize = maxPaneSize - sum\n return\n\n case value === 0:\n toMinA()\n toMaxB()\n return\n\n case value > 0:\n toMaxB()\n paneA.minSize = maxPaneSize - sum\n return\n }\n }\n\n minMaxLogicUp(panesList, nextValue, nextAIndex, nextBIndex, sum, maxPaneSize)\n}\n\n// eslint-disable-next-line complexity\nexport const minMaxLogicDown = (\n panesList: PaneModel[], value: number,\n aIndex: number, bIndex: number, sum: number,\n maxPaneSize: number) => {\n const lastIndex = panesList.length - 1\n\n let nextValue: number\n let nextAIndex = aIndex\n let nextBIndex = bIndex\n const paneA = panesList[aIndex]\n const paneB = panesList[bIndex]\n\n const toMaxA = () => {\n sum += resetMax(paneA)\n }\n\n const toMinB = () => {\n sum += resetMin(paneB)\n }\n\n switch (true) {\n case aIndex > 0 && bIndex < lastIndex:\n switch (true) {\n case value < 0:\n toMaxA()\n nextAIndex = aIndex - 1\n nextValue = getMaxDiff(panesList[nextAIndex]) + value\n break\n\n case value === 0:\n toMaxA()\n toMinB()\n nextAIndex = aIndex - 1\n nextBIndex = bIndex + 1\n nextValue = getMaxDiff(panesList[nextAIndex]) - getMinDiff(panesList[nextBIndex])\n break\n\n case value > 0:\n toMinB()\n nextBIndex = bIndex + 1\n nextValue = value - getMinDiff(panesList[nextBIndex])\n break\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex === 0 && bIndex < lastIndex:\n switch (true) {\n case value < 0:\n toMaxA()\n sum += synPanesMinToSize(panesList, bIndex + 1, lastIndex)\n paneB.minSize = maxPaneSize - sum\n return\n\n case value === 0:\n toMaxA()\n toMinB()\n synPanesMinToSize(panesList, bIndex + 1, lastIndex)\n return\n\n case value > 0:\n // not change from previous switch\n toMinB()\n nextBIndex = bIndex + 1\n nextValue = value - getMinDiff(panesList[nextBIndex])\n break\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex > 0 && bIndex === lastIndex:\n switch (true) {\n case value < 0:\n toMaxA()\n nextAIndex = aIndex - 1\n nextValue = getMaxDiff(panesList[nextAIndex]) + value\n break\n\n case value === 0:\n toMaxA()\n toMinB()\n synPanesMaxToSize(panesList, 0, aIndex - 1)\n return\n\n case value > 0:\n toMinB()\n sum += synPanesMaxToSize(panesList, 0, aIndex - 1)\n paneA.maxSize = maxPaneSize - sum\n return\n }\n break\n // ---------------------------------------------------------------------------------\n case aIndex === 0 && bIndex === lastIndex:\n // return for every case\n switch (true) {\n case value < 0:\n toMaxA()\n paneB.minSize = maxPaneSize - sum\n return\n\n case value === 0:\n toMinB()\n toMaxA()\n return\n\n case value > 0:\n toMinB()\n paneA.maxSize = maxPaneSize - sum\n return\n }\n }\n\n minMaxLogicDown(panesList, nextValue, nextAIndex, nextBIndex, sum, maxPaneSize)\n}\n\nexport const getMaxContainerSizes = ({getContainerRect, vertical, resizersList} :ResizableModel) => {\n const {top, height, left, width} = getContainerRect()\n const maxTopAxis = vertical ? left : top\n const containerSize = Math.round(vertical ? width : height)\n const resizersSize = getItemsSizeSum(resizersList)\n const maxPaneSize = containerSize - resizersSize\n\n return {\n containerSize,\n maxTopAxis,\n maxPaneSize\n }\n}\n\nexport const toRatioModeAllPanes = (resizable: ResizableModel, isOnResize = false) => {\n const {panesList, items} = resizable\n const {maxPaneSize} = getMaxContainerSizes(resizable)\n\n const maxRatioValue = getRatioSizeSum(panesList)\n if (maxRatioValue < 0) {\n return\n }\n\n panesList\n .forEach((pane: PaneModel) => {\n syncPaneSizeToRatioSize(pane)\n toRatioModePane(pane, maxPaneSize, maxRatioValue, isOnResize)\n })\n\n const sizeSum = getItemsSizeSum(panesList)\n const leftOverTotalSize = maxPaneSize - sizeSum\n const changeOperation = leftOverTotalSize < 0 ? CHANGE.REMOVE : CHANGE.ADD\n change1PixelToPanes(panesList, Math.abs(leftOverTotalSize), changeOperation)\n\n setUISizesFn(items)\n}\n\nexport const getChangeInViewSize = (resizable: ResizableModel) => {\n const {items} = resizable\n const {containerSize} = getMaxContainerSizes(resizable)\n const allItemsSum = getItemsSizeSum(items)\n return containerSize - allItemsSum\n}\n\nexport const clearflagsOnNewView = (resizable: ResizableModel, except?: IClearFlagsParam) => {\n const {panesList} = resizable\n if (except !== RATIO) {\n panesList.forEach(syncPaneRatioSizeToSize)\n }\n if (except !== VISIBILITY) {\n resizable.newVisibilityModel = false\n }\n if (except !== SET_SIZE) {\n resizable.setSizeKey = null\n }\n}\n","import {\n IResizableEvent, IJoinClassNameParam,\n UnitTypes, IBooleanOrUndefined, ISizeStyle\n} from '../@types'\nimport {\n\n DIRECTIONS,\n MIN_HEIGHT,\n MIN_WIDTH,\n RATIO\n} from './constant'\n\nexport const toPx = (size: number) => `${size}px`\nexport const getSizeKey = (vertical: boolean) => vertical ? 'width' : 'height'\nexport const getSizeStyle = (vertical: IBooleanOrUndefined, size: number): ISizeStyle => ({\n [getSizeKey(vertical)]: toPx(size)\n})\n\nexport const joinClassName = (param: IJoinClassNameParam) => {\n const keys = Object.keys(param)\n return keys.map((key) => param[key] ? key : '').join(' ')\n}\n\nexport const getContainerClass = (vertical: boolean, className: string, unit: UnitTypes) =>\n joinClassName({\n flex: true,\n 'f-row w-fit-content h-100p': vertical,\n 'f-column': !vertical,\n 'w-100p h-100p': unit === RATIO,\n [className]: className\n })\n\nexport const isTouchEvent = (event: any) => event.type.startsWith('touch')\n\nexport const getResizableEventFromTouch = (e: any, vertical: boolean, previousTouchEvent: any): IResizableEvent => {\n const currentTouch = e.targetTouches[0]\n const {pageX = 0, pageY = 0} = previousTouchEvent.current ?? {}\n previousTouchEvent.current = currentTouch\n if (vertical) {\n return [currentTouch.clientX, currentTouch.pageX - pageX]\n } else {\n return [currentTouch.clientY, currentTouch.pageY - pageY]\n }\n}\n\nexport const getResizableEventFromMouse = (e: any, vertical: boolean): IResizableEvent => {\n const {clientX, clientY, movementX, movementY} = e\n return vertical ? [clientX, movementX] : [clientY, movementY]\n}\n\nexport const getResizableEvent = (e: any, vertical: boolean, previousTouchEvent: any): IResizableEvent => {\n e.preventDefault()\n return isTouchEvent(e)\n ? getResizableEventFromTouch(e, vertical, previousTouchEvent)\n : getResizableEventFromMouse(e, vertical)\n}\n\n// it can be removed\nexport const getDirection = (movement: number) => movement < 0 ? DIRECTIONS.UP : DIRECTIONS.DOWN\n\nexport const toArray = (items: any) => Array.isArray(items) ? items : [items]\n\nexport const getSetSize = (node: any, vertical: boolean) => (size: number) => {\n node.style[getSizeKey(vertical)] = toPx(size)\n}\n\nexport const getSetResizerSize = (node: any, vertical: boolean) => (size: number) => {\n const getSizeKey = (vertical: boolean) => vertical ? MIN_WIDTH : MIN_HEIGHT\n node.style[getSizeKey(vertical)] = toPx(size)\n}\n\nexport const addDOMEvent = (node: HTMLElement | Document | Window,\n callBack: (e: any) => void, ...eventNames: string[]) => {\n eventNames.forEach((eventName) => node.addEventListener(eventName, callBack))\n}\n\nexport const addDOMEventPassive = (node: HTMLElement | Document | Window,\n callBack: (e: any) => void, eventName: string) => {\n node.addEventListener(eventName, callBack, {passive: false})\n}\n\nexport const removeDOMEvent = (node: HTMLElement | Document | Window,\n callBack: (e: any) => void, ...eventNames: string[]) => {\n eventNames.forEach((eventName) => node.removeEventListener(eventName, callBack))\n}\n","import {ReactElement} from 'react'\nimport {IStoreModel, IStoreResizableItemsModel} from '../@types'\nimport {findById} from './util'\nimport {ResizableModel} from '../models'\nimport {getStoreModel} from '../models/pane'\n\nexport const setStorage = (uniqueId : string, storageApi: any, resizable: ResizableModel) => {\n const {panesList} = resizable\n\n const objectToSave = {\n panes: panesList.map(getStoreModel)\n }\n\n if (storageApi) { storageApi.setItem(uniqueId, JSON.stringify(objectToSave)) }\n}\n\nexport class ResizeStorage {\n panesComponents: ReactElement[]\n store: any = null\n empty = false\n\n constructor (uniqueId: string, storageApi: any, panesComponents: ReactElement[]) {\n this.panesComponents = panesComponents\n this.getStorage(uniqueId, storageApi)\n }\n\n // eslint-disable-next-line complexity\n getStorage (uniqueId: string, storageApi: any): IStoreModel {\n const {store} = this\n if (store) {\n return store\n }\n\n let value: any\n if (storageApi) {\n value = storageApi.getItem(uniqueId)\n const parsedValue: IStoreModel = JSON.parse(value, function (key, value) {\n if (key === 'defaultMaxSize') {\n return Number(value)\n }\n return value\n })\n\n if (toString.call(parsedValue) === '[object Object]') {\n const {panes} = parsedValue\n\n if (panes) {\n const allSameIds = panes.every((pane, i) => this.panesComponents[i]?.props.id === pane.id)\n\n if (allSameIds && panes.length === this.panesComponents.length) {\n this.store = parsedValue\n return parsedValue\n } else {\n storageApi.removeItem(uniqueId)\n }\n } else {\n storageApi.removeItem(uniqueId)\n }\n }\n }\n this.empty = true\n this.store = {\n panes: []\n } as IStoreModel\n }\n\n // Removed from Call\n getStoredPane (id: string): IStoreResizableItemsModel | null {\n const {panes} = this.store\n return findById(panes, id) ?? null\n }\n}\n","import {IKeyToBoolMap} from '../@types'\nimport {CHANGE} from './constant'\nimport {ResizableModel, PaneModel} from '../models'\nimport {getSize, setPaneVisibility, setVisibilitySize, syncPaneToOldVisibilityModel} from '../models/pane'\nimport {\n change1PixelToPanes,\n getItemsSizeSum, getVisibleItems\n} from './panes'\nimport {getMaxContainerSizes} from './resizable-pane'\n\n// actionList it can be removed\nexport const updateSizeInRatio = (\n allVisiblePanes: PaneModel[],\n maxPaneSize: number,\n actionVisibleList: PaneModel[]\n) => {\n const currentPanesSize = getItemsSizeSum(allVisiblePanes)\n const sizeChange = maxPaneSize - currentPanesSize\n\n if (sizeChange === 0 || actionVisibleList.length === 0) {\n return\n }\n\n const operation = sizeChange > 0 ? CHANGE.ADD : CHANGE.REMOVE\n\n const sizeChangeAbsolute = Math.abs(sizeChange)\n\n if (sizeChangeAbsolute <= actionVisibleList.length) {\n change1PixelToPanes(actionVisibleList, sizeChangeAbsolute, operation)\n return\n }\n\n const ratioSum = getItemsSizeSum(actionVisibleList)\n\n const nextActionVisibleList: PaneModel[] = []\n actionVisibleList.forEach((pane) => {\n const size = getSize(pane)\n const newSize = Math.round(sizeChangeAbsolute * (size / ratioSum))\n\n const remainingSize = setVisibilitySize(pane, newSize, operation)\n if (remainingSize) {\n nextActionVisibleList.push(pane)\n }\n })\n\n updateSizeInRatio(allVisiblePanes, maxPaneSize, nextActionVisibleList)\n}\n\nexport const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) => {\n const {panesList, items} = resizable\n\n let first = -1\n for (let i = 0; i < items.length; i += 2) {\n const item = items[i]\n syncPaneToOldVisibilityModel(item)\n const {id} = item\n setPaneVisibility(item, idMap[id])\n\n setPaneVisibility(items[i + 1], false)\n if (item.visibility) {\n if (first !== -1) {\n setPaneVisibility(items[i - 1], true)\n }\n first = i\n }\n }\n\n const visiblePanes = getVisibleItems(panesList)\n const currentPanesSize = getItemsSizeSum(visiblePanes)\n\n if (currentPanesSize === 0) {\n visiblePanes.forEach((pane) => {\n pane.size = 1\n })\n }\n\n const {maxPaneSize} = getMaxContainerSizes(resizable)\n\n updateSizeInRatio(visiblePanes, maxPaneSize, visiblePanes)\n}\n","import {ISetSizeBehaviour, IResizableItem} from '../@types'\nimport {\n RATIO, BUTTOM_FIRST, TOP_FIRST,\n CHANGE\n} from './constant'\nimport {ResizableModel} from '../models'\nimport {\n changePaneSize, changePaneSizePlain, restoreLimits,\n restorePaneBeforeSetSize,\n storePaneForNewSetSizeKey, syncAxisSize\n} from '../models/pane'\nimport {\n getVisibleItems, getItemsSizeSum\n} from './panes'\nimport {getChangeInViewSize} from './resizable-pane'\nimport {findIndex} from './util'\nimport {updateSizeInRatio} from './visibility-helper'\n\nexport const setSizeTopAndBottom = (\n sizeChange: number,\n behavior: ISetSizeBehaviour,\n visibleItems: IResizableItem[],\n requestIndexInVisibleItems: number\n) => {\n let firstInningItems : IResizableItem[]\n let secondInningItems: IResizableItem[]\n const getActionOnItem = (operation: number) => (item: IResizableItem) => {\n syncAxisSize(item)\n restoreLimits(item)\n sizeChange = changePaneSize(item, sizeChange, operation)\n }\n\n const changeSizeOfFirstAndSecondInningsItems = () => {\n const orderList = [...firstInningItems, ...secondInningItems]\n let action = CHANGE.REMOVE\n\n if (sizeChange < 0) {\n sizeChange = Math.abs(sizeChange)\n action = CHANGE.ADD\n }\n orderList.forEach(getActionOnItem(action))\n }\n\n if (behavior === BUTTOM_FIRST) {\n firstInningItems = visibleItems.slice(requestIndexInVisibleItems + 2)\n secondInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse()\n changeSizeOfFirstAndSecondInningsItems()\n } else if (behavior === TOP_FIRST) {\n firstInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse()\n secondInningItems = visibleItems.slice(requestIndexInVisibleItems + 2)\n changeSizeOfFirstAndSecondInningsItems()\n }\n}\n\n// eslint-disable-next-line complexity\nexport const setSizeMethod = (\n resizable: ResizableModel, id: string, newSize: number,\n behavior: ISetSizeBehaviour = RATIO, isSecondAttemp = false) => {\n const {panesList, items} = resizable\n\n const visiblePanes = getVisibleItems(panesList)\n const visibleItems = getVisibleItems(items)\n\n const requestIndex = findIndex(visiblePanes, id)\n if (requestIndex === -1 || newSize < 0) {\n return\n }\n\n const currentSetSizeKey = `${id}-${behavior}`\n if (resizable.setSizeKey === currentSetSizeKey) {\n panesList.forEach(restorePaneBeforeSetSize)\n } else {\n panesList.forEach(storePaneForNewSetSizeKey)\n resizable.setSizeKey = currentSetSizeKey\n }\n\n const initialSizeSum = getItemsSizeSum(visiblePanes)\n\n const pane = visiblePanes[requestIndex]\n restoreLimits(pane)\n const preSize = pane.size\n\n const acceptableNewSize = changePaneSizePlain(pane, newSize)\n const sizeChange = acceptableNewSize - preSize\n\n if (!sizeChange) {\n return\n }\n const requestIndexInVisibleItems = findIndex(visibleItems, id)\n\n if (behavior === RATIO) {\n const remainingVisiblePanes = [...visiblePanes]\n remainingVisiblePanes.splice(requestIndex, 1)\n\n const newMaxPaneSizeAllowd = initialSizeSum - pane.size\n updateSizeInRatio(remainingVisiblePanes, newMaxPaneSizeAllowd, remainingVisiblePanes)\n }\n\n setSizeTopAndBottom(sizeChange, behavior, visibleItems, requestIndexInVisibleItems)\n\n if (!isSecondAttemp) {\n const changeInView = getChangeInViewSize(resizable)\n const allowedChange = acceptableNewSize + changeInView\n setSizeMethod(resizable, id, allowedChange, behavior, true)\n }\n}\n","import {ResizableModel} from '../models'\nimport {getSize} from '../models/pane'\nimport {addDOMEvent, addDOMEventPassive, getResizableEvent, removeDOMEvent} from '../utils/dom'\nimport {getVisibleItems} from '../utils/panes'\n\nimport throttle from 'throttleit'\nimport {sortNumber} from '../utils/util'\nimport {EVENT_NAMES} from '../utils/constant'\n\nexport const attachDetectionCoordinate = (resizable: ResizableModel) => {\n const {vertical, items, getContainerRect} = resizable\n\n const {left, top} = getContainerRect()\n\n let coordinatesSum = vertical ? left : top\n\n const visibleItems = getVisibleItems(items)\n const detectionCoordinate = []\n\n for (let i = 0; i < visibleItems.length - 1; i += 2) {\n const pane = visibleItems[i]\n if (!pane.isHandle) {\n const {defaultSize, id, detectionRadius} = visibleItems[i + 1]\n const size = getSize(pane)\n const resizerX1 = coordinatesSum + size - detectionRadius\n const resizerX2 = coordinatesSum + size + defaultSize + detectionRadius\n coordinatesSum += size + defaultSize\n detectionCoordinate.push([resizerX1, resizerX2, id])\n }\n }\n\n resizable.detectionDetails = detectionCoordinate\n}\n\nconst getMouseDownOnHandle = (\n resizable: ResizableModel,\n vertical: boolean,\n registerResizeEvent: any) => (e: any) => {\n const {detectionDetails} = resizable\n\n const [cursorCoordinate] = getResizableEvent(e, vertical, {})\n\n const resizerClickedCoordinateList = detectionDetails.map(([x1, x2]) => {\n const coordinates = Math.abs(((x1 + x2) / 2) - cursorCoordinate)\n return coordinates\n })\n\n const copyForSort = sortNumber(resizerClickedCoordinateList)\n\n const closestCoordinate = copyForSort.pop()\n\n const closestIndex = resizerClickedCoordinateList.indexOf(closestCoordinate)\n const [x1, x2, handleId] = detectionDetails[closestIndex]\n if (closestCoordinate <= ((x2 - x1) / 2)) {\n resizable.previousTouchEvent = e\n const resizableEvent = getResizableEvent(e, vertical, {})\n resizable.onMouseDown(resizableEvent, handleId)\n registerResizeEvent()\n }\n}\n\nconst onContainerMouseMove = (\n element: HTMLElement,\n resizable: ResizableModel,\n vertical: boolean,\n cursorStyle: string) => (e: any) => {\n const {detectionDetails} = resizable\n const cursorCoordinate = vertical ? e.clientX : e.clientY\n element.style.cursor = 'auto'\n detectionDetails.forEach(([x1, x2]) => {\n if (cursorCoordinate >= x1 && cursorCoordinate <= x2) {\n element.style.cursor = cursorStyle\n }\n })\n}\n\nconst getResize = (resizable: ResizableModel, vertical: boolean) => (e: any) => {\n const resizableEvent = getResizableEvent(e, vertical, resizable.previousTouchEvent)\n resizable.onMoveResize(resizableEvent)\n}\n\nexport const getDetectionService = (resizable: ResizableModel) => {\n const {vertical} = resizable\n const cursorStyle = vertical ? 'col-resize' : 'row-resize'\n\n const resize = getResize(resizable, vertical)\n\n const registerResizeEvent = () => {\n addDOMEvent(document, resize, EVENT_NAMES.mousemove)\n addDOMEventPassive(document, resize, EVENT_NAMES.touchmove)\n }\n\n const clearResizeEvent = () => {\n resizable.onMouseUp()\n removeDOMEvent(document, resize, EVENT_NAMES.mousemove, EVENT_NAMES.touchmove)\n }\n\n const onMouseDownOnHandle = getMouseDownOnHandle(resizable, vertical, registerResizeEvent)\n\n const startDetectionService = (containerNode: HTMLElement) => {\n const onGlobalMouseMoveDebounce = throttle(\n onContainerMouseMove(containerNode, resizable, vertical, cursorStyle), 100\n )\n\n // auto clear\n addDOMEventPassive(containerNode, onGlobalMouseMoveDebounce, EVENT_NAMES.mousemove)\n // auto clear\n addDOMEventPassive(containerNode, onGlobalMouseMoveDebounce, EVENT_NAMES.touchmove)\n // auto clear\n addDOMEvent(containerNode, onMouseDownOnHandle, EVENT_NAMES.mousedown)\n // auto clear\n addDOMEventPassive(containerNode, onMouseDownOnHandle, EVENT_NAMES.touchstart)\n\n addDOMEvent(document, clearResizeEvent, EVENT_NAMES.mouseup, EVENT_NAMES.touchend)\n }\n\n const clearDetectionService = () => {\n removeDOMEvent(document, clearResizeEvent, EVENT_NAMES.mouseup, EVENT_NAMES.touchend)\n }\n\n return [startDetectionService, clearDetectionService]\n}\n","import {createMap, findById} from '../utils/util'\nimport {\n DIRECTIONS,\n DEFAULT_MAX_SIZE_KEY,\n DEFAULT_MIN_SIZE_KEY,\n RATIO,\n SET_SIZE,\n SIZE,\n VISIBILITY\n} from '../utils/constant'\nimport {\n createPaneModelListAndResizerModelList,\n getPanesAndResizers,\n restoreFn,\n setUISizesFn,\n syncAxisSizesFn,\n updatSizeStateAllPanes,\n setMaxLimits\n} from '../utils/panes'\nimport {\n calculateAxes,\n getHandleIndex,\n movingLogic,\n setCurrentMinMax,\n toRatioModeAllPanes,\n getChangeInViewSize,\n getMaxContainerSizes,\n clearflagsOnNewView\n} from '../utils/resizable-pane'\nimport {getDirection, getSizeStyle, toArray} from '../utils/dom'\nimport {ResizeStorage, setStorage} from '../utils/storage'\nimport {\n IClearFlagsParam,\n IKeyToBoolMap,\n IResizableEvent,\n IResizablePaneProviderProps,\n ISetSizeBehaviour\n} from '../@types'\nimport {ResizableModel} from '../models'\nimport {setVisibilityFn} from '../utils/visibility-helper'\n\nimport {setSizeMethod} from '../utils/set-size-helper'\nimport {\n getSize, registerResizableItem, setPaneOldVisibilityModel,\n synSizeToMaxSize, synSizeToMinSize\n} from '../models/pane'\nimport {attachDetectionCoordinate} from '../services/detection-service'\n\nexport const getResizable = (\n props: IResizablePaneProviderProps\n): ResizableModel => {\n const {\n vertical,\n children,\n unit,\n uniqueId,\n storageApi,\n onResizeStop,\n onChangeVisibility,\n onResize\n } = props\n\n const myChildren = toArray(children)\n\n // reference will never change for these items: storage,\n // panesList, PaneModels, resizersList, ResizerModels\n const storage = new ResizeStorage(uniqueId, storageApi, myChildren)\n const items = createPaneModelListAndResizerModelList(\n myChildren,\n props,\n storage\n )\n // const resizersList = createResizerModelList(myChildren, props, storage)\n // reference will never change for these items: storage, panesList, resizersList\n\n const [panesList, resizersList] = getPanesAndResizers(items)\n\n const resizable = new ResizableModel()\n\n resizable.register({\n vertical,\n items,\n panesList,\n resizersList\n })\n\n const syncAxisSizes = () => syncAxisSizesFn(items)\n\n const emitResize = () => {\n const resizeParams = getIdToSizeMap()\n onResize(resizeParams)\n }\n\n const afterResizeStop = () => {\n const resizeParams = getIdToSizeMap()\n onResizeStop(resizeParams)\n setStorage(uniqueId, storageApi, resizable)\n attachDetectionCoordinate(resizable)\n }\n\n const emitChangeVisibility = () => {\n const map = getVisibilityState()\n onChangeVisibility(map)\n }\n\n const registerItem = (api: any, id: string) => {\n registerResizableItem(findById(items, id), api)\n }\n\n const registerContainer = (node: HTMLElement) => {\n resizable.getContainerRect = () => node.getBoundingClientRect()\n let visibilityMap = props.visibility\n if (storage.empty && unit === RATIO && !resizable.isSetRatioMode) {\n toRatioModeAllPanes(resizable)\n resizable.isSetRatioMode = true\n } else {\n const {panes} = storage.getStorage(uniqueId, storageApi)\n visibilityMap = createMap(panes, VISIBILITY)\n }\n setVisibilities(visibilityMap)\n }\n\n const getIdToSizeMap = () => createMap(panesList, SIZE)\n const getVisibilityState = () => createMap(panesList, VISIBILITY)\n\n const setMouseDownFlag = (isMouseDown: boolean) => {\n resizersList.forEach(({api}) => {\n api.setMouseDownFlag(resizable.handleId, isMouseDown)\n })\n }\n\n resizable.onMouseDown = ([mouseCoordinate]: IResizableEvent, handleId: string) => {\n const index = getHandleIndex(items, handleId)\n resizable.register({\n index,\n handleId,\n direction: DIRECTIONS.NONE,\n axisCoordinate: mouseCoordinate\n })\n setMouseDownFlag(true)\n syncAxisSizes()\n }\n\n const onNewView = (except: IClearFlagsParam = '') => {\n clearflagsOnNewView(resizable, except)\n updatSizeStateAllPanes(panesList)\n }\n\n resizable.onMoveResize = ([mouseCoordinate, movement]: IResizableEvent) => {\n if (resizable.isViewSizeChanged || !movement) {\n return\n }\n\n setDirection(mouseCoordinate, movement)\n const isAxisLimitReached = setAxisConfig(mouseCoordinate)\n\n if (isAxisLimitReached) {\n movingLogic(mouseCoordinate, resizable)\n }\n setUISizesFn(items)\n onNewView()\n emitResize()\n }\n\n const setDirection = (mouseCoordinate: number, movement: number) => {\n const {direction} = resizable\n const currentDirection = getDirection(movement)\n\n if (currentDirection !== direction) {\n resizable.direction = currentDirection\n directionChangeActions(mouseCoordinate)\n }\n }\n\n const directionChangeActions = (mouseCoordinate: number) => {\n resizable.axisCoordinate = mouseCoordinate\n\n syncAxisSizes()\n setCurrentMinMax(resizable)\n calculateAxes(resizable)\n }\n\n const setAxisConfig = (mouseCoordinate: number) => {\n const {topAxis, bottomAxis} = resizable\n\n if (mouseCoordinate <= topAxis) {\n setMaxLimits(resizable, synSizeToMinSize, synSizeToMaxSize, DIRECTIONS.UP)\n syncAxisSizes()\n resizable.axisCoordinate = topAxis\n return false\n } else if (mouseCoordinate >= bottomAxis) {\n setMaxLimits(resizable, synSizeToMaxSize, synSizeToMinSize, DIRECTIONS.DOWN)\n syncAxisSizes()\n resizable.axisCoordinate = bottomAxis\n return false\n }\n return true\n }\n\n const getPaneSizeStyle = (id: string) => {\n const size = getSize(findById(panesList, id))\n return getSizeStyle(vertical, size)\n }\n\n const reflectVisibilityChange = () => {\n setUISizesFn(items)\n afterResizeStop()\n emitChangeVisibility()\n onNewView(VISIBILITY)\n }\n\n // It is getting default empty Object param\n const setVisibilities = (param: IKeyToBoolMap) => {\n const {newVisibilityModel} = resizable\n\n const currentVisibilityMap = createMap(panesList, VISIBILITY)\n\n const newMap = {\n ...currentVisibilityMap,\n ...param\n }\n\n if (!newVisibilityModel) {\n resizable.newVisibilityModel = true\n panesList.forEach(setPaneOldVisibilityModel)\n }\n\n setVisibilityFn(resizable, newMap)\n const changeInViewSize = getChangeInViewSize(resizable)\n resizable.isViewSizeChanged = !!changeInViewSize\n reflectVisibilityChange()\n }\n\n resizable.onMouseUp = () => {\n afterResizeStop()\n setMouseDownFlag(false)\n }\n\n const restore = () => {\n restoreFn(resizable.items)\n onNewView()\n afterResizeStop()\n emitChangeVisibility()\n resizable.isViewSizeChanged = false\n }\n\n const getState = () => createMap(panesList, SIZE, VISIBILITY, DEFAULT_MIN_SIZE_KEY, DEFAULT_MAX_SIZE_KEY)\n const getVisibilities = () => getVisibilityState()\n\n const postSetSize = () => {\n setUISizesFn(items)\n afterResizeStop()\n onNewView(SET_SIZE)\n }\n\n const setSize = (\n id: string,\n newSize: number,\n behavior?: ISetSizeBehaviour\n ) => {\n setSizeMethod(resizable, id, newSize, behavior)\n postSetSize()\n }\n\n const setSizeRatio = (\n id: string,\n percent: number,\n behavior?: ISetSizeBehaviour) => {\n const {containerSize} = getMaxContainerSizes(resizable)\n const newSize = containerSize * percent\n setSizeMethod(resizable, id, newSize, behavior)\n postSetSize()\n }\n\n const api = {\n restore,\n setVisibilities,\n getSizes: getIdToSizeMap,\n getVisibilities,\n getState,\n setSize,\n setSizeRatio\n }\n\n resizable.register(\n {\n api,\n registerItem,\n registerContainer,\n vertical,\n props,\n getPaneSizeStyle\n }\n )\n return resizable\n}\n","import {createContext} from 'react'\nimport {ResizableModel} from '../../../resizable-core'\n\nexport const ResizablePaneContext = createContext({} as ResizableModel)\n","import {useCallback, useRef} from 'react'\nimport {noop} from '../../../resizable-core'\nexport function useHookWithRefCallback (callBack: any, callBackForNoNode: any = noop) {\n const ref = useRef(null)\n const setRef = useCallback((node: any) => {\n if (ref.current) {\n // Make sure to cleanup any events/references added to the last instance\n }\n\n if (node) {\n callBack(node)\n } else {\n callBackForNoNode(ref.current)\n }\n\n // Save a reference to the node\n ref.current = node\n }, [])\n\n return [setRef]\n}\n\n// https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780\n","import React, {\n useState,\n useContext, useCallback,\n isValidElement, cloneElement,\n ReactElement\n} from 'react'\nimport {ResizablePaneContext} from '../context/resizable-panes-context'\nimport {\n ResizableModel,\n getSetResizerSize, joinClassName,\n findIndex, getResizerId\n} from '../../../resizable-core'\n\nimport {useHookWithRefCallback} from '../hook/useHookWithRefCallback'\nimport {IResizer} from '../@types'\n\nexport const Resizer = (props: IResizer) => {\n const {children, id} = props\n const resizerId = getResizerId(id)\n\n const resizable = useContext(ResizablePaneContext)\n\n const {\n registerItem,\n panesList,\n vertical\n } = resizable\n\n const index = findIndex(panesList, id)\n const {resizerClass, activeResizerClass} = panesList[index].props\n\n const isNotLastIndex = index < (panesList.length - 1)\n\n const [isMouseDown, setIsMouseDown] = useState(false)\n\n const setMouseDownFlag = useCallback((id:string, isMouseDownFlag: boolean) => {\n if (resizerId === id) {\n setIsMouseDown(isMouseDownFlag)\n }\n }, [resizerId])\n\n const onNewRef = (node: any) => {\n const setSize = getSetResizerSize(node, vertical)\n registerItem({\n setSize,\n setMouseDownFlag\n }, resizerId)\n }\n\n // Does not run for the last element\n const [setResizerRef]: any = useHookWithRefCallback(onNewRef)\n\n const className = joinClassName({\n 'overflow-hidden': true,\n [activeResizerClass]: isMouseDown,\n [resizerClass]: !isMouseDown\n })\n\n const isValidCustomResizer = isValidElement(children)\n let cloneChild: ReactElement\n if (isValidCustomResizer) {\n cloneChild = cloneElement(children as ReactElement, {\n ...children.props as object,\n isMouseDown,\n id: `${resizerId}`\n\n })\n }\n\n if (isNotLastIndex) {\n return (\n \n {cloneChild}\n
\n )\n }\n return null\n}\n","import React, {useContext, Fragment, useState} from 'react'\nimport {IPane} from '../@types'\nimport {getSetSize, joinClassName, ResizableModel} from '../../../resizable-core'\nimport {ResizablePaneContext} from '../context/resizable-panes-context'\nimport {Resizer} from './resizer'\nimport {useHookWithRefCallback} from '../hook/useHookWithRefCallback'\n\nexport const Pane = (props: IPane) => {\n const resizable = useContext(ResizablePaneContext)\n\n const [mountIt, setMountIt] = useState(true)\n\n const {\n vertical,\n registerItem,\n getPaneSizeStyle,\n props: {resizer: parentResizer, unmountOnHide: unmountOnHideGlobal}\n } = resizable\n\n const {className, children, resizer, id, unmountOnHide} = props\n\n const shouldDestroy = unmountOnHide ?? unmountOnHideGlobal\n\n const [setPaneRef]: any = useHookWithRefCallback((node: HTMLElement) => {\n const setSize = getSetSize(node, vertical)\n const destroy = (visibility: boolean) => {\n if (shouldDestroy) {\n setMountIt(visibility)\n }\n }\n\n registerItem(\n {\n node,\n destroy,\n setSize\n },\n id\n )\n })\n\n const classname = joinClassName({\n 'overflow-hidden flex-shrink-0': true,\n [className]: className\n })\n\n const style = getPaneSizeStyle(id)\n\n return (\n \n \n {mountIt && children}\n
\n {resizer || parentResizer}\n \n )\n}\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, {useContext} from 'react'\nimport '../style.css'\nimport {IResizablePaneProviderProps} from '../@types'\nimport {getContainerClass, ResizableModel, getDetectionService} from '../../../resizable-core'\nimport {ResizablePaneContext} from '../context/resizable-panes-context'\nimport {useHookWithRefCallback} from '../hook/useHookWithRefCallback'\n\nexport const ResizablePanes = (props: IResizablePaneProviderProps) => {\n const {children, className, unit, vertical, uniqueId} = props\n\n const resizable = useContext(ResizablePaneContext)\n const {registerContainer} = resizable\n\n const [startDetectionService, clearDetectionService] = getDetectionService(resizable)\n\n const [containerRef]: any = useHookWithRefCallback(\n node => {\n registerContainer(node)\n startDetectionService(node)\n },\n clearDetectionService\n )\n\n const classname = getContainerClass(vertical, className, unit)\n\n return (\n \n {children}\n
\n )\n}\n","import React, {useEffect, useRef} from 'react'\n\nimport {\n ResizablePaneContext\n} from '../context/resizable-panes-context'\n\nimport {\n getResizable,\n deleteUndefined, noop,\n RATIO, RESIZE_HTML_EVENT,\n clearflagsOnNewView, toRatioModeAllPanes,\n attachDetectionCoordinate,\n addDOMEvent, removeDOMEvent\n} from '../../../resizable-core'\n\nimport {ResizablePanes} from './resizable-panes'\n\nimport {IResizablePaneProviderProps} from '../@types'\n\nconst emptyObhect = {}\n\nexport const attachDefaultPaneProps = (\n attachedProps: IResizablePaneProviderProps\n) => {\n const propsWithNoUndefined = deleteUndefined({...attachedProps})\n return {\n onResize: noop,\n onResizeStop: noop,\n onReady: noop,\n onChangeVisibility: noop,\n\n vertical: false,\n unit: RATIO,\n resizerSize: 2,\n detectionRadius: 6,\n visibility: emptyObhect,\n unmountOnHide: true,\n\n ...propsWithNoUndefined\n }\n}\n\nexport const ResizablePaneProvider = (props: IResizablePaneProviderProps) => {\n const currentProps = attachDefaultPaneProps(props)\n\n const {visibility, onReady, unit} = currentProps\n\n const resizableRef: any = useRef(getResizable(currentProps))\n\n const resizable = resizableRef.current\n const {api} = resizable\n\n useEffect(() => {\n const onResize = () => {\n if (unit === RATIO) {\n toRatioModeAllPanes(resizable, true)\n attachDetectionCoordinate(resizable)\n clearflagsOnNewView(resizable)\n }\n }\n addDOMEvent(window, onResize, RESIZE_HTML_EVENT)\n\n return () => removeDOMEvent(window, onResize, RESIZE_HTML_EVENT)\n }, [unit, resizable])\n\n const ref = useRef(true)\n useEffect(() => {\n onReady(api)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [api])\n\n useEffect(() => {\n if (ref.current === false) {\n resizableRef.current.api.setVisibilities(visibility)\n } else {\n ref.current = false\n }\n }, [visibility])\n\n return (\n \n \n \n )\n}\n","import React, {useEffect, useState} from 'react'\n\nexport const Loading = () => {\n const [isLoading, setIsLoading] = useState(true)\n // const [isRendering, setIsRendering] = useState(true)\n\n useEffect(() => {\n setTimeout(() => setIsLoading(false), 1000)\n }, [])\n\n // setIsLoading(true)\n // setTimeout(() => setIsRendering(false), 3000)\n\n return (\n \n {\n isLoading\n ?
Loading . . .
\n :
\n }\n
\n\n {/* {\n isRendering\n ? Rendering . . .
\n : .
\n } */}\n
\n )\n}\n","// bg-sky-500\nexport const paneClasses = [\n {\n hidden: \"bg-cyan-50\",\n ring: \"ring-cyan-950\",\n zipped: \"bg-cyan-300\",\n container: \"bg-cyan-200\",\n visible: \"bg-cyan-600 text-white\",\n },\n {\n hidden: \"bg-orange-50\",\n ring: \"ring-orange-950\",\n zipped: \"bg-orange-300\",\n container: \"bg-orange-200\",\n visible: \"bg-orange-600 text-white\",\n },\n {\n hidden: \"bg-lime-50\",\n ring: \"ring-lime-950\",\n zipped: \"bg-lime-300\",\n container: \"bg-lime-200\",\n visible: \"bg-lime-600 text-white\",\n },\n {\n hidden: \"bg-cyan-50\",\n ring: \"ring-cyan-950\",\n zipped: \"bg-cyan-300\",\n container: \"bg-cyan-200\",\n visible: \"bg-cyan-600 text-white\",\n },\n {\n hidden: \"bg-green-50\",\n ring: \"ring-green-950\",\n zipped: \"bg-green-300\",\n container: \"bg-green-200\",\n visible: \"bg-green-600 text-white\",\n },\n {\n hidden: \"bg-emerald-50\",\n ring: \"ring-emerald-950\",\n zipped: \"bg-emerald-300\",\n container: \"bg-emerald-200\",\n visible: \"bg-emerald-600 text-white\",\n },\n {\n hidden: \"bg-teal-50\",\n ring: \"ring-teal-950\",\n zipped: \"bg-teal-300\",\n container: \"bg-teal-200\",\n visible: \"bg-teal-600 text-white\",\n },\n].reverse();\n","import { Pane } from \"resizable-panes-react\";\nimport { PaneModelConfig } from \"../../../src/shared/models\";\nimport React from \"react\";\nimport { Loading } from \"../Loading\";\nimport { paneClasses } from \"./pane-css\";\nimport { ISelectList } from \"../form-controls/select\";\n\n\n\nexport const generatePaneModel = (list: PaneModelConfig[]) => {\n const paneComponentLists = list.map(({ size, minSize, maxSize }, index) => {\n\n return (\n \n \n {
{`P${index}`}
}\n \n \n \n )\n }\n\n );\n\n return paneComponentLists;\n};\n\nexport const getInitialVisibility = (list: any[]) => {\n const initalVisibility: any = {};\n\n list.forEach((_, index) => {\n initalVisibility[`P${index}`] = true;\n });\n\n return initalVisibility;\n};\n\nexport const getSelectListForPaneIds = (list: PaneModelConfig[]) => {\n const selectList: ISelectList[] = [];\n list.forEach((_, index) => {\n selectList.push({\n paneClasses: paneClasses[index],\n label: `P${index}`,\n value: `P${index}`,\n });\n });\n return selectList;\n};\n","function ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}\n\nfunction _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}\n\nfunction _wrapRegExp() {\n _wrapRegExp = function (re, groups) {\n return new BabelRegExp(re, void 0, groups);\n };\n\n var _super = RegExp.prototype,\n _groups = new WeakMap();\n\n function BabelRegExp(re, flags, groups) {\n var _this = new RegExp(re, flags);\n\n return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype);\n }\n\n function buildGroups(result, re) {\n var g = _groups.get(re);\n\n return Object.keys(g).reduce(function (groups, name) {\n return groups[name] = result[g[name]], groups;\n }, Object.create(null));\n }\n\n return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {\n var result = _super.exec.call(this, str);\n\n return result && (result.groups = buildGroups(result, this)), result;\n }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {\n if (\"string\" == typeof substitution) {\n var groups = _groups.get(this);\n\n return _super[Symbol.replace].call(this, str, substitution.replace(/\\$<([^>]+)>/g, function (_, name) {\n return \"$\" + groups[name];\n }));\n }\n\n if (\"function\" == typeof substitution) {\n var _this = this;\n\n return _super[Symbol.replace].call(this, str, function () {\n var args = arguments;\n return \"object\" != typeof args[args.length - 1] && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args);\n });\n }\n\n return _super[Symbol.replace].call(this, str, substitution);\n }, _wrapRegExp.apply(this, arguments);\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"];\n\n if (_i == null) return;\n var _arr = [];\n var _n = true;\n var _d = false;\n\n var _s, _e;\n\n try {\n for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nvar noop = function noop() {};\n\nvar _WINDOW = {};\nvar _DOCUMENT = {};\nvar _MUTATION_OBSERVER = null;\nvar _PERFORMANCE = {\n mark: noop,\n measure: noop\n};\n\ntry {\n if (typeof window !== 'undefined') _WINDOW = window;\n if (typeof document !== 'undefined') _DOCUMENT = document;\n if (typeof MutationObserver !== 'undefined') _MUTATION_OBSERVER = MutationObserver;\n if (typeof performance !== 'undefined') _PERFORMANCE = performance;\n} catch (e) {}\n\nvar _ref = _WINDOW.navigator || {},\n _ref$userAgent = _ref.userAgent,\n userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;\nvar WINDOW = _WINDOW;\nvar DOCUMENT = _DOCUMENT;\nvar MUTATION_OBSERVER = _MUTATION_OBSERVER;\nvar PERFORMANCE = _PERFORMANCE;\nvar IS_BROWSER = !!WINDOW.document;\nvar IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === 'function' && typeof DOCUMENT.createElement === 'function';\nvar IS_IE = ~userAgent.indexOf('MSIE') || ~userAgent.indexOf('Trident/');\n\nvar _familyProxy, _familyProxy2, _familyProxy3, _familyProxy4, _familyProxy5;\n\nvar NAMESPACE_IDENTIFIER = '___FONT_AWESOME___';\nvar UNITS_IN_GRID = 16;\nvar DEFAULT_CSS_PREFIX = 'fa';\nvar DEFAULT_REPLACEMENT_CLASS = 'svg-inline--fa';\nvar DATA_FA_I2SVG = 'data-fa-i2svg';\nvar DATA_FA_PSEUDO_ELEMENT = 'data-fa-pseudo-element';\nvar DATA_FA_PSEUDO_ELEMENT_PENDING = 'data-fa-pseudo-element-pending';\nvar DATA_PREFIX = 'data-prefix';\nvar DATA_ICON = 'data-icon';\nvar HTML_CLASS_I2SVG_BASE_CLASS = 'fontawesome-i2svg';\nvar MUTATION_APPROACH_ASYNC = 'async';\nvar TAGNAMES_TO_SKIP_FOR_PSEUDOELEMENTS = ['HTML', 'HEAD', 'STYLE', 'SCRIPT'];\nvar PRODUCTION = function () {\n try {\n return process.env.NODE_ENV === 'production';\n } catch (e) {\n return false;\n }\n}();\nvar FAMILY_CLASSIC = 'classic';\nvar FAMILY_SHARP = 'sharp';\nvar FAMILIES = [FAMILY_CLASSIC, FAMILY_SHARP];\n\nfunction familyProxy(obj) {\n // Defaults to the classic family if family is not available\n return new Proxy(obj, {\n get: function get(target, prop) {\n return prop in target ? target[prop] : target[FAMILY_CLASSIC];\n }\n });\n}\nvar PREFIX_TO_STYLE = familyProxy((_familyProxy = {}, _defineProperty(_familyProxy, FAMILY_CLASSIC, {\n 'fa': 'solid',\n 'fas': 'solid',\n 'fa-solid': 'solid',\n 'far': 'regular',\n 'fa-regular': 'regular',\n 'fal': 'light',\n 'fa-light': 'light',\n 'fat': 'thin',\n 'fa-thin': 'thin',\n 'fad': 'duotone',\n 'fa-duotone': 'duotone',\n 'fab': 'brands',\n 'fa-brands': 'brands',\n 'fak': 'kit',\n 'fakd': 'kit',\n 'fa-kit': 'kit',\n 'fa-kit-duotone': 'kit'\n}), _defineProperty(_familyProxy, FAMILY_SHARP, {\n 'fa': 'solid',\n 'fass': 'solid',\n 'fa-solid': 'solid',\n 'fasr': 'regular',\n 'fa-regular': 'regular',\n 'fasl': 'light',\n 'fa-light': 'light',\n 'fast': 'thin',\n 'fa-thin': 'thin'\n}), _familyProxy));\nvar STYLE_TO_PREFIX = familyProxy((_familyProxy2 = {}, _defineProperty(_familyProxy2, FAMILY_CLASSIC, {\n solid: 'fas',\n regular: 'far',\n light: 'fal',\n thin: 'fat',\n duotone: 'fad',\n brands: 'fab',\n kit: 'fak'\n}), _defineProperty(_familyProxy2, FAMILY_SHARP, {\n solid: 'fass',\n regular: 'fasr',\n light: 'fasl',\n thin: 'fast'\n}), _familyProxy2));\nvar PREFIX_TO_LONG_STYLE = familyProxy((_familyProxy3 = {}, _defineProperty(_familyProxy3, FAMILY_CLASSIC, {\n fab: 'fa-brands',\n fad: 'fa-duotone',\n fak: 'fa-kit',\n fal: 'fa-light',\n far: 'fa-regular',\n fas: 'fa-solid',\n fat: 'fa-thin'\n}), _defineProperty(_familyProxy3, FAMILY_SHARP, {\n fass: 'fa-solid',\n fasr: 'fa-regular',\n fasl: 'fa-light',\n fast: 'fa-thin'\n}), _familyProxy3));\nvar LONG_STYLE_TO_PREFIX = familyProxy((_familyProxy4 = {}, _defineProperty(_familyProxy4, FAMILY_CLASSIC, {\n 'fa-brands': 'fab',\n 'fa-duotone': 'fad',\n 'fa-kit': 'fak',\n 'fa-light': 'fal',\n 'fa-regular': 'far',\n 'fa-solid': 'fas',\n 'fa-thin': 'fat'\n}), _defineProperty(_familyProxy4, FAMILY_SHARP, {\n 'fa-solid': 'fass',\n 'fa-regular': 'fasr',\n 'fa-light': 'fasl',\n 'fa-thin': 'fast'\n}), _familyProxy4));\nvar ICON_SELECTION_SYNTAX_PATTERN = /fa(s|r|l|t|d|b|k|ss|sr|sl|st)?[\\-\\ ]/; // eslint-disable-line no-useless-escape\n\nvar LAYERS_TEXT_CLASSNAME = 'fa-layers-text';\nvar FONT_FAMILY_PATTERN = /Font ?Awesome ?([56 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp|Kit)?.*/i;\nvar FONT_WEIGHT_TO_PREFIX = familyProxy((_familyProxy5 = {}, _defineProperty(_familyProxy5, FAMILY_CLASSIC, {\n 900: 'fas',\n 400: 'far',\n normal: 'far',\n 300: 'fal',\n 100: 'fat'\n}), _defineProperty(_familyProxy5, FAMILY_SHARP, {\n 900: 'fass',\n 400: 'fasr',\n 300: 'fasl',\n 100: 'fast'\n}), _familyProxy5));\nvar oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar oneToTwenty = oneToTen.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);\nvar ATTRIBUTES_WATCHED_FOR_MUTATION = ['class', 'data-prefix', 'data-icon', 'data-fa-transform', 'data-fa-mask'];\nvar DUOTONE_CLASSES = {\n GROUP: 'duotone-group',\n SWAP_OPACITY: 'swap-opacity',\n PRIMARY: 'primary',\n SECONDARY: 'secondary'\n};\nvar prefixes = new Set();\nObject.keys(STYLE_TO_PREFIX[FAMILY_CLASSIC]).map(prefixes.add.bind(prefixes));\nObject.keys(STYLE_TO_PREFIX[FAMILY_SHARP]).map(prefixes.add.bind(prefixes));\nvar RESERVED_CLASSES = [].concat(FAMILIES, _toConsumableArray(prefixes), ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'beat', 'border', 'fade', 'beat-fade', 'bounce', 'flip-both', 'flip-horizontal', 'flip-vertical', 'flip', 'fw', 'inverse', 'layers-counter', 'layers-text', 'layers', 'li', 'pull-left', 'pull-right', 'pulse', 'rotate-180', 'rotate-270', 'rotate-90', 'rotate-by', 'shake', 'spin-pulse', 'spin-reverse', 'spin', 'stack-1x', 'stack-2x', 'stack', 'ul', DUOTONE_CLASSES.GROUP, DUOTONE_CLASSES.SWAP_OPACITY, DUOTONE_CLASSES.PRIMARY, DUOTONE_CLASSES.SECONDARY]).concat(oneToTen.map(function (n) {\n return \"\".concat(n, \"x\");\n})).concat(oneToTwenty.map(function (n) {\n return \"w-\".concat(n);\n}));\n\nvar initial = WINDOW.FontAwesomeConfig || {};\n\nfunction getAttrConfig(attr) {\n var element = DOCUMENT.querySelector('script[' + attr + ']');\n\n if (element) {\n return element.getAttribute(attr);\n }\n}\n\nfunction coerce(val) {\n // Getting an empty string will occur if the attribute is set on the HTML tag but without a value\n // We'll assume that this is an indication that it should be toggled to true\n if (val === '') return true;\n if (val === 'false') return false;\n if (val === 'true') return true;\n return val;\n}\n\nif (DOCUMENT && typeof DOCUMENT.querySelector === 'function') {\n var attrs = [['data-family-prefix', 'familyPrefix'], ['data-css-prefix', 'cssPrefix'], ['data-family-default', 'familyDefault'], ['data-style-default', 'styleDefault'], ['data-replacement-class', 'replacementClass'], ['data-auto-replace-svg', 'autoReplaceSvg'], ['data-auto-add-css', 'autoAddCss'], ['data-auto-a11y', 'autoA11y'], ['data-search-pseudo-elements', 'searchPseudoElements'], ['data-observe-mutations', 'observeMutations'], ['data-mutate-approach', 'mutateApproach'], ['data-keep-original-source', 'keepOriginalSource'], ['data-measure-performance', 'measurePerformance'], ['data-show-missing-icons', 'showMissingIcons']];\n attrs.forEach(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n attr = _ref2[0],\n key = _ref2[1];\n\n var val = coerce(getAttrConfig(attr));\n\n if (val !== undefined && val !== null) {\n initial[key] = val;\n }\n });\n}\n\nvar _default = {\n styleDefault: 'solid',\n familyDefault: 'classic',\n cssPrefix: DEFAULT_CSS_PREFIX,\n replacementClass: DEFAULT_REPLACEMENT_CLASS,\n autoReplaceSvg: true,\n autoAddCss: true,\n autoA11y: true,\n searchPseudoElements: false,\n observeMutations: true,\n mutateApproach: 'async',\n keepOriginalSource: true,\n measurePerformance: false,\n showMissingIcons: true\n}; // familyPrefix is deprecated but we must still support it if present\n\nif (initial.familyPrefix) {\n initial.cssPrefix = initial.familyPrefix;\n}\n\nvar _config = _objectSpread2(_objectSpread2({}, _default), initial);\n\nif (!_config.autoReplaceSvg) _config.observeMutations = false;\nvar config = {};\nObject.keys(_default).forEach(function (key) {\n Object.defineProperty(config, key, {\n enumerable: true,\n set: function set(val) {\n _config[key] = val;\n\n _onChangeCb.forEach(function (cb) {\n return cb(config);\n });\n },\n get: function get() {\n return _config[key];\n }\n });\n}); // familyPrefix is deprecated as of 6.2.0 and should be removed in 7.0.0\n\nObject.defineProperty(config, 'familyPrefix', {\n enumerable: true,\n set: function set(val) {\n _config.cssPrefix = val;\n\n _onChangeCb.forEach(function (cb) {\n return cb(config);\n });\n },\n get: function get() {\n return _config.cssPrefix;\n }\n});\nWINDOW.FontAwesomeConfig = config;\nvar _onChangeCb = [];\nfunction onChange(cb) {\n _onChangeCb.push(cb);\n\n return function () {\n _onChangeCb.splice(_onChangeCb.indexOf(cb), 1);\n };\n}\n\nvar d = UNITS_IN_GRID;\nvar meaninglessTransform = {\n size: 16,\n x: 0,\n y: 0,\n rotate: 0,\n flipX: false,\n flipY: false\n};\nfunction insertCss(css) {\n if (!css || !IS_DOM) {\n return;\n }\n\n var style = DOCUMENT.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n var headChildren = DOCUMENT.head.childNodes;\n var beforeChild = null;\n\n for (var i = headChildren.length - 1; i > -1; i--) {\n var child = headChildren[i];\n var tagName = (child.tagName || '').toUpperCase();\n\n if (['STYLE', 'LINK'].indexOf(tagName) > -1) {\n beforeChild = child;\n }\n }\n\n DOCUMENT.head.insertBefore(style, beforeChild);\n return css;\n}\nvar idPool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';\nfunction nextUniqueId() {\n var size = 12;\n var id = '';\n\n while (size-- > 0) {\n id += idPool[Math.random() * 62 | 0];\n }\n\n return id;\n}\nfunction toArray(obj) {\n var array = [];\n\n for (var i = (obj || []).length >>> 0; i--;) {\n array[i] = obj[i];\n }\n\n return array;\n}\nfunction classArray(node) {\n if (node.classList) {\n return toArray(node.classList);\n } else {\n return (node.getAttribute('class') || '').split(' ').filter(function (i) {\n return i;\n });\n }\n}\nfunction htmlEscape(str) {\n return \"\".concat(str).replace(/&/g, '&').replace(/\"/g, '"').replace(/'/g, ''').replace(/