@node-projects/web-component-designer 0.0.96 → 0.0.99

package/dist/elements/widgets/codeView/code-view-monaco.d.ts

@@ -1,25 +1,25 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from "./ICodeView";
-import { IActivateable } from '../../../interfaces/IActivateable';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
-export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
-    dispose(): void;
-    canvasElement: HTMLElement;
-    elementsToPackages: Map<string, string>;
-    code: string;
-    onTextChanged: TypedEvent<string>;
-    private _monacoEditor;
-    private _editor;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    ready(): Promise<void>;
-    focusEditor(): void;
-    activated(): void;
-    update(code: any): void;
-    getText(): string;
-    setSelection(position: IStringPosition): void;
-}
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from "./ICodeView";
+import { IActivateable } from '../../../interfaces/IActivateable';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    dispose(): void;
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    code: string;
+    onTextChanged: TypedEvent<string>;
+    private _monacoEditor;
+    private _editor;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -1,113 +1,113 @@
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType';
-export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
-    dispose() {
-        this._monacoEditor.dispose();
-    }
-    canvasElement;
-    elementsToPackages;
-    code;
-    onTextChanged = new TypedEvent();
-    _monacoEditor;
-    _editor;
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType';
+export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+    dispose() {
+        this._monacoEditor.dispose();
+    }
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    _monacoEditor;
+    _editor;
     static style = css `
     :host {
       display: block;
       height: 100%;
       width: 100%;
     }
-    `;
+    `;
     static template = html `
       <div id="container" style="width: 100%; height: 100%; position: absolute;"></div>
-  `;
-    executeCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-                this._monacoEditor.trigger('source', 'undo', null);
-                break;
-            case CommandType.redo:
-                this._monacoEditor.trigger('source', 'redo', null);
-                break;
-            case CommandType.copy:
-                this._monacoEditor.trigger('source', 'editor.action.clipboardCopyAction', null);
-                break;
-            case CommandType.paste:
-                this._monacoEditor.trigger('source', 'editor.action.clipboardPasteAction', null);
-                break;
-            case CommandType.cut:
-                break;
-            case CommandType.delete:
-                break;
-        }
-    }
-    canExecuteCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-            case CommandType.redo:
-            case CommandType.copy:
-            case CommandType.paste:
-            case CommandType.cut:
-            case CommandType.delete:
-                return true;
-        }
-        return false;
-    }
-    async ready() {
-        //@ts-ignore
-        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
-        this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
-        this._editor = this._getDomElement('container');
-        //@ts-ignore
-        require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
-        //@ts-ignore
-        require(['vs/editor/editor.main'], () => {
-            //@ts-ignore
-            this._monacoEditor = monaco.editor.create(this._editor, {
-                automaticLayout: true,
-                value: this.code,
-                language: 'html',
-                minimap: {
-                    size: 'fill'
-                },
-                fixedOverflowWidgets: true
-            });
-            this._monacoEditor.layout();
-            let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
-                this.onTextChanged.emit(this._monacoEditor.getValue());
-            });
-            this._monacoEditor.onDidChangeModel(e => {
-                changeContentListener.dispose();
-                changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
-                    this.onTextChanged.emit(this._monacoEditor.getValue());
-                });
-            });
-        });
-    }
-    focusEditor() {
-        requestAnimationFrame(() => {
-            this.focus();
-            this._monacoEditor.focus();
-        });
-    }
-    activated() {
-        if (this._monacoEditor)
-            this._monacoEditor.layout();
-    }
-    update(code) {
-        this.code = code;
-        if (this._monacoEditor) {
-            this._monacoEditor.setValue(code);
-        }
-    }
-    getText() {
-        return this._monacoEditor.getValue();
-    }
-    setSelection(position) {
-        let model = this._monacoEditor.getModel();
-        let point1 = model.getPositionAt(position.start);
-        let point2 = model.getPositionAt(position.start + position.length);
-        this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
-        setTimeout(() => this._monacoEditor.revealLine(point1.lineNumber), 20);
-    }
-}
-customElements.define('node-projects-code-view-monaco', CodeViewMonaco);
+  `;
+    executeCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+                this._monacoEditor.trigger('source', 'undo', null);
+                break;
+            case CommandType.redo:
+                this._monacoEditor.trigger('source', 'redo', null);
+                break;
+            case CommandType.copy:
+                this._monacoEditor.trigger('source', 'editor.action.clipboardCopyAction', null);
+                break;
+            case CommandType.paste:
+                this._monacoEditor.trigger('source', 'editor.action.clipboardPasteAction', null);
+                break;
+            case CommandType.cut:
+                break;
+            case CommandType.delete:
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        return false;
+    }
+    async ready() {
+        //@ts-ignore
+        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
+        this._editor = this._getDomElement('container');
+        //@ts-ignore
+        require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
+        //@ts-ignore
+        require(['vs/editor/editor.main'], () => {
+            //@ts-ignore
+            this._monacoEditor = monaco.editor.create(this._editor, {
+                automaticLayout: true,
+                value: this.code,
+                language: 'html',
+                minimap: {
+                    size: 'fill'
+                },
+                fixedOverflowWidgets: true
+            });
+            this._monacoEditor.layout();
+            let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                this.onTextChanged.emit(this._monacoEditor.getValue());
+            });
+            this._monacoEditor.onDidChangeModel(e => {
+                changeContentListener.dispose();
+                changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                    this.onTextChanged.emit(this._monacoEditor.getValue());
+                });
+            });
+        });
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._monacoEditor.focus();
+        });
+    }
+    activated() {
+        if (this._monacoEditor)
+            this._monacoEditor.layout();
+    }
+    update(code) {
+        this.code = code;
+        if (this._monacoEditor) {
+            this._monacoEditor.setValue(code);
+        }
+    }
+    getText() {
+        return this._monacoEditor.getValue();
+    }
+    setSelection(position) {
+        let model = this._monacoEditor.getModel();
+        let point1 = model.getPositionAt(position.start);
+        let point2 = model.getPositionAt(position.start + position.length);
+        this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
+        setTimeout(() => this._monacoEditor.revealLine(point1.lineNumber), 20);
+    }
+}
+customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

