{"version":3,"sources":["jsdelivr-header.js","/npm/react-ui-css-builder@0.0.20/src/definitions/index.js","/npm/react-ui-css-builder@0.0.20/src/components/styled.jsx","/npm/react-ui-css-builder@0.0.20/src/components/Tabs.js","/npm/react-ui-css-builder@0.0.20/src/components/Panel.js","/npm/react-ui-css-builder@0.0.20/src/components/propertyBrowser.jsx","/npm/react-ui-css-builder@0.0.20/src/components/control-template.js","/npm/react-ui-css-builder@0.0.20/src/components/accordion.js","/npm/react-ui-css-builder@0.0.20/src/themes/dark.jsx","/npm/react-ui-css-builder@0.0.20/src/themes/chalk.jsx","/npm/react-ui-css-builder@0.0.20/src/CssBuilder.jsx"],"names":[],"mappings":"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","file":"/npm/react-ui-css-builder@0.0.20/dist/index.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/react-ui-css-builder@0.0.20/dist/index.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","import b from './b.json'\r\nimport c from './c.json'\r\nimport d from './d.json'\r\nimport j from './j.json'\r\nimport u from './u.json'\r\nimport v from './v.json'\r\nimport w from './w.json'\r\nimport z from './z.json'\r\nimport h from './h.json'\r\n\r\nimport t2 from './definitions.json'\r\n\r\nimport a from './a.json'\r\n\r\nexport const Templates = a.concat(b, c, d, h, j, u, v, w, z)\r\n","import styled, { keyframes, css } from 'styled-components'\r\n\r\nconst fadeIn = keyframes`\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 100%;\r\n }\r\n`\r\n\r\nexport const CBSimpleButton = styled.input`\r\n padding: 8px;\r\n background-color: transparent;\r\n border: none;\r\n border-radius: 3px;\r\n letter-spacing: 0.2em;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\r\n border: 1px solid ${({ theme }) => theme.colors.button.borderColor};\r\n color: ${({ theme }) => theme.colors.color};\r\n display: block;\r\n &:hover {\r\n /* letter-spacing: 0.8em; */\r\n border-left: 10px solid ${({ theme }) => theme.colors.button.borderColor};\r\n }\r\n`\r\n\r\nexport const CBAccordion = styled.div`\r\n color: ${({ theme }) => theme.colors.color};\r\n > div > div:first-of-type {\r\n padding: 1em;\r\n color: ${({ theme }) => theme.colors.color};\r\n text-transform: uppercase;\r\n user-select: none;\r\n font-weight: 200;\r\n cursor: pointer;\r\n background-color: ${({ theme }) => theme.colors.background};\r\n border: 1px solid ${({ theme }) => theme.colors.accordion.border};\r\n }\r\n > div > div:last-of-type {\r\n background-color: ${({ theme }) => theme.colors.accordion.background};\r\n margin: 0 0.5em;\r\n box-shadow: 0 0 20px 2px ${({ theme }) => theme.colors.accordion.shadow};\r\n }\r\n .cb_accordion_item {\r\n padding: 1em;\r\n // opacity: 0;\r\n transition: opacity 300ms ease;\r\n overflow: auto;\r\n }\r\n > div:first-child .cb_accordion_item {\r\n max-height: 200px;\r\n }\r\n > div.open .cb_accordion_item {\r\n opacity: 1;\r\n transition: opacity 700ms ease;\r\n }\r\n img.cb_accordion_item {\r\n padding: 0;\r\n margin: 0;\r\n width: 100%;\r\n }\r\n`\r\n\r\nexport const CBToolbarButton = styled.button`\r\n padding: 4px 10px;\r\n font: 13px 'Montserrat';\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n text-align: center;\r\n opacity: 0.5;\r\n color: ${({ theme }) => theme.colors.color};\r\n background-color: transparent;\r\n transition: 0.2s ease-in-out;\r\n border: 0;\r\n border-bottom: transparent 3px solid;\r\n border-radius: 0px;\r\n cursor: pointer;\r\n &:hover {\r\n opacity: 1;\r\n background-color: transparent;\r\n border-bottom: ${({ theme }) => theme.colors.color} 3px solid;\r\n }\r\n`\r\nexport const CBToolbarAnchor = styled.a`\r\n padding: 4px 10px;\r\n font: 13px 'Montserrat';\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n text-align: center;\r\n opacity: 0.5;\r\n color: ${({ theme }) => theme.colors.color};\r\n background-color: transparent;\r\n transition: 0.2s ease-in-out;\r\n border: 0;\r\n border-bottom: transparent 3px solid;\r\n border-radius: 0px;\r\n cursor: pointer;\r\n &:hover {\r\n opacity: 1;\r\n background-color: transparent;\r\n border-bottom: ${({ theme }) => theme.colors.color} 3px solid;\r\n }\r\n`\r\n\r\nexport const CBGridRow = styled.div`\r\n display: grid;\r\n width: 100%;\r\n color: ${({ theme }) => theme.colors.color};\r\n`\r\n\r\nexport const CBGridCell = styled.div`\r\n width: 100%;\r\n margin-bottom: 1rem;\r\n > div {\r\n border: 1px solid ${({ theme }) => theme.colors.border};\r\n width: 100%;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n padding: 0 1rem;\r\n box-sizing: border-box;\r\n &:nth-child(2) {\r\n &:hover {\r\n border-color: ${({ theme }) => theme.colors.borderDark};\r\n }\r\n }\r\n &:nth-child(1) {\r\n border-left: 10px solid ${({ theme }) => theme.colors.border};\r\n font-weight: 500;\r\n }\r\n\r\n // justify-content: center;\r\n }\r\n`\r\n\r\nexport const CBInput = styled.input`\r\n border: none;\r\n outline: none;\r\n height: 100%;\r\n width: 100%;\r\n font-family: inherit;\r\n`\r\nexport const CBSelect = styled.select`\r\n border: none;\r\n outline: none;\r\n height: 100%;\r\n width: 100%;\r\n font-family: inherit;\r\n`\r\n\r\nexport const CBHelpTip = styled.div`\r\n margin: auto;\r\n text-align: center;\r\n border: 2px solid ${({ theme }) => theme.colors.border};\r\n border-radius: 50%;\r\n width: 20px;\r\n height: 20px;\r\n font-size: 10px;\r\n line-height: 20px;\r\n cursor: pointer;\r\n\r\n &:before {\r\n content: '?';\r\n font-family: sans-serif;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: ${({ theme }) => theme.colors.highlight};\r\n }\r\n\r\n &:hover p {\r\n display: block;\r\n\r\n transform-origin: 100% 0%;\r\n -webkit-animation: ${fadeIn} 0.3s ease;\r\n animation: ${fadeIn} 0.3s ease;\r\n }\r\n\r\n p {\r\n display: none;\r\n font-family: sans-serif;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n text-align: center;\r\n background-color: ${({ theme }) => theme.colors.background};\r\n padding: 12px 16px;\r\n z-index: 999999;\r\n width: 178px;\r\n height: auto;\r\n position: absolute;\r\n // left: 80%;\r\n transform: translate(-45%, 5%);\r\n border-radius: 3px;\r\n /* \tborder: 1px solid #E0E0E0; */\r\n box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);\r\n color: ${({ theme }) => theme.colors.color};\r\n font-size: 12px;\r\n line-height: 18px;\r\n z-index: 99;\r\n a {\r\n color: ${({ theme }) => theme.colors.highlight};\r\n text-decoration: none;\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n width: 0;\r\n height: 0;\r\n border: 10px solid transparent;\r\n border-bottom-color: ${({ theme }) => theme.colors.border};\r\n top: -9px;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n &:after {\r\n width: 10px;\r\n height: 40px;\r\n content: '';\r\n position: absolute;\r\n top: -40px;\r\n left: 0;\r\n }\r\n }\r\n`\r\n\r\nconst modalShowStyle = css`\r\n top: 0;\r\n`\r\nexport const CBModal = styled.div`\r\n display: block;\r\n position: fixed;\r\n\r\n top: 0;\r\n left: 0;\r\n width: 100vw !important;\r\n height: 100vh !important;\r\n z-index: 999;\r\n -webkit-backdrop-filter: blur(10px);\r\n backdrop-filter: blur(10px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n div {\r\n overflow: hidden !important;\r\n box-sizing: border-box;\r\n }\r\n > div {\r\n background: ${({ theme }) => theme.colors.background};\r\n border: 2px solid ${({ theme }) => theme.colors.border};\r\n width: 90%;\r\n height: 80%;\r\n border-radius: 8px;\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n height: 100%;\r\n padding: 1rem;\r\n }\r\n }\r\n\r\n ${(props) => props.state === '1' && modalShowStyle}\r\n`\r\n\r\nexport const CBAttributeRow = styled.div`\r\n cursor: pointer;\r\n border-left: 4px solid transparent;\r\n height: 40px;\r\n padding: 0px 1rem;\r\n &:hover {\r\n border-color: ${({ theme }) => theme.colors.highlight};\r\n background-color: ${({ theme }) => theme.colors.background};\r\n }\r\n > div {\r\n display: flex;\r\n align-items: center;\r\n }\r\n`\r\nexport const CBTabContainer = styled.div`\r\n display: flex;\r\n ul {\r\n display: flex;\r\n flex-direction: column;\r\n border-right: 1px solid ${({ theme }) => theme.colors.border};\r\n padding: 0 1rem 0rem 0;\r\n }\r\n > div {\r\n padding: 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n > div {\r\n overflow: auto !important;\r\n > div {\r\n &:nth-child(2) {\r\n height: 100%;\r\n }\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const CBFilterInput = styled.input`\r\n font-size: 12px;\r\n display: block;\r\n width: 100%;\r\n height: 36px;\r\n padding: 0 20px;\r\n background: ${({ theme }) => theme.colors.background};\r\n color: ${({ theme }) => theme.colors.color};\r\n border: 1px solid #3d85d8;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n &:focus {\r\n outline: none;\r\n ~ .cb_floating_label {\r\n top: -8px;\r\n font-size: 13px;\r\n }\r\n }\r\n`\r\n\r\nexport const CBTab = styled.div`\r\n width: 100%;\r\n padding: 25px;\r\n font-family: sans-serif;\r\n color: ${({ theme }) => theme.colors.color};\r\n ul.inline {\r\n list-style: none;\r\n padding: 0;\r\n margin-bottom: 0;\r\n -webkit-margin-before: 0;\r\n -webkit-margin-after: 0;\r\n -webkit-margin-start: 0px;\r\n -webkit-margin-end: 0px;\r\n -webkit-padding-start: 0px;\r\n }\r\n`\r\n\r\nexport const CBTabPanelList = styled.li`\r\n display: inline-block;\r\n margin-left: 0;\r\n padding: 10px;\r\n border-bottom: 2px solid ${({ theme }) => theme.colors.border};\r\n transition: all 0.5s;\r\n font-family: Lato, sans-serif;\r\n font-weight: 300;\r\n cursor: pointer;\r\n text-transform: capitalize;\r\n color: ${({ theme }) => theme.colors.color};\r\n opacity: ${(props) => (props.selected ? '1' : '0.5')};\r\n border-right: 4px solid\r\n ${(props) =>\r\n props.selected ? props.theme.colors.highlight : 'transparent'};\r\n`\r\n","import React, { Component, Fragment } from \"react\";\r\nimport {CBTab, CBTabPanelList} from './styled'\r\n\r\nclass Tabs extends Component {\r\n state = {\r\n selected: this.props.selected || 0\r\n };\r\n\r\n handleChange(index) {\r\n this.setState({ selected: index });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.children[this.state.selected]}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Tabs;\r\n","import React from \"react\";\r\n\r\nexport default function Panel(props) {\r\n console.log(\"Panel props.children: \", props.children);\r\n return
{props.children}
;\r\n}\r\n","import * as React from 'react'\r\nimport { useState, useEffect, Fragment } from 'react'\r\n\r\nimport { Templates } from '../definitions'\r\n// https://www.w3schools.com/cssref/\r\n\r\nimport Tabs from './Tabs'\r\nimport Panel from './Panel'\r\nimport {\r\n CBModal,\r\n CBAttributeRow,\r\n CBTabContainer,\r\n CBFilterInput\r\n} from './styled'\r\n\r\nexport const PropertyBrowser = ({\r\n selected,\r\n onChange,\r\n onClose,\r\n show,\r\n ...rest\r\n}) => {\r\n const [allProps, setAllProps] = useState([])\r\n const [sortedProps, setSortedProps] = useState({})\r\n\r\n useEffect(() => {\r\n let res = prepareList(Templates)\r\n setSortedProps(res)\r\n }, [])\r\n\r\n const onRowClicked = (val) => {\r\n if (onChange) {\r\n onChange(val)\r\n }\r\n }\r\n\r\n const onFilterTextChanged = (val) => {\r\n setSortedProps(\r\n prepareList(\r\n Templates.filter((t) => {\r\n return (\r\n t.display.indexOf(val) > -1 ||\r\n t.description.indexOf(val) > -1 ||\r\n t.propertyName.indexOf(val) > -1\r\n )\r\n })\r\n )\r\n )\r\n }\r\n\r\n const prepareList = (list) => {\r\n let res = {}\r\n res['#All'] = {}\r\n list.forEach((t) => {\r\n const index = t.display.substring(0, 1)\r\n res['#All'][index] = res['#All'][index] || []\r\n res['#All'][index].push(t)\r\n t.categories.forEach((c) => {\r\n res[c] = res[c] || {}\r\n res[c][index] = res[c][index] || []\r\n res[c][index].push(t)\r\n })\r\n })\r\n res = Object.keys(res)\r\n .sort()\r\n .reduce(function (result, key) {\r\n result[key] = res[key]\r\n return result\r\n }, {})\r\n return res\r\n }\r\n\r\n return (\r\n onClose()}>\r\n {\r\n e.stopPropagation()\r\n e.preventDefault()\r\n }}\r\n >\r\n
\r\n
\r\n
\r\n

