import { __assign, __rest } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { Vue } from 'vue-property-decorator';
import { DirectionalHint } from '../../common/DirectionalHint.js';
import { CalloutContent } from './CalloutContent.js';
import { Layer } from '../Layer/Layer.js';

var Callout = Vue.extend({
  functional: true,
  props: __assign(__assign({}, withThemeableProps()), { target: { type: HTMLElement, required: true }, doNotLayer: { type: Boolean, default: false }, directionalHint: { type: Number, default: DirectionalHint.bottomAutoEdge } }),
  render: function(h, context) {
    if (!(context.props.target instanceof Node))
      return;
    var _a = context.props, layerProps = _a.layerProps, rest = __rest(_a, ["layerProps"]);
    var content = h(CalloutContent, __assign(__assign({}, context.data), { props: __assign(__assign(__assign({}, rest), context.data.props), context.data.attrs) }), context.children);
    return context.props.doNotLayer ? content : h(Layer, __assign(__assign({}, context.data), { props: layerProps }), [content]);
  }
});

export { Callout };
