{"mappings":"eAAAA,EAAeC,UC6EfC,EA3E+BC,IAC7B,MAAAC,QAAQA,EAAFC,kBAAWA,EAAXC,QAA8BA,GAAYH,GAEzCI,EAAcC,GAAmBC,EAAAA,SAASN,EAAMO,OAEvDN,EAAQO,qBAAwBC,IAC9BJ,EAAgBI,IAGlB,MAAMC,EAAgBC,IACpBT,EAAkBU,IAAID,EAAEE,OAAOC,QAW3BC,EAAOZ,EAAQY,KAAO,EAE5B,OACEjB,MADFkB,cAAA,MAAA,CACOC,UAAU,qBAAqBC,SAAS,KAC3CpB,MADFkB,cAAA,QAAA,CACSC,UAAU,uBACfnB,MADFkB,cAAA,OAAA,CACQC,UAAU,2BAA2BjB,EAAMmB,OACjDrB,MADAkB,cAAA,OAAA,CAEEC,UAAU,4CACVG,wBAAyB,CAAEC,OAAQrB,EAAMsB,gBAI7CxB,MANEkB,cAAA,MAAA,CAOAC,UAAU,4CACVM,IAAKvB,EAAMwB,2BAGb1B,MALAkB,cAAA,SAAA,CAMES,KAAK,SACLR,UAAU,sBACVS,QA5BW,KACX,KAAO1B,EAAM2B,cAAW,IAAuB3B,EAAM2B,QACvDzB,EAAkBU,IAAIZ,EAAM2B,SAE5BzB,EAAkBU,IAAIZ,EAAMO,SA0B1BT,MALFkB,cAAA,IAAA,CAKKC,UAAU,sCAGfnB,MAHEkB,cAAA,KAAA,CAGEC,UAAW,sBAAwBd,EAAQyB,MAAQ,WACpDzB,EAAQ0B,OAAOC,KAAf,CAAoBC,EAAOC,KAC1B,MAAMC,EACJF,IAAU3B,EAAe,0BAA4B,cAEvD,OACEN,MADFkB,cAAA,KAAA,CAEIkB,IAAKF,EAAMG,WACXlB,UAAWgB,EACXG,MAAO,CACLC,MAAOtB,EAAO,KACduB,OAAQvB,EAAO,OAGjBjB,MARFkB,cAAA,MAAA,CASIF,MAAOiB,EACPK,MAAO,CACLG,gBAAiBR,GAEnBL,QAAShB,iOC5BvB8B,GAAAC,UAAAC,QAAAC,OAAA,CAxB2DC,WAAA,SAAAC,EAAAC,GAgD7D,MAAA7C,EAAA8C,KAEE9C,EAAMA,yBAANA,EAAAuB,yBAAAwB,KAAA/C,GAEAgD,GAAAA,UAASC,QACRC,UAAAP,WAAAQ,KAAAnD,EAAC4C,EAAAC,GArDyDN,GAAAC,UAAAxC,QAAA+C,KAAA,WAqD1D,SACK/C,EAFNgD,GAGEhD,IAFDoD,IAGCpD,EAAAqD,UACArD,EAAAsD,UAAAC,SACAhB,GAAOvC,UAAQ6C,QAAOvC,OAAtB,UAAAkD,QAwCJjC,yBAAA,SAAAkC,GAEkBX,KAGRY,cAACC,UAAuB3D,OAAQsD,GAHxBR,KAMTN,cAAUC,gkBCpHnBF,GAAGC,UAAUoB,mBAAmB,uBAAyBC","sources":["React.js","src/KirkiColorPaletteForm.js","src/KirkiColorPaletteControl.js","src/control.js"],"sourcesContent":["module.exports=React;","import { useState } from \"react\";\n\nconst KirkiColorPaletteForm = (props) => {\n  const { control, customizerSetting, choices } = props;\n\n  const [selectedItem, setSelectedItem] = useState(props.value);\n\n  control.updateComponentState = (val) => {\n    setSelectedItem(val);\n  };\n\n  const handleSelect = (e) => {\n    customizerSetting.set(e.target.title);\n  };\n\n  const handleReset = () => {\n    if (\"\" !== props.default && \"undefined\" !== typeof props.default) {\n      customizerSetting.set(props.default);\n    } else {\n      customizerSetting.set(props.value);\n    }\n  };\n\n  const size = choices.size + 2; // 2 here is 1px border on each side.\n\n  return (\n    <div className=\"kirki-control-form\" tabIndex=\"1\">\n      <label className=\"kirki-control-label\">\n        <span className=\"customize-control-title\">{props.label}</span>\n        <span\n          className=\"customize-control-description description\"\n          dangerouslySetInnerHTML={{ __html: props.description }}\n        />\n      </label>\n\n      <div\n        className=\"customize-control-notifications-container\"\n        ref={props.setNotificationContainer}\n      ></div>\n\n      <button\n        type=\"button\"\n        className=\"kirki-control-reset\"\n        onClick={handleReset}\n      >\n        <i className=\"dashicons dashicons-image-rotate\"></i>\n      </button>\n\n      <ul className={\"kirki-colors kirki-\" + choices.shape + \"-colors\"}>\n        {choices.colors.map((color, index) => {\n          const itemClassName =\n            color === selectedItem ? \"kirki-color is-selected\" : \"kirki-color\";\n\n          return (\n            <li\n              key={index.toString()}\n              className={itemClassName}\n              style={{\n                width: size + \"px\",\n                height: size + \"px\",\n              }}\n            >\n              <div\n                title={color}\n                style={{\n                  backgroundColor: color,\n                }}\n                onClick={handleSelect}\n              ></div>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default KirkiColorPaletteForm;\n","import KirkiColorPaletteForm from './KirkiColorPaletteForm';\r\n\r\n/**\r\n * KirkiColorPaletteControl.\r\n *\r\n * Global objects brought:\r\n * - wp\r\n * - jQuery\r\n * - React\r\n * - ReactDOM\r\n *\r\n * @class\r\n * @augments wp.customize.Control\r\n * @augments wp.customize.Class\r\n */\r\nconst KirkiColorPaletteControl = wp.customize.Control.extend({\r\n\r\n\t/**\r\n\t * Initialize.\r\n\t *\r\n\t * @param {string} id - Control ID.\r\n\t * @param {object} params - Control params.\r\n\t */\r\n\tinitialize: function (id, params) {\r\n\t\tconst control = this;\r\n\r\n\t\t// Bind functions to this control context for passing as React props.\r\n\t\tcontrol.setNotificationContainer = control.setNotificationContainer.bind(control);\r\n\r\n\t\twp.customize.Control.prototype.initialize.call(control, id, params);\r\n\r\n\t\t// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.\r\n\t\tfunction onRemoved(removedControl) {\r\n\t\t\tif (control === removedControl) {\r\n\t\t\t\tcontrol.destroy();\r\n\t\t\t\tcontrol.container.remove();\r\n\t\t\t\twp.customize.control.unbind('removed', onRemoved);\r\n\t\t\t}\r\n\t\t}\r\n\t\twp.customize.control.bind('removed', onRemoved);\r\n\t},\r\n\r\n\t/**\r\n\t * Set notification container and render.\r\n\t *\r\n\t * This is called when the React component is mounted.\r\n\t *\r\n\t * @param {Element} element - Notification container.\r\n\t * @returns {void}\r\n\t */\r\n\tsetNotificationContainer: function setNotificationContainer(element) {\r\n\t\tconst control = this;\r\n\r\n\t\tcontrol.notifications.container = jQuery(element);\r\n\t\tcontrol.notifications.render();\r\n\t},\r\n\r\n\t/**\r\n\t * Render the control into the DOM.\r\n\t *\r\n\t * This is called from the Control#embed() method in the parent class.\r\n\t *\r\n\t * @returns {void}\r\n\t */\r\n\trenderContent: function renderContent() {\r\n\t\tconst control = this;\r\n\r\n\t\tReactDOM.render(\r\n\t\t\t<KirkiColorPaletteForm\r\n\t\t\t\t{...control.params}\r\n\t\t\t\tcontrol={control}\r\n\t\t\t\tcustomizerSetting={control.setting}\r\n\t\t\t\tsetNotificationContainer={control.setNotificationCotainer}\r\n\t\t\t\tvalue={control.params.value}\r\n\t\t\t/>,\r\n\t\t\tcontrol.container[0]\r\n\t\t);\r\n\r\n\t\tif (false !== control.params.choices.allowCollapse) {\r\n\t\t\tcontrol.container.addClass('allowCollapse');\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n\t * After control has been first rendered, start re-rendering when setting changes.\r\n\t *\r\n\t * React is able to be used here instead of the wp.customize.Element abstraction.\r\n\t *\r\n\t * @returns {void}\r\n\t */\r\n\tready: function ready() {\r\n\t\tconst control = this;\r\n\r\n\t\t/**\r\n\t\t * Update component value's state when customizer setting's value is changed.\r\n\t\t */\r\n\t\tcontrol.setting.bind((val) => {\r\n\t\t\tcontrol.updateComponentState(val);\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t * This method will be overriden by the rendered component.\r\n\t */\r\n\tupdateComponentState: (val) => { },\r\n\r\n\t/**\r\n\t * Handle removal/de-registration of the control.\r\n\t *\r\n\t * This is essentially the inverse of the Control#embed() method.\r\n\t *\r\n\t * @link https://core.trac.wordpress.org/ticket/31334\r\n\t * @returns {void}\r\n\t */\r\n\tdestroy: function destroy() {\r\n\t\tconst control = this;\r\n\r\n\t\t// Garbage collection: undo mounting that was done in the embed/renderContent method.\r\n\t\tReactDOM.unmountComponentAtNode(control.container[0]);\r\n\r\n\t\t// Call destroy method in parent if it exists (as of #31334).\r\n\t\tif (wp.customize.Control.prototype.destroy) {\r\n\t\t\twp.customize.Control.prototype.destroy.call(control);\r\n\t\t}\r\n\t}\r\n});\r\n\r\nexport default KirkiColorPaletteControl;\r\n","import \"./control.scss\";\r\nimport KirkiColorPaletteControl from './KirkiColorPaletteControl';\r\n\r\n\r\n// Register control type with Customizer.\r\nwp.customize.controlConstructor['kirki-color-palette'] = KirkiColorPaletteControl;\r\n"],"names":["module","React","$1a969aa9e5f28e8b$export$2e2bcd8739ae039","props","control","customizerSetting","choices","selectedItem","setSelectedItem","useState","value","updateComponentState","val","handleSelect","e","set","target","title","size","createElement","className","tabIndex","label","dangerouslySetInnerHTML","__html","description","ref","setNotificationContainer","type","onClick","default","shape","colors","map","color","index","itemClassName","key","toString","style","width","height","backgroundColor","wp","customize","Control","extend","initialize","id","params","this","bind","ReactDOM","render","prototype","call","removedControl","destroy","container","remove","onRemoved","element","notifications","unmountComponentAtNode","controlConstructor","KirkiColorPaletteControl"],"version":3,"file":"control.js.map"}