Start to wire update event.

Author: Templarian

src/pg/jsonBoolean/jsonBoolean.css

@@ -8,7 +8,7 @@
   align-items: center;
 }
 
-[part=input] {
+[part=value] {
   --pg-input-select-padding: 0 0.25rem;
   --pg-input-select-border-color: transparent;
   margin: 0 -0.25rem;

src/pg/jsonBoolean/jsonBoolean.html

@@ -1,5 +1,5 @@
 <div part="key"></div>
 <div part="seperator">:&nbsp;</div>
 <div part="container">
-  <pg-input-select part="input"></pg-input-select>
+  <pg-input-select part="value"></pg-input-select>
 </div>

src/pg/jsonBoolean/jsonBoolean.ts

@@ -15,15 +15,23 @@ export default class PgJsonBoolean extends HTMLElement {
   @Prop() value: boolean = false;
 
   @Part() $key: HTMLDivElement;
-  @Part() $input: PgInputSelect;
+  @Part() $value: PgInputSelect;
 
   connectedCallback() {
-    this.$input.options.push(
+    this.$value.options.push(
       { label: 'true', value: 'true' },
       { label: 'false', value: 'false' },
     );
-    this.$input.addEventListener('change', (e: any) => {
-      this.$input.value = e.detail.value;
+    this.$value.addEventListener('input', (e: any) => {
+      this.$value.value = e.detail.value;
+      this.dispatchEvent(
+        new CustomEvent('update', {
+          detail: {
+            path: [this.key],
+            value: e.detail.value,
+          }
+        })
+      );
     });
   }
 
@@ -32,7 +40,7 @@ export default class PgJsonBoolean extends HTMLElement {
       this.$key.textContent = this.key;
     }
     if (changes.value) {
-      this.$input.value = this.value ? 'true' : 'false';
+      this.$value.value = this.value ? 'true' : 'false';
     }
   }
 }

src/pg/jsonNumber/jsonNumber.ts

@@ -17,6 +17,19 @@ export default class PgJsonNumber extends HTMLElement {
   @Part() $key: HTMLDivElement;
   @Part() $value: PgInputNumber;
 
+  connectedCallback() {
+    this.$value.addEventListener('input', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('update', {
+          detail: {
+            path: [this.key],
+            value: e.detail.value,
+          }
+        })
+      );
+    });
+  }
+
   render(changes) {
     if (changes.key) {
       this.$key.textContent = this.key;

src/pg/jsonObject/jsonObject.ts

@@ -27,6 +27,15 @@ export default class PgJsonObject extends HTMLElement {
       container: this.$items,
       items: this.value,
       type: (item) => item.type,
+      create($item, item) {
+        $item.addEventListener('update', (e: any) => {
+          this.dispatchEvent(
+            new CustomEvent('update', {
+
+            })
+          );
+        });
+      }
     });
   }