import { useProp, useEvent, h } from 'atomico';
import 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';

var style = ".icon-checkbox_checked {\n  background-repeat: no-repeat;\n  cursor: pointer;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1588865121551' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2973' xmlns:xlink='http://www.w3.org/1999/xlink' width='200' height='200'%3E%3Cdefs%3E%3Cstyle type='text/css'/%3E%3C/defs%3E%3Cpath d='M924 64H100c-19.9 0-36 16.1-36 36v824c0 19.9 16.1 36 36 36h824c19.9 0 36-16.1 36-36V100c0-19.9-16.1-36-36-36zM753.8 403.1L485.1 671.8c-7 7-16.2 10.5-25.5 10.5s-18.4-3.5-25.5-10.5l-164-164c-14.1-14.1-14.1-36.9 0-50.9 14.1-14.1 36.9-14.1 50.9 0l138.6 138.6 243.2-243.2c14.1-14.1 36.9-14.1 50.9 0 14.2 14 14.2 36.7 0.1 50.8z' p-id='2974'/%3E%3C/svg%3E\");\n}\n\n.icon-checkbox_empty {\n  background-repeat: no-repeat;\n  cursor: pointer;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1588865078849' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2695' xmlns:xlink='http://www.w3.org/1999/xlink' width='200' height='200'%3E%3Cdefs%3E%3Cstyle type='text/css'/%3E%3C/defs%3E%3Cpath d='M812.084 958.259H211.055c-80.65 0-146.194-65.6-146.194-146.224v-601.03c0-80.595 65.546-146.166 146.194-146.166h601.029c80.596 0 146.195 65.571 146.195 146.167v601.03c0 80.623-65.6 146.223-146.195 146.223zM211.055 116.778c-51.966 0-94.228 42.261-94.228 94.228v601.03c0 51.966 42.262 94.255 94.228 94.255h601.029c51.967 0 94.228-42.289 94.228-94.256v-601.03c0-51.966-42.261-94.227-94.228-94.227H211.055z' p-id='2696'/%3E%3C/svg%3E\");\n}\n\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-checkbox/kun-checkbox.tsx";
const KunCheckbox = ({ width, height }) => {
  const [checked, setChecked] = useProp("checked");
  const [disabled] = useProp("disabled");
  const checkEvent = useEvent("MyChecked", {
    bubbles: true,
    composed: true,
  });
  const clickChecked = () => {
    if (disabled) {
      return;
    }
    setChecked(!checked);
    checkEvent({ checked: !checked });
  };
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 24}}, style)
      , h('div', { onclick: clickChecked, role: "presentation", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 25}}
        , 
          checked ? h('div', { className: "icon-checkbox_checked", style: { width: `${width}px`, height: `${height}px` }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}} ) : h('div', { className: "icon-checkbox_empty", style: { width: `${width}px`, height: `${height}px` }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}} )
        
      )
    )
  );
};

KunCheckbox.props = {
  disabled: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "disabled",
      bubbles: true,
      composed: true,
    },
  },
  checked: {
    type: Boolean,
    value: false,
    reflect: true,
    event: {
      type: "UpdateChecked",
      bubbles: true,
      composed: true,
    },
  },
  height: {
    type: Number,
    value: 24,
    reflect: true,
    event: {
      type: "changeMessage1",
    },
  },
  width: {
    type: Number,
    value: 24,
    reflect: true,
    event: {
      type: "changeMessage2",
    },
  },
};

var kunCheckbox = getComponentOrDefine("kun-checkbox", KunCheckbox);

export default kunCheckbox;
