1.0.65

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.62",
+  "version": "1.0.65",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-wcctools",
-      "version": "1.0.62",
+      "version": "1.0.65",
       "license": "UNLICENSED",
       "dependencies": {
         "@designestate/dees-domtools": "^1.0.102",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.62",
+  "version": "1.0.65",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",

ts_web/elements/wcc-properties.ts

@@ -130,13 +130,14 @@ export class WccProperties extends LitElement {
 
         .warning {
           position: absolute;
-          background: #800000;
+          background: #222;
+          color: #CCC;
           top: 0px;
           bottom: 0px;
           left: 0px;
-          right: 0px;
+          right: 520px;
           text-align: center;
-          padding: 20px;
+          padding: 35px;
           font-size: 25px;
         }
       </style>
@@ -256,18 +257,28 @@ export class WccProperties extends LitElement {
       console.log(`Got Dees-Element for property evaluation.`);
       const anonItem: any = this.selectedItem;
       if (!anonItem) {
+        this.warning = 'no element selected';
         return;
       }
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
-      let selectedElement: HTMLElement;
+      let firstFoundInstantiatedElement: HTMLElement;
       for (const element of Array.from(wccFrame.children)) {
         if (element instanceof (this.selectedItem as any)) {
-          selectedElement = element as HTMLElement;
+          firstFoundInstantiatedElement = element as HTMLElement;
           break;
         }
       }
+      if (!firstFoundInstantiatedElement) {
+        this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
+        return;
+      }
       const classProperties: Map<string, any> = anonItem.elementProperties;
+      if (!classProperties) {
+        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
+        return;
+      }
+      this.warning = null;
       const propertyArray: TemplateResult[] = [];
       for (const key of classProperties.keys()) {
         if (key === 'goBright' || key === 'domtools') {
@@ -284,38 +295,38 @@ export class WccProperties extends LitElement {
                   case 'Boolean':
                     return html`<input
                       type="checkbox"
-                      ?checked=${selectedElement[key]}
+                      ?checked=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.checked;
+                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
                       }}"
                     />`;
                   case 'String':
                     return html`<input
                       type="text"
-                      value=${selectedElement[key]}
+                      value=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     />`;
                   case 'Number':
                     return html`<input
                       type="number"
-                      value=${selectedElement[key]}
+                      value=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     />`;
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
                       @change="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     >
                       ${enumValues.map((valueArg) => {
                         return html`
                           <option
-                            ?selected=${valueArg === selectedElement[key] ? true : false}
+                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
                             name="${valueArg}"
                           >
                             ${valueArg}
@@ -331,7 +342,8 @@ export class WccProperties extends LitElement {
       }
       this.propertyContent = propertyArray;
     } else {
-      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`)
+      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
+      this.warning = `You selected a page.`;
       return null;
     }
   }