CSS Attribute Browser

\r\n
\r\n
\r\n onClose()} />{' '}\r\n
\r\n
\r\n
\r\n onFilterTextChanged(e.target.value)}\r\n />\r\n {/* */}\r\n
\r\n\r\n \r\n \r\n {Object.keys(sortedProps)\r\n .sort()\r\n .map((catkey, cati) => {\r\n return (\r\n \r\n
\r\n {Object.keys(sortedProps[catkey])\r\n .sort()\r\n .map((index, indexi) => {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n {sortedProps[catkey][index].map((c, ci) => {\r\n return (\r\n onRowClicked(c)}\r\n key={ci}\r\n >\r\n
\r\n {c.display}\r\n
\r\n
\r\n {c.description}\r\n
\r\n \r\n )\r\n })}\r\n
\r\n
\r\n )\r\n })}\r\n
\r\n \r\n )\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n","import { useState, useEffect, Fragment } from \"react\";\r\nimport React from \"react\";\r\nimport {CBGridRow, CBGridCell, CBInput, CBSelect, CBHelpTip} from './styled'\r\n\r\nexport const ControlTemplate = ({field, onChange}) => {\r\n const [fieldData, setFieldData] = useState({});\r\n const [subFiledValues, setSubFieldValues] = useState([]);\r\n useEffect(() => {\r\n setFieldData(field || {});\r\n }, [field])\r\n\r\n const onPropertyValueChange = (value) => {\r\n fieldData.value = value;\r\n setFieldData({...fieldData});\r\n if(onChange) {\r\n if(typeof (fieldData.value) === 'string' && fieldData.value.indexOf(\"{\") === 0) {\r\n const v = JSON.parse(fieldData.value)\r\n if(typeof (v.value) === 'string' && v.value.indexOf(\"{\")) {\r\n } else {\r\n onChange((fieldData.valuetemplate || '{0}').replace(`{${0}}`, v.value)) \r\n }\r\n \r\n }\r\n else {\r\n onChange((fieldData.valuetemplate || '{0}').replace(`{${0}}`, value)) \r\n }\r\n }\r\n }\r\n\r\n const onSubControlValueChanged = (control, value, index, f) => {\r\n let res = f.valuetemplate || \"{0}\";\r\n for(var i =0; i<= index; i++) {\r\n subFiledValues[i] = subFiledValues[i] || '';\r\n }\r\n subFiledValues[index] = value;\r\n \r\n for(var j =0; j< subFiledValues.length; j++) {\r\n res = res.replace(`{${j}}`, subFiledValues[j]);\r\n }\r\n if(onChange) {\r\n onChange(res);\r\n }\r\n }\r\n\r\n const getSubControls =() => {\r\n const res = [];\r\n if(fieldData.value && typeof (fieldData.value) === 'string' && fieldData.value.indexOf(\"{\") === 0) {\r\n const obj = JSON.parse(fieldData.value);\r\n obj.value.controls.forEach((c, ci) => {\r\n res.push( {\r\n onSubControlValueChanged(c, val, ci, obj)\r\n }}/>)\r\n })\r\n }\r\n return res;\r\n }\r\n\r\n const getControl = () => {\r\n let res = []\r\n let output = [];\r\n switch (fieldData.type) {\r\n case 'select':\r\n output.push(\r\n
\r\n \r\n onPropertyValueChange(\r\n e.target.value,\r\n )\r\n }\r\n style={{ width: '100%' }}\r\n >\r\n {fieldData.options.map((o, oi) => {\r\n return (\r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n break\r\n case 'radio':\r\n output.push(\r\n
\r\n {fieldData.options.map((o, oi) => {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n )\r\n break\r\n\r\n case 'color':\r\n output.push(\r\n
\r\n \r\n onPropertyValueChange(\r\n e.target.value\r\n )\r\n }\r\n />\r\n
\r\n )\r\n break\r\n case 'number':\r\n output.push (\r\n
\r\n \r\n onPropertyValueChange(\r\n e.target.value\r\n )\r\n }\r\n />\r\n
\r\n )\r\n break;\r\n case 'range':\r\n output.push(\r\n
\r\n \r\n onPropertyValueChange(\r\n e.target.value * (fieldData.multiplier || 1),\r\n )\r\n }\r\n />\r\n
\r\n )\r\n break\r\n\r\n case 'text':\r\n output.push (\r\n
\r\n \r\n onPropertyValueChange(\r\n e.target.value\r\n )\r\n }\r\n />\r\n
\r\n )\r\n }\r\n res = res.concat([\r\n
{fieldData.label}
\r\n \r\n \r\n

{fieldData.description}
\r\n Default: {fieldData.default}
\r\n\t W3School Definition\r\n

\r\n\r\n
\r\n
{output}
\r\n ])\r\n res = res.concat(getSubControls())\r\n return res\r\n }\r\n\r\n const allcontrols = getControl()\r\n return (\r\n \r\n {getControl()}\r\n \r\n )\r\n}\r\n","import React from 'react'\r\nimport {CBAccordion, CBToolbarButton, CBToolbarAnchor} from './styled'\r\n\r\nclass Accordion extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n index: typeof props.selectedIndex !== 'undefined' ? props.selectedIndex : -1\r\n }\r\n this.nodes = []\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (typeof props.selectedIndex !== 'undefined' && this.state.index !== props.selectedIndex) {\r\n this.toggle(props.selectedIndex)\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n clearTimeout(this.timeout)\r\n }\r\n\r\n toggle(index, click) {\r\n clearTimeout(this.timeout)\r\n\r\n if (click) {\r\n if (this.props.onChange) this.props.onChange(index, this.state.index !== index, this.state.index !== index ? index : -1)\r\n if (!this.props.changeOnClick) return\r\n }\r\n\r\n if (this.state.index > -1) {\r\n const content = this.nodes[this.state.index].ref.children[1]\r\n content.style.height = `${content.children[0].offsetHeight}px` // Set fixed height before collapse of current open item\r\n }\r\n\r\n if (this.state.index === index || index === -1) {\r\n setTimeout(() => { this.setState({ index: -1 }) }, 50)\r\n } else {\r\n setTimeout(() => {\r\n this.setState({ index })\r\n this.timeout = setTimeout(() => {\r\n this.nodes[index].ref.children[1].style.height = 'auto' // Set auto height after expand\r\n }, this.props.transitionDuration)\r\n }, 50)\r\n }\r\n }\r\n\r\n getHeight(index) {\r\n if (index === this.state.index) {\r\n return this.nodes.length > index ? this.nodes[index].ref.children[1].children[0].offsetHeight : 'auto'\r\n }\r\n return 0\r\n }\r\n\r\n render() {\r\n const style = {\r\n overflow: 'hidden',\r\n transition: `height ${this.props.transitionDuration}ms ${this.props.transitionTimingFunction}`\r\n }\r\n const nodes = React.Children.map(this.props.children, (child, index) => (\r\n
{ this.nodes[index] = { ref: div } }} className={this.state.index === index ? this.props.openClassName : ''} >\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
this.toggle(index, true)} style={{flex:1}}>\r\n {child.props['data-header']}
\r\n
\r\n Help\r\n child.props['on-change-clicked']()}>Change\r\n child.props['on-remove-clicked']()}>Remove\r\n
\r\n
\r\n \r\n
{child}
\r\n
\r\n ))\r\n return {nodes}\r\n }\r\n}\r\n\r\nAccordion.defaultProps = {\r\n transitionDuration: 500,\r\n transitionTimingFunction: 'ease',\r\n openClassName: 'open',\r\n changeOnClick: true\r\n}\r\n\r\nexport default Accordion\r\n","export const dark = {\n meta: {\n name: 'dark',\n displayName: 'Dark'\n },\n colors: {\n background: '#121212',\n color: '#FFF',\n border: '#454545',\n borderDark: '#202125',\n highlight: '#7bc5ee',\n button: {\n borderColor: '#FFF'\n },\n accordion: {\n background: '#121212',\n shadow: '#FFF',\n border: '#EFEFEF'\n }\n }\n}\n","export const chalk = {\n meta: {\n name: 'chalk',\n displayName: 'Chalk'\n },\n colors: {\n background: '#FFF',\n color: '#454545',\n border: '#cdcdcd',\n borderDark: '#454545',\n highlight: '#067df7',\n button: {\n borderColor: '#454545'\n },\n accordion: {\n background: '#f9f9f9',\n shadow: '#cdcdcd',\n border: '#EFEFEF'\n }\n }\n}\n","import * as React from 'react'\r\nimport { useState, useEffect, Fragment } from 'react'\r\n// https://www.w3schools.com/cssref/\r\nimport { Templates } from './definitions'\r\nimport { PropertyBrowser } from './components/propertyBrowser'\r\nimport { ControlTemplate } from './components/control-template'\r\nimport './index.css'\r\nimport Accordion from './components/accordion'\r\nimport { CBSimpleButton } from './components/styled'\r\nimport { ThemeProvider } from 'styled-components'\r\nimport * as Themes from './themes'\r\n\r\nexport const CSSBuilder = ({\r\n tags,\r\n onChange,\r\n inline,\r\n baseTheme = 'chalk',\r\n themeOverride = {},\r\n config,\r\n ...rest\r\n}) => {\r\n const [allProps, setAllProps] = useState([])\r\n const [showPropertyBorwser, setShowPropertyBorwser] = useState(false)\r\n const [selectedProperty, setSelectedProperty] = useState(-1)\r\n const [selectedIndex, setSelectedIndex] = useState(-1)\r\n const [finalTheme, setFinalTheme] = React.useState({})\r\n const [loading, setLoading] = React.useState(true)\r\n\r\n useEffect(() => {\r\n let defaultTheme = Themes[baseTheme]\r\n const oTheme = themeOverride\r\n defaultTheme = Object.assign(defaultTheme, oTheme)\r\n setFinalTheme(defaultTheme)\r\n setLoading(false)\r\n }, [config])\r\n\r\n const onRowAdd = () => {\r\n setSelectedProperty(allProps.length)\r\n setShowPropertyBorwser(true)\r\n }\r\n\r\n const onPropertyChange = (value) => {\r\n setShowPropertyBorwser(false)\r\n allProps[selectedProperty] = Templates.filter((f) => {\r\n return f.name === value.name && f.propertyName === value.propertyName\r\n })[0]\r\n\r\n allProps[selectedProperty].controls.forEach((c) => {\r\n c.value = c.default ? c.default : ''\r\n })\r\n\r\n setAllProps(JSON.parse(JSON.stringify(allProps)))\r\n fireOnChange(allProps)\r\n setSelectedIndex(selectedProperty)\r\n }\r\n const onPropertyValueChange = (value, controlindex, rowindex) => {\r\n allProps[rowindex].controls[controlindex].value = `${\r\n allProps[rowindex].controls[controlindex].prefix || ''\r\n }${value}${allProps[rowindex].controls[controlindex].suffix || ''}`\r\n setAllProps(allProps)\r\n fireOnChange(allProps)\r\n }\r\n\r\n const camelCase = (input) => {\r\n return input.toLowerCase().replace(/-(.)/g, function (match, group1) {\r\n return group1.toUpperCase()\r\n })\r\n }\r\n\r\n const fireOnChange = (styles) => {\r\n let resStyle = inline ? {} : ''\r\n styles.forEach((row) => {\r\n if (Object.keys(row).length) {\r\n const styleName = inline\r\n ? camelCase(row.propertyName)\r\n : row.propertyName\r\n let styleValue = row.valuetemplate || '${0}'\r\n row.controls.forEach((c, ci) => {\r\n styleValue = styleValue.replace(`{${ci}}`, c.value || '')\r\n })\r\n\r\n if (inline) {\r\n resStyle[styleName] = styleValue\r\n } else {\r\n resStyle = `${resStyle}${styleName}:${styleValue};}`\r\n }\r\n }\r\n })\r\n if (onChange) {\r\n onChange(resStyle)\r\n }\r\n }\r\n\r\n return (\r\n \r\n {loading ? null : (\r\n \r\n \r\n
\r\n onRowAdd()}\r\n style={{ height: '40px' }}\r\n />\r\n
\r\n
\r\n setSelectedIndex(si)}\r\n >\r\n {allProps.map((prop, propi) => {\r\n return (\r\n {\r\n allProps.splice(propi, 1)\r\n setAllProps(JSON.parse(JSON.stringify(allProps)))\r\n fireOnChange(allProps)\r\n }}\r\n on-change-clicked={() => {\r\n setSelectedProperty(propi)\r\n setShowPropertyBorwser(true)\r\n }}\r\n >\r\n {prop.controls.map((c, ci) => {\r\n return (\r\n
\r\n
\r\n {\r\n onPropertyValueChange(val, ci, propi)\r\n }}\r\n />\r\n
\r\n
\r\n )\r\n })}\r\n
\r\n )\r\n })}\r\n \r\n \r\n\r\n {showPropertyBorwser ? (\r\n onPropertyChange(val)}\r\n onClose={() => setShowPropertyBorwser(false)}\r\n />\r\n ) : null}\r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n"]}