@node-projects/web-component-designer 0.0.64 → 0.0.68

package/dist/elements/controls/ThicknessEditor.js

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
   :host {
     margin: 4px;
@@ -47,7 +47,7 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     border: 1px solid black;
     background: lightgray;
   }
-  `;
+  `;
     static template = html `
     <div id="container">
       <input id="left">
@@ -56,90 +56,90 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
       <input id="bottom">
       <div id="rect"></div>
     </div>
-  `;
-    _leftInput;
-    _topInput;
-    _rightInput;
-    _bottomInput;
-    _valueLeft;
-    get valueLeft() {
-        return this._valueLeft;
-    }
-    set valueLeft(value) {
-        const oldValue = this._valueLeft;
-        this._valueLeft = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueLeftChanged = new TypedEvent();
-    _valueTop;
-    get valueTop() {
-        return this._valueTop;
-    }
-    set valueTop(value) {
-        const oldValue = this._valueTop;
-        this._valueTop = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueTopChanged = new TypedEvent();
-    _valueRight;
-    get valueRight() {
-        return this._valueRight;
-    }
-    set valueRight(value) {
-        const oldValue = this._valueRight;
-        this._valueRight = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueRightChanged = new TypedEvent();
-    _valueBottom;
-    get valueBottom() {
-        return this._valueBottom;
-    }
-    set valueBottom(value) {
-        const oldValue = this._valueBottom;
-        this._valueBottom = value;
-        if (oldValue !== value) {
-            this._updateValue();
-            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
-        }
-    }
-    valueBottomChanged = new TypedEvent();
-    property;
-    unsetValue;
-    _updateValue() {
-        this._leftInput.value = this.valueLeft;
-        this._topInput.value = this.valueTop;
-        this._rightInput.value = this.valueRight;
-        this._bottomInput.value = this._valueBottom;
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this._leftInput = this._getDomElement('left');
-        this._topInput = this._getDomElement('top');
-        this._rightInput = this._getDomElement('right');
-        this._bottomInput = this._getDomElement('bottom');
-        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueLeft = this._leftInput.value; };
-        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueTop = this._topInput.value; };
-        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueRight = this._rightInput.value; };
-        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
-            this._valueBottom = this._bottomInput.value; };
-        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
-        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
-        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
-        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
-        this._updateValue();
-    }
-}
-customElements.define('node-projects-thickness-editor', ThicknessEditor);
+  `;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
+    }
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueBottomChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.d.ts

@@ -1,38 +1,38 @@
-import { BaseCustomWebComponentLazyAppend } from "@node-projects/base-custom-webcomponent";
-import { DesignerView } from "./widgets/designerView/designerView";
-import { ServiceContainer } from "./services/ServiceContainer";
-import { InstanceServiceContainer } from "./services/InstanceServiceContainer";
-import { ICodeView } from '../elements/widgets/codeView/ICodeView';
-import { IDemoView } from './widgets/demoView/IDemoView';
-import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
-import { IUiCommand } from "../commandHandling/IUiCommand";
-import { IDisposable } from "../interfaces/IDisposable";
-import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
-export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
-    designerView: DesignerView;
-    codeView: ICodeView & HTMLElement;
-    demoView: IDemoView & HTMLElement;
-    additionalData: any;
-    private _serviceContainer;
-    private _content;
-    private _tabControl;
-    private _selectionPosition;
-    private _splitDiv;
-    private _designerDiv;
-    private _codeDiv;
-    private refreshInSplitViewDebounced;
-    private _disableChangeNotificationDesigner;
-    private _disableChangeNotificationEditor;
-    static get style(): CSSStyleSheet;
-    constructor(serviceContainer: ServiceContainer, content?: string);
-    refreshInSplitView(): Promise<void>;
-    designerSelectionChanged(e: ISelectionChangedEvent): void;
-    designerContentChanged(): void;
-    dispose(): void;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    set content(value: string);
-    get content(): string;
-    ready(): void;
-    get instanceServiceContainer(): InstanceServiceContainer;
-}
+import { BaseCustomWebComponentLazyAppend } from "@node-projects/base-custom-webcomponent";
+import { DesignerView } from "./widgets/designerView/designerView";
+import { ServiceContainer } from "./services/ServiceContainer";
+import { InstanceServiceContainer } from "./services/InstanceServiceContainer";
+import { ICodeView } from '../elements/widgets/codeView/ICodeView';
+import { IDemoView } from './widgets/demoView/IDemoView';
+import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
+import { IUiCommand } from "../commandHandling/IUiCommand";
+import { IDisposable } from "../interfaces/IDisposable";
+import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
+export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
+    designerView: DesignerView;
+    codeView: ICodeView & HTMLElement;
+    demoView: IDemoView & HTMLElement;
+    additionalData: any;
+    private _serviceContainer;
+    private _content;
+    private _tabControl;
+    private _selectionPosition;
+    private _splitDiv;
+    private _designerDiv;
+    private _codeDiv;
+    private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
+    static get style(): CSSStyleSheet;
+    constructor(serviceContainer: ServiceContainer, content?: string);
+    refreshInSplitView(): Promise<void>;
+    designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
+    dispose(): void;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    set content(value: string);
+    get content(): string;
+    ready(): void;
+    get instanceServiceContainer(): InstanceServiceContainer;
+}

package/dist/elements/documentContainer.js

@@ -1,23 +1,23 @@
-import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
-import { DesignerTabControl } from "./controls/DesignerTabControl";
-import { DesignerView } from "./widgets/designerView/designerView";
-import { SimpleSplitView } from './controls/SimpleSplitView';
-export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
-    designerView;
-    codeView;
-    demoView;
-    additionalData;
-    _serviceContainer;
-    _content = '';
-    _tabControl;
-    _selectionPosition;
-    _splitDiv;
-    _designerDiv;
-    _codeDiv;
-    refreshInSplitViewDebounced;
-    _disableChangeNotificationDesigner;
-    _disableChangeNotificationEditor;
-    static get style() {
+import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
+import { DesignerTabControl } from "./controls/DesignerTabControl";
+import { DesignerView } from "./widgets/designerView/designerView";
+import { SimpleSplitView } from './controls/SimpleSplitView';
+export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
+    designerView;
+    codeView;
+    demoView;
+    additionalData;
+    _serviceContainer;
+    _content = '';
+    _tabControl;
+    _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
+    static get style() {
         return css `
       div {
         height: 100%;
@@ -28,168 +28,168 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         height: 100%;
         overflow: hidden;
       }
