"use strict";(self.webpackChunkapp=self.webpackChunkapp||[]).push([[8315],{94062:function(n,e,r){r.d(e,{Z:function(){return a}});var t=r(41051),o=r(2968),i=r(85893);function a(n){var e=n.url,r=n.text;return(0,i.jsxs)(o.Z,{external:!0,href:e,children:[(0,i.jsx)(t.Z,{name:"book"})," ",(0,i.jsx)("span",{children:r})]})}},44019:function(n,e,r){r.r(e),r.d(e,{default:function(){return On}});var t=r(67294),o=r(95998),i=r(45697),a=r.n(i),l=r(93379),c=r.n(l),s=r(7795),u=r.n(s),A=r(90569),p=r.n(A),d=r(3565),f=r.n(d),b=r(19216),m=r.n(b),y=r(44589),v=r.n(y),g=r(78207),C={};C.styleTagTransform=v(),C.setAttributes=f(),C.insert=p().bind(null,"head"),C.domAPI=u(),C.insertStyleElement=m(),c()(g.Z,C);var h=g.Z&&g.Z.locals?g.Z.locals:void 0,x=r(15023),E=r(85893);function j(){return(0,E.jsx)("p",{className:h.floatingMessage,children:"Click on a key to add it to the combo"})}function B(n){var e=n.keyPositions,r=n.onUpdate;return(0,E.jsxs)("div",{className:h.comboInputMap,children:[(0,E.jsx)(x.Z,{value:e,onUpdate:r}),e.length<2&&(0,E.jsx)(j,{})]})}B.propTypes={onUpdate:a().func.isRequired,keyPositions:a().arrayOf(a().number).isRequired};var k=B,w=r(82607),O=r(61953),S=r(27926),Z=r(41051),P=r(94062),N=r(86015),I={};I.styleTagTransform=v(),I.setAttributes=f(),I.insert=p().bind(null,"head"),I.domAPI=u(),I.insertStyleElement=m(),c()(N.Z,I);var Y=N.Z&&N.Z.locals?N.Z.locals:void 0,X=r(56803);function D(n){return D="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},D(n)}function U(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function q(n){for(var e=1;en.length)&&(e=n.length);for(var r=0,t=new Array(e);rn.length)&&(e=n.length);for(var r=0,t=new Array(e);rn.length)&&(e=n.length);for(var r=0,t=new Array(e);r0}),[l]);return(0,E.jsx)(T.Z,{onDismiss:o,children:(0,E.jsxs)(Q.Z,{dismissText:!1,classes:[h.comboPanel],children:[u&&(0,E.jsx)(en,{combo:l,onUpdate:g,onCancel:p}),f&&(0,E.jsx)(fn,{binding:l.properties.bindings.parsed[0],bindingIndex:null,onCancel:function(){return b(!1)},onUpdate:function(n){y([n]),b(!1)}}),(0,E.jsx)(P.Z,{url:"https://zmk.dev/docs/features/combos",text:"ZMK Docs: Combos"}),(0,E.jsxs)("div",{className:h.combo,children:[(0,E.jsxs)("div",{className:h.heading,children:[(0,E.jsx)("div",{children:(0,E.jsx)(M,{value:l.name,validate:i,render:function(n){return(0,E.jsxs)("h5",{children:["Name: ",(0,E.jsx)("code",{children:n}),!l.name&&(0,E.jsx)("span",{style:{color:"red"},children:"*required"})]})},onUpdate:m})}),(0,E.jsx)("div",{className:h.actions,children:(0,E.jsx)(Z.Z,{name:"wrench",className:"".concat(h.action),onClick:A})})]}),(0,E.jsxs)("div",{className:h.detail,children:[(0,E.jsx)("div",{className:h.comboOutput,children:(0,E.jsx)(w.Z,{binding:l.properties.bindings.parsed[0],keyWrapperProps:{className:O.Z.unified,onClick:function(n){n.stopPropagation(),b(!0)}}})}),(0,E.jsx)(k,{keyPositions:l.properties["key-positions"].parsed,onUpdate:v})]})]}),(0,E.jsxs)("div",{style:{textAlign:"center"},children:[(0,E.jsx)(S.Z,{disabled:!x,onClick:C,children:"Create"}),(0,E.jsx)(S.Z,{onClick:o,secondary:!0,children:"Cancel"})]})]})})}var En={name:"",labels:[],properties:{bindings:{parsed:[{value:"&none",params:[]}]},"key-positions":{parsed:[]}}};function jn(n,e){return(0,t.useCallback)((function(r){return n((function(n){return vn(vn({},n),{},{properties:vn(vn({},n.properties),{},gn({},e,{parsed:r}))})}))}),[n,e])}function Bn(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=r){var t,o,i,a,l=[],c=!0,s=!1;try{if(i=(r=r.call(n)).next,0===e){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(l.push(t.value),l.length!==e);c=!0);}catch(n){s=!0,o=n}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(s)throw o}}return l}}(n,e)||function(n,e){if(n){if("string"==typeof n)return kn(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?kn(n,e):void 0}}(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function kn(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r * {\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 align-items: center;\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;EACnB,SAAS;AACX;;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;EACb,mBAAmB;AACrB;;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 gap: 20px;\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 align-items: center;\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:""}]),a.locals={main:"pwXbGORsYKqyOPBm9_dW",header:"FDsUz791VURN5GgqawOQ",footer:"MhI51kJR50XISY6jcLAw",selectable:"Gy0KZGCgOeVminAfggFQ",highlight:"Ld9cVdtpS_DpbEifyX9Y",comboPanel:"mqpJ7uHAMKxvORoOIPFK",heading:"BVucwy4AZCyl7GyivzMn",action:"U6g0njWjBrtb_I3XhAeV",combo:"CROhsBLtunQ2BbfWdkQw",detail:"MhA4fXXuaZ1iPvv05w4m",edit:"vujYcgQjiN4BGp37FMUH",remove:"uh2yPWyfEOZtgXo2_KtU",addComboInput:"NAB1EN6_pcYIy5Db9XnC",comboInputList:"kYn8brsFgEaf61oQyv4d",active:"NGxnhfSJaJ9FNu3hlBfc",comboInput:"GXgG_IaQTricqThqzsKe",field:"fljdvcebOv1gbKZpf0vW",layerList:"bnN6JCit0RcjdQiqzw8w",floatingMessage:"NpLEYrC32KQ4rUx9hUFJ",comboInputMap:"l2gtE1XKS63R5TM5unip"},e.Z=a}}]); //# sourceMappingURL=ComboEditorTab.e007bf87a71302dde073.js.map