{"html":"<div id=\"{{uc_id}}\" class=\"ue-checkbox-field {{ucform_class}}\" style=\"direction: {{rtl}};\">\n  \n  {% if show_label == \"true\" %}<div class=\"ue-checkbox-field-title\">{{label|raw}}<\/div>{% endif %}\n  \n  <div class=\"ue-checkbox-desc-wrapper\">\n    \n    <input class=\"ue-checkbox-field-input ue-input-field\" type=\"number\" name=\"{{field_name|raw}}\" value=\"0\" data-editor=\"{{uc_inside_editor}}\" tabindex=\"-1\">\n  \n    <form class=\"ue-checkbox-field-form ue-input-field\"> \n\n       {{put_items()}}\n    \n    <\/form>\n    {% if show_description == \"true\" %}<div class=\"ue-checkbox-field-descr\">{{description|raw}}<\/div>{% endif %}\n    \n  <\/div>\n<\/div>","html_item":"<a class=\"ue-checkbox-field-item {{item.item_repeater_class}}\" href=\"javascript:void(0);\">\n\n  <input id=\"{{item.item_id}}\" class=\"ue-checkbox-field-item-input\" type=\"checkbox\" value=\"{{item.item_value}}\" tabindex=\"-1\">\n\n  <label class=\"ue-checkbox-field-item-label\" for=\"{{item.item_id}}\">\n    \n     {% if (display_format == \"simple\") or (display_format == \"buttons\") %}{{item.title}}{% endif %}\n    \n     {% if display_format == \"image\" %}\n       <img src=\"{{item.checkbox_image}}\" alt=\"{{item.checkbox_image_alt}}\" title=\"{{item.checkbox_image_title}}\" {{item.checkbox_image_attributes|raw}}>\n       <span class=\"ue-checkbox-field-item-image-title\">{{item.title}}<\/span>\n     {% endif %}\n    \n  <\/label>\n\n<\/a>","css":"#{{uc_id}}.ucform-has-conditions{\n\tdisplay: none;\n}\n{% if rtl == \"true\" %}\n#{{uc_id}} *{\n  direction: rtl;\n}\n{% endif %}\n\n{% if uc_inside_editor == \"yes\" %}\n  #{{uc_id}}.ucform-has-conditions{\n      display: block;\n  }\n{% endif %}\n\n{% if show_title == \"true\" %}\n  #{{uc_id}}.ue-checkbox-field{\n    display:flex;\n  }\n{% endif %}\n\n{% if show_description == \"true\" %}\n#{{uc_id}} .ue-checkbox-desc-wrapper{\t\n  display:flex;\n}\n{% endif %}\n\n#{{uc_id}} .ue-checkbox-field-input{\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n#{{uc_id}} .ue-checkbox-field-item{\n  display: flex;\n}\n#{{uc_id}} .ue-checkbox-field-item-label{\n  cursor: pointer;\n}\n\n{% if display_format == \"simple\" %}\n\n#{{uc_id}} .ue-checkbox-field-form{\n  display: flex;\n}\n#{{uc_id}} .ue-checkbox-field-item-label {\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition-duration: 300ms;\n}\n\n#{{uc_id}} .ue-checkbox-field-item-input {\n  position: absolute;\n  opacity: 0;\n}\n\n#{{uc_id}} .ue-checkbox-field-item-input + .ue-checkbox-field-item-label {\n  position: relative;\n  cursor: pointer;\n  padding: 0;\n}\n\n#{{uc_id}} .ue-checkbox-field-item-input + .ue-checkbox-field-item-label:before {\n  content: \"\";\n  display: inline-block;\n  vertical-align: text-top;\n  transition-duration: 300ms;\n  cursor: pointer;\n}\n\n#{{uc_id}} .ue-checkbox-field-item-input:checked + .ue-checkbox-field-item-label:after {\n  content: \"\";\n  position: absolute;\n  transition-duration: 300ms;\n  width: 2px;\n  height: 2px;\n  transform: rotate(45deg);\n}\n{% endif %}\n\n{% if display_format == \"image\" %}\n\n#{{uc_id}} .ue-checkbox-field-form{\n  display:grid;\n}\n#{{uc_id}} .ue-checkbox-field-item-input{\n  display:none;\n}\n#{{uc_id}} .ue-checkbox-field-item-label{\n  display: flex;\n  flex-direction:column;\n  overflow:hidden;\n}\n#{{uc_id}} .ue-checkbox-field-item-image-title{\n  display:block;\n  width:100%;\n}\n#{{uc_id}} .ue-checkbox-field-item-label{\n  width:100%;\n}\n#{{uc_id}} .ue-checkbox-field-item-label img{\n  width:100%;\n}\n#{{uc_id}} .ue-checkbox-desc-wrapper{\n  width:100%;\n}\n{% endif %}\n\n{% if display_format == \"buttons\" %}\n  \n#{{uc_id}} .ue-checkbox-field-form{\n  display:flex;\n}\n#{{uc_id}} .ue-checkbox-field-item-input{\n  display:none;\n}\n{% endif %}","js":"{{ ucfunc(\"put_docready_start\") }}\n\t\t\n\tvar objWidget = jQuery(\"#{{uc_id}}\");\n  \tvar itemSelector = \".ue-checkbox-field-item\";\n  \tvar objItems = objWidget.find(itemSelector);\n  \tvar itemInputSelector = \".ue-checkbox-field-item-input\";\n  \tvar objInputs = objWidget.find(itemInputSelector);\n  \tvar objMainInput = objWidget.find(\".ue-checkbox-field-input\");\n  \tvar checkedClass = \"ue-checkbox-checked\";\n\tvar g_mainValue = Number(objMainInput.val());\n  \n  \tfunction setChecked(objInput){\n    \t\t\n      var optionVal = Number(objInput.val());\n      var objSelectedItem = objInput.parents(itemSelector);\n      var isChecked = objSelectedItem.hasClass(checkedClass);\n            \n      if(isChecked == false){\n      \n\t      \/\/sum main value and item value\n    \t  g_mainValue = g_mainValue + optionVal;\n                \n          \/\/set checked attr\n          objInput[0].setAttribute(\"checked\", \"\");\n\n      }\n      \n       if(isChecked == true){\n      \n\t      \/\/minus item value from main value\n    \t  g_mainValue = g_mainValue - optionVal;\n         \n          \/\/remove checked attr\n          objInput.removeAttr(\"checked\");\n\n      }\n      \n      \/\/set value to main input\n      objMainInput.attr('value', g_mainValue)\n      \n      \/\/trigger input event\n      objMainInput.trigger(\"input\");\n      \n    }\n  \n  \tfunction onInputChange(){\n    \n      var objInput = jQuery(this);\n     \n      setChecked(objInput);\n      \n    }\n  \n  \tfunction onItemsInputChange(){\n    \n   \t  var objSelectedInput = jQuery(this);             \n      var objSelectedItem = objSelectedInput.parents(itemSelector);\n      var isActive = objSelectedItem.hasClass(checkedClass); \n     \n      if(isActive == true)\n      objSelectedItem.removeClass(checkedClass);\n      else\n      objSelectedItem.addClass(checkedClass); \n    \n    }\n   \n  \t\/\/init events\n  \tobjInputs.on(\"input\", onInputChange);  \t\n  \n    \/\/ Add ue-radio-checked class to parent item\n    objInputs.on('change', onItemsInputChange);  \n\n\t\/\/start conditions\t\n\tvar strJsonVisibility = {{put_attributes_json(null,\"visibility\")}};\n    var arrVisibility = JSON.parse(strJsonVisibility);\n\n\tfunction setFieldVisibility(){\n    \t\n      g_ucUnlimitedForms.setVisibility(arrVisibility, \"{{uc_id}}\", \"{{ucform_class}}\");\n \n    }\n\n\tsetFieldVisibility();\t\n\n  \t\/\/init events\n    var objAllInputFields = jQuery(\".ue-input-field\");\n    var objAllOptionFields = jQuery(\".ue-option-field\");\n\n    objAllInputFields.on('input', setFieldVisibility);    \n    objAllOptionFields.on('change', setFieldVisibility);\n\t\n    objAllInputFields.on('input_calc', setFieldVisibility);\n\tobjAllOptionFields.on('input_calc', setFieldVisibility);\n\t\/\/end conditions\n\n{{ ucfunc(\"put_docready_end\") }}"}