import { focus } from '@dojo/framework/core/middleware/focus';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties, isRenderResult } from '../common/util';
import { theme } from '../middleware/theme';
import * as css from '../theme/default/button.m.css';
const factory = create({ focus, theme })
    .properties()
    // [ButtonChildren] is needed for variant buttons to type correctly
    .children();
export const Button = factory(function Button({ children, id, middleware: { focus, theme }, properties }) {
    const { aria = {}, disabled, widgetId, name, type = 'button', value, onClick, onOut, onOver, onDown, onUp, onBlur, onFocus, title, kind = 'contained', iconPosition = 'before' } = properties();
    const themeCss = theme.classes(css);
    const idBase = widgetId || `button-${id}`;
    const [labelChild] = children();
    const { label, icon = undefined } = isRenderResult(labelChild)
        ? { label: children() }
        : labelChild;
    const iconOnly = icon && !label;
    const iconSpan = tsx("span", { classes: themeCss.icon }, icon);
    return (tsx("button", Object.assign({ classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            kind === 'text' ? themeCss.text : null,
            kind === 'contained' ? themeCss.contained : null,
            kind === 'outlined' ? themeCss.outlined : null,
            iconOnly ? themeCss.iconOnly : null
        ], title: title, disabled: disabled, id: idBase, focus: focus.shouldFocus(), name: name, type: type, value: value, onblur: () => onBlur && onBlur(), onclick: (event) => {
            event.stopPropagation();
            onClick && onClick();
        }, onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut(), onpointerdown: () => onDown && onDown(), onpointerup: () => onUp && onUp() }, formatAriaProperties(aria)),
        icon && iconPosition === 'before' ? iconSpan : undefined,
        label ? tsx("span", { classes: themeCss.label }, label) : undefined,
        icon && iconPosition === 'after' ? iconSpan : undefined));
});
export default Button;

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