@node-projects/web-component-designer 0.1.101 → 0.1.102

package/dist/elements/documentContainer.js

@@ -2,6 +2,7 @@ import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEv
 import { DesignerTabControl } from './controls/DesignerTabControl.js';
 import { DesignerView } from './widgets/designerView/designerView.js';
 import { SimpleSplitView } from './controls/SimpleSplitView.js';
+import { sleep } from "./helper/Helper.js";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -115,10 +116,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         if (this._tabControl.selectedIndex === 2) {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (primarySelection) {
-                this._content = this.designerView.getHTML();
+                //this._content = this.designerView.getHTML();
                 if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                     this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
-                    this.codeView.setSelection(this._selectionPosition);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
                     this._selectionPosition = null;
                 }
             }
@@ -216,7 +218,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
+                    sleep(20).then(x => {
+                        if (this._selectionPosition)
+                            this.codeView.setSelection(this._selectionPosition);
+                        this._selectionPosition = null;
+                    });
                 }
                 if (i.changedViaClick) {
                     this.codeView.focusEditor();

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -102,6 +102,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
         }
     }
     writeTextNode(indentedTextWriter, designItem, indentAndNewline, trim = true) {
+        let start = indentedTextWriter.position;
+        let end = indentedTextWriter.position;
         let content = DomConverter.normalizeContentValue(designItem.content);
         if (trim)
             content = content.trim();
@@ -112,5 +114,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (indentAndNewline)
                 this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
+        end = indentedTextWriter.position;
+        for (const d of designItem.children())
+            designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(d, { start: start, length: end - start });
     }
 }

package/dist/elements/services/selectionService/SelectionService.js

@@ -6,7 +6,7 @@ function findDesignItem(designItem, position) {
         for (let d of designItem.children()) {
             const nodePosition = designItem.instanceServiceContainer.designItemDocumentPositionService.getPosition(d);
             if (nodePosition) {
-                if (nodePosition.start <= position)
+                if (nodePosition.start <= position && nodePosition.start + nodePosition.length >= position)
                     usedItem = d;
             }
         }

package/dist/elements/widgets/debugView/debug-view.js

@@ -195,9 +195,9 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         if (this._ready) {
             requestAnimationFrame(() => {
                 let element = designItem?.element;
-                if (element && element.nodeType != 8) {
-                    if (element.nodeType == 3)
-                        element = element.parentNode;
+                if (element?.nodeType == 3)
+                    element = element.parentNode;
+                if (element && element.nodeType != 8 && element.nodeType != 11) {
                     this.computedStyle = getComputedStyle(element);
                     this.selectedElementOffsetParent = element.offsetParent;
                     if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.101",
+  "version": "0.1.102",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/dist/elements/services/placementService/DefaultPlacementService copy.d.ts

@@ -1,19 +0,0 @@
-import type { IPoint } from '../../../interfaces/IPoint.js';
-import type { IPlacementService } from './IPlacementService.js';
-import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    isEnterableContainer(container: IDesignItem): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    private calculateTrack;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-}

package/dist/elements/services/placementService/DefaultPlacementService copy.js

@@ -1,151 +0,0 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
-import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
-import { straightenLine } from '../../helper/PathDataPolyfill.js';
-export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
-            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
-            return false;
-        return true;
-    }
-    isEnterableContainer(container) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        return true;
-    }
-    canEnter(container, items) {
-        if (!this.isEnterableContainer(container))
-            return false;
-        if (!items.every(x => !x.element.contains(container.element) && x !== container))
-            return false;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
-    }
-    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
-        let trackX = newPoint.x - startPoint.x;
-        let trackY = newPoint.y - startPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                let p = getDesignItemCurrentPos(item, 'position');
-                p.x = p.x % placementView.gridSize;
-                p.y = p.y % placementView.gridSize;
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
-            }
-            else if (placementView.alignOnSnap) {
-                let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let trackX = newPoint.x;
-        let trackY = newPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    trackX = newPos.x;
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y;
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-    }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        //TODO: this should revert all undo actions while active
-        //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
-        if (event.shiftKey) {
-            track = straightenLine({ x: 0, y: 0 }, track, true);
-        }
-        let filteredItems = filterChildPlaceItems(items);
-        for (const designItem of filteredItems) {
-            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
-            let transformMatrixParentTransformsCompensated = null;
-            if (originalElementAndAllAncestorsMultipliedMatrix) {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
-            }
-            else {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
-            }
-            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
-            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
-        }
-    }
-    moveElements(designItems, position, absolute) {
-        //TODO: Check if we set left or right
-        //TODO: Use CSS units
-        for (let d of designItems) {
-            if (position.x)
-                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
-            if (position.y)
-                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
-        }
-        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
-    }
-    enterContainer(container, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
-            container.insertChild(i);
-            if (i.lastContainerSize) {
-                if (!i.hasStyle('width'))
-                    i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.hasStyle('height'))
-                    i.setStyle('height', i.lastContainerSize.height + 'px');
-            }
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
-            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
-            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
-            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
-            let track = { x: translation.x, y: translation.y };
-            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
-        }
-        for (const item of items) {
-            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
-        }
-    }
-}