package/dist/elements/widgets/demoView/IDemoView.d.ts

@@ -1,5 +1,5 @@
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-import { ServiceContainer } from '../../services/ServiceContainer';
-export interface IDemoView {
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
-}
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { ServiceContainer } from '../../services/ServiceContainer';
+export interface IDemoView {
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
+}

package/dist/elements/widgets/demoView/IDemoView.js

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

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

@@ -1,11 +1,11 @@
-import { IDemoView } from "./IDemoView";
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from "../../services/ServiceContainer";
-import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
-export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView {
-    private _placeholder;
-    private _loading;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
-}
+import { IDemoView } from "./IDemoView";
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from "../../services/ServiceContainer";
+import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
+export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView {
+    private _placeholder;
+    private _loading;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/widgets/demoView/demoView.js

@@ -1,7 +1,7 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class DemoView extends BaseCustomWebComponentLazyAppend {
-    _placeholder;
-    _loading;
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+export class DemoView extends BaseCustomWebComponentLazyAppend {
+    _placeholder;
+    _loading;
     static style = css `
   :host {
     display: block;
@@ -18,21 +18,21 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     position: absolute;
     top: 60px;
     left: 20px;
-  }`;
-    constructor() {
-        super();
-        this._placeholder = document.createElement('div');
-        this._placeholder.id = 'placeholder';
-        this.shadowRoot.appendChild(this._placeholder);
-        this._loading = document.createElement('div');
-        this._loading.id = 'loading';
-        this._loading.textContent = '🛀 Hold on, loading...';
-        this.shadowRoot.appendChild(this._loading);
-    }
-    async display(serviceContainer, instanceServiceContainer, code, style) {
-        this._loading.hidden = false;
-        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
-        this._loading.hidden = true;
-    }
-}
-customElements.define('node-projects-demo-view', DemoView);
+  }`;
+    constructor() {
+        super();
+        this._placeholder = document.createElement('div');
+        this._placeholder.id = 'placeholder';
+        this.shadowRoot.appendChild(this._placeholder);
+        this._loading = document.createElement('div');
+        this._loading.id = 'loading';
+        this._loading.textContent = '🛀 Hold on, loading...';
+        this.shadowRoot.appendChild(this._loading);
+    }
+    async display(serviceContainer, instanceServiceContainer, code, style) {
+        this._loading.hidden = false;
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
+        this._loading.hidden = true;
+    }
+}
+customElements.define('node-projects-demo-view', DemoView);

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.d.ts

@@ -1,8 +1,8 @@
-import { DesignerView } from "./designerView.js";
-import { IDesignerCanvas } from "./IDesignerCanvas.js";
-import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
-export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
-    _space: number;
-    constructor(space: number);
-    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
-}
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.js

@@ -1,11 +1,11 @@
-export class ButtonSeperatorProvider {
-    _space;
-    constructor(space) {
-        this._space = space;
-    }
-    provideButtons(designerView, designerCanvas) {
-        const div = document.createElement('div');
-        div.style.marginLeft = this._space + 'px';
-        return [div];
-    }
-}
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,7 +1,7 @@
-import { IDesignContext } from "./IDesignContext";
-export declare class DesignContext implements IDesignContext {
-    imports: string[];
-    extensionOptions: {
-        [key: string]: any;
-    };
-}
+import { IDesignContext } from "./IDesignContext";
+export declare class DesignContext implements IDesignContext {
+    imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
+}

package/dist/elements/widgets/designerView/DesignContext.js

@@ -1,4 +1,4 @@
-export class DesignContext {
-    imports = [];
-    extensionOptions = {};
-}
+export class DesignContext {
+    imports = [];
+    extensionOptions = {};
+}

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+import { DesignerView } from './designerView';
+export declare class DesignerViewUseOverlayScollbars implements IDesignViewConfigButtonsProvider {
+    constructor();
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.js

@@ -0,0 +1,13 @@
+//todo, element moving does not work atm, needs to be fixed
+export class DesignerViewUseOverlayScollbars {
+    constructor() {
+    }
+    provideButtons(designerView, designerCanvas) {
+        let externalCss = document.createElement('style');
+        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
+        designerCanvas.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
+        return [];
+    }
+}

package/dist/elements/widgets/designerView/DomConverter.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
-export declare class DomConverter {
-    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
-    static normalizeContentValue(value: string): string;
-    static IsSelfClosingElement(tag: string): boolean;
-    static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
-}
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
+export declare class DomConverter {
+    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
+    static normalizeContentValue(value: string): string;
+    static IsSelfClosingElement(tag: string): boolean;
+    static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
+}

package/dist/elements/widgets/designerView/DomConverter.js

@@ -1,41 +1,41 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
-export class DomConverter {
-    static normalizeAttributeValue(value, useSingleQuotes = false) {
-        if (typeof value === 'number')
-            value = value.toString();
-        if (value) {
-            if (useSingleQuotes)
-                return value.replaceAll('\'', ''');
-            return value.replaceAll('"', '"');
-        }
-        return value;
-    }
-    static normalizeContentValue(value) {
-        if (value)
-            return value.replaceAll('<', '&lt;').replaceAll(' ', '&nbsp;'); // !caution! -> this is not normal space, it's nbsp
-        return value;
-    }
-    static IsSelfClosingElement(tag) {
-        return tag === 'area' ||
-            tag === 'base' ||
-            tag === 'br' ||
-            tag === 'col' ||
-            tag === 'embed' ||
-            tag === 'hr' ||
-            tag === 'img' ||
-            tag === 'input' ||
-            tag === 'keygen' ||
-            tag === 'link' ||
-            tag === 'meta' ||
-            tag === 'param' ||
-            tag === 'source' ||
-            tag === 'track' ||
-            tag === 'wbr';
-    }
-    static ConvertToString(designItems, designItemsAssignmentList) {
-        let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
-        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
-        return itw.getString();
-    }
-}
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
+export class DomConverter {
+    static normalizeAttributeValue(value, useSingleQuotes = false) {
+        if (typeof value === 'number')
+            value = value.toString();
+        if (value) {
+            if (useSingleQuotes)
+                return value.replaceAll('\'', '&#39;');
+            return value.replaceAll('"', '&quot;');
+        }
+        return value;
+    }
+    static normalizeContentValue(value) {
+        if (value)
+            return value.replaceAll('<', '&lt;').replaceAll(' ', '&nbsp;'); // !caution! -> this is not normal space, it's nbsp
+        return value;
+    }
+    static IsSelfClosingElement(tag) {
+        return tag === 'area' ||
+            tag === 'base' ||
+            tag === 'br' ||
+            tag === 'col' ||
+            tag === 'embed' ||
+            tag === 'hr' ||
+            tag === 'img' ||
+            tag === 'input' ||
+            tag === 'keygen' ||
+            tag === 'link' ||
+            tag === 'meta' ||
+            tag === 'param' ||
+            tag === 'source' ||
+            tag === 'track' ||
+            tag === 'wbr';
+    }
+    static ConvertToString(designItems, designItemsAssignmentList) {
+        let itw = new IndentedTextWriter();
+        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
+        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
+        return itw.getString();
+    }
+}

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,6 +1,6 @@
-export interface IDesignContext {
-    imports: string[];
-    extensionOptions: {
-        [key: string]: any;
-    };
-}
+export interface IDesignContext {
+    imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
+}

package/dist/elements/widgets/designerView/IDesignContext.js

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

package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.d.ts

@@ -1,5 +1,5 @@
-import { DesignerView } from "./designerView.js";
-import { IDesignerCanvas } from "./IDesignerCanvas.js";
-export interface IDesignViewConfigButtonsProvider {
-    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
-}
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.js

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