{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/AppConfig.js\";\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { InputSwitch } from 'primereact/inputswitch';\nimport classNames from 'classnames';\nimport { Button } from \"primereact/button\";\nexport var AppConfig = function AppConfig(props) {\n var _useState = useState(false),\n _useState2 = _slicedToArray(_useState, 2),\n active = _useState2[0],\n setActive = _useState2[1];\n\n var _useState3 = useState(14),\n _useState4 = _slicedToArray(_useState3, 2),\n scale = _useState4[0],\n setScale = _useState4[1];\n\n var _useState5 = useState([12, 13, 14, 15, 16]),\n _useState6 = _slicedToArray(_useState5, 1),\n scales = _useState6[0];\n\n var _useState7 = useState('lara-light-indigo'),\n _useState8 = _slicedToArray(_useState7, 2),\n theme = _useState8[0],\n setTheme = _useState8[1];\n\n var config = useRef(null);\n var outsideClickListener = useRef(null);\n var unbindOutsideClickListener = useCallback(function () {\n if (outsideClickListener.current) {\n document.removeEventListener('click', outsideClickListener.current);\n outsideClickListener.current = null;\n }\n }, []);\n var hideConfigurator = useCallback(function (event) {\n setActive(false);\n unbindOutsideClickListener();\n event.preventDefault();\n }, [unbindOutsideClickListener]);\n var bindOutsideClickListener = useCallback(function () {\n if (!outsideClickListener.current) {\n outsideClickListener.current = function (event) {\n if (active && isOutsideClicked(event)) {\n hideConfigurator(event);\n }\n };\n\n document.addEventListener('click', outsideClickListener.current);\n }\n }, [active, hideConfigurator]);\n useEffect(function () {\n if (active) {\n bindOutsideClickListener();\n } else {\n unbindOutsideClickListener();\n }\n }, [active, bindOutsideClickListener, unbindOutsideClickListener]);\n\n var isOutsideClicked = function isOutsideClicked(event) {\n return !(config.current.isSameNode(event.target) || config.current.contains(event.target));\n };\n\n var decrementScale = function decrementScale() {\n setScale(function (prevState) {\n return --prevState;\n });\n };\n\n var incrementScale = function incrementScale() {\n setScale(function (prevState) {\n return ++prevState;\n });\n };\n\n useEffect(function () {\n document.documentElement.style.fontSize = scale + 'px';\n }, [scale]);\n\n var toggleConfigurator = function toggleConfigurator(event) {\n setActive(function (prevState) {\n return !prevState;\n });\n };\n\n var configClassName = classNames('layout-config', {\n 'layout-config-active': active\n });\n var replaceLink = useCallback(function (linkElement, href, callback) {\n if (isIE()) {\n linkElement.setAttribute('href', href);\n\n if (callback) {\n callback();\n }\n } else {\n var id = linkElement.getAttribute('id');\n var cloneLinkElement = linkElement.cloneNode(true);\n cloneLinkElement.setAttribute('href', href);\n cloneLinkElement.setAttribute('id', id + '-clone');\n linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);\n cloneLinkElement.addEventListener('load', function () {\n linkElement.remove();\n cloneLinkElement.setAttribute('id', id);\n\n if (callback) {\n callback();\n }\n });\n }\n }, []);\n useEffect(function () {\n var themeElement = document.getElementById('theme-link');\n var themeHref = 'assets/themes/' + theme + '/theme.css';\n replaceLink(themeElement, themeHref);\n }, [theme, replaceLink]);\n\n var isIE = function isIE() {\n return /(MSIE|Trident\\/|Edge\\/)/i.test(window.navigator.userAgent);\n };\n\n var changeTheme = function changeTheme(e, theme, scheme) {\n props.onColorModeChange(scheme);\n setTheme(theme);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n ref: config,\n className: configClassName,\n id: \"layout-config\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 118,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"layout-config-button p-link\",\n id: \"layout-config-button\",\n onClick: toggleConfigurator,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"i\", {\n className: \"pi pi-cog\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 17\n }\n })), /*#__PURE__*/React.createElement(Button, {\n className: \"p-button-danger layout-config-close p-button-rounded p-button-text\",\n icon: \"pi pi-times\",\n onClick: hideConfigurator,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 122,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"layout-config-content\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 124,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n className: \"mt-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 17\n }\n }, \"Component Scale\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"config-scale\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 126,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-minus\",\n onClick: decrementScale,\n className: \"p-button-text\",\n disabled: scale === scales[0],\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 127,\n columnNumber: 21\n }\n }), scales.map(function (item) {\n return /*#__PURE__*/React.createElement(\"i\", {\n className: classNames('pi pi-circle-on', {\n 'scale-active': item === scale\n }),\n key: item,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 36\n }\n });\n }), /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-plus\",\n onClick: incrementScale,\n className: \"p-button-text\",\n disabled: scale === scales[scales.length - 1],\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 136,\n columnNumber: 17\n }\n }, \"Input Style\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-formgroup-inline\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 137,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"input_outlined\",\n name: \"inputstyle\",\n value: \"outlined\",\n onChange: function onChange(e) {\n return props.onInputStyleChange(e.value);\n },\n checked: props.inputStyle === 'outlined',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 139,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"input_outlined\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 25\n }\n }, \"Outlined\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 142,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"input_filled\",\n name: \"inputstyle\",\n value: \"filled\",\n onChange: function onChange(e) {\n return props.onInputStyleChange(e.value);\n },\n checked: props.inputStyle === 'filled',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 143,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"input_filled\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 144,\n columnNumber: 25\n }\n }, \"Filled\"))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 148,\n columnNumber: 17\n }\n }, \"Ripple Effect\"), /*#__PURE__*/React.createElement(InputSwitch, {\n checked: props.rippleEffect,\n onChange: props.onRippleEffect,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 149,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 151,\n columnNumber: 17\n }\n }, \"Menu Type\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-formgroup-inline\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"static\",\n name: \"layoutMode\",\n value: \"static\",\n onChange: function onChange(e) {\n return props.onLayoutModeChange(e.value);\n },\n checked: props.layoutMode === 'static',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 154,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"static\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 155,\n columnNumber: 25\n }\n }, \"Static\")), /*#__PURE__*/React.createElement(\"div\", {\n className: \"field-radiobutton\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(RadioButton, {\n inputId: \"overlay\",\n name: \"layoutMode\",\n value: \"overlay\",\n onChange: function onChange(e) {\n return props.onLayoutModeChange(e.value);\n },\n checked: props.layoutMode === 'overlay',\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 158,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(\"label\", {\n htmlFor: \"overlay\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 159,\n columnNumber: 25\n }\n }, \"Overlay\"))), /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 163,\n columnNumber: 17\n }\n }, \"Themes\"), /*#__PURE__*/React.createElement(\"h6\", {\n className: \"mt-0\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 164,\n columnNumber: 17\n }\n }, \"Bootstrap\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 165,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'bootstrap4-light-blue', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 167,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/bootstrap4-light-blue.svg\",\n alt: \"Bootstrap Light Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 171,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'bootstrap4-light-purple', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 172,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/bootstrap4-light-purple.svg\",\n alt: \"Bootstrap Light Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 173,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'bootstrap4-dark-blue', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/bootstrap4-dark-blue.svg\",\n alt: \"Bootstrap Dark Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 178,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 181,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'bootstrap4-dark-purple', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 182,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/bootstrap4-dark-purple.svg\",\n alt: \"Bootstrap Dark Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 188,\n columnNumber: 17\n }\n }, \"Material Design\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 189,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 190,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'md-light-indigo', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 191,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-light-indigo.svg\",\n alt: \"Material Light Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 192,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 195,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'md-light-deeppurple', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 196,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-light-deeppurple.svg\",\n alt: \"Material Light DeepPurple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 197,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 200,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'md-dark-indigo', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 201,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-dark-indigo.svg\",\n alt: \"Material Dark Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 202,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 205,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'md-dark-deeppurple', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 206,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-dark-deeppurple.svg\",\n alt: \"Material Dark DeepPurple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 207,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 212,\n columnNumber: 17\n }\n }, \"Material Design Compact\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 213,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 214,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'mdc-light-indigo', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 215,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-light-indigo.svg\",\n alt: \"Material Light Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 216,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 219,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'mdc-light-deeppurple', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 220,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-light-deeppurple.svg\",\n alt: \"Material Light DeepPurple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 221,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 224,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'mdc-dark-indigo', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 225,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-dark-indigo.svg\",\n alt: \"Material Dark Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 226,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 229,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'mdc-dark-deeppurple', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 230,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/md-dark-deeppurple.svg\",\n alt: \"Material Dark DeepPurple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 231,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 236,\n columnNumber: 17\n }\n }, \"Tailwind\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 237,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 238,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'tailwind-light', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 239,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/tailwind-light.png\",\n alt: \"Tailwind Light\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 245,\n columnNumber: 17\n }\n }, \"Fluent UI\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 246,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 247,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'fluent-light', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 248,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/fluent-light.png\",\n alt: \"Fluent Light\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 249,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 254,\n columnNumber: 17\n }\n }, \"PrimeOne Design - 2022\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 255,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 256,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-light-indigo', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-light-indigo.png\",\n alt: \"Lara Light Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 258,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 261,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-light-blue', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 262,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-light-blue.png\",\n alt: \"Lara Light Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-light-purple', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 267,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-light-purple.png\",\n alt: \"Lara Light Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 268,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 271,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-light-teal', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 272,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-light-teal.png\",\n alt: \"Lara Light Teal\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 273,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 276,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-dark-indigo', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 277,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-dark-indigo.png\",\n alt: \"Lara Dark Indigo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 278,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 281,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-dark-blue', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 282,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-dark-blue.png\",\n alt: \"Lara Dark Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 283,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 286,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-dark-purple', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 287,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-dark-purple.png\",\n alt: \"Lara Dark Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 288,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 291,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'lara-dark-teal', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 292,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/lara-dark-teal.png\",\n alt: \"Lara Dark Teal\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 293,\n columnNumber: 29\n }\n })))), /*#__PURE__*/React.createElement(\"h6\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 17\n }\n }, \"PrimeOne Design - 2021\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid free-themes\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 299,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 300,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'saga-blue', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 301,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/saga-blue.png\",\n alt: \"Saga Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 305,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'saga-green', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/saga-green.png\",\n alt: \"Saga Green\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 307,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 310,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'saga-orange', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/saga-orange.png\",\n alt: \"Saga Orange\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 312,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 315,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'saga-purple', 'light');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/saga-purple.png\",\n alt: \"Saga Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 317,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'vela-blue', 'dim');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 321,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/vela-blue.png\",\n alt: \"Vela Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 322,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 325,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'vela-green', 'dim');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 326,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/vela-green.png\",\n alt: \"Vela Green\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 327,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 330,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'vela-orange', 'dim');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 331,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/vela-orange.png\",\n alt: \"Vela Orange\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 332,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 335,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'vela-purple', 'dim');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 336,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/vela-purple.png\",\n alt: \"Vela Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 337,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 340,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'arya-blue', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 341,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/arya-blue.png\",\n alt: \"Arya Blue\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 342,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 345,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'arya-green', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 346,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/arya-green.png\",\n alt: \"Arya Green\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 347,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 350,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'arya-orange', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 351,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/arya-orange.png\",\n alt: \"Arya Orange\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 352,\n columnNumber: 29\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-3 text-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 355,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"p-link\",\n onClick: function onClick(e) {\n return changeTheme(e, 'arya-purple', 'dark');\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 356,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/layout/images/themes/arya-purple.png\",\n alt: \"Arya Purple\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 357,\n columnNumber: 29\n }\n }))))));\n};","map":{"version":3,"names":["React","useCallback","useEffect","useRef","useState","RadioButton","InputSwitch","classNames","Button","AppConfig","props","active","setActive","scale","setScale","scales","theme","setTheme","config","outsideClickListener","unbindOutsideClickListener","current","document","removeEventListener","hideConfigurator","event","preventDefault","bindOutsideClickListener","isOutsideClicked","addEventListener","isSameNode","target","contains","decrementScale","prevState","incrementScale","documentElement","style","fontSize","toggleConfigurator","configClassName","replaceLink","linkElement","href","callback","isIE","setAttribute","id","getAttribute","cloneLinkElement","cloneNode","parentNode","insertBefore","nextSibling","remove","themeElement","getElementById","themeHref","test","window","navigator","userAgent","changeTheme","e","scheme","onColorModeChange","map","item","length","onInputStyleChange","value","inputStyle","rippleEffect","onRippleEffect","onLayoutModeChange","layoutMode"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/AppConfig.js"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { InputSwitch } from 'primereact/inputswitch';\nimport classNames from 'classnames';\nimport {Button} from \"primereact/button\";\n\nexport const AppConfig = (props) => {\n\n const [active, setActive] = useState(false);\n const [scale, setScale] = useState(14);\n const [scales] = useState([12,13,14,15,16]);\n const [theme, setTheme] = useState('lara-light-indigo');\n const config = useRef(null);\n let outsideClickListener = useRef(null);\n\n const unbindOutsideClickListener = useCallback(() => {\n if (outsideClickListener.current) {\n document.removeEventListener('click', outsideClickListener.current);\n outsideClickListener.current = null;\n }\n }, []);\n\n const hideConfigurator = useCallback((event) => {\n setActive(false);\n unbindOutsideClickListener();\n event.preventDefault();\n }, [unbindOutsideClickListener]);\n\n const bindOutsideClickListener = useCallback(() => {\n if (!outsideClickListener.current) {\n outsideClickListener.current = (event) => {\n if (active && isOutsideClicked(event)) {\n hideConfigurator(event);\n }\n };\n document.addEventListener('click', outsideClickListener.current);\n }\n }, [active, hideConfigurator]);\n\n useEffect(() => {\n if (active) {\n bindOutsideClickListener()\n }\n else {\n unbindOutsideClickListener()\n }\n }, [active, bindOutsideClickListener, unbindOutsideClickListener]);\n\n const isOutsideClicked = (event) => {\n return !(config.current.isSameNode(event.target) || config.current.contains(event.target));\n }\n\n const decrementScale = () => {\n setScale((prevState) => --prevState);\n }\n\n const incrementScale = () => {\n setScale((prevState) => ++prevState);\n }\n\n useEffect(() => {\n document.documentElement.style.fontSize = scale + 'px';\n }, [scale])\n\n const toggleConfigurator = (event) => {\n setActive(prevState => !prevState);\n }\n\n const configClassName = classNames('layout-config', {\n 'layout-config-active': active\n })\n\n const replaceLink = useCallback((linkElement, href, callback) => {\n if (isIE()) {\n linkElement.setAttribute('href', href);\n\n if (callback) {\n callback();\n }\n }\n else {\n const id = linkElement.getAttribute('id');\n const cloneLinkElement = linkElement.cloneNode(true);\n\n cloneLinkElement.setAttribute('href', href);\n cloneLinkElement.setAttribute('id', id + '-clone');\n\n linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);\n\n cloneLinkElement.addEventListener('load', () => {\n linkElement.remove();\n cloneLinkElement.setAttribute('id', id);\n\n if (callback) {\n callback();\n }\n });\n }\n },[])\n\n useEffect(() => {\n let themeElement = document.getElementById('theme-link');\n const themeHref = 'assets/themes/' + theme + '/theme.css';\n replaceLink(themeElement, themeHref);\n\n },[theme,replaceLink])\n\n const isIE = () => {\n return /(MSIE|Trident\\/|Edge\\/)/i.test(window.navigator.userAgent)\n }\n\n const changeTheme = (e, theme, scheme) => {\n props.onColorModeChange(scheme);\n setTheme(theme);\n }\n\n return (\n