@node-projects/web-component-designer 0.1.120 → 0.1.122

package/dist/elements/helper/NpmPackageLoader.js

@@ -2,7 +2,7 @@ import { PreDefinedElementsService } from "../services/elementsService/PreDefine
 import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js";
 import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 import { removeLeading, removeTrailing } from "./Helper.js";
-import packageHacks from "./NpmPackageHacks.json" assert { type: 'json' };
+import packageHacks from "./NpmPackageHacks.json" with { type: 'json' };
 export class NpmPackageLoader {
     static registryPatchedTohandleErrors;
     //packageSource = '//unpkg.com/';

package/dist/elements/services/eventsService/EventsService.d.ts

@@ -15,6 +15,11 @@ export declare class EventsService implements IEventsService {
         propertyName: string;
         eventObjectName: string;
     }[];
+    protected _simpleForm: {
+        name: string;
+        propertyName: string;
+        eventObjectName: string;
+    }[];
     protected _form: {
         name: string;
         propertyName: string;

package/dist/elements/services/eventsService/EventsService.js

@@ -28,10 +28,12 @@ export class EventsService {
         { name: "keydown", propertyName: "onkeydown", eventObjectName: "KeyboardEvent" },
         { name: "keyup", propertyName: "onkeyup", eventObjectName: "KeyboardEvent" }
     ];
+    _simpleForm = [
+        { name: "input", propertyName: "oninput", eventObjectName: "InputEvent" },
+        { name: "change", propertyName: "onchange", eventObjectName: "Event" }
+    ];
     _form = [
         { name: "beforeinput", propertyName: "onbeforeinput", eventObjectName: "InputEvent" },
-        { name: "input", propertyName: "oninput", eventObjectName: "InputEvent" },
-        { name: "change", propertyName: "onchange", eventObjectName: "Event" },
         { name: "invalid", propertyName: "oninvalid", eventObjectName: "Event" },
         { name: "reset", propertyName: "onreset", eventObjectName: "Event" },
         { name: "select", propertyName: "onselect", eventObjectName: "Event" },
@@ -90,7 +92,7 @@ export class EventsService {
         if (designItem.element instanceof HTMLInputElement ||
             designItem.element instanceof HTMLTextAreaElement ||
             designItem.element instanceof HTMLSelectElement) {
-            let events = [...this._form, ...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
+            let events = [...this._simpleForm, ...this._simpleMouseEvents, ...this._form, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];
             return events;
         }
         let events = [...this._simpleMouseEvents, ...this._pointerEvents, ...this._allElements, ...this._focusableEvents];

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -3,7 +3,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { NodeType } from '../../../item/NodeType.js';
-import cssProperties from "./CssProperties.json" assert { type: 'json' };
+import cssProperties from "./CssProperties.json" with { type: 'json' };
 import { BindingTarget } from '../../../item/BindingTarget.js';
 const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -5,7 +5,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
 import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js';
 import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js';
-import cssProperties from "./CssProperties.json" assert { type: 'json' };
+import cssProperties from "./CssProperties.json" with { type: 'json' };
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.120",
+  "version": "0.1.122",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/dist/elements/services/selectionService/ISelectionChangedEvent copy.d.ts

@@ -1,6 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-export interface ISelectionChangedEvent {
-    oldSelectedElements: IDesignItem[];
-    selectedElements: IDesignItem[];
-    event?: Event;
-}

package/dist/elements/services/selectionService/ISelectionChangedEvent copy.js

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

package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.d.ts

@@ -1,9 +0,0 @@
-import { AbstractExtension } from "./AbstractExtension.js";
-import { IPoint } from "../../../../interfaces/IPoint.js";
-export declare abstract class AbstractToolbarExtension extends AbstractExtension {
-    abstract template: HTMLTemplateElement;
-    protected _toolbarContainer: SVGForeignObjectElement;
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    protected updateToolbarPosition(position: IPoint): void;
-}

package/dist/elements/widgets/designerView/extensions/AbstractToolbarExtension.js

@@ -1,30 +0,0 @@
-import { OverlayLayer } from "../OverlayLayer.js";
-import { AbstractExtension } from "./AbstractExtension.js";
-export class AbstractToolbarExtension extends AbstractExtension {
-    _toolbarContainer;
-    extend(cache, event) {
-        const element = this.template.content.cloneNode(true);
-        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
-        });
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._toolbarContainer = foreignObject;
-        foreignObject.classList.add('svg-toolbar-container');
-        foreignObject.setAttribute('width', '1');
-        foreignObject.setAttribute('height', '1');
-        foreignObject.appendChild(element);
-        this.refresh(cache, event);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbarContainer.setAttribute('x', '' + (pos.x - 16));
-            this._toolbarContainer.setAttribute('y', '' + (pos.y - 36));
-        }
-    }
-    updateToolbarPosition(position) {
-        this._toolbarContainer.setAttribute('x', '' + position.x);
-        this._toolbarContainer.setAttribute('y', '' + position.y);
-    }
-}

package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.d.ts

@@ -1,20 +0,0 @@
-import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
-import { IExtensionManager } from "./IExtensionManger.js";
-import { IDesignerCanvas } from "../IDesignerCanvas.js";
-import { IDesignItem } from "../../../item/IDesignItem.js";
-export declare class BasicStackedToolbarExtension extends AbstractExtension {
-    protected static basicTemplate: string;
-    protected _toolbar: toolbarObject;
-    protected _size: {
-        width: number;
-        height: number;
-    };
-    protected _display: string;
-    protected _inline: string;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    updateDisplayValue(): Promise<void>;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    protected _addStyleButton(styleAndControlName: string): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/extensions/BasicDisplayToolbarExtension.js

@@ -1,68 +0,0 @@
-import { assetsPath } from "../../../../Constants.js";
-import { AbstractExtension } from "./AbstractExtension.js";
-export class BasicStackedToolbarExtension extends AbstractExtension {
-    static basicTemplate = `
-      <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
-        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
-        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
-      </node-projects-image-button-list-selector>
-      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
-        <option>block</option>
-        <option>flex</option>
-        <option>grid</option>
-      </select>
-  `;
-    _toolbar;
-    _size = { width: 200, height: 30 };
-    _display;
-    _inline;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        const cs = getComputedStyle(this.extendedItem.element);
-        this._display = cs.display.replace('inline-', '').replace('inline', 'block');
-        this._inline = cs.display.startsWith('inline') ? 'inline' : 'block';
-        //@ts-ignore
-        this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.value = this._display;
-        displayTypeEl.onchange = async () => {
-            this._display = displayTypeEl.value;
-            await this.updateDisplayValue();
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
-        const inlineEl = this._toolbar.getById('inline');
-        inlineEl.value = this._inline;
-        inlineEl.addEventListener('value-changed', async () => {
-            this._inline = inlineEl.value;
-            if (this._inline && cs.position === 'absolute')
-                this.extendedItem.setStyle('position', 'static');
-            await this.updateDisplayValue();
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        });
-    }
-    async updateDisplayValue() {
-        let v = (this._inline == 'inline' ? 'inline ' : '') + this._display;
-        if (v === 'inline block')
-            v = 'inline';
-        await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    _addStyleButton(styleAndControlName) {
-        const cs = getComputedStyle(this.extendedItem.element);
-        const ctl = this._toolbar.getById(styleAndControlName);
-        ctl.addEventListener('value-changed', async () => {
-            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
-        });
-        ctl.value = cs[styleAndControlName];
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.d.ts

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class BlockToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.js

@@ -1,40 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { assetsPath } from "../../../../../Constants.js";
-export class BlockToolbarExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 100%; width: 100%;">
-      <node-projects-image-button-list-selector>
-        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
-        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
-      </node-projects-image-button-list-selector>
-      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option selected>block</option>
-        <option>flex</option>
-        <option>grid</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        this._toolbar = this.createToolbar(BlockToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.d.ts

@@ -1,13 +0,0 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ConditionExtensionProvider implements IDesignerExtensionProvider {
-    constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem) => boolean);
-    extensionProvider: IDesignerExtensionProvider;
-    condition: (designItem: IDesignItem) => boolean;
-    style: CSSStyleSheet;
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}

package/dist/elements/widgets/designerView/extensions/ConditionExtensionProvider.js

@@ -1,18 +0,0 @@
-export class ConditionExtensionProvider {
-    constructor(extensionProvider, condition) {
-        this.extensionProvider = extensionProvider;
-        this.condition = condition;
-        this.style = extensionProvider.style;
-    }
-    extensionProvider;
-    condition;
-    style;
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (!this.condition(designItem))
-            return false;
-        return this.extensionProvider.shouldExtend(extensionManager, designerView, designItem);
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return this.extensionProvider.getExtension(extensionManager, designerView, designItem);
-    }
-}

package/dist/elements/widgets/designerView/extensions/EditTextExtension.d.ts

@@ -1,18 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export type handlesPointerEvent = {
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-};
-export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
-    private static template;
-    private _foreignObject;
-    private _path;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
-    _formatSelection(type: string, value?: string): void;
-}

package/dist/elements/widgets/designerView/extensions/EditTextExtension.js

@@ -1,107 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { OverlayLayer } from "../OverlayLayer.js";
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
-import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
-import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
-export class EditTextExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 24px; display: flex; gap: 2px;">
-      <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
-      <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
-      <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
-      <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
-      <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
-      <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
-        <option>8px</option>
-        <option>9px</option>
-        <option>10px</option>
-        <option>11px</option>
-        <option>12px</option>
-        <option>14px</option>
-        <option>16px</option>
-        <option>18px</option>
-        <option>20px</option>
-        <option>24px</option>
-        <option>28px</option>
-        <option>32px</option>
-        <option>36px</option>
-      </select>
-      <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
-        
-      </select>
-    </div>
-  `;
-    _foreignObject;
-    _path;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
-        //maybe use a html edit framework
-        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
-        this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
-        this.extendedItem.element.setAttribute('contenteditable', '');
-        this.extendedItem.element.focus();
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const elements = EditTextExtension.template.content.cloneNode(true);
-        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
-        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
-            this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
-        });
-        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
-        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
-        //Button overlay
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._foreignObject = foreignObject;
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
-        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
-        foreignObject.setAttribute('width', '300');
-        foreignObject.setAttribute('height', '24');
-        foreignObject.appendChild(elements);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
-        //TODO - nice way to disable click overlay
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
-        //overlay to detect click outside
-        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this._path.setAttribute('class', 'svg-edit-text-clickoutside');
-        this._path.setAttribute('fill-rule', 'evenodd');
-        this._path.style.pointerEvents = 'auto';
-        this._path.onpointerdown = (e) => {
-            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
-        };
-        this._addOverlay(this._path, OverlayLayer.Background);
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
-    }
-    refresh() {
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
-    }
-    dispose() {
-        this._removeAllOverlays();
-        this.extendedItem.element.removeAttribute('contenteditable');
-        this.extendedItem.updateChildrenFromNodesChildren();
-        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
-    }
-    handlesPointerEvent(designerCanvas, event, currentElement) {
-        const p = event.composedPath();
-        const stylo = this._foreignObject.querySelector('stylo-editor');
-        return p.indexOf(stylo) >= 0;
-    }
-    _formatSelection(type, value) {
-        const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
-        const spans = wrapSelectionInSpans(selection);
-        for (const span of spans)
-            span.style[type] = value;
-        this.extendedItem.element.focus();
-    }
-}

package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.d.ts

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridToolbarExtension extends AbstractExtension {
-    private static template;
-    private _foreignObject;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/extensions/GridToolbarExtension.js

@@ -1,58 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-import { OverlayLayer } from "../OverlayLayer.js";
-export class GridToolbarExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 30px; width: 200px;">
-      <span>GRID</span>
-      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
-        <option>1x1</option>
-        <option>1x16</option>
-        <option>2x8</option>
-        <option>4x4</option>
-        <option>8x2</option>
-        <option>16x1</option>
-        <option>custom</option>
-      </select>
-    </div>
-  `;
-    _foreignObject;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        const element = GridToolbarExtension.template.content.cloneNode(true);
-        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
-            //this._formatSelection(x.dataset['command'], x.dataset['commandParameter'])
-        });
-        //element.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
-        const gridTypeEl = element.querySelector('#gridType');
-        gridTypeEl.onchange = () => {
-            const parts = gridTypeEl.value.split('x');
-            this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-            this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
-        };
-        //elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
-        //overlay
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._foreignObject = foreignObject;
-        foreignObject.classList.add('svg-toolbar');
-        foreignObject.setAttribute('width', '1');
-        foreignObject.setAttribute('height', '1');
-        foreignObject.appendChild(element);
-        this.refresh(cache, event);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            //debugger;
-            this._foreignObject.setAttribute('x', '' + (pos.x - 16));
-            this._foreignObject.setAttribute('y', '' + (pos.y - 36));
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.d.ts

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class FlexToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtension.js

@@ -1,34 +0,0 @@
-import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class FlexToolbarExtension extends AbstractExtension {
-    static template = html `
-    <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option>block</option>
-        <option selected>flex</option>
-        <option>grid</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-        };
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 36) });
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.d.ts

@@ -1,9 +0,0 @@
-import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { IDesignerExtension } from '../IDesignerExtension.js';
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}

package/dist/elements/widgets/designerView/extensions/block/FlexToolbarExtensionProvider.js

@@ -1,12 +0,0 @@
-import { FlexToolbarExtension } from './FlexToolbarExtension.js';
-import { NodeType } from '../../../../item/NodeType.js';
-export class GridToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new FlexToolbarExtension(extensionManager, designerView, designItem);
-    }
-}

package/dist/elements/widgets/designerView/extensions/flex/GridToolbarExtension.d.ts

@@ -1,12 +0,0 @@
-import { IDesignItem } from '../../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
-}