@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

package/react/components/common/FinsembleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleSelect.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, ReactNode } from \"react\";\r\nimport \"./css/selector.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\nimport { FinsembleToggle } from \"./FinsembleToggle\";\r\n\r\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\r\n\r\nconst removeItem = (startingArray: string[], removableItem: string) => {\r\n\tconst removableIndex = startingArray.indexOf(removableItem);\r\n\tif (removableIndex < 0) {\r\n\t\treturn startingArray;\r\n\t}\r\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\r\n};\r\n\r\nexport interface FinsembleSelectProps {\r\n\toptions: string[];\r\n\toptionComponents?: ReactNode[];\r\n\tvalues?: string[];\r\n\tselected?: string[];\r\n\tsize?: number;\r\n\tupdateCallback: (selectedValues: string[]) => void;\r\n\tshowSearch?: boolean;\r\n\tlimit?: number;\r\n}\r\n\r\nexport const FinsembleSelect = ({\r\n\toptions,\r\n\toptionComponents,\r\n\tupdateCallback,\r\n\tselected = [],\r\n\tsize,\r\n\tvalues = options,\r\n\tshowSearch = false,\r\n\tlimit = Infinity,\r\n}: FinsembleSelectProps) => {\r\n\tconst mappedOptions = options.map((option, index) => {\r\n\t\treturn { option, value: values[index] };\r\n\t});\r\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\r\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\r\n\r\n\t// Magic numbers\r\n\tconst height = size ? heightMultiplier * size : \"\";\r\n\r\n\t// Updating consumer\r\n\tconst doSetSelectedOptions = (opts: string[]) => {\r\n\t\tif (opts.length > limit) {\r\n\t\t\topts = opts.slice(limit * -1);\r\n\t\t}\r\n\r\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\r\n\t\t\tupdateCallback(opts);\r\n\t\t}\r\n\t\tsetSelectedOptions(opts);\r\n\t};\r\n\r\n\t// Event handlers\r\n\tconst changeHandler = (e: any) => {\r\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\r\n\t};\r\n\r\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n\t\t// TS doesn't complain if I use .currentTarget, but then I can't use Enzyme to test it, so here we are\r\n\t\tconst searchString = (e.target as HTMLInputElement).value;\r\n\t\tsetDisplayOptions(\r\n\t\t\tmappedOptions\r\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\r\n\t\t\t\t.map((combination) => {\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\t...combination,\r\n\t\t\t\t\t\toption: combination.option.replace(\r\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\r\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t};\r\n\t\t\t\t})\r\n\t\t);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div className=\"emperorSelectContainer\">\r\n\t\t\t\t{showSearch && (\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\r\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\r\n\t\t\t\t\t</>\r\n\t\t\t\t)}\r\n\t\t\t\t<select className=\"shogunSelect\" multiple onChange={changeHandler}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\r\n\t\t\t\t\t\t\t{option}\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</select>\r\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\r\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\r\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\r\n\t\t\t\t\t\t\t<label>\r\n\t\t\t\t\t\t\t\t<FinsembleToggle\r\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) || selected.includes(value)}\r\n\t\t\t\t\t\t\t\t\tonChange={() => {\r\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) || selected.includes(value)) {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\r\n\t\t\t\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t></FinsembleToggle>\r\n\t\t\t\t\t\t\t\t{optionComponents?.[index] ? (\r\n\t\t\t\t\t\t\t\t\toptionComponents?.[index]\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleSelect.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AACnD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,UAAU,GAAG,CAAC,aAAuB,EAAE,aAAqB,EAAE,EAAE;IACrE,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,IAAI,cAAc,GAAG,CAAC,EAAE;QACvB,OAAO,aAAa,CAAC;KACrB;IACD,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/F,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,QAAQ,GAAG,EAAE,EACb,IAAI,EACJ,MAAM,GAAG,OAAO,EAChB,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,QAAQ,GACM,EAAE,EAAE;IAC1B,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACnD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,QAAQ,CAAC,CAAC;IAC3E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAGpE,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAGnD,MAAM,oBAAoB,GAAG,CAAC,IAAc,EAAE,EAAE;QAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK,EAAE;YACxB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE;YAC7D,cAAc,CAAC,IAAI,CAAC,CAAC;SACrB;QACD,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAGF,MAAM,aAAa,GAAG,CAAC,CAAM,EAAE,EAAE;QAChC,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAwC,EAAE,EAAE;QAEjE,MAAM,YAAY,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAC1D,iBAAiB,CAChB,aAAa;aACX,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC;aAC1F,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;YACpB,uCACI,WAAW,KACd,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CACjC,IAAI,MAAM,CAAC,IAAI,YAAY,GAAG,EAAE,GAAG,CAAC,EACpC,mCAAmC,CACnC,IACA;QACH,CAAC,CAAC,CACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACN;QACC,6BAAK,SAAS,EAAC,wBAAwB;YACrC,UAAU,IAAI,CACd;gBACC,oBAAC,aAAa,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,GAAiB;gBACpE,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,gBAAY,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,GAAI,CACtG,CACH;YACD,gCAAQ,SAAS,EAAC,cAAc,EAAC,QAAQ,QAAC,QAAQ,EAAE,aAAa,IAC/D,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAa,EAAE,EAAE,CAAC,CACzD,gCAAQ,GAAG,EAAE,iBAAiB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IACjD,MAAM,CACC,CACT,CAAC,CACM;YACT,6BAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IACnE,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAa,EAAE,EAAE,CAAC,CACzD,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,KAAK,EAAE;gBAC5D;oBACC,oBAAC,eAAe,IACf,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpE,QAAQ,EAAE,GAAG,EAAE;4BACd,IAAI,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;gCAChE,oBAAoB,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;6BACzD;iCAAM;gCACN,oBAAoB,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;6BACtD;wBACF,CAAC,GACiB;oBAClB,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,EAAC,CAAC,CAAC,CAC5B,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CACzB,CAAC,CAAC,CAAC,CACH,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAS,CAC1D,CACM,CACH,CACN,CAAC,CACG,CACD,CACJ,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState, ReactNode } from \"react\";\nimport \"./css/selector.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport { FinsembleToggle } from \"./FinsembleToggle\";\n\nconst heightMultiplier = 40; // It works in storybook, but we will probably want a better way of detecting this soon.\n\nconst removeItem = (startingArray: string[], removableItem: string) => {\n\tconst removableIndex = startingArray.indexOf(removableItem);\n\tif (removableIndex < 0) {\n\t\treturn startingArray;\n\t}\n\treturn startingArray.slice(0, removableIndex).concat(startingArray.slice(removableIndex + 1));\n};\n\nexport interface FinsembleSelectProps {\n\toptions: string[];\n\toptionComponents?: ReactNode[];\n\tvalues?: string[];\n\tselected?: string[];\n\tsize?: number;\n\tupdateCallback: (selectedValues: string[]) => void;\n\tshowSearch?: boolean;\n\tlimit?: number;\n}\n\nexport const FinsembleSelect = ({\n\toptions,\n\toptionComponents,\n\tupdateCallback,\n\tselected = [],\n\tsize,\n\tvalues = options,\n\tshowSearch = false,\n\tlimit = Infinity,\n}: FinsembleSelectProps) => {\n\tconst mappedOptions = options.map((option, index) => {\n\t\treturn { option, value: values[index] };\n\t});\n\tconst [selectedOptions, setSelectedOptions] = useState<string[]>(selected);\n\tconst [displayOptions, setDisplayOptions] = useState(mappedOptions);\n\n\t// Magic numbers\n\tconst height = size ? heightMultiplier * size : \"\";\n\n\t// Updating consumer\n\tconst doSetSelectedOptions = (opts: string[]) => {\n\t\tif (opts.length > limit) {\n\t\t\topts = opts.slice(limit * -1);\n\t\t}\n\n\t\tif (JSON.stringify(opts) !== JSON.stringify(selectedOptions)) {\n\t\t\tupdateCallback(opts);\n\t\t}\n\t\tsetSelectedOptions(opts);\n\t};\n\n\t// Event handlers\n\tconst changeHandler = (e: any) => {\n\t\tdoSetSelectedOptions(Array.from(e.target.selectedOptions).map((option: any) => option.value));\n\t};\n\n\tconst updateSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t// TS doesn't complain if I use .currentTarget, but then I can't use Enzyme to test it, so here we are\n\t\tconst searchString = (e.target as HTMLInputElement).value;\n\t\tsetDisplayOptions(\n\t\t\tmappedOptions\n\t\t\t\t.filter((optionMap) => optionMap.option.toUpperCase().includes(searchString.toUpperCase()))\n\t\t\t\t.map((combination) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...combination,\n\t\t\t\t\t\toption: combination.option.replace(\n\t\t\t\t\t\t\tnew RegExp(`(${searchString})`, \"i\"),\n\t\t\t\t\t\t\t`<span class=\"highlight\">$1</span>`\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"emperorSelectContainer\">\n\t\t\t\t{showSearch && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<FinsembleIcon className=\"searchIcon\" icon=\"search\"></FinsembleIcon>\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"Search\" aria-label=\"search\" className=\"search\" onInput={updateSearch} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<select className=\"shogunSelect\" multiple onChange={changeHandler}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<option key={`shogun-option-${index}`} value={value}>\n\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</select>\n\t\t\t\t<div className=\"emperorSelect\" style={height === \"\" ? {} : { height }}>\n\t\t\t\t\t{displayOptions.map(({ option, value }, index: number) => (\n\t\t\t\t\t\t<div className=\"emperorOption\" key={`emperor-option-${index}`}>\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\t<FinsembleToggle\n\t\t\t\t\t\t\t\t\tchecked={selectedOptions.includes(value) || selected.includes(value)}\n\t\t\t\t\t\t\t\t\tonChange={() => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOptions.includes(value) || selected.includes(value)) {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(removeItem(selectedOptions, value));\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tdoSetSelectedOptions(selectedOptions.concat([value]));\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t></FinsembleToggle>\n\t\t\t\t\t\t\t\t{optionComponents?.[index] ? (\n\t\t\t\t\t\t\t\t\toptionComponents?.[index]\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span dangerouslySetInnerHTML={{ __html: option }}></span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}

