import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import * as css from '../theme/default/chip.m.css';
import Icon from '../icon/index';
import { Keys } from '../common/util';
const factory = create({ theme })
    .properties()
    .children();
export default factory(function Chip({ properties, children, middleware: { theme } }) {
    const { onClose, onClick, disabled, checked, theme: themeProp, variant, classes = {} } = properties();
    const themedCss = theme.classes(css);
    const [{ icon, label, closeIcon }] = children();
    const clickable = !disabled && onClick;
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themedCss.root,
            disabled && themedCss.disabled,
            clickable && themedCss.clickable
        ], role: clickable ? 'button' : undefined, onclick: () => {
            if (clickable && onClick) {
                onClick();
            }
        }, tabIndex: clickable ? 0 : undefined, onkeydown: (event) => {
            if (clickable &&
                onClick &&
                (event.which === Keys.Enter || event.which === Keys.Space)) {
                event.preventDefault();
                onClick();
            }
        } },
        icon && tsx("span", { classes: themedCss.iconWrapper }, icon(checked)),
        tsx("span", { classes: themedCss.label }, label),
        onClose && (tsx("span", { key: "closeButton", classes: themedCss.closeIconWrapper, tabIndex: 0, role: "button", onclick: (event) => {
                event.stopPropagation();
                onClose();
            }, onkeydown: (event) => {
                if (event.which === Keys.Enter || event.which === Keys.Space) {
                    event.stopPropagation();
                    event.preventDefault();
                    onClose();
                }
            } }, closeIcon || (tsx(Icon, { type: "closeIcon", classes: Object.assign({}, classes, { '@dojo/widgets/icon': Object.assign({}, classes['@dojo/widgets/icon'], { icon: [themedCss.icon] }) }), theme: themeProp, variant: variant }))))));
});

/*# sourceMappingURL=index.mjs.map*/