@node-projects/web-component-designer 0.0.84 → 0.0.85

package/dist/elements/helper/Screenshot.d.ts

@@ -1,11 +1,11 @@
-export declare class Screenshot {
-    private static _canvas;
-    private static _context;
-    private static _video;
-    private static _captureStream;
-    private static _disableStream;
-    static get screenshotsEnabled(): boolean;
-    static enableScreenshots(elementHostForVideo?: Element): Promise<void>;
-    static takeScreenshot(element: Element, width?: number, height?: number, elementHostForVideo?: Element): Promise<string>;
-    private static _sleep;
-}
+export declare class Screenshot {
+    private static _canvas;
+    private static _context;
+    private static _video;
+    private static _captureStream;
+    private static _disableStream;
+    static get screenshotsEnabled(): boolean;
+    static enableScreenshots(elementHostForVideo?: Element): Promise<void>;
+    static takeScreenshot(element: Element, width?: number, height?: number, elementHostForVideo?: Element): Promise<string>;
+    private static _sleep;
+}

package/dist/elements/helper/Screenshot.js

@@ -1,59 +1,59 @@
-// for screenshots to be genrated properly, you need to select the current tab only in media source selector
-export class Screenshot {
-    static _canvas;
-    static _context;
-    static _video;
-    static _captureStream;
-    static _disableStream() {
-        Screenshot._captureStream.getTracks().forEach(track => track.stop());
-        Screenshot._canvas = null;
-    }
-    static get screenshotsEnabled() {
-        return Screenshot._captureStream && Screenshot._captureStream.active;
-    }
-    static async enableScreenshots(elementHostForVideo = document.body) {
-        if (Screenshot._captureStream && !Screenshot._captureStream.active) {
-            Screenshot._disableStream();
-        }
-        if (Screenshot._canvas == null) {
-            Screenshot._canvas = document.createElement("canvas");
-            Screenshot._context = Screenshot._canvas.getContext("2d");
-            Screenshot._video = document.createElement("video");
-            const gdmOptions = {
-                video: {
-                    cursor: "never"
-                },
-                audio: false
-            };
-            Screenshot._video.style.display = "none";
-            elementHostForVideo.appendChild(Screenshot._video);
-            //@ts-ignore
-            Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
-            //@ts-ignore
-            const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface;
-            if (captureType != 'browser') {
-                Screenshot._disableStream();
-                alert('You need to share the current Tab, for the screenshot API to work');
-                throw 'You need to share the current Tab, for the screenshot API to work';
-            }
-            Screenshot._video.srcObject = Screenshot._captureStream;
-            Screenshot._video.play();
-            await Screenshot._sleep(150);
-        }
-    }
-    static async takeScreenshot(element, width = 100, height = 100, elementHostForVideo = document.body) {
-        await Screenshot.enableScreenshots(elementHostForVideo);
-        const rect = element.getBoundingClientRect();
-        Screenshot._canvas.width = width;
-        Screenshot._canvas.height = height;
-        Screenshot._context.drawImage(Screenshot._video, rect.left, rect.top, rect.width, rect.height, 0, 0, width, height);
-        const frame = Screenshot._canvas.toDataURL("image/png");
-        return frame;
-    }
-    static _sleep(timeout) {
-        let resolve = null;
-        const promise = new Promise(r => resolve = r);
-        window.setTimeout(resolve, timeout);
-        return promise;
-    }
-}
+// for screenshots to be genrated properly, you need to select the current tab only in media source selector
+export class Screenshot {
+    static _canvas;
+    static _context;
+    static _video;
+    static _captureStream;
+    static _disableStream() {
+        Screenshot._captureStream.getTracks().forEach(track => track.stop());
+        Screenshot._canvas = null;
+    }
+    static get screenshotsEnabled() {
+        return Screenshot._captureStream && Screenshot._captureStream.active;
+    }
+    static async enableScreenshots(elementHostForVideo = document.body) {
+        if (Screenshot._captureStream && !Screenshot._captureStream.active) {
+            Screenshot._disableStream();
+        }
+        if (Screenshot._canvas == null) {
+            Screenshot._canvas = document.createElement("canvas");
+            Screenshot._context = Screenshot._canvas.getContext("2d");
+            Screenshot._video = document.createElement("video");
+            const gdmOptions = {
+                video: {
+                    cursor: "never"
+                },
+                audio: false
+            };
+            Screenshot._video.style.display = "none";
+            elementHostForVideo.appendChild(Screenshot._video);
+            //@ts-ignore
+            Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
+            //@ts-ignore
+            const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface;
+            if (captureType != 'browser') {
+                Screenshot._disableStream();
+                alert('You need to share the current Tab, for the screenshot API to work');
+                throw 'You need to share the current Tab, for the screenshot API to work';
+            }
+            Screenshot._video.srcObject = Screenshot._captureStream;
+            Screenshot._video.play();
+            await Screenshot._sleep(150);
+        }
+    }
+    static async takeScreenshot(element, width = 100, height = 100, elementHostForVideo = document.body) {
+        await Screenshot.enableScreenshots(elementHostForVideo);
+        const rect = element.getBoundingClientRect();
+        Screenshot._canvas.width = width;
+        Screenshot._canvas.height = height;
+        Screenshot._context.drawImage(Screenshot._video, rect.left, rect.top, rect.width, rect.height, 0, 0, width, height);
+        const frame = Screenshot._canvas.toDataURL("image/png");
+        return frame;
+    }
+    static _sleep(timeout) {
+        let resolve = null;
+        const promise = new Promise(r => resolve = r);
+        window.setTimeout(resolve, timeout);
+        return promise;
+    }
+}