package/react/components/common/FinsembleToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAwB,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BAAM,SAAS,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACtG,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAkB;QAC7G,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,IACb,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport \"./css/toggle.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport interface FinsembleToggleProps {\r\n\tlabel?: string;\r\n\tchecked: boolean;\r\n\tonChange: (selected: boolean) => void;\r\n}\r\n\r\nexport const FinsembleToggle = ({ checked, onChange, label }: FinsembleToggleProps) => {\r\n\tconst [selected, setSelected] = useState(checked);\r\n\r\n\tfunction doSetSelected(newValue: boolean) {\r\n\t\tonChange(newValue);\r\n\t\tsetSelected(newValue);\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tsetSelected(checked);\r\n\t}, [checked]);\r\n\r\n\treturn (\r\n\t\t<span className={[\"finsembleToggle\", selected ? \"finsembleToggle-on\" : \"finsembleToggle-off\"].join(\" \")}>\r\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"}></FinsembleIcon>\r\n\t\t\t<input\r\n\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\tdoSetSelected(e.target.checked);\r\n\t\t\t\t}}\r\n\t\t\t\tchecked={selected}\r\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\r\n\t\t\t/>\r\n\t\t</span>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"FinsembleToggle.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAwB,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAElD,SAAS,aAAa,CAAC,QAAiB;QACvC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,8BAAM,SAAS,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACtG,oBAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAkB;QAC7G,6CACC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC,EACD,OAAO,EAAE,QAAQ,IACb,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACzC,CACI,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./css/toggle.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport interface FinsembleToggleProps {\n\tlabel?: string;\n\tchecked: boolean;\n\tonChange: (selected: boolean) => void;\n}\n\nexport const FinsembleToggle = ({ checked, onChange, label }: FinsembleToggleProps) => {\n\tconst [selected, setSelected] = useState(checked);\n\n\tfunction doSetSelected(newValue: boolean) {\n\t\tonChange(newValue);\n\t\tsetSelected(newValue);\n\t}\n\n\tuseEffect(() => {\n\t\tsetSelected(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<span className={[\"finsembleToggle\", selected ? \"finsembleToggle-on\" : \"finsembleToggle-off\"].join(\" \")}>\n\t\t\t<FinsembleIcon className=\"finsembleToggle-icon\" icon={selected ? \"toggle-on\" : \"toggle-off\"}></FinsembleIcon>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tonChange={(e) => {\n\t\t\t\t\tdoSetSelected(e.target.checked);\n\t\t\t\t}}\n\t\t\t\tchecked={selected}\n\t\t\t\t{...(label ? { \"aria-label\": label } : \"\")}\n\t\t\t/>\n\t\t</span>\n\t);\n};\n"]}

