import { NgxMoveableComponent } from "ngx-moveable";
import { Component, AfterViewInit } from "@angular/core";

const CustomElement = `
class CustomElement extends HTMLElement {
    styleText = ${"`"}
.card {
width: 100%;
height: 100%;
}

.card-header {
width:100%;
height: 80px;
background-color: #3794FF;
}

.card-content {
    width: 100%;
    height: calc(100% - 80px);
    background-color: #EDF0F3;
    position: relative;
}

.card-inner {
    position: relative;
    top: 50px;
    left: 50px;
}
${"`"};

    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        const style = document.createElement('style');
        const div = document.createElement('div');
        div.classList.add('card');
        div.innerHTML = ${"`"}
<div class="card-header"></div>
<div class="card-content">
    <div class="card-inner">
        <slot name="custom-element"></slot>
    </div>
</div>
${"`"};
        style.textContent = this.styleText;
        this.shadow.appendChild(style);
        this.shadow.appendChild(div);
    }
}
if (!customElements.get("custom-element")) {
    customElements.define('custom-element', CustomElement);
}
`;
if (typeof window !== "undefined") {
    eval(CustomElement);
}
declare global {interface HTMLElementTagNameMap {"custom-element": HTMLElement;}namespace JSX {interface IntrinsicElements {"custom-element": React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLElement>, HTMLElement>;}}}
@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent implements AfterViewInit {
    agent: any = "";
    ngAfterViewInit() {
        this.agent = navigator.userAgent;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
}