@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/item/BindingMode.d.ts

@@ -0,0 +1,4 @@
+export declare enum BindingMode {
+    oneWay = "oneWay",
+    twoWay = "twoWay"
+}

package/dist/elements/item/BindingMode.js

@@ -0,0 +1,5 @@
+export var BindingMode;
+(function (BindingMode) {
+    BindingMode["oneWay"] = "oneWay";
+    BindingMode["twoWay"] = "twoWay";
+})(BindingMode || (BindingMode = {}));

package/dist/elements/item/BindingTarget.d.ts

@@ -0,0 +1,8 @@
+export declare enum BindingTarget {
+    property = "property",
+    attribute = "attribute",
+    class = "class",
+    css = "css",
+    event = "event",
+    content = "content"
+}

package/dist/elements/item/BindingTarget.js

@@ -0,0 +1,9 @@
+export var BindingTarget;
+(function (BindingTarget) {
+    BindingTarget["property"] = "property";
+    BindingTarget["attribute"] = "attribute";
+    BindingTarget["class"] = "class";
+    BindingTarget["css"] = "css";
+    BindingTarget["event"] = "event";
+    BindingTarget["content"] = "content"; //innertext or html... mhmmm
+})(BindingTarget || (BindingTarget = {}));

package/dist/elements/item/DesignItem.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="node" />
+import { ServiceContainer } from '../services/ServiceContainer.js';
+import { IDesignItem } from './IDesignItem.js';
+import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
+import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
+import { NodeType } from './NodeType.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
+import { ISize } from '../../interfaces/ISize.js';
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
+export declare class DesignItem implements IDesignItem {
+    lastContainerSize: ISize;
+    parsedNode: any;
+    node: Node;
+    serviceContainer: ServiceContainer;
+    instanceServiceContainer: InstanceServiceContainer;
+    appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
+    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
+    nodeReplaced: TypedEvent<void>;
+    clone(): Promise<IDesignItem>;
+    allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
+    replaceNode(newNode: Node): void;
+    get nodeType(): NodeType;
+    private _attributes;
+    get hasAttributes(): boolean;
+    hasAttribute(name: string): boolean;
+    getAttribute(name: string): string;
+    attributes(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetAttribute(name: string, value: string): void;
+    _withoutUndoRemoveAttribute(name: string): void;
+    _reparseSpecialAttributes(name: string): void;
+    private _styles;
+    get hasStyles(): boolean;
+    hasStyle(name: string): boolean;
+    getStyle(name: string): string;
+    styles(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetStyle(name: string, value: string): void;
+    _withoutUndoRemoveStyle(name: string): void;
+    private static _designItemMap;
+    get element(): Element;
+    get name(): string;
+    get id(): string;
+    set id(value: string);
+    get isRootItem(): boolean;
+    _childArray: IDesignItem[];
+    get hasChildren(): boolean;
+    children(): IterableIterator<IDesignItem>;
+    get childCount(): number;
+    get firstChild(): IDesignItem;
+    private _parent;
+    get parent(): IDesignItem;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): void;
+    insertChild(designItem: IDesignItem, index?: number): void;
+    removeChild(designItem: IDesignItem): void;
+    remove(): void;
+    clearChildren(): void;
+    get hasContent(): boolean;
+    get content(): string;
+    set content(value: string);
+    get innerHTML(): string;
+    set innerHTML(value: string);
+    get isEmptyTextNode(): boolean;
+    get hideAtDesignTime(): boolean;
+    set hideAtDesignTime(value: boolean);
+    get hideAtRunTime(): boolean;
+    set hideAtRunTime(value: boolean);
+    get lockAtDesignTime(): boolean;
+    set lockAtDesignTime(value: boolean);
+    static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
+    updateChildrenFromNodesChildren(): void;
+    constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
+    openGroup(title: string): ChangeGroup;
+    getOrCreateDesignItem(node: Node): IDesignItem;
+    static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+    static GetDesignItem(node: Node): IDesignItem;
+    setStyle(name: string, value?: string | null, important?: boolean): void;
+    removeStyle(name: string): void;
+    updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
+    getStyleFromSheetOrLocal(name: string, fallback?: string): string;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
+    getComputedStyle(name: string, fallback?: string): string;
+    _stylesCache: IStyleRule[];
+    _cacheClearTimer: NodeJS.Timeout;
+    getAllStyles(): IStyleRule[];
+    setAttribute(name: string, value?: string | null): void;
+    removeAttribute(name: string): void;
+    _insertChildInternal(designItem: IDesignItem, index?: number): void;
+    _removeChildInternal(designItem: IDesignItem): void;
+    _refreshIfStyleSheet(): void;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
+    static createDesignItemFromImageBlob(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, data: Blob): Promise<IDesignItem>;
+}

package/dist/elements/item/DesignItem.js

@@ -0,0 +1,513 @@
+import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction.js';
+import { NodeType } from './NodeType.js';
+import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { CssAttributeParser } from '../helper/CssAttributeParser.js';
+import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
+import { DomConverter } from '../widgets/designerView/DomConverter.js';
+import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
+import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
+import { AbstractStylesheetService } from '../services/stylesheetService/AbstractStylesheetService.js';
+import { TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
+import { TextContentChangeAction } from '../services/undoService/transactionItems/TextContentChangeAction.js';
+const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
+const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
+const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
+export class DesignItem {
+    lastContainerSize;
+    parsedNode;
+    node;
+    serviceContainer;
+    instanceServiceContainer;
+    appliedDesignerExtensions = new Map();
+    shouldAppliedDesignerExtensions = new Map();
+    nodeReplaced = new TypedEvent;
+    async clone() {
+        try {
+            const html = DomConverter.ConvertToString([this], false);
+            const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer, true);
+            return parsed[0];
+        }
+        catch (err) {
+            //TODO: clone service for design item, maybe refactor copy&paste to use this also...
+            console.warn("could not clone design item.", this);
+        }
+        return null;
+    }
+    *allMatching(selectors) {
+        if (this.hasChildren) {
+            for (let d of this.children()) {
+                if (d.nodeType == NodeType.Element && d.element.matches(selectors))
+                    yield d;
+                yield* d.allMatching(selectors);
+            }
+        }
+    }
+    replaceNode(newNode) {
+        DesignItem._designItemMap.delete(this.node);
+        DesignItem._designItemMap.set(newNode, this);
+        this.node = newNode;
+        this.nodeReplaced.emit();
+    }
+    get nodeType() {
+        if (this.node instanceof Comment)
+            return NodeType.Comment;
+        if (this.node instanceof Text)
+            return NodeType.TextNode;
+        return NodeType.Element;
+    }
+    _attributes;
+    get hasAttributes() {
+        return this._attributes.size > 0;
+    }
+    hasAttribute(name) {
+        return this._attributes.has(name);
+    }
+    getAttribute(name) {
+        return this._attributes.get(name);
+    }
+    *attributes() {
+        for (let s of this._attributes) {
+            yield s;
+        }
+    }
+    _withoutUndoSetAttribute(name, value) {
+        this._attributes.set(name, value);
+        this._reparseSpecialAttributes(name);
+    }
+    _withoutUndoRemoveAttribute(name) {
+        this._attributes.delete(name);
+        this._reparseSpecialAttributes(name);
+    }
+    _reparseSpecialAttributes(name) {
+        if (name == hideAtDesignTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(hideAtDesignTimeAttributeName))
+                    this.element.style.display = this._styles.get('display') ?? "";
+                else
+                    this.element.style.display = 'none';
+            }
+        }
+        else if (name == hideAtRunTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(hideAtRunTimeAttributeName))
+                    this.element.style.opacity = this._styles.get('opacity') ?? "";
+                else
+                    this.element.style.opacity = '0.3';
+            }
+        }
+        else if (name == lockAtDesignTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(lockAtDesignTimeAttributeName))
+                    this.element.style.pointerEvents = 'auto';
+                else
+                    this.element.style.pointerEvents = 'none';
+            }
+        }
+    }
+    _styles;
+    get hasStyles() {
+        return this._styles.size > 0;
+    }
+    hasStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.has(nm);
+    }
+    getStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.get(nm);
+    }
+    *styles() {
+        for (let s of this._styles) {
+            yield s;
+        }
+    }
+    _withoutUndoSetStyle(name, value) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.set(nm, value);
+    }
+    _withoutUndoRemoveStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.delete(nm);
+    }
+    static _designItemMap = new WeakMap();
+    get element() {
+        return this.node;
+    }
+    get name() {
+        return this.element.localName;
+    }
+    get id() {
+        return this.element.id;
+    }
+    set id(value) {
+        this.element.id = value;
+        this.setAttribute("id", value);
+    }
+    get isRootItem() {
+        return this.instanceServiceContainer.contentService.rootDesignItem === this;
+    }
+    _childArray = [];
+    get hasChildren() {
+        return this._childArray.length > 0;
+    }
+    *children() {
+        for (const e of this._childArray) {
+            yield e;
+        }
+    }
+    get childCount() {
+        return this._childArray.length;
+    }
+    get firstChild() {
+        return this._childArray[0];
+    }
+    _parent;
+    get parent() {
+        return this._parent;
+    }
+    indexOf(designItem) {
+        return this._childArray.indexOf(designItem);
+    }
+    insertAdjacentElement(designItem, where) {
+        let action;
+        if (where == 'afterbegin') {
+            action = new InsertChildAction(designItem, this, 0);
+        }
+        else if (where == 'beforeend') {
+            action = new InsertChildAction(designItem, this, this._childArray.length);
+        }
+        else if (where == 'beforebegin') {
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
+        }
+        else if (where == 'afterend') {
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1);
+        }
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    insertChild(designItem, index) {
+        const action = new InsertChildAction(designItem, this, index);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeChild(designItem) {
+        const action = new DeleteAction([designItem]);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    remove() {
+        const action = new DeleteAction([this]);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    clearChildren() {
+        for (let i = this._childArray.length - 1; i >= 0; i--) {
+            let di = this._childArray[i];
+            di.remove();
+        }
+    }
+    //abstract text content to own property. so only change via designer api will use it.
+    get hasContent() {
+        return this.nodeType == NodeType.TextNode || (this.nodeType == NodeType.Comment && this.element.textContent != "") || (this._childArray.length === 0 && this.content !== null);
+    }
+    get content() {
+        if (!this.hasChildren)
+            return this.node.textContent;
+        else
+            return this._childArray.map(x => x.content).join();
+    }
+    set content(value) {
+        const grp = this.openGroup('set content');
+        this.clearChildren();
+        let t = document.createTextNode(value);
+        let di = DesignItem.GetOrCreateDesignItem(t, t, this.serviceContainer, this.instanceServiceContainer);
+        if (this.nodeType == NodeType.TextNode) {
+            const idx = this.parent.indexOf(this);
+            const parent = this.parent;
+            this.remove();
+            parent.insertChild(di, idx);
+        }
+        else if (this.nodeType == NodeType.Comment) {
+            const action = new TextContentChangeAction(this, value, this.content);
+            this.instanceServiceContainer.undoService.execute(action);
+        }
+        else
+            this.insertChild(di);
+        grp.commit();
+    }
+    get innerHTML() {
+        return this.element.innerHTML;
+    }
+    set innerHTML(value) {
+        if (this.nodeType != NodeType.TextNode) {
+            const grp = this.openGroup('set innerHTML');
+            const range = document.createRange();
+            range.selectNode(document.body);
+            const fragment = range.createContextualFragment(value);
+            for (const n of fragment.childNodes) {
+                let di = DesignItem.GetOrCreateDesignItem(n, n, this.serviceContainer, this.instanceServiceContainer);
+                this.insertChild(di);
+            }
+            grp.commit();
+        }
+    }
+    get isEmptyTextNode() {
+        return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
+    }
+    get hideAtDesignTime() {
+        return this.hasAttribute(hideAtDesignTimeAttributeName);
+    }
+    set hideAtDesignTime(value) {
+        if (value)
+            this.setAttribute(hideAtDesignTimeAttributeName, "");
+        else
+            this.removeAttribute(hideAtDesignTimeAttributeName);
+    }
+    get hideAtRunTime() {
+        return this.hasAttribute(hideAtRunTimeAttributeName);
+    }
+    set hideAtRunTime(value) {
+        if (value)
+            this.setAttribute(hideAtRunTimeAttributeName, "");
+        else
+            this.removeAttribute(hideAtRunTimeAttributeName);
+    }
+    get lockAtDesignTime() {
+        return this.hasAttribute(lockAtDesignTimeAttributeName);
+    }
+    set lockAtDesignTime(value) {
+        if (value)
+            this.setAttribute(lockAtDesignTimeAttributeName, "");
+        else
+            this.removeAttribute(lockAtDesignTimeAttributeName);
+    }
+    static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
+        let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
+        if (designItem.nodeType == NodeType.Element) {
+            for (let a of designItem.element.attributes) {
+                if (a.name !== 'style') {
+                    designItem._attributes.set(a.name, a.value);
+                }
+            }
+            if (node instanceof HTMLElement || node instanceof SVGElement) {
+                const cssParser = new CssAttributeParser();
+                const st = node.getAttribute("style");
+                if (st) {
+                    cssParser.parse(st);
+                    for (let e of cssParser.entries) {
+                        designItem._styles.set(e.name, e.value);
+                    }
+                }
+                if (!designItem.lockAtDesignTime) {
+                    requestAnimationFrame(() => node.style.pointerEvents = 'auto');
+                }
+                else
+                    node.style.pointerEvents = 'none';
+            }
+            node.draggable = false; //even if it should be true, for better designer exp.
+        }
+        designItem.updateChildrenFromNodesChildren();
+        return designItem;
+    }
+    updateChildrenFromNodesChildren() {
+        this._childArray = [];
+        if (this.nodeType == NodeType.Element) {
+            for (const c of this.element.childNodes) {
+                const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+                this._childArray.push(di);
+                di._parent = this;
+            }
+        }
+        this._refreshIfStyleSheet();
+    }
+    constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        this.node = node;
+        this.parsedNode = parsedNode;
+        this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = instanceServiceContainer;
+        this._attributes = new Map();
+        this._styles = new Map();
+        DesignItem._designItemMap.set(node, this);
+    }
+    openGroup(title) {
+        return this.instanceServiceContainer.undoService.openGroup(title);
+    }
+    getOrCreateDesignItem(node) {
+        return DesignItem.GetOrCreateDesignItem(node, node, this.serviceContainer, this.instanceServiceContainer);
+    }
+    static GetOrCreateDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        if (!node)
+            return null;
+        let designItem = DesignItem._designItemMap.get(node);
+        if (!designItem) {
+            let dis = serviceContainer.designItemService;
+            if (dis)
+                designItem = dis.createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+            else
+                designItem = new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+    static GetDesignItem(node) {
+        if (!node)
+            return null;
+        let designItem = DesignItem._designItemMap.get(node);
+        return designItem;
+    }
+    setStyle(name, value, important) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        if (this.isRootItem)
+            throw 'not allowed to set style on root item';
+        const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    updateStyleInSheetOrLocal(name, value, important) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        // Pre-sorted by specificity
+        let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) {
+            // Set style locally
+            if (this.getStyle(nm) != value) {
+                this.setStyle(nm, value);
+            }
+            else if (value == null) {
+                this.removeStyle(nm);
+            }
+        }
+        else {
+            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
+        }
+    }
+    getStyleFromSheetOrLocal(name, fallback = null) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        if (this.hasStyle(name))
+            // Get style locally
+            return this.getStyle(nm);
+        // Pre-sorted by specificity
+        let decls = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (decls && decls.length > 0)
+            return decls[0].value;
+        return null;
+    }
+    getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    getComputedStyle(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    _stylesCache = null;
+    _cacheClearTimer;
+    getAllStyles() {
+        let styles = this._stylesCache;
+        if (styles)
+            return styles;
+        if (this.nodeType != NodeType.Element)
+            return [];
+        const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
+        if (this.instanceServiceContainer.stylesheetService) {
+            try {
+                const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
+                if (rules) {
+                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                }
+            }
+            catch (err) { }
+        }
+        styles = [{ selector: null, declarations: localStyles, specificity: -1 }];
+        this._stylesCache = styles;
+        clearTimeout(this._cacheClearTimer);
+        this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30);
+        return styles;
+    }
+    setAttribute(name, value) {
+        if (this.isRootItem)
+            throw 'not allowed to set attribute on root item';
+        const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeAttribute(name) {
+        const action = new AttributeChangeAction(this, name, null, this._attributes.get(name));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    // Internal implementations wich don't use undo/redo
+    _insertChildInternal(designItem, index) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
+        if (designItem.parent) {
+            designItem.parent._removeChildInternal(designItem);
+        }
+        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
+            this._childArray.push(designItem);
+            this.element.appendChild(designItem.node);
+        }
+        else {
+            let el = this._childArray[index];
+            this.node.insertBefore(designItem.node, el.element);
+            this._childArray.splice(index, 0, designItem);
+        }
+        designItem._parent = this;
+        //todo: is this still needed???
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem) {
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            if (designItem.getPlacementService().isEnterableContainer(this))
+                designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
+        this._refreshIfStyleSheet();
+    }
+    _removeChildInternal(designItem) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionAndCanBeEntered);
+        }
+        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem], true);
+        const index = this._childArray.indexOf(designItem);
+        if (index > -1) {
+            this._childArray.splice(index, 1);
+            designItem.element.remove();
+            designItem._parent = null;
+        }
+        this._refreshIfStyleSheet();
+    }
+    _refreshIfStyleSheet() {
+        if (this.name == 'style' || this.parent?.name == 'style') {
+            //Update Stylesheetservice with sheet info
+            //Patch this sheetdata
+            const realContent = this._childArray.reduce((a, b) => a + b.content, '');
+            this.node.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
+            this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
+        }
+        else if (this.name == 'link') {
+        }
+    }
+    getPlacementService(style) {
+        if (this.nodeType != NodeType.Element)
+            return null;
+        style ??= getComputedStyle(this.element);
+        return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
+    }
+    static createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, data) {
+        return new Promise(resolve => {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, serviceContainer, instanceServiceContainer);
+                return resolve(di);
+            };
+            reader.readAsDataURL(data);
+        });
+    }
+}

package/dist/elements/item/IBinding.d.ts

@@ -0,0 +1,15 @@
+import { BindingMode } from './BindingMode.js';
+import { BindingTarget } from './BindingTarget.js';
+export interface IBinding {
+    targetName?: string;
+    target?: BindingTarget;
+    rawName?: string;
+    rawValue?: string;
+    type?: string;
+    expression?: string;
+    bindableObjectNames?: string[];
+    mode?: BindingMode;
+    invert?: boolean;
+    changedEvents?: string[];
+    nullSafe?: boolean;
+}

package/dist/elements/item/IBinding.js

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