-      `;
-    }
-    constructor(serviceContainer, content) {
-        super();
-        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
-        this._serviceContainer = serviceContainer;
-        if (content != null)
-            this._content = content;
-        let div = document.createElement("div");
-        this._tabControl = new DesignerTabControl();
-        div.appendChild(this._tabControl);
-        this.designerView = new DesignerView();
-        this.designerView.setAttribute('exportparts', 'canvas');
-        this.designerView.slot = 'top';
-        this._designerDiv = document.createElement("div");
-        this._tabControl.appendChild(this._designerDiv);
-        this._designerDiv.title = 'Designer';
-        this._designerDiv.appendChild(this.designerView);
-        this.designerView.initialize(this._serviceContainer);
-        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
-        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
-        this.codeView = new serviceContainer.config.codeViewWidget();
-        this.codeView.slot = 'bottom';
-        this._codeDiv = document.createElement("div");
-        this._tabControl.appendChild(this._codeDiv);
-        this._codeDiv.title = 'Code';
-        this._codeDiv.appendChild(this.codeView);
-        this.codeView.onTextChanged.on(text => {
-            if (!this._disableChangeNotificationDesigner) {
-                this._disableChangeNotificationEditor = true;
-                if (this._tabControl.selectedIndex === 2) {
-                    this._content = text;
-                    this.refreshInSplitViewDebounced();
-                }
-            }
-        });
-        this._splitDiv = new SimpleSplitView();
-        this._splitDiv.style.height = '100%';
-        this._splitDiv.title = 'Split';
-        this._tabControl.appendChild(this._splitDiv);
-        this.demoView = new serviceContainer.config.demoViewWidget();
-        this.demoView.title = 'Preview';
-        this._tabControl.appendChild(this.demoView);
-        queueMicrotask(() => {
-            this.shadowRoot.appendChild(div);
-            this._tabControl.selectedIndex = 0;
-        });
-    }
-    async refreshInSplitView() {
-        await this.designerView.parseHTML(this._content);
-        this._disableChangeNotificationEditor = false;
-    }
-    designerSelectionChanged(e) {
-        if (this._tabControl.selectedIndex === 2) {
-            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-            if (primarySelection) {
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
-                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-                this.codeView.setSelection(this._selectionPosition);
-                this._selectionPosition = null;
-            }
-        }
-    }
-    designerContentChanged() {
-        if (!this._disableChangeNotificationEditor) {
-            this._disableChangeNotificationDesigner = true;
-            if (this._tabControl.selectedIndex === 2) {
-                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
-                this.codeView.update(this._content);
-                if (primarySelection) {
-                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-                    if (this._selectionPosition)
-                        this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
-                }
-            }
-            this._disableChangeNotificationDesigner = false;
-        }
-    }
-    dispose() {
-        this.codeView.dispose();
-    }
-    executeCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
-            this.designerView.executeCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            this.codeView.executeCommand(command);
-    }
-    canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
-            return this.designerView.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            return this.codeView.canExecuteCommand(command);
-        return false;
-    }
-    set content(value) {
-        this._content = value;
-        if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
-                this.designerView.parseHTML(this._content);
-            else if (this._tabControl.selectedIndex === 1)
-                this.codeView.update(this._content);
-            else if (this._tabControl.selectedIndex === 2) {
-            }
-            else if (this._tabControl.selectedIndex === 3)
-                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
-        }
-    }
-    get content() {
-        if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
-                this._content = this.designerView.getHTML();
-            else if (this._tabControl.selectedIndex === 1)
-                this._content = this.codeView.getText();
-            return this._content;
-        }
-        return null;
-    }
-    ready() {
-        this._tabControl.onSelectedTabChanged.on(i => {
-            if (i.oldIndex === 0) {
-                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
-                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-            }
-            else if (i.oldIndex === 1) {
-                this._content = this.codeView.getText();
-            }
-            else if (i.oldIndex === 2) {
-                this._designerDiv.appendChild(this.designerView);
-                this._codeDiv.appendChild(this.codeView);
-            }
-            if (i.newIndex === 0 || i.newIndex === 2)
-                this.designerView.parseHTML(this._content);
-            if (i.newIndex === 1 || i.newIndex === 2) {
-                this.codeView.update(this._content);
-                if (this._selectionPosition) {
-                    this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
-                }
-                if (i.changedViaClick) {
-                    this.codeView.focusEditor();
-                }
-            }
-            if (i.newIndex === 2) {
-                this._splitDiv.appendChild(this.designerView);
-                this._splitDiv.appendChild(this.codeView);
-            }
-            if (i.newIndex === 3) {
-                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
-            }
-        });
-        if (this._content)
-            this.content = this._content;
-    }
-    get instanceServiceContainer() {
-        return this.designerView.instanceServiceContainer;
-    }
-}
-//@ts-ignore
-customElements.define("node-projects-document-container", DocumentContainer);
+      `;
+    }
+    constructor(serviceContainer, content) {
+        super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
+        this._serviceContainer = serviceContainer;
+        if (content != null)
+            this._content = content;
+        let div = document.createElement("div");
+        this._tabControl = new DesignerTabControl();
+        div.appendChild(this._tabControl);
+        this.designerView = new DesignerView();
+        this.designerView.setAttribute('exportparts', 'canvas');
+        this.designerView.slot = 'top';
+        this._designerDiv = document.createElement("div");
+        this._tabControl.appendChild(this._designerDiv);
+        this._designerDiv.title = 'Designer';
+        this._designerDiv.appendChild(this.designerView);
+        this.designerView.initialize(this._serviceContainer);
+        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
+        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
+        this.codeView = new serviceContainer.config.codeViewWidget();
+        this.codeView.slot = 'bottom';
+        this._codeDiv = document.createElement("div");
+        this._tabControl.appendChild(this._codeDiv);
+        this._codeDiv.title = 'Code';
+        this._codeDiv.appendChild(this.codeView);
+        this.codeView.onTextChanged.on(text => {
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
+            }
+        });
+        this._splitDiv = new SimpleSplitView();
+        this._splitDiv.style.height = '100%';
+        this._splitDiv.title = 'Split';
+        this._tabControl.appendChild(this._splitDiv);
+        this.demoView = new serviceContainer.config.demoViewWidget();
+        this.demoView.title = 'Preview';
+        this._tabControl.appendChild(this.demoView);
+        queueMicrotask(() => {
+            this.shadowRoot.appendChild(div);
+            this._tabControl.selectedIndex = 0;
+        });
+    }
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
+    }
+    designerSelectionChanged(e) {
+        if (this._tabControl.selectedIndex === 2) {
+            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+            if (primarySelection) {
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                this.codeView.setSelection(this._selectionPosition);
+                this._selectionPosition = null;
+            }
+        }
+    }
+    designerContentChanged() {
+        if (!this._disableChangeNotificationEditor) {
+            this._disableChangeNotificationDesigner = true;
+            if (this._tabControl.selectedIndex === 2) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this.codeView.update(this._content);
+                if (primarySelection) {
+                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+            }
+            this._disableChangeNotificationDesigner = false;
+        }
+    }
+    dispose() {
+        this.codeView.dispose();
+    }
+    executeCommand(command) {
+        if (this._tabControl.selectedIndex === 0)
+            this.designerView.executeCommand(command);
+        else if (this._tabControl.selectedIndex === 1)
+            this.codeView.executeCommand(command);
+    }
+    canExecuteCommand(command) {
+        if (this._tabControl.selectedIndex === 0)
+            return this.designerView.canExecuteCommand(command);
+        else if (this._tabControl.selectedIndex === 1)
+            return this.codeView.canExecuteCommand(command);
+        return false;
+    }
+    set content(value) {
+        this._content = value;
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                this.designerView.parseHTML(this._content);
+            else if (this._tabControl.selectedIndex === 1)
+                this.codeView.update(this._content);
+            else if (this._tabControl.selectedIndex === 2) {
+            }
+            else if (this._tabControl.selectedIndex === 3)
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+        }
+    }
+    get content() {
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                this._content = this.designerView.getHTML();
+            else if (this._tabControl.selectedIndex === 1)
+                this._content = this.codeView.getText();
+            return this._content;
+        }
+        return null;
+    }
+    ready() {
+        this._tabControl.onSelectedTabChanged.on(i => {
+            if (i.oldIndex === 0) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+            }
+            else if (i.oldIndex === 1) {
+                this._content = this.codeView.getText();
+            }
+            else if (i.oldIndex === 2) {
+                this._designerDiv.appendChild(this.designerView);
+                this._codeDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 0 || i.newIndex === 2)
+                this.designerView.parseHTML(this._content);
+            if (i.newIndex === 1 || i.newIndex === 2) {
+                this.codeView.update(this._content);
+                if (this._selectionPosition) {
+                    this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+                if (i.changedViaClick) {
+                    this.codeView.focusEditor();
+                }
+            }
+            if (i.newIndex === 2) {
+                this._splitDiv.appendChild(this.designerView);
+                this._splitDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 3) {
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+            }
+        });
+        if (this._content)
+            this.content = this._content;
+    }
+    get instanceServiceContainer() {
+        return this.designerView.instanceServiceContainer;
+    }
+}
+//@ts-ignore
+customElements.define("node-projects-document-container", DocumentContainer);