service for attached properties

Author: jogibear9988

package-lock.json

@@ -23,13 +23,13 @@
   "customElements": "custom-elements.json",
   "webComponentDesigner": "web-component-designer.json",
   "devDependencies": {
-    "@node-projects/web-component-designer": "^0.0.258",
-    "@web/dev-server": "^0.3.0",
+    "@node-projects/web-component-designer": "^0.0.282",
+    "@web/dev-server": "^0.3.1",
     "es-module-shims": "^1.8.0",
     "release-it": "^16.1.5",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.13.0"
+    "@node-projects/base-custom-webcomponent": "^0.17.2"
   }
 }

package.json

@@ -0,0 +1,18 @@
+import { BaseCustomWebComponentPropertiesService, IDesignItem, IProperty, PropertyType } from "@node-projects/web-component-designer";
+import { TabWebcomponent } from "../tab/TabWebcomponent.js";
+
+export default class AttachedPropertiesService extends BaseCustomWebComponentPropertiesService {
+  override isHandledElement(designItem: IDesignItem): boolean {
+    return designItem.parent?.element instanceof TabWebcomponent;
+  }
+
+  public override getProperties(designItem: IDesignItem): IProperty[] {
+    return [{
+      name: 'header',
+      description: 'header shown in tab control',
+      type: "string",
+      service: this,
+      propertyType: PropertyType.propertyAndAttribute
+    }];
+  }
+}

src/designer/AttachedPropertiesService.ts

@@ -37,8 +37,7 @@ export class TabWebcomponent extends BaseCustomWebComponentConstructorAppend {
             .tab-container {
                 height: calc(100% - 30px);
                 overflow: none;
-            }
-            `;
+            }`;
 
     public static override readonly template = html`
             <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">

src/tab/TabWebcomponent.ts

@@ -6,6 +6,9 @@
             ],
             "containerService": [
                 "./dist/designer/TabPlacementService.js"
+            ],
+            "attachedPropertyService": [
+                "./dist/designer/AttachedPropertiesService.js"
             ]
         }
     }