@node-projects/web-component-designer 0.0.138 → 0.0.139

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -19,7 +19,6 @@ export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend
     connectedCallback(): void;
     get selectedIndex(): number;
     set selectedIndex(value: number);
-    disconnectedCallback(): void;
     refreshItems(): void;
     private _selectedIndexChanged;
     readonly onSelectedTabChanged: TypedEvent<DesignerTabControlIndexChangedEventArgs>;

package/dist/elements/controls/DesignerTabControl.js

@@ -97,8 +97,14 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         `;
     constructor() {
         super();
-        this._contentObserver = new MutationObserver(() => {
-            this.refreshItems();
+        this._contentObserver = new MutationObserver((mut) => {
+            let refresh = false;
+            for (let m of mut) {
+                if (m.type != 'attributes' || m.attributeName == 'style')
+                    refresh = true;
+            }
+            if (refresh)
+                this.refreshItems();
         });
         let outerDiv = document.createElement("div");
         outerDiv.className = 'outer';
@@ -138,16 +144,18 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         DomHelper.removeAllChildnodes(this._headerDiv);
         let reloadOnce = true;
         for (let item of this.children) {
-            let htmlItem = item;
-            if (!this._elementMap.has(htmlItem) && reloadOnce) {
-                this.refreshItems();
-                reloadOnce = false;
-            }
-            const tabHeaderDiv = this._elementMap.get(htmlItem);
-            this._moreContainer.appendChild(tabHeaderDiv);
-            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
-                this._headerDiv.appendChild(tabHeaderDiv);
-                w += tabHeaderDiv.clientWidth;
+            if (item.style.display != 'none') {
+                let htmlItem = item;
+                if (!this._elementMap.has(htmlItem) && reloadOnce) {
+                    this.refreshItems();
+                    reloadOnce = false;
+                }
+                const tabHeaderDiv = this._elementMap.get(htmlItem);
+                this._moreContainer.appendChild(tabHeaderDiv);
+                if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
+                    this._headerDiv.appendChild(tabHeaderDiv);
+                    w += tabHeaderDiv.clientWidth;
+                }
             }
         }
     }
@@ -155,7 +163,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         if (this._firstConnect) {
             this.refreshItems();
             this._firstConnect = false;
-            this._contentObserver.observe(this, { childList: true });
+            this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
             let selectedIndexAttribute = this.getAttribute("selected-index");
             if (selectedIndexAttribute) {
                 this.selectedIndex = parseInt(selectedIndexAttribute);
@@ -171,52 +179,52 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         if (this.children.length && old != this._selectedIndex)
             this._selectedIndexChanged(old);
     }
-    disconnectedCallback() {
-        //this._contentObserver.disconnect();
-    }
     refreshItems() {
         this._headerDiv.innerHTML = "";
         let i = 0;
         for (let item of this.children) {
-            let htmlItem = item;
-            let tabHeaderDiv = document.createElement("div");
-            tabHeaderDiv.innerText = htmlItem.title;
-            tabHeaderDiv.title = htmlItem.title;
-            tabHeaderDiv.className = 'tab-header';
-            let j = i;
-            tabHeaderDiv.onpointerdown = () => {
-                let old = this._selectedIndex;
-                this._selectedIndex = j;
-                if (this._headerDiv.children.length)
-                    this._selectedIndexChanged(old, true);
-                this._moreContainer.style.visibility = 'hidden';
-            };
-            this._elementMap.set(htmlItem, tabHeaderDiv);
-            this._headerDiv.appendChild(tabHeaderDiv);
-            i++;
+            if (item.style.display != 'none') {
+                let htmlItem = item;
+                let tabHeaderDiv = document.createElement("div");
+                tabHeaderDiv.innerText = htmlItem.title;
+                tabHeaderDiv.title = htmlItem.title;
+                tabHeaderDiv.className = 'tab-header';
+                let j = i;
+                tabHeaderDiv.onpointerdown = () => {
+                    let old = this._selectedIndex;
+                    this._selectedIndex = j;
+                    if (this._headerDiv.children.length)
+                        this._selectedIndexChanged(old, true);
+                    this._moreContainer.style.visibility = 'hidden';
+                };
+                this._elementMap.set(htmlItem, tabHeaderDiv);
+                this._headerDiv.appendChild(tabHeaderDiv);
+                i++;
+            }
         }
         this._showHideHeaderItems();
         this._selectedIndexChanged();
     }
     _selectedIndexChanged(oldIndex, viaClick = false) {
-        for (let index = 0; index < this.children.length; index++) {
-            const element = this.children[index];
-            if (index == this._selectedIndex) {
-                element.slot = "panels";
-                const el = this.children[index];
-                const headerEl = this._elementMap.get(el);
-                if (headerEl) {
-                    headerEl.classList.add('selected');
-                    if (element.activated)
-                        element.activated();
+        let index = -1;
+        for (let element of this.children) {
+            if (element.style.display != 'none') {
+                index++;
+                if (index == this._selectedIndex) {
+                    element.slot = "panels";
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.add('selected');
+                        if (element.activated)
+                            element.activated();
+                    }
                 }
-            }
-            else {
-                element.removeAttribute("slot");
-                const el = this.children[index];
-                const headerEl = this._elementMap.get(el);
-                if (headerEl) {
-                    headerEl.classList.remove('selected');
+                else {
+                    element.removeAttribute("slot");
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.remove('selected');
+                    }
                 }
             }
         }

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

@@ -21,7 +21,8 @@ export class PropertyGroupsService {
         if (designItems == null || designItems.length == 0)
             return [];
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
-        if (designItems[0] instanceof SVGElement)
+        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        if (designItems[0].element instanceof SVGElement)
             return this._svgPgList;
         return this._pgList;
     }

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

@@ -24,11 +24,24 @@ export class AttributesPropertiesService {
         return null;
     }
     setValue(designItems, property, value) {
+        const cg = designItems[0].openGroup("properties changed");
+        for (let d of designItems) {
+            d.attributes.set(property.name, value);
+            d.element.setAttribute(property.name, value);
+        }
+        cg.commit();
     }
     getPropertyTarget(designItem, property) {
         return BindingTarget.attribute;
     }
     clearValue(designItems, property) {
+        for (let d of designItems) {
+            d.attributes.delete(property.name);
+            d.element.removeAttribute(property.name);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
+        }
     }
     isSet(designItems, property) {
         let all = true;

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

@@ -3,7 +3,7 @@ import { BindingTarget } from "../../../item/BindingTarget";
 import { PropertyType } from "../PropertyType";
 export class CommonPropertiesService {
     listNeedsRefresh(designItem) {
-        return false;
+        return true;
     }
     //@ts-ignore
     commonProperties = [

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

@@ -195,7 +195,9 @@ export class CssPropertiesService {
         if (this.name == 'styles') {
             if (!designItem)
                 return [];
-            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            let arr = Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
+            return arr;
         }
         return this[this.name];
     }

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

@@ -124,11 +124,16 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                                 this.openContextMenu(event, p);
                             };
                             if (p.type == 'addNew') {
+                                let input = editor.element;
+                                input.disabled = true;
                                 let label = document.createElement("input");
                                 label.value = p.name;
                                 label.onkeyup = e => {
-                                    if (e.key == 'Enter') {
-                                        designItem.setAttribute(label.value, "");
+                                    if (e.key == 'Enter' && label.value) {
+                                        p.name = label.value;
+                                        label.disabled = true;
+                                        input.disabled = false;
+                                        input.focus();
                                     }
                                 };
                                 this._div.appendChild(label);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.138",
+  "version": "0.0.139",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",