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

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;
+}

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

@@ -1,13 +1,13 @@
-import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
-import { ValueType } from '../../services/propertiesService/ValueType';
-export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
-    _div;
-    _propertyMap = new Map();
-    _serviceContainer;
-    _propertiesService;
-    _designItems;
-    static get style() {
+import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
+import { ValueType } from '../../services/propertiesService/ValueType';
+export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
+    _div;
+    _propertyMap = new Map();
+    _serviceContainer;
+    _propertiesService;
+    _designItems;
+    static get style() {
         return css `
     :host{
       display: block;
@@ -74,85 +74,85 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     .unset-value:focus {
       color: white
     }
-    `;
-    }
-    constructor(serviceContainer) {
-        super();
-        this._restoreCachedInititalValues();
-        this._serviceContainer = serviceContainer;
-        this._div = document.createElement("div");
-        this._div.className = "content-wrapper";
-        this.shadowRoot.appendChild(this._div);
-    }
-    setPropertiesService(propertiesService) {
-        this._propertiesService = propertiesService;
-        DomHelper.removeAllChildnodes(this._div);
-        this._propertyMap.clear();
-    }
-    createElements(designItem) {
-        DomHelper.removeAllChildnodes(this._div);
-        this._propertyMap.clear();
-        if (this._propertiesService) {
-            let properties = this._propertiesService.getProperties(designItem);
-            if (properties) {
-                for (const p of properties) {
-                    let editor;
-                    if (p.createEditor)
-                        editor = p.createEditor(p);
-                    else {
-                        editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
-                    }
-                    if (editor) {
-                        let rectContainer = document.createElement("div");
-                        rectContainer.style.width = '20px';
-                        rectContainer.style.height = '20px';
-                        rectContainer.style.display = 'flex';
-                        rectContainer.style.alignItems = 'center';
-                        let rect = document.createElement("div");
-                        rect.style.width = '7px';
-                        rect.style.height = '7px';
-                        rect.style.border = '1px white solid';
-                        rectContainer.appendChild(rect);
-                        this._div.appendChild(rectContainer);
-                        ContextMenuHelper.addContextMenu(rectContainer, [
-                            { title: 'clear', action: (e) => p.service.clearValue(this._designItems, p) },
-                            { title: 'new binding', action: (e) => alert('new binding() ' + p.name) }
-                        ]);
-                        let label = document.createElement("label");
-                        label.htmlFor = p.name;
-                        label.textContent = p.name;
-                        label.title = p.name;
-                        this._div.appendChild(label);
-                        editor.element.id = p.name;
-                        this._div.appendChild(editor.element);
-                        this._propertyMap.set(p, { isSetElement: rect, editor: editor });
-                    }
-                }
-            }
-        }
-    }
-    designItemsChanged(designItems) {
-        this._designItems = designItems;
-        for (let m of this._propertyMap) {
-            m[1].editor.designItemsChanged(designItems);
-        }
-    }
-    refreshForDesignItems(items) {
-        for (let m of this._propertyMap) {
-            let s = this._propertiesService.isSet(items, m[0]);
-            let v = this._propertiesService.getValue(items, m[0]);
-            if (s == ValueType.none) {
-                m[1].isSetElement.style.background = '';
-                v = this._propertiesService.getUnsetValue(items, m[0]);
-            }
-            else if (s == ValueType.all)
-                m[1].isSetElement.style.background = 'white';
-            else if (s == ValueType.some)
-                m[1].isSetElement.style.background = 'gray';
-            else if (s == ValueType.bound)
-                m[1].isSetElement.style.background = 'orange';
-            m[1].editor.refreshValueWithoutNotification(s, v);
-        }
-    }
-}
-customElements.define('node-projects-property-grid-property-list', PropertyGridPropertyList);
+    `;
+    }
+    constructor(serviceContainer) {
+        super();
+        this._restoreCachedInititalValues();
+        this._serviceContainer = serviceContainer;
+        this._div = document.createElement("div");
+        this._div.className = "content-wrapper";
+        this.shadowRoot.appendChild(this._div);
+    }
+    setPropertiesService(propertiesService) {
+        this._propertiesService = propertiesService;
+        DomHelper.removeAllChildnodes(this._div);
+        this._propertyMap.clear();
+    }
+    createElements(designItem) {
+        DomHelper.removeAllChildnodes(this._div);
+        this._propertyMap.clear();
+        if (this._propertiesService) {
+            let properties = this._propertiesService.getProperties(designItem);
+            if (properties) {
+                for (const p of properties) {
+                    let editor;
+                    if (p.createEditor)
+                        editor = p.createEditor(p);
+                    else {
+                        editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
+                    }
+                    if (editor) {
+                        let rectContainer = document.createElement("div");
+                        rectContainer.style.width = '20px';
+                        rectContainer.style.height = '20px';
+                        rectContainer.style.display = 'flex';
+                        rectContainer.style.alignItems = 'center';
+                        let rect = document.createElement("div");
+                        rect.style.width = '7px';
+                        rect.style.height = '7px';
+                        rect.style.border = '1px white solid';
+                        rectContainer.appendChild(rect);
+                        this._div.appendChild(rectContainer);
+                        ContextMenuHelper.addContextMenu(rectContainer, [
+                            { title: 'clear', action: (e) => p.service.clearValue(this._designItems, p) },
+                            { title: 'new binding', action: (e) => alert('new binding() ' + p.name) }
+                        ]);
+                        let label = document.createElement("label");
+                        label.htmlFor = p.name;
+                        label.textContent = p.name;
+                        label.title = p.name;
+                        this._div.appendChild(label);
+                        editor.element.id = p.name;
+                        this._div.appendChild(editor.element);
+                        this._propertyMap.set(p, { isSetElement: rect, editor: editor });
+                    }
+                }
+            }
+        }
+    }
+    designItemsChanged(designItems) {
+        this._designItems = designItems;
+        for (let m of this._propertyMap) {
+            m[1].editor.designItemsChanged(designItems);
+        }
+    }
+    refreshForDesignItems(items) {
+        for (let m of this._propertyMap) {
+            let s = this._propertiesService.isSet(items, m[0]);
+            let v = this._propertiesService.getValue(items, m[0]);
+            if (s == ValueType.none) {
+                m[1].isSetElement.style.background = '';
+                v = this._propertiesService.getUnsetValue(items, m[0]);
+            }
+            else if (s == ValueType.all)
+                m[1].isSetElement.style.background = 'white';
+            else if (s == ValueType.some)
+                m[1].isSetElement.style.background = 'gray';
+            else if (s == ValueType.bound)
+                m[1].isSetElement.style.background = 'orange';
+            m[1].editor.refreshValueWithoutNotification(s, v);
+        }
+    }
+}
+customElements.define('node-projects-property-grid-property-list', PropertyGridPropertyList);

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

@@ -1,15 +1,15 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _type;
-    private _id;
-    private _pg;
-    private _selectionChangedHandler;
-    private _instanceServiceContainer;
-    constructor();
-    set serviceContainer(value: ServiceContainer);
-    set instanceServiceContainer(value: InstanceServiceContainer);
-}
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _type;
+    private _id;
+    private _pg;
+    private _selectionChangedHandler;
+    private _instanceServiceContainer;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    set instanceServiceContainer(value: InstanceServiceContainer);
+}

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

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
-import { sleep } from '../../helper/Helper.js';
-export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { sleep } from '../../helper/Helper.js';
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -38,54 +38,54 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     #pg {
       height: calc(100% - 45px);
     }
-    `;
+    `;
     static template = html `
   <div>
     <span class="desc">Type:</span><span id="type"></span>
     <span class="desc">Id:</span><input type="text" id="id">
   </div>
   <node-projects-property-grid id="pg"></node-projects-property-grid>
