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

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -1,9 +1,9 @@
-import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition } from '../../../Constants';
-export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
-    _treeDiv;
-    _tree;
-    _filter;
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { dragDropFormatNameElementDefinition } from '../../../Constants';
+export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+    _treeDiv;
+    _tree;
+    _filter;
     static style = css `
       * {
           touch-action: none;
@@ -45,86 +45,86 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
       td > img {
         vertical-align: middle;
       }
-    `;
+    `;
     static template = html `
   <div style="height: 100%;">
     <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
     <div style="height: calc(100% - 23px); overflow: auto;">
       <div id="treetable" style="min-width: 100%;"></div>
     </div>
-  </div>`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@ts-ignore
-        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        this._filter = this._getDomElement('input');
-        this._filter.onkeyup = () => {
-            let match = this._filter.value;
-            this._tree.filterNodes((node) => {
-                return new RegExp(match, "i").test(node.title);
-            });
-        };
-        this._treeDiv = this._getDomElement('treetable');
-        $(this._treeDiv).fancytree({
-            icon: true,
-            extensions: ['childcounter', 'dnd5', 'filter'],
-            quicksearch: true,
-            source: [],
-            filter: {
-                autoExpand: true,
-                mode: 'hide',
-                highlight: true
-            },
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
-                    data.dropEffect = "copy";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    return false;
-                }
-            }
-        });
-        //@ts-ignore
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        let rootNode = this._tree.getRootNode();
-        rootNode.removeChildren();
-        for (const s of elementsServices) {
-            const newNode = rootNode.addChildren({
-                title: s.name,
-                folder: true
-            });
-            try {
-                let elements = await s.getElements();
-                for (let e of elements) {
-                    newNode.addChildren({
-                        title: e.name ?? e.tag,
-                        folder: false,
-                        //@ts-ignore
-                        ref: e
-                    });
-                }
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-            try {
-                //@ts-ignore
-                newNode.updateCounters();
-            }
-            catch { }
-        }
-    }
-}
-customElements.define('node-projects-palette-tree-view', PaletteTreeView);
+  </div>`;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        this._filter = this._getDomElement('input');
+        this._filter.onkeyup = () => {
+            let match = this._filter.value;
+            this._tree.filterNodes((node) => {
+                return new RegExp(match, "i").test(node.title);
+            });
+        };
+        this._treeDiv = this._getDomElement('treetable');
+        $(this._treeDiv).fancytree({
+            icon: true,
+            extensions: ['childcounter', 'dnd5', 'filter'],
+            quicksearch: true,
+            source: [],
+            filter: {
+                autoExpand: true,
+                mode: 'hide',
+                highlight: true
+            },
+            dnd5: {
+                dropMarkerParent: this.shadowRoot,
+                preventRecursion: true,
+                preventVoidMoves: false,
+                dropMarkerOffsetX: -24,
+                dropMarkerInsertOffsetX: -16,
+                dragStart: (node, data) => {
+                    data.effectAllowed = "all";
+                    data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
+                    data.dropEffect = "copy";
+                    return true;
+                },
+                dragEnter: (node, data) => {
+                    return false;
+                }
+            }
+        });
+        //@ts-ignore
+        this._tree = $.ui.fancytree.getTree(this._treeDiv);
+        this._treeDiv.children[0].classList.add('fancytree-connectors');
+    }
+    async loadControls(serviceContainer, elementsServices) {
+        let rootNode = this._tree.getRootNode();
+        rootNode.removeChildren();
+        for (const s of elementsServices) {
+            const newNode = rootNode.addChildren({
+                title: s.name,
+                folder: true
+            });
+            try {
+                let elements = await s.getElements();
+                for (let e of elements) {
+                    newNode.addChildren({
+                        title: e.name ?? e.tag,
+                        folder: false,
+                        //@ts-ignore
+                        ref: e
+                    });
+                }
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
+            try {
+                //@ts-ignore
+                newNode.updateCounters();
+            }
+            catch { }
+        }
+    }
+}
+customElements.define('node-projects-palette-tree-view', PaletteTreeView);

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

@@ -1,11 +1,11 @@
-import '../../controls/DesignerTabControl.js';
-import { IElementsService } from '../../services/elementsService/IElementsService';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected: string;
-    private _designerTabControl;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
-}
+import '../../controls/DesignerTabControl.js';
+import { IElementsService } from '../../services/elementsService/IElementsService';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer';
+export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected: string;
+    private _designerTabControl;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
+}

package/dist/elements/widgets/paletteView/paletteView.js

