@node-projects/web-component-designer 0.0.88 → 0.0.91

package/dist/elements/controls/SimpleSplitView.d.ts

@@ -1,11 +1,11 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static properties: {
-        orientation: StringConstructor;
-    };
-    orientation: 'vertical' | 'horizontal';
-    constructor();
-    ready(): void;
-}
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static properties: {
+        orientation: StringConstructor;
+    };
+    orientation: 'vertical' | 'horizontal';
+    constructor();
+    ready(): void;
+}

package/dist/elements/controls/SimpleSplitView.js

@@ -1,5 +1,5 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
       display: block;
@@ -8,7 +8,7 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
       position: relative;
       height: 100%;
       width: 100%;
-      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
       display: grid;
       align-items: center;
     }
@@ -23,45 +23,45 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
     :host([orientation="vertical"]) > div > #splitter {
       cursor: ns-resize;
       height: 5px;
-    }`;
+    }`;
     static template = html `
     <div id="split" style="--split: 50;">
       <slot name="top"></slot>  
       <div id="splitter"></div>
       <slot name="bottom"></slot>
-    </div>`;
-    static properties = {
-        orientation: String
-    };
-    orientation = 'vertical';
-    constructor() {
-        super();
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this.setAttribute('orientation', this.orientation);
-        const split = this._getDomElement("split");
-        const splitter = this._getDomElement("splitter");
-        let start = null;
-        splitter.addEventListener('pointerdown', (e) => {
-            splitter.setPointerCapture(e.pointerId);
-            start = true;
-        });
-        splitter.addEventListener('pointerup', (e) => {
-            splitter.releasePointerCapture(e.pointerId);
-            start = null;
-        });
-        splitter.addEventListener('pointermove', (e) => {
-            if (start !== null) {
-                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
-                if (this.orientation === 'horizontal')
-                    splitValue += e.movementX * 100 / split.clientWidth;
-                else
-                    splitValue += e.movementY * 100 / split.clientHeight;
-                if (!isNaN(splitValue))
-                    split.style.setProperty("--split", splitValue);
-            }
-        });
-    }
-}
-customElements.define('node-projects-simple-split-view', SimpleSplitView);
+    </div>`;
+    static properties = {
+        orientation: String
+    };
+    orientation = 'vertical';
+    constructor() {
+        super();
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this.setAttribute('orientation', this.orientation);
+        const split = this._getDomElement("split");
+        const splitter = this._getDomElement("splitter");
+        let start = null;
+        splitter.addEventListener('pointerdown', (e) => {
+            splitter.setPointerCapture(e.pointerId);
+            start = true;
+        });
+        splitter.addEventListener('pointerup', (e) => {
+            splitter.releasePointerCapture(e.pointerId);
+            start = null;
+        });
+        splitter.addEventListener('pointermove', (e) => {
+            if (start !== null) {
+                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
+                if (this.orientation === 'horizontal')
+                    splitValue += e.movementX * 100 / split.clientWidth;
+                else
+                    splitValue += e.movementY * 100 / split.clientHeight;
+                if (!isNaN(splitValue))
+                    split.style.setProperty("--split", splitValue);
+            }
+        });
+    }
+}
+customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -1,33 +1,33 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ThicknessEditorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _leftInput;
-    private _topInput;
-    private _rightInput;
-    private _bottomInput;
-    private _valueLeft;
-    get valueLeft(): string;
-    set valueLeft(value: string);
-    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueTop;
-    get valueTop(): string;
-    set valueTop(value: string);
-    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueRight;
-    get valueRight(): string;
-    set valueRight(value: string);
-    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    private _valueBottom;
-    get valueBottom(): string;
-    set valueBottom(value: string);
-    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ThicknessEditorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

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,42 +1,42 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } 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 _additionalStyle;
-    set additionalStyleString(style: string);
-    get additionalStyleString(): string;
-    onContentChanged: TypedEvent<void>;
-    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, TypedEvent } 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 _additionalStyle;
+    set additionalStyleString(style: string);
+    get additionalStyleString(): string;
+    onContentChanged: TypedEvent<void>;
+    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;
+}