import { r as registerInstance, h, H as Host } from './index-e0adbd54.js';

const styles = {
  top: {
    width: '100%',
    height: '10px',
    top: '-5px',
    left: '0px',
    cursor: 'row-resize',
  },
  right: {
    width: '10px',
    height: '100%',
    top: '0px',
    right: '-5px',
    cursor: 'col-resize',
  },
  bottom: {
    width: '100%',
    height: '10px',
    bottom: '-5px',
    left: '0px',
    cursor: 'row-resize',
  },
  left: {
    width: '10px',
    height: '100%',
    top: '0px',
    left: '-5px',
    cursor: 'col-resize',
  },
  topRight: {
    width: '20px',
    height: '20px',
    position: 'absolute',
    right: '-10px',
    top: '-10px',
    cursor: 'ne-resize',
  },
  bottomRight: {
    width: '20px',
    height: '20px',
    position: 'absolute',
    right: '-10px',
    bottom: '-10px',
    cursor: 'se-resize',
  },
  bottomLeft: {
    width: '20px',
    height: '20px',
    position: 'absolute',
    left: '-10px',
    bottom: '-10px',
    cursor: 'sw-resize',
  },
  topLeft: {
    width: '20px',
    height: '20px',
    position: 'absolute',
    left: '-10px',
    top: '-10px',
    cursor: 'nw-resize',
  },
};
const Resizer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.direction = undefined;
    this.replaceStyles = undefined;
    this.resizeStart = undefined;
  }
  render() {
    return (h(Host, { style: Object.assign(Object.assign({ position: 'absolute', userSelect: 'none' }, styles[this.direction]), (this.replaceStyles || {})), onMouseDown: (e) => {
        this.resizeStart(e, this.direction);
      }, onTouchStart: (e) => {
        this.resizeStart(e, this.direction);
      } }, h("slot", null)));
  }
};

export { Resizer as fireenjin_resizer };