package/react/components/common/Header.js

@@ -15,5 +15,5 @@ export const Header = (props) => (React.createElement("div", { className: "view-
                     }
                 } })),
             props.children),
-        props.helpFunction && React.createElement(ButtonIcon, { icon: "life-ring", text: "Help", onClick: props.helpFunction }))));
+        props.helpFunction && React.createElement(ButtonIcon, { icon: "documentation", text: "Documentation", onClick: props.helpFunction }))));
 //# sourceMappingURL=Header.js.map

package/react/components/common/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/common/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC7C,6BAAK,SAAS,EAAC,aAAa;IAC3B,4BAAI,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,UAAU;YACvB,KAAK,CAAC,YAAY,IAAI,CACtB,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,cAAc,EACzB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;oBACnD,IAAI,KAAK,CAAC,YAAY,EAAE;wBACvB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;qBACtB;gBACF,CAAC,GACA,CACF;YAEA,KAAK,CAAC,QAAQ,CACV;QACL,KAAK,CAAC,YAAY,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAI,CAC3F,CACA,CACN,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { ButtonIcon } from \"./ButtonIcon\";\r\nimport \"./css/header.css\";\r\n\r\nexport interface HeaderProps {\r\n\tchildren: string;\r\n\tbackFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n\thelpFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n}\r\n\r\nexport const Header = (props: HeaderProps) => (\r\n\t<div className=\"view-header\">\r\n\t\t<h1 className=\"view-title\">\r\n\t\t\t<div className=\"leftSide\">\r\n\t\t\t\t{props.backFunction && (\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tfashion=\"primary\"\r\n\t\t\t\t\t\ticonBefore=\"chevron-left\"\r\n\t\t\t\t\t\ttext=\"Back\"\r\n\t\t\t\t\t\tonClick={(e: React.MouseEvent<HTMLButtonElement>) => {\r\n\t\t\t\t\t\t\tif (props.backFunction) {\r\n\t\t\t\t\t\t\t\tprops.backFunction(e);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{props.children}\r\n\t\t\t</div>\r\n\t\t\t{props.helpFunction && <ButtonIcon icon=\"life-ring\" text=\"Help\" onClick={props.helpFunction} />}\r\n\t\t</h1>\r\n\t</div>\r\n);\r\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/common/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC7C,6BAAK,SAAS,EAAC,aAAa;IAC3B,4BAAI,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,UAAU;YACvB,KAAK,CAAC,YAAY,IAAI,CACtB,oBAAC,MAAM,IACN,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,cAAc,EACzB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;oBACnD,IAAI,KAAK,CAAC,YAAY,EAAE;wBACvB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;qBACtB;gBACF,CAAC,GACA,CACF;YAEA,KAAK,CAAC,QAAQ,CACV;QACL,KAAK,CAAC,YAAY,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,eAAe,EAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAI,CACxG,CACA,CACN,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React from \"react\";\nimport { Button } from \"./Button\";\nimport { ButtonIcon } from \"./ButtonIcon\";\nimport \"./css/header.css\";\n\nexport interface HeaderProps {\n\tchildren: string;\n\tbackFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\thelpFunction?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const Header = (props: HeaderProps) => (\n\t<div className=\"view-header\">\n\t\t<h1 className=\"view-title\">\n\t\t\t<div className=\"leftSide\">\n\t\t\t\t{props.backFunction && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tfashion=\"primary\"\n\t\t\t\t\t\ticonBefore=\"chevron-left\"\n\t\t\t\t\t\ttext=\"Back\"\n\t\t\t\t\t\tonClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\t\t\t\tif (props.backFunction) {\n\t\t\t\t\t\t\t\tprops.backFunction(e);\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)}\n\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t\t{props.helpFunction && <ButtonIcon icon=\"documentation\" text=\"Documentation\" onClick={props.helpFunction} />}\n\t\t</h1>\n\t</div>\n);\n"]}