-  `;
-    _type;
-    _id;
-    _pg;
-    _selectionChangedHandler;
-    _instanceServiceContainer;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._type = this._getDomElement('type');
-        this._id = this._getDomElement('id');
-        this._pg = this._getDomElement('pg');
-        this._id.onkeydown = e => {
-            if (e.key == 'Enter')
-                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
-            else if (e.key == 'Escape') {
-                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-        let pSel;
-        this._id.onfocus = e => {
-            pSel = this._instanceServiceContainer.selectionService.primarySelection;
-        };
-        this._id.onblur = e => {
-            pSel.id = this._id.value;
-        };
-    }
-    set serviceContainer(value) {
-        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
-    }
-    set instanceServiceContainer(value) {
-        this._instanceServiceContainer = value;
-        this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
-            this._pg.instanceServiceContainer = value;
-            await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
-            this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
-            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
-        });
-    }
-}
-customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);
+  `;
+    _type;
+    _id;
+    _pg;
+    _selectionChangedHandler;
+    _instanceServiceContainer;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._type = this._getDomElement('type');
+        this._id = this._getDomElement('id');
+        this._pg = this._getDomElement('pg');
+        this._id.onkeydown = e => {
+            if (e.key == 'Enter')
+                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
+            else if (e.key == 'Escape') {
+                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        let pSel;
+        this._id.onfocus = e => {
+            pSel = this._instanceServiceContainer.selectionService.primarySelection;
+        };
+        this._id.onblur = e => {
+            pSel.id = this._id.value;
+        };
+    }
+    set serviceContainer(value) {
+        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
+            this._pg.instanceServiceContainer = value;
+            await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
+            this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+        });
+    }
+}
+customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

package/dist/elements/widgets/treeView/ITreeView.d.ts

@@ -1,6 +1,6 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { ISelectionChangedEvent } from "../../services/selectionService/ISelectionChangedEvent";
-export interface ITreeView {
-    createTree(rootItem: IDesignItem): any;
-    selectionChanged(event: ISelectionChangedEvent): any;
-}
+import { IDesignItem } from "../../item/IDesignItem";
+import { ISelectionChangedEvent } from "../../services/selectionService/ISelectionChangedEvent";
+export interface ITreeView {
+    createTree(rootItem: IDesignItem): any;
+    selectionChanged(event: ISelectionChangedEvent): any;
+}