@node-projects/web-component-designer 0.0.292 → 0.1.0

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js

@@ -1,293 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { filterChildPlaceItems } from '../../../../../helper/LayoutHelper.js';
-import { calculateOuterRect } from '../../../../../helper/ElementHelper.js';
-export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
-    _designerView;
-    _previousSelectionRect;
-    _selectionChanged;
-    _relativeButton;
-    _absoluteButton;
-    _applyButton;
-    _inputX;
-    _inputY;
-    _inputR;
-    _originTopLeft;
-    _originTopMid;
-    _originTopRight;
-    _originMidLeft;
-    _originMidMid;
-    _originMidRight;
-    _originBotLeft;
-    _originBotMid;
-    _originBotRight;
-    _transformMode;
-    _transformOrigin;
-    static style = css `
-      .container {
-          width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .inputs{
-        float: left;
-        margin-top: 5px;
-        align-items: center;
-      }
-      .input {
-        display: flex;
-        align-items: center; 
-        margin-top: 5px;
-      }
-      .text {
-        margin-left: 5px;
-        font-size: 14px;
-      }
-      .strokecolor{ 
-        float: both;
-      }
-      .fillbrush{
-        float: both;
-      }
-      .strokethickness{
-        float: both;
-      }
-      #input-div{
-        display: grid;
-        grid-template-columns: 1fr 9fr;
-        grid-template-rows: 25px 25px 25px;
-        grid-row-gap: 2px;
-        font-size: small;
-        margin: 10px;
-      }
-      #button-div{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 25px;
-        font-size: small;
-        margin: 10px;
-        grid-column-gap: 5px
-      }
-      #apply-div{
-        font-size: small;
-        justify-content: center;
-        width: 100%;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        display: flex;
-      }
-      #cube{
-        display: grid;
-        grid-template-columns: 20px 20px 20px;
-        grid-template-rows: 20px 20px 20px;
-        grid-gap: 10px;
-        padding: 10px;
-        top: -80px;
-        position: relative;
-      }
-      #cube-background{
-        width: 60px;
-        height: 60px;
-        background: gray;
-        margin-top: 20px;
-        margin-left: 20px;
-      }
-      `;
-    static template = html `
-        <div class="container">
-          <header>
-            <h2 id="title" style="margin:0px;">Transform</h2>
-          </header>
-          <main id="content-area">
-            <div id="input-div">
-              <span>X:</span>
-              <input type="number" id="transform-input-x">
-              <span>Y:</span>
-              <input type="number" id="transform-input-y">
-              <span>R:</span>
-              <input type="number" id="transform-input-r">
-            </div>
-            <div id="button-div">
-              <button id="transform-button-absolute">absolute</button>
-              <button id="transform-button-relative">relative</button>
-            </div>
-
-            <div style="justify-content: center; display: grid; height: 100px">
-              <div id="cube-background"></div>
-                <div id="cube">
-                  <input id="origin-top-left" type="radio" name="origin-radio">
-                  <input id="origin-top-mid" type="radio" name="origin-radio">
-                  <input id="origin-top-right" type="radio" name="origin-radio">
-                  <input id="origin-mid-left" type="radio" name="origin-radio">
-                  <input id="origin-mid-mid" type="radio" name="origin-radio" checked>
-                  <input id="origin-mid-right" type="radio" name="origin-radio">
-                  <input id="origin-bot-left" type="radio" name="origin-radio">
-                  <input id="origin-bot-mid" type="radio" name="origin-radio">
-                  <input id="origin-bot-right" type="radio" name="origin-radio">
-                </div>
-            </div>
-
-            <div id="apply-div">
-              <button id="transform-button-apply" style="width:100px;">apply</button>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        this._relativeButton = this._getDomElement("transform-button-relative");
-        this._absoluteButton = this._getDomElement("transform-button-absolute");
-        this._applyButton = this._getDomElement("transform-button-apply");
-        this._inputX = this._getDomElement("transform-input-x");
-        this._inputY = this._getDomElement("transform-input-y");
-        this._inputR = this._getDomElement("transform-input-r");
-        this._originTopLeft = this._getDomElement("origin-top-left");
-        this._originTopMid = this._getDomElement("origin-top-mid");
-        this._originTopRight = this._getDomElement("origin-top-right");
-        this._originMidLeft = this._getDomElement("origin-mid-left");
-        this._originMidMid = this._getDomElement("origin-mid-mid");
-        this._originMidRight = this._getDomElement("origin-mid-right");
-        this._originBotLeft = this._getDomElement("origin-bot-left");
-        this._originBotMid = this._getDomElement("origin-bot-mid");
-        this._originBotRight = this._getDomElement("origin-bot-right");
-        this._relativeButton.onclick = () => this._changePositionMode("relative");
-        this._absoluteButton.onclick = () => this._changePositionMode("absolute");
-        this._applyButton.onclick = () => this._applyTransform();
-        this._transformMode = "relative";
-        this._changePositionMode(this._transformMode);
-    }
-    _changePositionMode(mode) {
-        if (mode == "relative") {
-            this._relativeButton.style.backgroundColor = "#6F8A9D";
-            this._relativeButton.style.color = "black";
-            this._absoluteButton.style.backgroundColor = "#A4B5C1";
-            this._absoluteButton.style.color = "#77716E";
-        }
-        else {
-            this._absoluteButton.style.backgroundColor = "#6F8A9D";
-            this._absoluteButton.style.color = "black";
-            this._relativeButton.style.backgroundColor = "#A4B5C1";
-            this._relativeButton.style.color = "#77716E";
-        }
-        this._transformMode = mode;
-    }
-    _applyTransform() {
-        this._checkOrigin();
-        this._designerView = this.getRootNode().host.designerView;
-        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
-        selection = filterChildPlaceItems(selection);
-        this._selectionChanged = false;
-        this._designerView.instanceServiceContainer.selectionService.onSelectionChanged.once(() => {
-            this._selectionChanged = true;
-            this._previousSelectionRect = null;
-        });
-        if (selection.length != 0) {
-            let inputPos = {
-                x: isNaN(this._inputX.valueAsNumber) ? null : this._inputX.valueAsNumber,
-                y: isNaN(this._inputY.valueAsNumber) ? null : this._inputY.valueAsNumber
-            };
-            let inputRotation = this._inputR.valueAsNumber ? this._inputR.valueAsNumber : 0;
-            let grp = selection[0].openGroup("Transform selection");
-            if (!this._previousSelectionRect || this._selectionChanged)
-                this._previousSelectionRect = calculateOuterRect(selection, this._designerView.designerCanvas);
-            let origin = this._calculateTransformOriginPosition(this._previousSelectionRect);
-            for (let item of selection) {
-                let itemPos = {
-                    x: parseFloat(item.getStyle("left")),
-                    y: parseFloat(item.getStyle("top")),
-                    width: parseFloat(item.getStyle("width")),
-                    height: parseFloat(item.getStyle("height"))
-                };
-                let itemRotStyle = item.getStyle("transform");
-                let itemRotation = 0;
-                if (itemRotStyle)
-                    itemRotation = parseFloat(item.getStyle("transform").replaceAll("rotate(", "").replaceAll("deg)", ""));
-                let newPos = this._calculateTransform(this._previousSelectionRect, origin, itemPos, inputRotation, inputPos, this._transformMode);
-                item.setStyle("left", newPos.x.toString() + "px");
-                item.setStyle("top", newPos.y.toString() + "px");
-                let rotation;
-                if (this._transformMode == 'relative')
-                    rotation = itemRotation + inputRotation;
-                else
-                    rotation = inputRotation;
-                while (rotation >= 360)
-                    rotation -= 360;
-                if (rotation != 0)
-                    item.setStyle("transform", "rotate(" + rotation + "deg)");
-                else
-                    item.removeStyle("transform");
-            }
-            grp.commit();
-        }
-    }
-    _calculateTransformOriginPosition(selectionRect) {
-        switch (this._transformOrigin) {
-            case "topLeft":
-                return { x: selectionRect.x, y: selectionRect.y };
-            case "topMid":
-                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y };
-            case "topRight":
-                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y };
-            case "midLeft":
-                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height / 2 };
-            case "midMid":
-                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height / 2 };
-            case "midRight":
-                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height / 2 };
-            case "botLeft":
-                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height };
-            case "botMid":
-                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height };
-            case "botRight":
-                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height };
-        }
-    }
-    _checkOrigin() {
-        if (this._originTopLeft.checked)
-            this._transformOrigin = "topLeft";
-        else if (this._originTopMid.checked)
-            this._transformOrigin = "topMid";
-        else if (this._originTopRight.checked)
-            this._transformOrigin = "topRight";
-        else if (this._originMidLeft.checked)
-            this._transformOrigin = "midLeft";
-        else if (this._originMidMid.checked)
-            this._transformOrigin = "midMid";
-        else if (this._originMidRight.checked)
-            this._transformOrigin = "midRight";
-        else if (this._originBotLeft.checked)
-            this._transformOrigin = "botLeft";
-        else if (this._originBotMid.checked)
-            this._transformOrigin = "botMid";
-        else if (this._originBotRight.checked)
-            this._transformOrigin = "botRight";
-    }
-    _calculateTransform(selectionRect, origin, itemRect, rotation, inputPos, transformMode) {
-        let newPoint;
-        // convert deg in rad
-        rotation = rotation * (Math.PI / 180);
-        if (transformMode == 'absolute') {
-            if (inputPos.x)
-                inputPos.x = inputPos.x - selectionRect.x;
-            if (inputPos.y)
-                inputPos.y = inputPos.y - selectionRect.y;
-        }
-        origin = {
-            x: origin.x - itemRect.width / 2,
-            y: origin.y - itemRect.height / 2
-        };
-        let diffItemPosToOrigin = {
-            x: itemRect.x - origin.x,
-            y: itemRect.y - origin.y
-        };
-        newPoint = {
-            x: Math.cos(rotation) * diffItemPosToOrigin.x - Math.sin(rotation) * diffItemPosToOrigin.y + origin.x + inputPos.x,
-            y: Math.sin(rotation) * diffItemPosToOrigin.x + Math.cos(rotation) * diffItemPosToOrigin.y + origin.y + inputPos.y
-        };
-        return newPoint;
-    }
-}
-customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);

package/dist/elements/widgets/miniatureView/IMiniatureView.d.ts

@@ -1,2 +0,0 @@
-export interface IMiniatureView {
-}

package/dist/elements/widgets/miniatureView/IMiniatureView.js

@@ -1 +0,0 @@
-export {};

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.d.ts

@@ -1,10 +0,0 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignerCanvas } from '../designerView/IDesignerCanvas.js';
-import { IMiniatureView } from './IMiniatureView.js';
-export declare class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend implements IMiniatureView {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _imgdiv;
-    constructor();
-    reRender(designerView: IDesignerCanvas): void;
-}

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -1,21 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
-    static style = css ``;
-    static template = html `
-        <div class="imgdiv">
-        </div>`;
-    _imgdiv;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._imgdiv = this._getDomElement('imgdiv');
-    }
-    reRender(designerView) {
-        //@ts-ignore
-        html2canvas(designerView.rootDesignItem.element).then(canvas => {
-            DomHelper.removeAllChildnodes(this._imgdiv);
-            this._imgdiv.appendChild(canvas);
-        });
-    }
-}
-customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

package/dist/elements/widgets/paletteView/paletteElements.d.ts

@@ -1,10 +0,0 @@
-import { IElementDefinition } from '../../services/elementsService/IElementDefinition.js';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _table;
-    constructor();
-    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
-}

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -1,139 +0,0 @@
-import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
-import { DrawElementTool } from '../designerView/tools/DrawElementTool.js';
-export class PaletteElements extends BaseCustomWebComponentLazyAppend {
-    static style = css `
-    :host {
-      display: block;
-      box-sizing: border-box;
-      height: 100%;
-      overflow: auto;        
-    }
-
-    button {
-      background-color: transparent;
-      color: white;
-      border: none;
-      font-size: 13px;
-      display: block;
-      cursor: pointer;
-      width: 100%;
-      text-align: left;
-      padding: 8px 14px;
-    }
-    button:hover {
-      background: var(--light-grey, #383f52);
-    }
-
-    table {
-      width: 100%
-    }
-
-    td {
-      color: white;
-      font-size: 13px;
-    }
-
-    div {
-      text-transform: uppercase;
-      font-size: 12px;
-      font-weight: bold;
-      padding: 4px 14px;
-    }
-    `;
-    static template = html `
-    <table id="table">
-    </table>
-  `;
-    _table;
-    constructor() {
-        super();
-        this._table = this._getDomElement('table');
-    }
-    loadElements(serviceContainer, elementDefintions) {
-        for (const elementDefintion of elementDefintions) {
-            let option = document.createElement("option");
-            option.value = elementDefintion.tag;
-            const tr = document.createElement("tr");
-            const tdEl = document.createElement("td");
-            const button = document.createElement("button");
-            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
-            button.draggable = true;
-            button.ondragstart = (e) => {
-                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
-                e.currentTarget.style.outline = "dashed";
-                if (elementDefintion.ghostElement) {
-                    if (typeof elementDefintion.ghostElement === 'string') {
-                        const range = document.createRange();
-                        range.selectNode(document.body);
-                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
-                        let elem = fragment.firstChild;
-                        elem.style.position = "absolute";
-                        elem.style.top = "-1000px";
-                        document.body.appendChild(elem);
-                        e.dataTransfer.setDragImage(elem, 0, 0);
-                        requestAnimationFrame(() => document.body.removeChild(elem));
-                    }
-                    else {
-                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
-                    }
-                }
-                else if (!elementDefintion.import) {
-                    try {
-                        let elem = document.createElement(elementDefintion.tag);
-                        if (elementDefintion.defaultContent)
-                            elem.innerHTML = elementDefintion.defaultContent;
-                        if (elementDefintion.defaultWidth)
-                            elem.style.width = elementDefintion.defaultWidth;
-                        if (elementDefintion.defaultHeight)
-                            elem.style.height = elementDefintion.defaultHeight;
-                        if (elementDefintion.defaultAttributes) {
-                            for (let a in elementDefintion.defaultAttributes) {
-                                elem.setAttribute(a, elementDefintion.defaultAttributes[a]);
-                            }
-                        }
-                        if (elementDefintion.defaultStyles) {
-                            for (let s in elementDefintion.defaultStyles) {
-                                elem.style[s] = elementDefintion.defaultStyles[s];
-                            }
-                        }
-                        elem.style.position = "absolute";
-                        if (elementDefintion.defaultWidth)
-                            elem.style.top = "-" + (parseInt(elementDefintion.defaultHeight) + 500) + 'px';
-                        else
-                            elem.style.top = "-500px";
-                        if (elementDefintion.defaultWidth)
-                            elem.style.left = "-" + (parseInt(elementDefintion.defaultWidth) + 500) + 'px';
-                        else
-                            elem.style.left = "-500px";
-                        document.body.appendChild(elem);
-                        let rect = elem.getBoundingClientRect();
-                        if (rect.width > 0 && rect.height > 0)
-                            e.dataTransfer.setDragImage(elem, 0, 0);
-                        requestAnimationFrame(() => document.body.removeChild(elem));
-                    }
-                    catch (err) {
-                        console.warn("error creating gost elment", err);
-                    }
-                }
-            };
-            button.ondragend = (e) => {
-                elementDefintion.import = null;
-                e.currentTarget.style.outline = "none";
-            };
-            button.ontouchstart = (e) => {
-                e.preventDefault();
-            };
-            button.onclick = (x) => {
-                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
-            };
-            tdEl.appendChild(button);
-            tr.appendChild(tdEl);
-            const tdDesc = document.createElement("td");
-            tdDesc.innerText = elementDefintion.description ?? "";
-            tr.appendChild(tdDesc);
-            this._table.appendChild(tr);
-        }
-    }
-}
-customElements.define('node-projects-palette-elements', PaletteElements);

package/dist/elements/widgets/paletteView/paletteTreeView.d.ts

@@ -1,12 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { IElementsService } from '../../services/elementsService/IElementsService.js';
-export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
-    private _treeDiv;
-    private _tree;
-    private _filter;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
-}

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -1,141 +0,0 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
-export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
-    _treeDiv;
-    _tree;
-    _filter;
-    static style = css `
-      :host {
-        display: block;
-      }
-
-      * {
-          touch-action: none;
-      }
-
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-      span.fancytree-title {
-        align-items: center;
-        flex-direction: row;
-        display: inline-flex;
-      }
-      td {
-        white-space: nowrap;
-      }
-      td:nth-child(n+2) {
-        text-align: center;
-      }
-      td > img {
-        vertical-align: middle;
-      }
-    `;
-    static template = html `
-  <div style="height: 100%;">
-    <input id="input" style="width: 100%; height: 25px; box-sizing: border-box;" placeholder="Filter..." autocomplete="off">
-    <div style="height: calc(100% - 26px); overflow: auto;">
-      <div id="treetable" style="min-width: 100%;"></div>
-    </div>
-  </div>`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@ts-ignore
-        if (window.importShim)
-            //@ts-ignore
-            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        else
-            //@ts-ignore
-            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        this._filter = this._getDomElement('input');
-        this._filter.onkeyup = () => {
-            let match = this._filter.value;
-            this._tree.filterNodes((node) => {
-                return new RegExp(match, "i").test(node.title);
-            });
-        };
-        this._treeDiv = this._getDomElement('treetable');
-        $(this._treeDiv).fancytree({
-            debugLevel: 0,
-            icon: true,
-            extensions: ['childcounter', 'dnd5', 'filter'],
-            quicksearch: true,
-            source: [],
-            tooltip: true,
-            filter: {
-                autoExpand: true,
-                mode: 'hide',
-                highlight: true
-            },
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
-                    data.dropEffect = "copy";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    return false;
-                }
-            }
-        });
-        //@ts-ignore
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        let rootNode = this._tree.getRootNode();
-        rootNode.removeChildren();
-        for (const s of elementsServices) {
-            const newNode = rootNode.addChildren({
-                title: s.name,
-                folder: true
-            });
-            try {
-                let elements = await s.getElements();
-                for (let e of elements) {
-                    newNode.addChildren({
-                        title: e.name ?? e.tag,
-                        folder: false,
-                        //@ts-ignore
-                        ref: e
-                    });
-                }
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-            try {
-                //@ts-ignore
-                newNode.updateCounters();
-            }
-            catch { }
-        }
-    }
-}
-customElements.define('node-projects-palette-tree-view', PaletteTreeView);

package/dist/elements/widgets/paletteView/paletteView.d.ts

@@ -1,11 +0,0 @@
-import '../../controls/DesignerTabControl.js';
-import { IElementsService } from '../../services/elementsService/IElementsService.js';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected: string;
-    private _designerTabControl;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
-}