package/react/components/common/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/common/ImagePreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAqB,MAAM,aAAa,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAEpD,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC3B,mCAAe,CAAA;IACf,mCAAe,CAAA;AAChB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAYD,IAAI,gBAAgB,GAAG,CAAC,CAAC;AAEzB,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,EAAE,CACnD,IAAI;KACF,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;KACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAAC,KAAK,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5B;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,CAAC,IAAU,EAAE,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,6BAAK,SAAS,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzF,oBAAC,SAAS,kBACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE;oBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,WAAW,EACvB,gBAAgB,EAAE,IAAI,IAClB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B;YAEZ,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,GAAO,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gBAAgB;gBAC9B,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,UAAU,EAAE,GAAI,CACtD,CACN,CACI,CACI,CACX,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useEffect } from \"react\";\r\n\r\nimport { FileInput, FileInputUploadCb } from \"./FileInput\";\r\nimport \"./css/image-preview.css\";\r\nimport { DropZone, FileWithPath } from \"./DropZone\";\r\n\r\nexport enum ImagePreviewSize {\r\n\tSMALL = \"small\",\r\n\tLARGE = \"large\",\r\n}\r\n\r\nexport type ImagePreviewProps = {\r\n\tid?: string;\r\n\tvalue: string;\r\n\tbaseURL: string;\r\n\tonSetValue?: (value: string) => void;\r\n\tuploadFunction: FileInputUploadCb;\r\n\tacceptTypes: string[];\r\n\tpreviewSize?: ImagePreviewSize;\r\n};\r\n\r\nlet globalCacheIndex = 0;\r\n\r\nconst cleanPath = (path: string, baseURL: string) =>\r\n\tpath\r\n\t\t.replace(new RegExp(`^${baseURL}`), \"\")\r\n\t\t.replace(/\\/{1,}/g, \"/\")\r\n\t\t.replace(/^\\//, \"\");\r\n\r\nexport const ImagePreview = (props: ImagePreviewProps) => {\r\n\tconst [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);\r\n\tconst previewSize = props.previewSize || ImagePreviewSize.SMALL;\r\n\tconst [droppedFile, setDroppedFile] = useState<FileWithPath | null>(null);\r\n\r\n\tconst [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));\r\n\r\n\tuseEffect(() => {\r\n\t\tif (props.onSetValue) {\r\n\t\t\tprops.onSetValue(imagePath);\r\n\t\t}\r\n\t}, [imagePath]);\r\n\r\n\tuseEffect(() => {\r\n\t\tsetImagePath(cleanPath(props.value, props.baseURL));\r\n\t}, [props]);\r\n\r\n\treturn (\r\n\t\t<DropZone\r\n\t\t\tprocessFile={(file: File) => {\r\n\t\t\t\tsetDroppedFile(file);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t<div className={[\"image-preview-container\", `image-preview-size-${previewSize}`].join(\" \")}>\r\n\t\t\t\t<FileInput\r\n\t\t\t\t\tvalue={imagePath}\r\n\t\t\t\t\tuploadFunction={props.uploadFunction}\r\n\t\t\t\t\tonSetValue={(value: string) => {\r\n\t\t\t\t\t\tsetImagePath(value);\r\n\t\t\t\t\t\tsetCacheIndex(++globalCacheIndex);\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tacceptTypes={props.acceptTypes}\r\n\t\t\t\t\tpresetFile={droppedFile}\r\n\t\t\t\t\tsuppressDropzone={true}\r\n\t\t\t\t\t{...(props.id ? { id: props.id } : {})}\r\n\t\t\t\t></FileInput>\r\n\r\n\t\t\t\t{!imagePath ? (\r\n\t\t\t\t\t<div className=\"empty-preview\"></div>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<div className=\"filled-preview\">\r\n\t\t\t\t\t\t<img src={`${props.baseURL}/${imagePath}?${cacheIndex}`} />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t</DropZone>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/common/ImagePreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAqB,MAAM,aAAa,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAEpD,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC3B,mCAAe,CAAA;IACf,mCAAe,CAAA;AAChB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAYD,IAAI,gBAAgB,GAAG,CAAC,CAAC;AAEzB,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,EAAE,CACnD,IAAI;KACF,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;KACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAAC,KAAK,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5B;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,CAAC,IAAU,EAAE,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,6BAAK,SAAS,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzF,oBAAC,SAAS,kBACT,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE;oBAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,EAAE,gBAAgB,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,WAAW,EACvB,gBAAgB,EAAE,IAAI,IAClB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B;YAEZ,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,GAAO,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gBAAgB;gBAC9B,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,SAAS,IAAI,UAAU,EAAE,GAAI,CACtD,CACN,CACI,CACI,CACX,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\n\nimport { FileInput, FileInputUploadCb } from \"./FileInput\";\nimport \"./css/image-preview.css\";\nimport { DropZone, FileWithPath } from \"./DropZone\";\n\nexport enum ImagePreviewSize {\n\tSMALL = \"small\",\n\tLARGE = \"large\",\n}\n\nexport type ImagePreviewProps = {\n\tid?: string;\n\tvalue: string;\n\tbaseURL: string;\n\tonSetValue?: (value: string) => void;\n\tuploadFunction: FileInputUploadCb;\n\tacceptTypes: string[];\n\tpreviewSize?: ImagePreviewSize;\n};\n\nlet globalCacheIndex = 0;\n\nconst cleanPath = (path: string, baseURL: string) =>\n\tpath\n\t\t.replace(new RegExp(`^${baseURL}`), \"\")\n\t\t.replace(/\\/{1,}/g, \"/\")\n\t\t.replace(/^\\//, \"\");\n\nexport const ImagePreview = (props: ImagePreviewProps) => {\n\tconst [cacheIndex, setCacheIndex] = useState(++globalCacheIndex);\n\tconst previewSize = props.previewSize || ImagePreviewSize.SMALL;\n\tconst [droppedFile, setDroppedFile] = useState<FileWithPath | null>(null);\n\n\tconst [imagePath, setImagePath] = useState(cleanPath(props.value, props.baseURL));\n\n\tuseEffect(() => {\n\t\tif (props.onSetValue) {\n\t\t\tprops.onSetValue(imagePath);\n\t\t}\n\t}, [imagePath]);\n\n\tuseEffect(() => {\n\t\tsetImagePath(cleanPath(props.value, props.baseURL));\n\t}, [props]);\n\n\treturn (\n\t\t<DropZone\n\t\t\tprocessFile={(file: File) => {\n\t\t\t\tsetDroppedFile(file);\n\t\t\t}}\n\t\t>\n\t\t\t<div className={[\"image-preview-container\", `image-preview-size-${previewSize}`].join(\" \")}>\n\t\t\t\t<FileInput\n\t\t\t\t\tvalue={imagePath}\n\t\t\t\t\tuploadFunction={props.uploadFunction}\n\t\t\t\t\tonSetValue={(value: string) => {\n\t\t\t\t\t\tsetImagePath(value);\n\t\t\t\t\t\tsetCacheIndex(++globalCacheIndex);\n\t\t\t\t\t}}\n\t\t\t\t\tacceptTypes={props.acceptTypes}\n\t\t\t\t\tpresetFile={droppedFile}\n\t\t\t\t\tsuppressDropzone={true}\n\t\t\t\t\t{...(props.id ? { id: props.id } : {})}\n\t\t\t\t></FileInput>\n\n\t\t\t\t{!imagePath ? (\n\t\t\t\t\t<div className=\"empty-preview\"></div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"filled-preview\">\n\t\t\t\t\t\t<img src={`${props.baseURL}/${imagePath}?${cacheIndex}`} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</DropZone>\n\t);\n};\n"]}