package/dist/elements/helper/TransformHelper.d.ts

@@ -1 +1 @@
-export declare function combineTransforms(element: HTMLElement, transform1: string, transform2: string): void;
+export declare function combineTransforms(element: HTMLElement, transform1: string, transform2: string): void;

package/dist/elements/helper/TransformHelper.js

@@ -1,12 +1,12 @@
-export function combineTransforms(element, transform1, transform2) {
-    if (transform1 == null || transform1 == '') {
-        element.style.transform = transform2;
-        return;
-    }
-    element.style.transform = transform1;
-    const matrix1 = new DOMMatrix(window.getComputedStyle(element).transform);
-    element.style.transform = transform2;
-    const matrix2 = new DOMMatrix(window.getComputedStyle(element).transform);
-    const result = matrix2.multiply(matrix1);
-    element.style.transform = result.toString();
-}
+export function combineTransforms(element, transform1, transform2) {
+    if (transform1 == null || transform1 == '') {
+        element.style.transform = transform2;
+        return;
+    }
+    element.style.transform = transform1;
+    const matrix1 = new DOMMatrix(window.getComputedStyle(element).transform);
+    element.style.transform = transform2;
+    const matrix2 = new DOMMatrix(window.getComputedStyle(element).transform);
+    const result = matrix2.multiply(matrix1);
+    element.style.transform = result.toString();
+}

package/dist/elements/helper/XmlHelper.d.ts

@@ -1,2 +1,2 @@
-export declare function encodeXMLChars(value: string): string;
-export declare function decodeXMLChars(value: string): string;
+export declare function encodeXMLChars(value: string): string;
+export declare function decodeXMLChars(value: string): string;

package/dist/elements/helper/XmlHelper.js

