From 92617e844328ae5ff4984a954f875b3663461453 Mon Sep 17 00:00:00 2001
From: Harry Robbins <hrobbins@esri.com>
Date: Fri, 10 Jan 2020 12:16:19 -0800
Subject: [PATCH 1/4] lists react to value prop changes in items

---
 .../calcite-pick-list-item.tsx                | 11 ++++
 .../calcite-pick-list/calcite-pick-list.tsx   |  5 ++
 .../calcite-pick-list/shared-list-logic.ts    |  9 +++
 .../calcite-value-list/calcite-value-list.tsx |  5 ++
 src/demos/value-list/valueUpdate.html         | 57 +++++++++++++++++++
 5 files changed, 87 insertions(+)
 create mode 100644 src/demos/value-list/valueUpdate.html

diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
index 71fe0d95..3595d0d6 100644
--- a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
+++ b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
@@ -98,6 +98,10 @@ export class CalcitePickListItem {
    */
   @Prop({ reflect: true }) value!: string;
 
+  @Watch("value") valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueUpdated.emit({ oldValue, newValue });
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -127,6 +131,13 @@ export class CalcitePickListItem {
    */
   @Event() calciteListItemPropsUpdated: EventEmitter;
 
+  /**
+   * Emitted whenever the the item's value property is modified.
+   * @event calciteListItemPropsUpdated
+   * @internal
+   */
+  @Event() calciteListItemValueUpdated: EventEmitter;
+
   // --------------------------------------------------------------------------
   //
   //  Public Methods
diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
index 9087ea6b..6966e99c 100644
--- a/src/components/calcite-pick-list/calcite-pick-list.tsx
+++ b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -19,6 +19,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
+  calciteListItemValueUpdatedHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -135,6 +136,10 @@ export class CalcitePickList {
     this.setUpFilter();
   }
 
+  @Listen("calciteListItemValueUpdated") calciteListItemValueUpdatedHandler(event: CustomEvent) {
+    calciteListItemValueUpdatedHandler.call(this, event);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods
diff --git a/src/components/calcite-pick-list/shared-list-logic.ts b/src/components/calcite-pick-list/shared-list-logic.ts
index c1e2d070..9bfde75f 100644
--- a/src/components/calcite-pick-list/shared-list-logic.ts
+++ b/src/components/calcite-pick-list/shared-list-logic.ts
@@ -51,6 +51,15 @@ export const sharedListMethods = {
     this.lastSelectedItem = item;
     this.emitCalciteListChange();
   },
+  calciteListItemValueUpdatedHandler(this: CalcitePickList | CalciteValueList, event: CustomEvent): void {
+    event.stopPropagation();
+    const oldValue = event.detail.oldValue;
+    if (this.selectedValues.has(oldValue)) {
+      const item = this.selectedValues.get(oldValue);
+      this.selectedValues.delete(oldValue);
+      this.selectedValues.set(event.detail.newValue, item);
+    }
+  },
   // --------------------------------------------------------------------------
   //
   //  Private Methods
diff --git a/src/components/calcite-value-list/calcite-value-list.tsx b/src/components/calcite-value-list/calcite-value-list.tsx
index f09a921f..24b09e66 100644
--- a/src/components/calcite-value-list/calcite-value-list.tsx
+++ b/src/components/calcite-value-list/calcite-value-list.tsx
@@ -21,6 +21,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
+  calciteListItemValueUpdatedHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -152,6 +153,10 @@ export class CalciteValueList {
     this.setUpFilter();
   }
 
+  @Listen("calciteListItemValueUpdated") calciteListItemValueUpdatedHandler(event: CustomEvent) {
+    calciteListItemValueUpdatedHandler.call(this, event);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods
diff --git a/src/demos/value-list/valueUpdate.html b/src/demos/value-list/valueUpdate.html
new file mode 100644
index 00000000..e691f83c
--- /dev/null
+++ b/src/demos/value-list/valueUpdate.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Demos - ValueList</title>
+    <script src="../_assets/head.js"></script>
+    <script src="../_assets/toggles.js"></script>
+  </head>
+  <body>
+    <main>
+      <section class="example-container">
+        <h1>calcite-value-list</h1>
+        <p>
+          see the
+          <a
+            href="https://github.com/Esri/calcite-app-components/tree/master/src/components/calcite-value-list/readme.md"
+            >calcite-value-list readme.</a
+          >
+        </p>
+
+        <h3>multiple</h3>
+        <calcite-value-list id="one">
+          <calcite-action slot="menu-actions" indicator text="Cool">
+            <calcite-icon icon="hamburger" scale="s"></calcite-icon>
+          </calcite-action>
+          <calcite-value-list-item text-label="Dogs" text-description="Man's best friend" value="dogs">
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+          <calcite-value-list-item text-label="Cats" text-description="Independent and fluffy" value="cats">
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+          <calcite-value-list-item
+            text-label="Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation."
+            text-description="Easy to care for."
+            value="fish"
+          >
+            <calcite-action slot="secondary-action" text="click-me" onClick="console.log('clicked');">
+              <calcite-icon icon="x" scale="s"></calcite-icon>
+            </calcite-action>
+          </calcite-value-list-item>
+        </calcite-value-list>
+        <button id="click">Click</button>
+        <script>
+          document.querySelector("#click").addEventListener("click", (event) => {
+            const valueList = document.querySelector("#one");
+            valueList.querySelector("calcite-value-list-item").value = "not dogs";
+          });
+        </script>
+      </section>
+    </main>
+  </body>
+</html>

From 5ec79e007ffc222025337a24b30d8cbd9ce0427b Mon Sep 17 00:00:00 2001
From: Harry Robbins <arrogantgopher@gmail.com>
Date: Tue, 14 Jan 2020 13:11:42 -0800
Subject: [PATCH 2/4] add test for value change functionality

---
 .../calcite-pick-list/shared-list-tests.ts    | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/components/calcite-pick-list/shared-list-tests.ts b/src/components/calcite-pick-list/shared-list-tests.ts
index 913f0a65..a3dd4c70 100644
--- a/src/components/calcite-pick-list/shared-list-tests.ts
+++ b/src/components/calcite-pick-list/shared-list-tests.ts
@@ -147,6 +147,49 @@ export const tests = {
         expect(properties.get("hasItem")._remoteObject.value).toBe(true);
       });
     });
+    describe("value changes after item is selected", () => {
+      it.only("should update the value in selectedValues map", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-${listType}-list>
+          <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" text-label="Two" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="three" text-label="Three" selected></calcite-${listType}-list-item>
+        </calcite-${listType}-list>`);
+
+        const list = await page.find(`calcite-${listType}-list`);
+        const item1 = await list.find("[value=one]");
+        await item1.click();
+
+        const hasValueOne = await page.evaluate((type) => {
+          const pageList: HTMLCalcitePickListElement | HTMLCalciteValueListElement = document.querySelector(
+            `calcite-${type}-list`
+          );
+          return pageList.getSelectedItems().then((result) => {
+            return result.has("one");
+          });
+        }, listType);
+
+        expect(hasValueOne).toBe(true);
+
+        item1.setProperty("value", "four");
+        await page.waitForChanges();
+
+        const hasValues = await page.evaluate((type) => {
+          const pageList: HTMLCalcitePickListElement | HTMLCalciteValueListElement = document.querySelector(
+            `calcite-${type}-list`
+          );
+          return pageList.getSelectedItems().then((result) => {
+            return {
+              four: result.has("four"),
+              one: result.has("one")
+            };
+          });
+        }, listType);
+
+        expect(hasValues.one).toBe(false);
+        expect(hasValues.four).toBe(true);
+      });
+    });
   },
   filterBehavior(listType: "pick" | "value") {
     let page: E2EPage = null;

From 7445047c42a8cbca8edddfa3108f6ef3fa298944 Mon Sep 17 00:00:00 2001
From: Harry Robbins <arrogantgopher@gmail.com>
Date: Tue, 14 Jan 2020 13:14:10 -0800
Subject: [PATCH 3/4] remove .only

---
 src/components/calcite-pick-list/shared-list-tests.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calcite-pick-list/shared-list-tests.ts b/src/components/calcite-pick-list/shared-list-tests.ts
index a3dd4c70..bd6a32dd 100644
--- a/src/components/calcite-pick-list/shared-list-tests.ts
+++ b/src/components/calcite-pick-list/shared-list-tests.ts
@@ -148,7 +148,7 @@ export const tests = {
       });
     });
     describe("value changes after item is selected", () => {
-      it.only("should update the value in selectedValues map", async () => {
+      it("should update the value in selectedValues map", async () => {
         const page = await newE2EPage();
         await page.setContent(`<calcite-${listType}-list>
           <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>

From f282b09bf83ea879ce5459a20f841d2438879722 Mon Sep 17 00:00:00 2001
From: Harry Robbins <arrogantgopher@gmail.com>
Date: Tue, 14 Jan 2020 13:31:45 -0800
Subject: [PATCH 4/4] rename event

---
 .../calcite-pick-list-item/calcite-pick-list-item.tsx       | 6 +++---
 src/components/calcite-pick-list/calcite-pick-list.tsx      | 6 +++---
 src/components/calcite-pick-list/shared-list-logic.ts       | 2 +-
 src/components/calcite-value-list/calcite-value-list.tsx    | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
index 3595d0d6..13bd8236 100644
--- a/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
+++ b/src/components/calcite-pick-list-item/calcite-pick-list-item.tsx
@@ -99,7 +99,7 @@ export class CalcitePickListItem {
   @Prop({ reflect: true }) value!: string;
 
   @Watch("value") valueWatchHandler(newValue, oldValue) {
-    this.calciteListItemValueUpdated.emit({ oldValue, newValue });
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
   }
 
   // --------------------------------------------------------------------------
@@ -133,10 +133,10 @@ export class CalcitePickListItem {
 
   /**
    * Emitted whenever the the item's value property is modified.
-   * @event calciteListItemPropsUpdated
+   * @event calciteListItemValueChange
    * @internal
    */
-  @Event() calciteListItemValueUpdated: EventEmitter;
+  @Event() calciteListItemValueChange: EventEmitter;
 
   // --------------------------------------------------------------------------
   //
diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
index 6966e99c..7d1a0305 100644
--- a/src/components/calcite-pick-list/calcite-pick-list.tsx
+++ b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -19,7 +19,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
-  calciteListItemValueUpdatedHandler,
+  calciteListItemValueChangeHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -136,8 +136,8 @@ export class CalcitePickList {
     this.setUpFilter();
   }
 
-  @Listen("calciteListItemValueUpdated") calciteListItemValueUpdatedHandler(event: CustomEvent) {
-    calciteListItemValueUpdatedHandler.call(this, event);
+  @Listen("calciteListItemValueChange") calciteListItemValueChangeHandler(event: CustomEvent) {
+    calciteListItemValueChangeHandler.call(this, event);
   }
 
   // --------------------------------------------------------------------------
diff --git a/src/components/calcite-pick-list/shared-list-logic.ts b/src/components/calcite-pick-list/shared-list-logic.ts
index 9bfde75f..08af4e70 100644
--- a/src/components/calcite-pick-list/shared-list-logic.ts
+++ b/src/components/calcite-pick-list/shared-list-logic.ts
@@ -51,7 +51,7 @@ export const sharedListMethods = {
     this.lastSelectedItem = item;
     this.emitCalciteListChange();
   },
-  calciteListItemValueUpdatedHandler(this: CalcitePickList | CalciteValueList, event: CustomEvent): void {
+  calciteListItemValueChangeHandler(this: CalcitePickList | CalciteValueList, event: CustomEvent): void {
     event.stopPropagation();
     const oldValue = event.detail.oldValue;
     if (this.selectedValues.has(oldValue)) {
diff --git a/src/components/calcite-value-list/calcite-value-list.tsx b/src/components/calcite-value-list/calcite-value-list.tsx
index 24b09e66..80dcfac9 100644
--- a/src/components/calcite-value-list/calcite-value-list.tsx
+++ b/src/components/calcite-value-list/calcite-value-list.tsx
@@ -21,7 +21,7 @@ const {
   initializeObserver,
   cleanUpObserver,
   calciteListItemChangeHandler,
-  calciteListItemValueUpdatedHandler,
+  calciteListItemValueChangeHandler,
   setUpItems,
   deselectSiblingItems,
   selectSiblings,
@@ -153,8 +153,8 @@ export class CalciteValueList {
     this.setUpFilter();
   }
 
-  @Listen("calciteListItemValueUpdated") calciteListItemValueUpdatedHandler(event: CustomEvent) {
-    calciteListItemValueUpdatedHandler.call(this, event);
+  @Listen("calciteListItemValueChange") calciteListItemValueChangeHandler(event: CustomEvent) {
+    calciteListItemValueChangeHandler.call(this, event);
   }
 
   // --------------------------------------------------------------------------