package/react/components/common/InputTable.d.ts

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+export declare type InputTableProps = {
+    tableHeaders: (string | JSX.Element)[];
+    onUpdate: (data: string[][]) => void;
+    startingData?: (string | undefined)[][];
+};
+export declare const InputTable: ({ tableHeaders, onUpdate, startingData }: InputTableProps) => JSX.Element;

package/react/components/common/InputTable.js

@@ -0,0 +1,50 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState } from "react";
+import { ButtonIcon } from "./ButtonIcon";
+const isLastRowEmpty = (arr) => {
+    const lastRow = arr[arr.length - 1];
+    if (!Array.isArray(lastRow)) {
+        return true;
+    }
+    const nonEmptyCells = lastRow.filter((str) => str.length > 0);
+    return nonEmptyCells.length === 0;
+};
+const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
+const emptyRow = (colCount) => Array(colCount).fill("").slice(0);
+export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
+    const [data, setData] = useState(startingData !== null && startingData !== void 0 ? startingData : [emptyRow(tableHeaders.length)]);
+    const rowCount = data.length;
+    const doSetData = (newData) => {
+        setData(newData);
+        onUpdate(newData);
+    };
+    const addRow = () => {
+        doSetData(data.concat([emptyRow(tableHeaders.length)]));
+    };
+    const deleteRow = (rowIndex) => {
+        const newData = data.splice(0);
+        newData.splice(rowIndex, 1);
+        doSetData(newData);
+    };
+    if (rowCount === 0 || !isLastRowEmpty(data)) {
+        addRow();
+    }
+    return (React.createElement("table", { className: "inputTable" },
+        React.createElement("thead", null,
+            React.createElement("tr", null, tableHeaders.map((th, index) => (React.createElement("th", { scope: "col", key: `th-${index}` }, th))))),
+        React.createElement("tbody", null, data.map((row, rowNumber) => Array.isArray(row) ? (React.createElement("tr", { key: `tr-${rowNumber}` },
+            row.map((td, colNumber) => (React.createElement("td", { key: `td-${rowNumber}-${colNumber}` },
+                React.createElement("input", { type: "text", id: `input-${rowNumber}-${colNumber}`, value: td, onChange: (e) => {
+                        const newData = deepCopy(data);
+                        newData[rowNumber][colNumber] = e.target.value;
+                        doSetData(newData);
+                    } })))),
+            rowNumber < rowCount - 1 && (React.createElement("td", null,
+                React.createElement(ButtonIcon, { icon: "times", text: "Remove row", onClick: () => {
+                        deleteRow(rowNumber);
+                    } }))))) : null))));
+};
+//# sourceMappingURL=InputTable.js.map

