// #region Imports
import { html } from '../../../../Dom/Html';
// #endregion
/**
 * The template of the `TileListItemElement`.
 *
 * @public
 */
export function tileListItemElementTemplate(e) {
    return html `
        <div part="root"
             draggable="${e.reorderable}"
             @dragstart="${(x) => e.onDragStart(x)}"
             @dragend="${() => e.onDragEnd()}">
             <mosaik-resize part="resize"
                            .mode="${'deferred'}"
                            .ghostFactory=${() => createTileGhost(e)}
                            ?active=${e.resizable}
                            @resizeResizeStarted=${() => e.onResizeStart()}
                            @resizeResized=${() => e.onResize()}
                            @resizeResizeEnded=${() => e.onResizeEnd()}
                            @resizeResizeCanceled=${() => e.onResizeCancel()}>
                <div part="content">
                    <slot></slot>
                </div>
                <mosaik-dot slot="bottom-adorner"></mosaik-dot>
                <mosaik-dot slot="corner-adorner"></mosaik-dot>
                <mosaik-dot slot="side-adorner"></mosaik-dot>
            </mosaik-resize>
        </div>

    `;
}
function createTileGhost(e) {
    const element = document.createElement('mosaik-ghost');
    // const computed = getComputedStyle(e);
    const { x, y, width, height } = e.getBoundingClientRect();
    const { scrollX, scrollY } = window;
    element.width = width;
    element.height = height;
    element.top = y + scrollY;
    element.left = x + scrollX;
    // Object.assign(element.style, {
    //     background: computed.getPropertyValue('--placeholder-background'),
    //     border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,
    //     borderRadius: computed.getPropertyValue('--border-radius')
    //     // width: `${width}px`,
    //     // height: `${height}px`
    //     //  top: `${y + scrollY}px`,
    //     // left: `${x + scrollX}px`,
    // });
    return element;
}
//# sourceMappingURL=TileListItemElementTemplate.js.map