package/dist/elements/services/propertiesService/services/MathMllElementsPropertiesService.d.ts

@@ -1,21 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class NativeElementsPropertiesService extends CommonPropertiesService {
-    private inputProperties;
-    private textareaProperties;
-    private selectProperties;
-    private buttonProperties;
-    private anchorProperties;
-    private divProperties;
-    private imgProperties;
-    private iframeProperties;
-    private formElementProperties;
-    name: string;
-    getRefreshMode(designItem: IDesignItem): RefreshMode;
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-}

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

@@ -1,243 +0,0 @@
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { PropertyType } from '../PropertyType.js';
-import { RefreshMode } from '../IPropertiesService.js';
-export class NativeElementsPropertiesService extends CommonPropertiesService {
-    inputProperties = [
-        {
-            name: "type",
-            type: "list",
-            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
-            service: this,
-            defaultValue: "text",
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "placeholder",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "checked",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "min",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "max",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "readonly",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "valueAsDate",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "valueAsNumber",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        }
-    ];
-    textareaProperties = [
-        {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "placeholder",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "maxlength",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "cols",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "rows",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "readonly",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "resize",
-            type: "list",
-            values: ["both", "none", "horizontal", "vertical"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    selectProperties = [
-        {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "size",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "multiple",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    buttonProperties = [
-        {
-            name: "type",
-            type: "list",
-            values: ["button", "submit", "reset"],
-            service: this,
-            defaultValue: "button",
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    anchorProperties = [
-        {
-            name: "href",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    divProperties = [
-        {
-            name: "title",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    imgProperties = [
-        {
-            name: "src",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    iframeProperties = [
-        {
-            name: "src",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    formElementProperties = [
-        {
-            name: "autofocus",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        },
-        {
-            name: "disabled",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        },
-        {
-            name: "required",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    name = "native";
-    getRefreshMode(designItem) {
-        return RefreshMode.full;
-    }
-    isHandledElement(designItem) {
-        switch (designItem.element.localName) {
-            case 'input':
-            case 'textarea':
-            case 'select':
-            case 'button':
-            case 'a':
-            case 'div':
-            case 'span':
-            case 'br':
-            case 'img':
-            case 'iframe':
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-            case 'p':
-                return true;
-        }
-        return false;
-    }
-    getProperty(designItem, name) {
-        return this.getProperties(designItem).find(x => x.name == name);
-    }
-    getProperties(designItem) {
-        if (!this.isHandledElement(designItem))
-            return null;
-        switch (designItem.element.localName) {
-            case 'input':
-                return [...this.inputProperties, ...this.formElementProperties];
-            case 'textarea':
-                return [...this.textareaProperties, ...this.formElementProperties];
-            case 'select':
-                return [...this.selectProperties, ...this.formElementProperties];
-            case 'button':
-                return [...this.buttonProperties, ...this.formElementProperties];
-            case 'a':
-                return this.anchorProperties;
-            case 'div':
-                return this.divProperties;
-            case 'img':
-                return this.imgProperties;
-            case 'iframe':
-                return this.iframeProperties;
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-            case 'p':
-                return [];
-        }
-        return null;
-    }
-}

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts

@@ -1,21 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class NativeElementsPropertiesService extends CommonPropertiesService {
-    private inputProperties;
-    private textareaProperties;
-    private selectProperties;
-    private buttonProperties;
-    private anchorProperties;
-    private divProperties;
-    private imgProperties;
-    private iframeProperties;
-    private formElementProperties;
-    name: string;
-    getRefreshMode(designItem: IDesignItem): RefreshMode;
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-}

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js

@@ -1,243 +0,0 @@
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { PropertyType } from '../PropertyType.js';
-import { RefreshMode } from '../IPropertiesService.js';
-export class NativeElementsPropertiesService extends CommonPropertiesService {
-    inputProperties = [
-        {
-            name: "type",
-            type: "list",
-            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
-            service: this,
-            defaultValue: "text",
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "placeholder",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "checked",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "min",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "max",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "readonly",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "valueAsDate",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "valueAsNumber",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        }
-    ];
-    textareaProperties = [
-        {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "placeholder",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "maxlength",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "cols",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "rows",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "readonly",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "resize",
-            type: "list",
-            values: ["both", "none", "horizontal", "vertical"],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }
-    ];
-    selectProperties = [
-        {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.property
-        },
-        {
-            name: "size",
-            type: "number",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "multiple",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    buttonProperties = [
-        {
-            name: "type",
-            type: "list",
-            values: ["button", "submit", "reset"],
-            service: this,
-            defaultValue: "button",
-            propertyType: PropertyType.propertyAndAttribute
-        }, {
-            name: "value",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    anchorProperties = [
-        {
-            name: "href",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    divProperties = [
-        {
-            name: "title",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    imgProperties = [
-        {
-            name: "src",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    iframeProperties = [
-        {
-            name: "src",
-            type: "string",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    formElementProperties = [
-        {
-            name: "autofocus",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        },
-        {
-            name: "disabled",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        },
-        {
-            name: "required",
-            type: "boolean",
-            service: this,
-            propertyType: PropertyType.propertyAndAttribute
-        }
-    ];
-    name = "native";
-    getRefreshMode(designItem) {
-        return RefreshMode.full;
-    }
-    isHandledElement(designItem) {
-        switch (designItem.element.localName) {
-            case 'input':
-            case 'textarea':
-            case 'select':
-            case 'button':
-            case 'a':
-            case 'div':
-            case 'span':
-            case 'br':
-            case 'img':
-            case 'iframe':
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-            case 'p':
-                return true;
-        }
-        return false;
-    }
-    getProperty(designItem, name) {
-        return this.getProperties(designItem).find(x => x.name == name);
-    }
-    getProperties(designItem) {
-        if (!this.isHandledElement(designItem))
-            return null;
-        switch (designItem.element.localName) {
-            case 'input':
-                return [...this.inputProperties, ...this.formElementProperties];
-            case 'textarea':
-                return [...this.textareaProperties, ...this.formElementProperties];
-            case 'select':
-                return [...this.selectProperties, ...this.formElementProperties];
-            case 'button':
-                return [...this.buttonProperties, ...this.formElementProperties];
-            case 'a':
-                return this.anchorProperties;
-            case 'div':
-                return this.divProperties;
-            case 'img':
-                return this.imgProperties;
-            case 'iframe':
-                return this.iframeProperties;
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-            case 'p':
-                return [];
-        }
-        return null;
-    }
-}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -1,5 +0,0 @@
-import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
-export declare const enableStylesheetService = "enableStylesheetService";
-export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
-    constructor();
-}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -1,7 +0,0 @@
-import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
-export const enableStylesheetService = 'enableStylesheetService';
-export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
-    constructor() {
-        super(enableStylesheetService, "ss", "modify Stylesheet");
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.d.ts

@@ -1,6 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js

@@ -1,49 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
-}
-customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts

@@ -1,6 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js

@@ -1,49 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
-}
-customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);