package/react/components/common/InputTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string | JSX.Element)[];\n\tonUpdate: (data: string[][]) => void;\n\tstartingData?: (string | undefined)[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/***\n * A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [startingData] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, onUpdate, startingData }: InputTableProps) => {\n\tconst [data, setData] = useState<string[][]>(startingData ?? [emptyRow(tableHeaders.length)]);\n\tconst rowCount = data.length;\n\n\tconst doSetData = (newData: string[][]) => {\n\t\tsetData(newData);\n\t\tonUpdate(newData);\n\t};\n\n\tconst addRow = () => {\n\t\tdoSetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tdoSetData(newData);\n\t};\n\n\tif (rowCount === 0 || !isLastRowEmpty(data)) {\n\t\taddRow();\n\t}\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tdoSetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}

package/react/components/common/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/common/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,UAAU,sBAAsB;IACrC,OAAO,CACN,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,iBAAiB;YAChE,2BAAG,EAAE,EAAC,SAAS,eAAW,SAAS;gBAClC,2BAAG,EAAE,EAAC,WAAW,EAAC,SAAS,EAAC,eAAe,eAAW,SAAS;oBAC9D,gCAAQ,SAAS,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,MAAM,GAAG;oBAC3D,8BAAM,SAAS,EAAC,OAAO,EAAC,CAAC,EAAC,wCAAwC,GAAG,CAClE,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import React from \"react\";\r\nimport \"./css/loading-spinner.css\";\r\n\r\nexport function CircularLoadingSpinner() {\r\n\treturn (\r\n\t\t<div className=\"modal same-spin\">\r\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 43.83 43.83\">\r\n\t\t\t\t<g id=\"Layer_2\" data-name=\"Layer 2\">\r\n\t\t\t\t\t<g id=\"Layer_1-2\" className=\"circle_rotate\" data-name=\"Layer 1\">\r\n\t\t\t\t\t\t<circle className=\"cls-1\" cx=\"21.92\" cy=\"21.92\" r=\"20.2\" />\r\n\t\t\t\t\t\t<path className=\"cls-2\" d=\"M42.11,21.92a20.2,20.2,0,0,0-20.2-20.2\" />\r\n\t\t\t\t\t</g>\r\n\t\t\t\t</g>\r\n\t\t\t</svg>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../src/components/common/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,UAAU,sBAAsB;IACrC,OAAO,CACN,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,iBAAiB;YAChE,2BAAG,EAAE,EAAC,SAAS,eAAW,SAAS;gBAClC,2BAAG,EAAE,EAAC,WAAW,EAAC,SAAS,EAAC,eAAe,eAAW,SAAS;oBAC9D,gCAAQ,SAAS,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,MAAM,GAAG;oBAC3D,8BAAM,SAAS,EAAC,OAAO,EAAC,CAAC,EAAC,wCAAwC,GAAG,CAClE,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import React from \"react\";\nimport \"./css/loading-spinner.css\";\n\nexport function CircularLoadingSpinner() {\n\treturn (\n\t\t<div className=\"modal same-spin\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 43.83 43.83\">\n\t\t\t\t<g id=\"Layer_2\" data-name=\"Layer 2\">\n\t\t\t\t\t<g id=\"Layer_1-2\" className=\"circle_rotate\" data-name=\"Layer 1\">\n\t\t\t\t\t\t<circle className=\"cls-1\" cx=\"21.92\" cy=\"21.92\" r=\"20.2\" />\n\t\t\t\t\t\t<path className=\"cls-2\" d=\"M42.11,21.92a20.2,20.2,0,0,0-20.2-20.2\" />\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/common/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmC,MAAM,OAAO,CAAC;AAClG,OAAO,eAAe,CAAC;AAOvB,MAAM,CAAC,MAAM,GAAG,GAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;;QAIpB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,0CAAE,GAAG,KAAI,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC;SAC5G;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,CACN;QACC,6BAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAClB,QAAQ,EACR,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAC5B,6BACC,GAAG,EAAE,OAAO,GAAG,EAAE,EACjB,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,GAAG,mBACnB,YAAY,GAAG,EAAE,EAChC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACvC,cAAc,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACnB;YACF,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,IAEC,GAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,CACrC,CACN,CACF,CACI;QAEN,6BAAK,EAAE,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,IAClC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,6BACC,GAAG,EAAE,YAAY,GAAG,EAAE,EACtB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,GAAG,EAAE,EACrB,SAAS,EAAE,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAE9C,GAAG,CACC,CACN,CAAC,CACG,CACJ,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\r\nimport \"./css/tab.css\";\r\n\r\nexport type TabProps = {\r\n\tchildren?: React.ReactNode;\r\n\tautofocus?: number;\r\n};\r\n\r\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\r\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\r\n\t\t// which also keeps the heading/tab group at the top of the page.\r\n\t\t// It feels like css flex should do this, but I could never get it to work.\r\n\t\tif (ref.current !== null) {\r\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\r\n\t\t}\r\n\t});\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div role=\"tablist\">\r\n\t\t\t\t{React.Children.map(\r\n\t\t\t\t\tchildren,\r\n\t\t\t\t\t(tab, key) =>\r\n\t\t\t\t\t\tReact.isValidElement(tab) && (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\r\n\t\t\t\t\t\t\t\trole=\"tab\"\r\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\r\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\r\n\t\t\t\t\t\t\t\ttabIndex={0}\r\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\r\n\t\t\t\t\t\t\t\t\tif (e.key === \" \" || e.key === \"Enter\") {\r\n\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t)\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\r\n\t\t\t<div id=\"tabpanelContainer\" ref={ref}>\r\n\t\t\t\t{React.Children.map(children, (tab, key) => (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\r\n\t\t\t\t\t\trole=\"tabpanel\"\r\n\t\t\t\t\t\tid={`tabpanel-${key}`}\r\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{tab}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\t\t\t</div>\r\n\t\t</>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/common/Tab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmC,MAAM,OAAO,CAAC;AAClG,OAAO,eAAe,CAAC;AAOvB,MAAM,CAAC,MAAM,GAAG,GAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;;QAIpB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACzB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,0CAAE,GAAG,KAAI,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC;SAC5G;IACF,CAAC,CAAC,CAAC;IAEH,OAAO,CACN;QACC,6BAAK,IAAI,EAAC,SAAS,IACjB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAClB,QAAQ,EACR,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAC5B,6BACC,GAAG,EAAE,OAAO,GAAG,EAAE,EACjB,IAAI,EAAC,KAAK,mBACK,WAAW,KAAK,GAAG,mBACnB,YAAY,GAAG,EAAE,EAChC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACvC,cAAc,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;iBACnB;YACF,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,IAEC,GAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,CACrC,CACN,CACF,CACI;QAEN,6BAAK,EAAE,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,IAClC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,6BACC,GAAG,EAAE,YAAY,GAAG,EAAE,EACtB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,YAAY,GAAG,EAAE,EACrB,SAAS,EAAE,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAE9C,GAAG,CACC,CACN,CAAC,CACG,CACJ,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef, useLayoutEffect, FunctionComponent, ReactElement } from \"react\";\nimport \"./css/tab.css\";\n\nexport type TabProps = {\n\tchildren?: React.ReactNode;\n\tautofocus?: number;\n};\n\nexport const Tab: FunctionComponent<TabProps> = ({ children, autofocus }) => {\n\tconst [selectedTab, setSelectedTab] = useState(autofocus || 0);\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tuseLayoutEffect(() => {\n\t\t// Allow for the tab panel content to look nice with its own scrollbar,\n\t\t// which also keeps the heading/tab group at the top of the page.\n\t\t// It feels like css flex should do this, but I could never get it to work.\n\t\tif (ref.current !== null) {\n\t\t\tref.current.style.height = `${window.innerHeight - (ref.current.getBoundingClientRect()?.top || 0) - 10}px`;\n\t\t}\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<div role=\"tablist\">\n\t\t\t\t{React.Children.map(\n\t\t\t\t\tchildren,\n\t\t\t\t\t(tab, key) =>\n\t\t\t\t\t\tReact.isValidElement(tab) && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={`tab-${key}`}\n\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\taria-selected={selectedTab === key}\n\t\t\t\t\t\t\t\taria-controls={`tabpanel-${key}`}\n\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\tif (e.key === \" \" || e.key === \"Enter\") {\n\t\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetSelectedTab(key);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{(tab as ReactElement).props[\"data-label\"]}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div id=\"tabpanelContainer\" ref={ref}>\n\t\t\t\t{React.Children.map(children, (tab, key) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`tabpanel-${key}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\tid={`tabpanel-${key}`}\n\t\t\t\t\t\tclassName={selectedTab === key ? \"visible\" : \"\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tab}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"]}

package/react/components/common/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAItD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAChE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CACI,CACN;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\r\n * Copyright 2017 - 2020 by ChartIQ, Inc.\r\n * All rights reserved.\r\n */\r\n\r\nimport React, { useState, useRef } from \"react\";\r\nimport \"./css/tooltip.css\";\r\nimport { FinsembleIcon } from \"./FinsembleIcon\";\r\n\r\nexport type TooltipProps = {\r\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\r\n\taltClassName?: string;\r\n\tposition?: string;\r\n\tchildren?: string;\r\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\r\n};\r\n\r\nexport const Tooltip = ({\r\n\ttype = \"info\",\r\n\tposition = \"right\",\r\n\tchildren = \"\",\r\n\taltClassName,\r\n\tonClick = () => {},\r\n}: TooltipProps) => {\r\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\r\n\r\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\r\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\r\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\r\n\tconst pos =\r\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\r\n\t\t\t? \"left\"\r\n\t\t\t: position;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\r\n\t\t\ttabIndex={0}\r\n\t\t\trole=\"tooltip\"\r\n\t\t\taria-label={children}\r\n\t\t\tonMouseOver={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonFocus={() => {\r\n\t\t\t\tsetTooltipOpen(true);\r\n\t\t\t}}\r\n\t\t\tonMouseLeave={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t\tonBlur={() => {\r\n\t\t\t\tsetTooltipOpen(false);\r\n\t\t\t}}\r\n\t\t\tonClick={onClick}\r\n\t\t>\r\n\t\t\t{altClassName ? (\r\n\t\t\t\t<div className={altClassName}></div>\r\n\t\t\t) : (\r\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>\r\n\t\t\t\t\t{type === \"error\" || type === \"warn\" ? (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\r\n\t\t\t\t\t) : type === \"lock\" ? (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t)}\r\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/common/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACJ,EAAE,EAAE;IAClB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAItD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GACR,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU;QACvG,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,QAAQ,CAAC;IAEb,OAAO,CACN,6BACC,SAAS,EAAE,CAAC,SAAS,EAAE,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,SAAS,gBACF,QAAQ,EACpB,WAAW,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;YACb,cAAc,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,OAAO,EAAE,OAAO;QAEf,YAAY,CAAC,CAAC,CAAC,CACf,6BAAK,SAAS,EAAE,YAAY,GAAQ,CACpC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAChE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtC,oBAAC,aAAa,IAAC,IAAI,EAAC,oBAAoB,GAAiB,CACzD,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACrB,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,GAAiB,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,aAAa,IAAC,IAAI,EAAC,iBAAiB,GAAiB,CACtD,CACI,CACN;QACD,6BAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACjG,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useRef } from \"react\";\nimport \"./css/tooltip.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport type TooltipProps = {\n\ttype?: \"info\" | \"error\" | \"warn\" | \"lock\";\n\taltClassName?: string;\n\tposition?: string;\n\tchildren?: string;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nexport const Tooltip = ({\n\ttype = \"info\",\n\tposition = \"right\",\n\tchildren = \"\",\n\taltClassName,\n\tonClick = () => {},\n}: TooltipProps) => {\n\tconst [tooltipOpen, setTooltipOpen] = useState(false);\n\n\t// If the tooltip content is floating so far to the right that it flows offscreen, switch the position to the left.\n\t// This only works for right-sided tooltips. Left-sided tooltips that float offscreen are not addressed.\n\tconst tooltipContentRef = useRef<HTMLDivElement>(null);\n\tconst pos =\n\t\ttooltipContentRef.current && tooltipContentRef.current.getBoundingClientRect().right > window.innerWidth\n\t\t\t? \"left\"\n\t\t\t: position;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[\"tooltip\", `tooltip-position-content-${pos}`].join(\" \")}\n\t\t\ttabIndex={0}\n\t\t\trole=\"tooltip\"\n\t\t\taria-label={children}\n\t\t\tonMouseOver={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonFocus={() => {\n\t\t\t\tsetTooltipOpen(true);\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonBlur={() => {\n\t\t\t\tsetTooltipOpen(false);\n\t\t\t}}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{altClassName ? (\n\t\t\t\t<div className={altClassName}></div>\n\t\t\t) : (\n\t\t\t\t<div className={[\"tooltip-icon\", `tooltip-icon-${type}`].join(\" \")}>\n\t\t\t\t\t{type === \"error\" || type === \"warn\" ? (\n\t\t\t\t\t\t<FinsembleIcon icon=\"exclamation-circle\"></FinsembleIcon>\n\t\t\t\t\t) : type === \"lock\" ? (\n\t\t\t\t\t\t<FinsembleIcon icon=\"lock\"></FinsembleIcon>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FinsembleIcon icon=\"question-circle\"></FinsembleIcon>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div ref={tooltipContentRef} className={[\"tooltip-content\", tooltipOpen ? \"visible\" : \"\"].join(\" \")}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/css/accordion.css

@@ -0,0 +1,99 @@
+.accordion {
+	width: 100%;
+}
+
+.accordion-cb {
+	display: none;
+}
+
+.accordion.medium > button {
+	font-size: 1.2em;
+}
+
+.accordion.small .finsemble-icon-caret {
+	font-size: 0.8em;
+}
+
+.accordion button {
+	width: 100%;
+	display: flex;
+	justify-content: left;
+	padding: 0.5em 0;
+}
+
+.accordion button:hover {
+	background: #373b43;
+}
+
+.accordion > .accordion-summary {
+	margin: 0.5em 24px;
+	margin-top: 0px;
+}
+
+.accordion > .accordion-content {
+	margin: 0.5em 22px;
+	padding-bottom: 0px;
+	margin-bottom: 0px;
+}
+
+.accordion > button .accordion-caret {
+	transform: rotate(-90deg) translate(0.1em);
+	flex-basis: 1.5em;
+}
+
+.accordion input:checked + button .accordion-caret {
+	transform: rotate(0) translate(0, 0.2em);
+}
+
+.accordion input:not(:checked) ~ .accordion-content {
+	display: none;
+}
+
+input:checked ~ .accordion-content {
+	display: block;
+}
+
+/** Animations */
+.accordion.enter-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotateIcon;
+}
+
+.accordion.exit-active > button .accordion-caret {
+	animation-duration: 200ms;
+	animation-name: rotateIcon;
+	animation-direction: reverse;
+}
+
+.accordion.enter-active > .accordion-content {
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: openContent;
+}
+
+.accordion.exit-active > .accordion-content {
+	display: block !important;
+	overflow: hidden;
+	animation-duration: 500ms;
+	animation-name: openContent;
+	animation-direction: reverse;
+	max-height: 0;
+}
+
+@keyframes rotateIcon {
+	from {
+		transform: rotate(-90deg) translate(0.1em);
+	}
+	to {
+		transform: rotate(0) translate(0, 0.2em);
+	}
+}
+
+@keyframes openContent {
+	from {
+		max-height: 1px;
+	}
+	to {
+		max-height: 2000px;
+	}
+}