{"version":3,"file":"7198.aec09ef07d003f7d7a91.js","mappings":"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","sources":["webpack:///./src/Keyboard/Combos/styles.module.css?f765","webpack:///./src/Keyboard/Combos/ComboInputMap.js","webpack:///./src/Common/editablefield.module.css?86a5","webpack:///./src/Common/EditableField.js","webpack:///./src/Keyboard/Combos/ConfigModal.js","webpack:///./src/Keyboard/Combos/ComboEditor.js","webpack:///./src/event-util.js","webpack:///./src/Common/editablefield.module.css","webpack:///./src/Keyboard/Combos/styles.module.css"],"sourcesContent":["\n      import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./styles.module.css\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./styles.module.css\";\n       export default content && content.locals ? content.locals : undefined;\n","import PropTypes from 'prop-types'\n\nimport styles from './styles.module.css'\nimport KeyPositionSelector from '../Common/KeyPositionSelector'\n\nfunction SelectKeyCTA () {\n  return (\n    <p className={styles.floatingMessage}>\n      Click on a key to add it to the combo\n    </p>\n  )\n}\n\nfunction ComboInputMap ({ keyPositions, onUpdate }) {\n  return (\n    <div className={styles.comboInputMap}>\n      <KeyPositionSelector\n        value={keyPositions}\n        onUpdate={onUpdate}\n      />\n      {keyPositions.length < 2 && <SelectKeyCTA />}\n    </div>\n  )\n}\n\nComboInputMap.propTypes = {\n  onUpdate: PropTypes.func.isRequired,\n  keyPositions: PropTypes.arrayOf(\n    PropTypes.number\n  ).isRequired\n}\n\nexport default ComboInputMap\n","\n      import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./editablefield.module.css\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./editablefield.module.css\";\n       export default content && content.locals ? content.locals : undefined;\n","import { useCallback, useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\n\nimport styles from './editablefield.module.css'\nimport Icon from './Icon'\nimport { stop, onKey } from '../event-util'\n\nfunction EditableField ({ value, validate, required, render, onUpdate }) {\n  const ref = useRef()\n  const [state, setState] = useState({\n    value,\n    editing: false,\n    attemptedEmpty: false\n  })\n\n  const error = state.attemptedEmpty\n    ? 'cannot be empty'\n    : (validate && validate(state.value))\n\n  const focusInput = useCallback(node => {\n    if (node) {\n      node.focus()\n      node.select()\n    }\n  }, [])\n\n  function finishEditing () {\n    if (!state.editing) {\n      return\n    }\n\n    if (state.value === '' && required) {\n      setState({ ...state, attemptedEmpty: true })\n      return\n    }\n\n    if (!error) {\n      onUpdate(state.value)\n    }\n\n    setState({ ...state, value: state.value, editing: false })\n  }\n\n  const cancelEditing = useCallback(() => {\n    setState(state => ({ ...state, editing: false }))\n  }, [setState])\n\n  const handleClickOutside = useCallback(event => {\n    const clickedOutside = ref.current && !ref.current.contains(event.target)\n    if (!clickedOutside) {\n      return\n    }\n\n    cancelEditing()\n  }, [ref, cancelEditing])\n\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [handleClickOutside])\n\n  if (state.editing) {\n    return (\n      <span className={styles.container} ref={ref}>\n        <input\n          ref={focusInput}\n          value={state.value}\n          onChange={e => setState({\n            ...state,\n            attemptedEmpty: false,\n            value: e.target.value\n          })}\n          onKeyDown={onKey({\n            Enter: finishEditing,\n            Escape: cancelEditing\n          })}\n        />\n        {error && <span className={styles.error}>{error}</span>}\n      </span>\n    )\n  }\n\n  return render(\n    <>\n      <span>{value}</span>\n      <Icon\n        name=\"pencil\"\n        className={styles.edit}\n        onClick={stop(() => setState({ ...state, editing: true }))}\n      />\n    </>\n  )\n}\n\nEditableField.propTypes = {\n  value: PropTypes.string.isRequired,\n  validate: PropTypes.func,\n  required: PropTypes.bool.isRequired,\n  render: PropTypes.func.isRequired,\n  onUpdate: PropTypes.func.isRequired\n}\n\nEditableField.defaultProps = {\n  required: true\n}\n\nexport default EditableField\n","import omit from 'lodash/omit'\nimport { useState } from 'react'\nimport { useSelector } from 'react-redux'\n\nimport Modal from '../../Common/Modal'\nimport DialogBox from '../../Common/DialogBox'\nimport styles from './styles.module.css'\nimport { selectLayers } from '../Layers/layersSlice'\n\nfunction MultiSelect ({ selected, options, onUpdate }) {\n  function handleChange (index) {\n    onUpdate(\n      selected.includes(index)\n        ? selected.filter(i => i !== index)\n        : [...selected, index]\n    )\n  }\n  return (\n    <ul className={styles.layerList}>\n      {options.map((option, i) => (\n        <li\n          key={i}\n          data-selected={selected.includes(i)}\n          onClick={() => handleChange(i)}\n        >\n          {option}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nfunction ConfigModal ({ combo, onUpdate }) {\n  const layers = useSelector(selectLayers)\n  const [pending, setPending] = useState(combo)\n\n  const availableLayers = layers.map(layer => layer.name)\n  function handleConfirm () {\n    onUpdate(pending)\n  }\n\n  return (\n    <Modal>\n      <DialogBox onDismiss={handleConfirm}>\n        <h2>Customize [<code>{combo.name}</code>]</h2>\n        <div>\n\n          <div className={styles.field}>\n            <label htmlFor=\"customize-combo-timeout\">\n              Timeout (ms)\n            </label>\n            <input\n              id=\"customize-combo-timeout\"\n              type=\"number\"\n              placeholder=\"Default\"\n              value={pending.properties['timeout-ms']?.parsed || ''}\n              onChange={event => {\n                const parsed = Number(event.target.value)\n                setPending(state => ({\n                  ...state,\n                  properties: event.target.value !== ''\n                    ? { ...state.properties, 'timeout-ms': { parsed } }\n                    : { ...omit(state.properties, 'timeout-ms') }\n                }))\n              }}\n            />\n          </div>\n\n          <div className={styles.field}>\n            <label htmlFor=\"customize-combo-slow-release\">\n              Slow Release\n            </label>\n            <input\n              id=\"customize-combo-slow-release\"\n              type=\"checkbox\"\n              checked={pending.properties['slow-release']?.parsed || false}\n              onChange={event => (\n                setPending(state => ({\n                  ...state,\n                  properties: {\n                    ...state.properties,\n                    'slow-release': {\n                      parsed: event.target.checked\n                    }\n                  }\n                }))\n              )}\n            />\n          </div>\n\n          <div className={styles.field}>\n            <label>Layers</label>\n            <MultiSelect\n              selected={pending.properties.layers?.parsed || []}\n              options={availableLayers}\n              onUpdate={layers => (\n                setPending(state => ({\n                  ...state,\n                  properties: {\n                    ...state.properties,\n                    layers: {\n                      parsed: layers\n                    }\n                  }\n                }))\n              )}\n            />\n          </div>\n        </div>\n      </DialogBox>\n    </Modal>\n  )\n}\n\nexport default ConfigModal\n","import { useContext, useState } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\n\nimport ComboInputMap from './ComboInputMap'\nimport styles from './styles.module.css'\nimport Key from '../Keys/Key'\nimport ActionButton from '../../Common/ActionButton'\nimport Icon from '../../Common/Icon'\nimport Link from '../../Common/Link'\nimport EditableField from '../../Common/EditableField'\nimport { SearchContext } from '../../providers'\nimport ConfigModal from './ConfigModal'\nimport { validateDevicetreeIdentifier } from '../Common/Devicetree/validators'\nimport {\n  selectCombos,\n  createCombo,\n  customizeCombo,\n  deleteCombo,\n  renameCombo,\n  updateComboBinding,\n  updateComboKeypositions\n} from './combosSlice'\n\nfunction ComboEditor (props) {\n  const { identifiers } = useContext(SearchContext)\n  const combos = useSelector(selectCombos)\n  const dispatch = useDispatch()\n  const [configEdit, setConfigEdit] = useState(null)\n\n  function validateComboIdentifier (value) {\n    return validateDevicetreeIdentifier(value) || (\n      identifiers.includes(value)\n        ? `Cannot use existing identifier \"${value}\"`\n        : null\n    )\n  }\n\n  function handleUpdateBindings (i, update) {\n    dispatch(updateComboBinding({\n      comboIndex: i,\n      bindings: [update]\n    }))\n  }\n\n  function handleUpdateKeyPositions (i, update) {\n    dispatch(updateComboKeypositions({\n      comboIndex: i,\n      keyPositions: update\n    }))\n  }\n\n  function handleRenameCombo (index, name) {\n    dispatch(renameCombo({ index, name }))\n  }\n\n  function handleAddCombo () {\n    dispatch(createCombo())\n  }\n\n  function handleDeleteCombo (index) {\n    dispatch(deleteCombo({ index }))\n  }\n\n  function handleCustomizeCombo (index, combo) {\n    setConfigEdit(null)\n    dispatch(customizeCombo({ index, combo }))\n  }\n\n  return (\n    <div className={styles.main}>\n      {configEdit !== null && (\n        <ConfigModal\n          combo={combos[configEdit]}\n          onUpdate={config => handleCustomizeCombo(configEdit, config)}\n        />\n      )}\n\n      <div className={styles.header}>\n        <Link external href=\"https://zmk.dev/docs/features/combos\">\n          <Icon name=\"book\" /> ZMK Docs: Combos\n        </Link>\n      </div>\n\n      <div className={styles.comboPanel}>\n        {combos.map((combo, i) => (\n          <div key={i} className={styles.combo}>\n            <div className={styles.heading}>\n              <EditableField\n                value={combo.name}\n                validate={validateComboIdentifier}\n                render={children => <h5><code>{children}</code></h5>}\n                onUpdate={name => handleRenameCombo(i, name)}\n              />\n              <div className={styles.actions}>\n                <Icon\n                  name=\"wrench\"\n                  className={`${styles.action}`}\n                  onClick={() => setConfigEdit(i)}\n                />\n                <Icon\n                  name=\"trash-can\"\n                  className={`${styles.action} ${styles.remove}`}\n                  onClick={() => handleDeleteCombo(i)}\n                />\n              </div>\n            </div>\n\n            <div className={styles.detail}>\n              <div className={styles.comboOutput}>\n                <Key\n                  {...combo.properties.bindings.parsed[0]}\n                  onUpdate={update => {\n                    handleUpdateBindings(i, update)\n                  }}\n                />\n              </div>\n\n              <ComboInputMap\n                keyPositions={combo.properties['key-positions'].parsed}\n                onUpdate={value => handleUpdateKeyPositions(i, value)}\n              />\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <div className={styles.footer}>\n        <ActionButton onClick={handleAddCombo}>\n          Add New Combo\n        </ActionButton>\n      </div>\n    </div>\n  )\n}\n\nComboEditor.propTypes = {}\n\nexport default ComboEditor\n","\nexport function stop (fn) {\n  return function (event) {\n    event.stopPropagation()\n    fn()\n  }\n}\n\nexport function onKey (mapping) {\n  return function (event) {\n    if (mapping[event.key]) {\n      mapping[event.key]()\n    }\n  }\n}\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".ho3CuFFjX1VFNZJiAyVs {\\n  position: relative;\\n}\\n\\n.u9J3v5ZrIbuVICzNBkRw {\\n  padding: 5px;\\n  cursor: pointer;\\n  opacity: 0.5;\\n  color: var(--key-color-base);\\n}\\n.u9J3v5ZrIbuVICzNBkRw:hover {\\n  opacity: 1;\\n}\\n\\n.wmqWaOx7XyKADh7Kv4RZ {\\n  position: absolute;\\n  z-index: 10;\\n  bottom: 0;\\n  left: 50%;\\n  transform: translate(-50%, 100%);\\n  max-width: 250px;\\n  width: 100%;\\n\\n  border-radius: 4px;\\n  padding: 3px 5px;\\n\\n  color: white;\\n  background-color: var(--error-highlight);\\n  font-size: 85%;\\n  font-family: sans-serif;\\n\\n  opacity: 0.9;\\n}\\n.wmqWaOx7XyKADh7Kv4RZ::before {\\n  position: absolute;\\n  display: block;\\n  content: ' ';\\n  z-index: -1;\\n\\n  left: 50%;\\n  width: 10px;\\n  height: 10px;\\n\\n  background-color: var(--error-highlight);\\n  transform: translate(-50%, -7px) rotate(45deg);\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/Common/editablefield.module.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,kBAAkB;AACpB;;AAEA;EACE,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,4BAA4B;AAC9B;AACA;EACE,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,SAAS;EACT,SAAS;EACT,gCAAgC;EAChC,gBAAgB;EAChB,WAAW;;EAEX,kBAAkB;EAClB,gBAAgB;;EAEhB,YAAY;EACZ,wCAAwC;EACxC,cAAc;EACd,uBAAuB;;EAEvB,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,cAAc;EACd,YAAY;EACZ,WAAW;;EAEX,SAAS;EACT,WAAW;EACX,YAAY;;EAEZ,wCAAwC;EACxC,8CAA8C;AAChD\",\"sourcesContent\":[\".container {\\n  position: relative;\\n}\\n\\n.edit {\\n  padding: 5px;\\n  cursor: pointer;\\n  opacity: 0.5;\\n  color: var(--key-color-base);\\n}\\n.edit:hover {\\n  opacity: 1;\\n}\\n\\n.error {\\n  position: absolute;\\n  z-index: 10;\\n  bottom: 0;\\n  left: 50%;\\n  transform: translate(-50%, 100%);\\n  max-width: 250px;\\n  width: 100%;\\n\\n  border-radius: 4px;\\n  padding: 3px 5px;\\n\\n  color: white;\\n  background-color: var(--error-highlight);\\n  font-size: 85%;\\n  font-family: sans-serif;\\n\\n  opacity: 0.9;\\n}\\n.error::before {\\n  position: absolute;\\n  display: block;\\n  content: ' ';\\n  z-index: -1;\\n\\n  left: 50%;\\n  width: 10px;\\n  height: 10px;\\n\\n  background-color: var(--error-highlight);\\n  transform: translate(-50%, -7px) rotate(45deg);\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n___CSS_LOADER_EXPORT___.locals = {\n\t\"container\": \"ho3CuFFjX1VFNZJiAyVs\",\n\t\"edit\": \"u9J3v5ZrIbuVICzNBkRw\",\n\t\"error\": \"wmqWaOx7XyKADh7Kv4RZ\"\n};\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".pwXbGORsYKqyOPBm9_dW {\\n  padding-bottom: 60px;\\n}\\n\\n.FDsUz791VURN5GgqawOQ, .MhI51kJR50XISY6jcLAw {\\n  width: 550px;\\n  margin: 1px auto;\\n}\\n.MhI51kJR50XISY6jcLAw {\\n  text-align: center;\\n  margin-top: 10px;\\n  padding-top: 20px;\\n  border-top: 2px solid var(--key-bg-base);\\n}\\n\\n.Gy0KZGCgOeVminAfggFQ {\\n  cursor: pointer;\\n  background-color: var(--key-bg-base);\\n}\\n.Gy0KZGCgOeVminAfggFQ:hover {\\n  border: 4px solid var(--selection);\\n  box-sizing: border-box;\\n}\\n\\n.Ld9cVdtpS_DpbEifyX9Y {\\n  background-color: var(--selection);\\n}\\n.Ld9cVdtpS_DpbEifyX9Y:hover {\\n  background-color: var(--hover-selection);\\n}\\n\\n.mqpJ7uHAMKxvORoOIPFK {\\n  max-width: 450px;\\n  margin: 0 auto;\\n}\\n\\n.BVucwy4AZCyl7GyivzMn {\\n  display: flex;\\n  justify-content: space-between;\\n  border-bottom: 2px solid var(--key-bg-base);\\n  margin: 5px 0;\\n}\\n\\n.U6g0njWjBrtb_I3XhAeV {\\n  cursor: pointer;\\n  padding: 5px;\\n  opacity: 0.6;\\n}\\n.U6g0njWjBrtb_I3XhAeV:hover {\\n  opacity: 1;\\n}\\n\\n.CROhsBLtunQ2BbfWdkQw {\\n  margin: 10px 0 40px;\\n}\\n\\n.CROhsBLtunQ2BbfWdkQw .MhA4fXXuaZ1iPvv05w4m {\\n  display: flex;\\n  justify-content: space-evenly;\\n  align-items: center;\\n}\\n\\n.CROhsBLtunQ2BbfWdkQw h5 {\\n  margin: 0;\\n}\\n\\n.vujYcgQjiN4BGp37FMUH {\\n  color: var(--key-color-base);\\n}\\n\\n.uh2yPWyfEOZtgXo2_KtU {\\n  color: var(--delete);\\n}\\n\\n.NAB1EN6_pcYIy5Db9XnC {\\n  display: none !important;\\n}\\n.NAB1EN6_pcYIy5Db9XnC:hover {\\n  color: white;\\n  cursor: pointer;\\n}\\n.kYn8brsFgEaf61oQyv4d:hover .NAB1EN6_pcYIy5Db9XnC {\\n  display: flex !important;\\n  position: absolute;\\n  right: -48px;\\n  transform: scale(0.5);\\n}\\n\\n.NGxnhfSJaJ9FNu3hlBfc.NAB1EN6_pcYIy5Db9XnC,\\n.NGxnhfSJaJ9FNu3hlBfc.GXgG_IaQTricqThqzsKe > * {\\n  background-color: sandybrown;\\n  color: white;\\n}\\n.NGxnhfSJaJ9FNu3hlBfc.NAB1EN6_pcYIy5Db9XnC {\\n  display: flex;\\n}\\n\\n.fljdvcebOv1gbKZpf0vW {\\n  margin: 10px 0;\\n  display: flex;\\n}\\n\\n.fljdvcebOv1gbKZpf0vW label {\\n  display: inline-block;\\n  width: 120px;\\n  text-align: right;\\n  margin-right: 10px;\\n}\\n\\n.bnN6JCit0RcjdQiqzw8w {\\n  list-style-type: none;\\n  margin: 0;\\n  padding: 0;\\n}\\n.bnN6JCit0RcjdQiqzw8w li {\\n  cursor: pointer;\\n  display: inline-block;\\n  padding: 5px 10px;\\n  margin: 5px;\\n  border-radius: 30px;\\n  background-color: var(--key-bg-base);\\n}\\n.bnN6JCit0RcjdQiqzw8w li[data-selected=\\\"true\\\"] {\\n  background-color: var(--selection);\\n  color: var(--key-color-hover);\\n}\\n.bnN6JCit0RcjdQiqzw8w li:hover {\\n  background-color: var(--hover-selection);\\n  color: var(--key-color-hover);\\n}\\n\\n.NpLEYrC32KQ4rUx9hUFJ {\\n  background-color: var(--key-bg-base);\\n  border-radius: 30px;\\n  color: var(--key-color-base);\\n  font-size: 80%;\\n  text-align: center;\\n  padding: 5px;\\n  position: absolute;\\n  bottom: -40px;\\n  left: 50%;\\n  transform: translate(-50%, 0);\\n  width: 110%;\\n\\n  pointer-events: none;\\n  transition: opacity ease-in-out .5s;\\n}\\n\\n.l2gtE1XKS63R5TM5unip { position: relative }\\n.l2gtE1XKS63R5TM5unip:hover .NpLEYrC32KQ4rUx9hUFJ { opacity: 0.25 }\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/Keyboard/Combos/styles.module.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,oBAAoB;AACtB;;AAEA;EACE,YAAY;EACZ,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EACjB,wCAAwC;AAC1C;;AAEA;EACE,eAAe;EACf,oCAAoC;AACtC;AACA;EACE,kCAAkC;EAClC,sBAAsB;AACxB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,wCAAwC;AAC1C;;AAEA;EACE,gBAAgB;EAChB,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,2CAA2C;EAC3C,aAAa;AACf;;AAEA;EACE,eAAe;EACf,YAAY;EACZ,YAAY;AACd;AACA;EACE,UAAU;AACZ;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,6BAA6B;EAC7B,mBAAmB;AACrB;;AAEA;EACE,SAAS;AACX;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,wBAAwB;AAC1B;AACA;EACE,YAAY;EACZ,eAAe;AACjB;AACA;EACE,wBAAwB;EACxB,kBAAkB;EAClB,YAAY;EACZ,qBAAqB;AACvB;;AAEA;;EAEE,4BAA4B;EAC5B,YAAY;AACd;AACA;EACE,aAAa;AACf;;AAEA;EACE,cAAc;EACd,aAAa;AACf;;AAEA;EACE,qBAAqB;EACrB,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,qBAAqB;EACrB,SAAS;EACT,UAAU;AACZ;AACA;EACE,eAAe;EACf,qBAAqB;EACrB,iBAAiB;EACjB,WAAW;EACX,mBAAmB;EACnB,oCAAoC;AACtC;AACA;EACE,kCAAkC;EAClC,6BAA6B;AAC/B;AACA;EACE,wCAAwC;EACxC,6BAA6B;AAC/B;;AAEA;EACE,oCAAoC;EACpC,mBAAmB;EACnB,4BAA4B;EAC5B,cAAc;EACd,kBAAkB;EAClB,YAAY;EACZ,kBAAkB;EAClB,aAAa;EACb,SAAS;EACT,6BAA6B;EAC7B,WAAW;;EAEX,oBAAoB;EACpB,mCAAmC;AACrC;;AAEA,wBAAiB,mBAAmB;AACpC,oDAAwC,cAAc\",\"sourcesContent\":[\".main {\\n  padding-bottom: 60px;\\n}\\n\\n.header, .footer {\\n  width: 550px;\\n  margin: 1px auto;\\n}\\n.footer {\\n  text-align: center;\\n  margin-top: 10px;\\n  padding-top: 20px;\\n  border-top: 2px solid var(--key-bg-base);\\n}\\n\\n.selectable {\\n  cursor: pointer;\\n  background-color: var(--key-bg-base);\\n}\\n.selectable:hover {\\n  border: 4px solid var(--selection);\\n  box-sizing: border-box;\\n}\\n\\n.highlight {\\n  background-color: var(--selection);\\n}\\n.highlight:hover {\\n  background-color: var(--hover-selection);\\n}\\n\\n.comboPanel {\\n  max-width: 450px;\\n  margin: 0 auto;\\n}\\n\\n.heading {\\n  display: flex;\\n  justify-content: space-between;\\n  border-bottom: 2px solid var(--key-bg-base);\\n  margin: 5px 0;\\n}\\n\\n.action {\\n  cursor: pointer;\\n  padding: 5px;\\n  opacity: 0.6;\\n}\\n.action:hover {\\n  opacity: 1;\\n}\\n\\n.combo {\\n  margin: 10px 0 40px;\\n}\\n\\n.combo .detail {\\n  display: flex;\\n  justify-content: space-evenly;\\n  align-items: center;\\n}\\n\\n.combo h5 {\\n  margin: 0;\\n}\\n\\n.edit {\\n  color: var(--key-color-base);\\n}\\n\\n.remove {\\n  color: var(--delete);\\n}\\n\\n.addComboInput {\\n  display: none !important;\\n}\\n.addComboInput:hover {\\n  color: white;\\n  cursor: pointer;\\n}\\n.comboInputList:hover .addComboInput {\\n  display: flex !important;\\n  position: absolute;\\n  right: -48px;\\n  transform: scale(0.5);\\n}\\n\\n.active.addComboInput,\\n.active.comboInput > * {\\n  background-color: sandybrown;\\n  color: white;\\n}\\n.active.addComboInput {\\n  display: flex;\\n}\\n\\n.field {\\n  margin: 10px 0;\\n  display: flex;\\n}\\n\\n.field label {\\n  display: inline-block;\\n  width: 120px;\\n  text-align: right;\\n  margin-right: 10px;\\n}\\n\\n.layerList {\\n  list-style-type: none;\\n  margin: 0;\\n  padding: 0;\\n}\\n.layerList li {\\n  cursor: pointer;\\n  display: inline-block;\\n  padding: 5px 10px;\\n  margin: 5px;\\n  border-radius: 30px;\\n  background-color: var(--key-bg-base);\\n}\\n.layerList li[data-selected=\\\"true\\\"] {\\n  background-color: var(--selection);\\n  color: var(--key-color-hover);\\n}\\n.layerList li:hover {\\n  background-color: var(--hover-selection);\\n  color: var(--key-color-hover);\\n}\\n\\n.floatingMessage {\\n  background-color: var(--key-bg-base);\\n  border-radius: 30px;\\n  color: var(--key-color-base);\\n  font-size: 80%;\\n  text-align: center;\\n  padding: 5px;\\n  position: absolute;\\n  bottom: -40px;\\n  left: 50%;\\n  transform: translate(-50%, 0);\\n  width: 110%;\\n\\n  pointer-events: none;\\n  transition: opacity ease-in-out .5s;\\n}\\n\\n.comboInputMap { position: relative }\\n.comboInputMap:hover .floatingMessage { opacity: 0.25 }\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n___CSS_LOADER_EXPORT___.locals = {\n\t\"main\": \"pwXbGORsYKqyOPBm9_dW\",\n\t\"header\": \"FDsUz791VURN5GgqawOQ\",\n\t\"footer\": \"MhI51kJR50XISY6jcLAw\",\n\t\"selectable\": \"Gy0KZGCgOeVminAfggFQ\",\n\t\"highlight\": \"Ld9cVdtpS_DpbEifyX9Y\",\n\t\"comboPanel\": \"mqpJ7uHAMKxvORoOIPFK\",\n\t\"heading\": \"BVucwy4AZCyl7GyivzMn\",\n\t\"action\": \"U6g0njWjBrtb_I3XhAeV\",\n\t\"combo\": \"CROhsBLtunQ2BbfWdkQw\",\n\t\"detail\": \"MhA4fXXuaZ1iPvv05w4m\",\n\t\"edit\": \"vujYcgQjiN4BGp37FMUH\",\n\t\"remove\": \"uh2yPWyfEOZtgXo2_KtU\",\n\t\"addComboInput\": \"NAB1EN6_pcYIy5Db9XnC\",\n\t\"comboInputList\": \"kYn8brsFgEaf61oQyv4d\",\n\t\"active\": \"NGxnhfSJaJ9FNu3hlBfc\",\n\t\"comboInput\": \"GXgG_IaQTricqThqzsKe\",\n\t\"field\": \"fljdvcebOv1gbKZpf0vW\",\n\t\"layerList\": \"bnN6JCit0RcjdQiqzw8w\",\n\t\"floatingMessage\": \"NpLEYrC32KQ4rUx9hUFJ\",\n\t\"comboInputMap\": \"l2gtE1XKS63R5TM5unip\"\n};\nexport default ___CSS_LOADER_EXPORT___;\n"],"names":["options","styleTagTransform","setAttributes","insert","domAPI","insertStyleElement","undefined","SelectKeyCTA","className","styles","ComboInputMap","keyPositions","onUpdate","KeyPositionSelector","value","length","propTypes","PropTypes","isRequired","EditableField","validate","required","render","ref","useRef","useState","editing","attemptedEmpty","state","setState","error","focusInput","useCallback","node","focus","select","cancelEditing","handleClickOutside","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","onChange","e","onKeyDown","onKey","Enter","Escape","Icon","name","onClick","stop","defaultProps","MultiSelect","selected","map","option","i","includes","index","filter","combo","layers","useSelector","selectLayers","pending","setPending","availableLayers","layer","Modal","DialogBox","onDismiss","htmlFor","id","type","placeholder","properties","parsed","Number","omit","checked","ComboEditor","props","identifiers","useContext","SearchContext","combos","selectCombos","dispatch","useDispatch","configEdit","setConfigEdit","validateComboIdentifier","validateDevicetreeIdentifier","config","customizeCombo","Link","external","href","children","renameCombo","handleRenameCombo","deleteCombo","Key","bindings","update","updateComboBinding","comboIndex","handleUpdateBindings","updateComboKeypositions","handleUpdateKeyPositions","ActionButton","createCombo","fn","stopPropagation","mapping","key","___CSS_LOADER_EXPORT___","push","module","locals"],"sourceRoot":""}