@@ -1,37 +1,37 @@
-import '../../controls/DesignerTabControl.js';
-import { PaletteElements } from './paletteElements';
-import { DesignerTabControl } from '../../controls/DesignerTabControl';
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected = 'native';
-    _designerTabControl;
+import '../../controls/DesignerTabControl.js';
+import { PaletteElements } from './paletteElements';
+import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+export class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected = 'native';
+    _designerTabControl;
     static style = css `
     :host {
       display: flex;
       flex-direction: column;
       flex: 1;
       height: 100%;
-    }`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._designerTabControl = new DesignerTabControl();
-        this._designerTabControl.selectedIndex = 0;
-        this.shadowRoot.appendChild(this._designerTabControl);
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        for (const s of elementsServices) {
-            try {
-                let elements = await s.getElements();
-                let paletteElement = new PaletteElements();
-                paletteElement.title = s.name;
-                this._designerTabControl.appendChild(paletteElement);
-                paletteElement.loadElements(serviceContainer, elements);
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-        }
-    }
-}
-customElements.define('node-projects-palette-view', PaletteView);
+    }`;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._designerTabControl = new DesignerTabControl();
+        this._designerTabControl.selectedIndex = 0;
+        this.shadowRoot.appendChild(this._designerTabControl);
+    }
+    async loadControls(serviceContainer, elementsServices) {
+        for (const s of elementsServices) {
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
+        }
+    }
+}
+customElements.define('node-projects-palette-view', PaletteView);

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -1,21 +1,21 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
-    private _serviceContainer;
-    private _designerTabControl;
-    private _selectedItems;
-    private _propertyGridPropertyLists;
-    private _itemsObserver;
-    private _instanceServiceContainer;
-    private _selectionChangedHandler;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    set serviceContainer(value: ServiceContainer);
-    get serviceContainer(): ServiceContainer;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    get selectedItems(): IDesignItem[];
-    set selectedItems(items: IDesignItem[]);
-    private _observeItems;
-}
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    private _serviceContainer;
+    private _designerTabControl;
+    private _selectedItems;
+    private _propertyGridPropertyLists;
+    private _itemsObserver;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    get serviceContainer(): ServiceContainer;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+    private _observeItems;
+}

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -1,17 +1,17 @@
-import { PropertyGridPropertyList } from './PropertyGridPropertyList';
-import { DesignerTabControl } from '../../controls/DesignerTabControl';
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { CssPropertiesService } from '../../services/propertiesService/services/CssPropertiesService';
-import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
-import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
-export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
-    _serviceContainer;
-    _designerTabControl;
-    _selectedItems;
-    _propertyGridPropertyLists;
-    _itemsObserver;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
+import { PropertyGridPropertyList } from './PropertyGridPropertyList';
+import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { CssPropertiesService } from '../../services/propertiesService/services/CssPropertiesService';
+import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
+import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    _serviceContainer;
+    _designerTabControl;
+    _selectedItems;
+    _propertyGridPropertyLists;
+    _itemsObserver;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
     static style = css `
     :host {
       display: block;
@@ -25,116 +25,116 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     button:focus {
       box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
     }
-    `;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._designerTabControl = new DesignerTabControl();
-        this.shadowRoot.appendChild(this._designerTabControl);
-        this.addEventListener('contextmenu', (e) => {
-            if (e.composedPath()[0].localName != 'input')
-                e.preventDefault();
-        });
-        this._itemsObserver = new MutationObserver((m) => {
-            for (const a of this._propertyGridPropertyLists) {
-                a.refreshForDesignItems(this._selectedItems);
-            }
-        });
-    }
-    set serviceContainer(value) {
-        this._serviceContainer = value;
-        this._propertyGridPropertyLists = [];
-        let elementPropertyEditorAttributeList = new PropertyGridPropertyList(value);
-        elementPropertyEditorAttributeList.setPropertiesService(new CssPropertiesService("styles")); //This is replace in selectedItems
-        elementPropertyEditorAttributeList.title = "properties";
-        this._designerTabControl.appendChild(elementPropertyEditorAttributeList);
-        this._propertyGridPropertyLists.push(elementPropertyEditorAttributeList);
-        let attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new AttributesPropertiesService());
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "attributes";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CommonPropertiesService());
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "common";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "set-styles";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "styles";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("alignment"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "alignment";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("grid"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "grid";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        attributeEditorAttributeList = new PropertyGridPropertyList(value);
-        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
-        attributeEditorAttributeList.createElements(null);
-        attributeEditorAttributeList.title = "flex";
-        this._designerTabControl.appendChild(attributeEditorAttributeList);
-        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
-        this._designerTabControl.selectedIndex = 0;
-    }
-    get serviceContainer() {
-        return this._serviceContainer;
-    }
-    set instanceServiceContainer(value) {
-        this._instanceServiceContainer = value;
-        this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
-            this.selectedItems = e.selectedElements;
-        });
-        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
-    }
-    get selectedItems() {
-        return this._selectedItems;
-    }
-    set selectedItems(items) {
-        this._selectedItems = items;
-        if (this.selectedItems && this.selectedItems.length > 0) {
-            const propService = this._serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this.selectedItems[0]));
-            this._propertyGridPropertyLists[0].setPropertiesService(propService);
-            this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
-            this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
-            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
-        }
-        for (const a of this._propertyGridPropertyLists) {
-            a.designItemsChanged(items);
-        }
-        if (items) {
-            if (items.length == 1) {
-                for (const a of this._propertyGridPropertyLists) {
-                    a.designItemsChanged(items);
-                    a.refreshForDesignItems(items);
-                }
-                this._observeItems();
-            }
-        }
-        else {
-            this._itemsObserver.disconnect();
-        }
-    }
-    _observeItems() {
-        this._itemsObserver.disconnect();
-        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
-    }
-}
-customElements.define('node-projects-property-grid', PropertyGrid);
+    `;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._designerTabControl = new DesignerTabControl();
+        this.shadowRoot.appendChild(this._designerTabControl);
+        this.addEventListener('contextmenu', (e) => {
+            if (e.composedPath()[0].localName != 'input')
+                e.preventDefault();
+        });
+        this._itemsObserver = new MutationObserver((m) => {
+            for (const a of this._propertyGridPropertyLists) {
+                a.refreshForDesignItems(this._selectedItems);
+            }
+        });
+    }
+    set serviceContainer(value) {
+        this._serviceContainer = value;
+        this._propertyGridPropertyLists = [];
+        let elementPropertyEditorAttributeList = new PropertyGridPropertyList(value);
+        elementPropertyEditorAttributeList.setPropertiesService(new CssPropertiesService("styles")); //This is replace in selectedItems
+        elementPropertyEditorAttributeList.title = "properties";
+        this._designerTabControl.appendChild(elementPropertyEditorAttributeList);
+        this._propertyGridPropertyLists.push(elementPropertyEditorAttributeList);
+        let attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new AttributesPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "attributes";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CommonPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "common";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "set-styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("alignment"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "alignment";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("grid"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "grid";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "flex";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        this._designerTabControl.selectedIndex = 0;
+    }
+    get serviceContainer() {
+        return this._serviceContainer;
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectedItems = e.selectedElements;
+        });
+        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+    }
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(items) {
+        this._selectedItems = items;
+        if (this.selectedItems && this.selectedItems.length > 0) {
+            const propService = this._serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this.selectedItems[0]));
+            this._propertyGridPropertyLists[0].setPropertiesService(propService);
+            this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
+        }
+        for (const a of this._propertyGridPropertyLists) {
+            a.designItemsChanged(items);
+        }
+        if (items) {
+            if (items.length == 1) {
+                for (const a of this._propertyGridPropertyLists) {
+                    a.designItemsChanged(items);
+                    a.refreshForDesignItems(items);
+                }
+                this._observeItems();
+            }
+        }
+        else {
+            this._itemsObserver.disconnect();
+        }
+    }
+    _observeItems() {
+        this._itemsObserver.disconnect();
+        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
+    }
+}
+customElements.define('node-projects-property-grid', PropertyGrid);

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.d.ts

@@ -1,17 +1,17 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignItem } from '../../item/IDesignItem';
-import { IPropertiesService } from '../../services/propertiesService/IPropertiesService';
-export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
-    private _div;
-    private _propertyMap;
-    private _serviceContainer;
-    private _propertiesService;
-    private _designItems;
-    static get style(): CSSStyleSheet;
-    constructor(serviceContainer: ServiceContainer);
-    setPropertiesService(propertiesService: IPropertiesService): void;
-    createElements(designItem: IDesignItem): void;
-    designItemsChanged(designItems: IDesignItem[]): void;
-    refreshForDesignItems(items: IDesignItem[]): void;
-}
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IDesignItem } from '../../item/IDesignItem';
+import { IPropertiesService } from '../../services/propertiesService/IPropertiesService';
+export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
+    private _div;
+    private _propertyMap;
+    private _serviceContainer;
+    private _propertiesService;
+    private _designItems;
+    static get style(): CSSStyleSheet;
+    constructor(serviceContainer: ServiceContainer);
+    setPropertiesService(propertiesService: IPropertiesService): void;
+    createElements(designItem: IDesignItem): void;
+    designItemsChanged(designItems: IDesignItem[]): void;
+    refreshForDesignItems(items: IDesignItem[]): void;
+}