@@ -1,16 +1,16 @@
-export function encodeXMLChars(value) {
-    return value.replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&apos;');
-}
-;
-export function decodeXMLChars(value) {
-    return value.replace(/&apos;/g, "'")
-        .replace(/&quot;/g, '"')
-        .replace(/&gt;/g, '>')
-        .replace(/&lt;/g, '<')
-        .replace(/&amp;/g, '&');
-}
-;
+export function encodeXMLChars(value) {
+    return value.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+;
+export function decodeXMLChars(value) {
+    return value.replace(/&apos;/g, "'")
+        .replace(/&quot;/g, '"')
+        .replace(/&gt;/g, '>')
+        .replace(/&lt;/g, '<')
+        .replace(/&amp;/g, '&');
+}
+;

package/dist/elements/helper/contextMenu/ContextMenuHelper.d.ts

@@ -1,27 +1,27 @@
-import { IContextMenuItem } from "./IContextmenuItem";
-export declare class ContextMenuHelper {
-    private static _contextMenuCss;
-    private _shadowRoot;
-    private _element;
-    private _closeBound;
-    private _keyUpBound;
-    private _closeOnDownBound;
-    private _closeOnUpBound;
-    static addContextMenu(element: HTMLElement, items: IContextMenuItem[]): void;
-    static showContextMenu(shadowRoot: ShadowRoot | Document | null, e: MouseEvent, element: HTMLElement, items: IContextMenuItem[]): ContextMenuHelper;
-    private constructor();
-    private init;
-    close(): void;
-    show(): void;
-    hide(): void;
-    private _keyUp;
-    private _closeOnDown;
-    private _closeOnUp;
-    static createMenu(helper: ContextMenuHelper, items: IContextMenuItem[]): HTMLElement;
-    static clickInsideElement(e: any, className: any): any;
-    static getPosition(e: MouseEvent): {
-        x: number;
-        y: number;
-    };
-    positionMenu(e: MouseEvent): void;
-}
+import { IContextMenuItem } from "./IContextmenuItem";
+export declare class ContextMenuHelper {
+    private static _contextMenuCss;
+    private _shadowRoot;
+    private _element;
+    private _closeBound;
+    private _keyUpBound;
+    private _closeOnDownBound;
+    private _closeOnUpBound;
+    static addContextMenu(element: HTMLElement, items: IContextMenuItem[]): void;
+    static showContextMenu(shadowRoot: ShadowRoot | Document | null, e: MouseEvent, element: HTMLElement, items: IContextMenuItem[]): ContextMenuHelper;
+    private constructor();
+    private init;
+    close(): void;
+    show(): void;
+    hide(): void;
+    private _keyUp;
+    private _closeOnDown;
+    private _closeOnUp;
+    static createMenu(helper: ContextMenuHelper, items: IContextMenuItem[]): HTMLElement;
+    static clickInsideElement(e: any, className: any): any;
+    static getPosition(e: MouseEvent): {
+        x: number;
+        y: number;
+    };
+    positionMenu(e: MouseEvent): void;
+}

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -1,5 +1,5 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-export class ContextMenuHelper {
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ContextMenuHelper {
     static _contextMenuCss = css `
   .context-menu {
     display: none;
@@ -51,163 +51,163 @@ export class ContextMenuHelper {
   .context-menu__link:hover {
     color: #fff;
     background-color: #0066aa;
-  }`;
-    _shadowRoot;
-    _element;
-    _closeBound;
-    _keyUpBound;
-    _closeOnDownBound;
-    _closeOnUpBound;
-    static addContextMenu(element, items) {
-        element.oncontextmenu = (event) => {
-            event.preventDefault();
-            ContextMenuHelper.showContextMenu(null, event, null, items);
-        };
-    }
-    static showContextMenu(shadowRoot, e, element, items) {
-        if (shadowRoot == null)
-            shadowRoot = document;
-        //@ts-ignore
-        if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenuHelper._contextMenuCss) < 0) {
-            //@ts-ignore
-            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenuHelper._contextMenuCss];
-        }
-        let ctxMenu = new ContextMenuHelper();
-        let menu = ContextMenuHelper.createMenu(ctxMenu, items);
-        ctxMenu.init(shadowRoot, menu);
-        ctxMenu.positionMenu(e);
-        return ctxMenu;
-    }
-    constructor() {
-    }
-    init(shadowRoot, element) {
-        this._shadowRoot = shadowRoot;
-        this._element = element;
-        if (this._shadowRoot === document)
-            document.body.appendChild(this._element);
-        else
-            this._shadowRoot.appendChild(this._element);
-        this._closeBound = this.close.bind(this);
-        this._closeOnUpBound = this._closeOnUp.bind(this);
-        this._closeOnDownBound = this._closeOnDown.bind(this);
-        this._keyUpBound = this._keyUp.bind(this);
-        window.addEventListener('keyup', this._keyUpBound);
-        window.addEventListener('resize', this._closeBound);
-        window.addEventListener('mousedown', this._closeOnDownBound);
-        window.addEventListener('mouseup', this._closeOnUpBound);
-        this._element.classList.add('context-menu--active');
-    }
-    close() {
-        requestAnimationFrame(() => {
-            window.removeEventListener('keyup', this._keyUpBound);
-            window.removeEventListener('resize', this._closeBound);
-            window.removeEventListener('mousedown', this._closeOnDownBound);
-            window.removeEventListener('mouseup', this._closeOnUpBound);
-            if (this._shadowRoot === document)
-                document.body.removeChild(this._element);
-            else
-                this._shadowRoot.removeChild(this._element);
-        });
-    }
-    show() {
-        this._element.classList.add('context-menu--active');
-    }
-    hide() {
-        this._element.classList.remove('context-menu--active');
-    }
-    _keyUp(e) {
-        if (e.keyCode === 27) {
-            this.close();
-        }
-    }
-    _closeOnDown(e) {
-        const p = e.composedPath();
-        if (p.indexOf(this._element) < 0)
-            this.close();
-    }
-    _closeOnUp(e) {
-        if (e.button == 1)
-            this.close();
-    }
-    static createMenu(helper, items) {
-        let nav = document.createElement('nav');
-        nav.className = 'context-menu';
-        let ul = document.createElement('ul');
-        ul.className = 'context-menu__items';
-        nav.appendChild(ul);
-        for (let i of items) {
-            if (i.title == '-') {
-                let hr = document.createElement('hr');
-                ul.appendChild(hr);
-            }
-            else {
-                let li = document.createElement('li');
-                li.className = 'context-menu__item';
-                let div = document.createElement('div');
-                div.className = 'context-menu__link';
-                div.textContent = i.title;
-                li.appendChild(div);
-                ul.appendChild(li);
-                li.onclick = (e) => {
-                    helper.close();
-                    i.action(null, e);
-                };
-            }
-        }
-        return nav;
-    }
-    static clickInsideElement(e, className) {
-        let el = e.srcElement || e.target;
-        if (el.classList.contains(className)) {
-            return el;
-        }
-        else {
-            while (el = el.parentNode) {
-                if (el.classList && el.classList.contains(className)) {
-                    return el;
-                }
-            }
-        }
-        return false;
-    }
-    static getPosition(e) {
-        let posx = 0;
-        let posy = 0;
-        //@ts-ignore
-        if (!e)
-            e = window.event;
-        if (e.pageX || e.pageY) {
-            posx = e.pageX + 5;
-            posy = e.pageY - 5;
-        }
-        else if (e.clientX || e.clientY) {
-            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 5;
-            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - 5;
-        }
-        return {
-            x: posx,
-            y: posy
-        };
-    }
-    positionMenu(e) {
-        let clickCoords = ContextMenuHelper.getPosition(e);
-        let clickCoordsX = clickCoords.x;
-        let clickCoordsY = clickCoords.y;
-        let menuWidth = this._element.offsetWidth + 4;
-        let menuHeight = this._element.offsetHeight + 4;
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-        if ((windowWidth - clickCoordsX) < menuWidth) {
-            this._element.style.left = windowWidth - menuWidth + "px";
-        }
-        else {
-            this._element.style.left = clickCoordsX + "px";
-        }
-        if ((windowHeight - clickCoordsY) < menuHeight) {
-            this._element.style.top = windowHeight - menuHeight + "px";
-        }
-        else {
-            this._element.style.top = clickCoordsY + "px";
-        }
-    }
-}
+  }`;
+    _shadowRoot;
+    _element;
+    _closeBound;
+    _keyUpBound;
+    _closeOnDownBound;
+    _closeOnUpBound;
+    static addContextMenu(element, items) {
+        element.oncontextmenu = (event) => {
+            event.preventDefault();
+            ContextMenuHelper.showContextMenu(null, event, null, items);
+        };
+    }
+    static showContextMenu(shadowRoot, e, element, items) {
+        if (shadowRoot == null)
+            shadowRoot = document;
+        //@ts-ignore
+        if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenuHelper._contextMenuCss) < 0) {
+            //@ts-ignore
+            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenuHelper._contextMenuCss];
+        }
+        let ctxMenu = new ContextMenuHelper();
+        let menu = ContextMenuHelper.createMenu(ctxMenu, items);
+        ctxMenu.init(shadowRoot, menu);
+        ctxMenu.positionMenu(e);
+        return ctxMenu;
+    }
+    constructor() {
+    }
+    init(shadowRoot, element) {
+        this._shadowRoot = shadowRoot;
+        this._element = element;
+        if (this._shadowRoot === document)
+            document.body.appendChild(this._element);
+        else
+            this._shadowRoot.appendChild(this._element);
+        this._closeBound = this.close.bind(this);
+        this._closeOnUpBound = this._closeOnUp.bind(this);
+        this._closeOnDownBound = this._closeOnDown.bind(this);
+        this._keyUpBound = this._keyUp.bind(this);
+        window.addEventListener('keyup', this._keyUpBound);
+        window.addEventListener('resize', this._closeBound);
+        window.addEventListener('mousedown', this._closeOnDownBound);
+        window.addEventListener('mouseup', this._closeOnUpBound);
+        this._element.classList.add('context-menu--active');
+    }
+    close() {
+        requestAnimationFrame(() => {
+            window.removeEventListener('keyup', this._keyUpBound);
+            window.removeEventListener('resize', this._closeBound);
+            window.removeEventListener('mousedown', this._closeOnDownBound);
+            window.removeEventListener('mouseup', this._closeOnUpBound);
+            if (this._shadowRoot === document)
+                document.body.removeChild(this._element);
+            else
+                this._shadowRoot.removeChild(this._element);
+        });
+    }
+    show() {
+        this._element.classList.add('context-menu--active');
+    }
+    hide() {
+        this._element.classList.remove('context-menu--active');
+    }
+    _keyUp(e) {
+        if (e.keyCode === 27) {
+            this.close();
+        }
+    }
+    _closeOnDown(e) {
+        const p = e.composedPath();
+        if (p.indexOf(this._element) < 0)
+            this.close();
+    }
+    _closeOnUp(e) {
+        if (e.button == 1)
+            this.close();
+    }
+    static createMenu(helper, items) {
+        let nav = document.createElement('nav');
+        nav.className = 'context-menu';
+        let ul = document.createElement('ul');
+        ul.className = 'context-menu__items';
+        nav.appendChild(ul);
+        for (let i of items) {
+            if (i.title == '-') {
+                let hr = document.createElement('hr');
+                ul.appendChild(hr);
+            }
+            else {
+                let li = document.createElement('li');
+                li.className = 'context-menu__item';
+                let div = document.createElement('div');
+                div.className = 'context-menu__link';
+                div.textContent = i.title;
+                li.appendChild(div);
+                ul.appendChild(li);
+                li.onclick = (e) => {
+                    helper.close();
+                    i.action(null, e);
+                };
+            }
+        }
+        return nav;
+    }
+    static clickInsideElement(e, className) {
+        let el = e.srcElement || e.target;
+        if (el.classList.contains(className)) {
+            return el;
+        }
+        else {
+            while (el = el.parentNode) {
+                if (el.classList && el.classList.contains(className)) {
+                    return el;
+                }
+            }
+        }
+        return false;
+    }
+    static getPosition(e) {
+        let posx = 0;
+        let posy = 0;
+        //@ts-ignore
+        if (!e)
+            e = window.event;
+        if (e.pageX || e.pageY) {
+            posx = e.pageX + 5;
+            posy = e.pageY - 5;
+        }
+        else if (e.clientX || e.clientY) {
+            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 5;
+            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - 5;
+        }
+        return {
+            x: posx,
+            y: posy
+        };
+    }
+    positionMenu(e) {
+        let clickCoords = ContextMenuHelper.getPosition(e);
+        let clickCoordsX = clickCoords.x;
+        let clickCoordsY = clickCoords.y;
+        let menuWidth = this._element.offsetWidth + 4;
+        let menuHeight = this._element.offsetHeight + 4;
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        if ((windowWidth - clickCoordsX) < menuWidth) {
+            this._element.style.left = windowWidth - menuWidth + "px";
+        }
+        else {
+            this._element.style.left = clickCoordsX + "px";
+        }
+        if ((windowHeight - clickCoordsY) < menuHeight) {
+            this._element.style.top = windowHeight - menuHeight + "px";
+        }
+        else {
+            this._element.style.top = clickCoordsY + "px";
+        }
+    }
+}

package/dist/elements/helper/contextMenu/IContextmenuItem.d.ts

@@ -1,6 +1,6 @@
-export interface IContextMenuItem {
-    readonly title: string;
-    readonly icon?: string;
-    readonly action?: (e: HTMLElement, args?: Event) => void;
-    readonly children?: IContextMenuItem[];
-}
+export interface IContextMenuItem {
+    readonly title: string;
+    readonly icon?: string;
+    readonly action?: (e: HTMLElement, args?: Event) => void;
+    readonly children?: IContextMenuItem[];
+}

package/dist/elements/helper/contextMenu/IContextmenuItem.js

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