Various fixes and bumping the element version.

Author: Templarian

jest.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   preset: '@pictogrammers/element-jest'
-};
+};

package-lock.json

@@ -26,7 +26,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.40",
+    "@pictogrammers/element": "0.0.41",
     "@pictogrammers/element-jest": "^0.1.7",
     "@pictogrammers/element-webpack": "^0.1.40",
     "cross-env": "^7.0.3",

package.json

@@ -52,6 +52,7 @@ export default class PgInputCheckList extends HTMLElement {
 
   render(changes) {
     if (changes.options) {
+      /*
       list(
         this.$list,
         this.options,
@@ -92,6 +93,7 @@ export default class PgInputCheckList extends HTMLElement {
           $item.querySelector('button').innerText = option.label;
         }
       );
+      */
     }
     if (changes.value) {
       //const value = [true, 'true'].includes(this.value);

src/pg/inputCheckList/inputCheckList.ts

@@ -21,16 +21,30 @@ export default class PgModalAlert extends PgOverlay {
   @Part() $yes: PgButton;
   @Part() $no: PgButton;
 
+  #cacheKeydownHandler: any;
+
   connectedCallback() {
-    this.$yes.addEventListener('click', this.handleYes.bind(this));
-    this.$no.addEventListener('click', this.handleNo.bind(this));
+    this.$yes.addEventListener('click', this.#handleYes.bind(this));
+    this.$no.addEventListener('click', this.#handleNo.bind(this));
+    this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
+    document.addEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.#cacheKeydownHandler);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close(null);
+    }
   }
 
-  handleYes() {
+  #handleYes() {
     this.close(true);
   }
 
-  handleNo() {
+  #handleNo() {
     this.close(false);
   }
 

src/pg/modalAlert/modalAlert.ts

@@ -1,5 +1,9 @@
 <div>
   <pg-tree part="tree"></pg-tree>
+  <hr/>
+  <pg-tree part="tree2"></pg-tree>
   <h2>Tools</h2>
   <button part="addItem">Add Item</button>
+  <button part="removeItem">Remove Item</button>
+  <button part="updateItem">Update Label Item</button>
 </div>

src/pg/tree/__examples__/basic/basic.html

@@ -5,58 +5,109 @@ import template from './basic.html';
 import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
 
 const IconEye = 'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z';
+const IconEyeOff = 'M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z';
+const IconLock = 'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z';
+const IconUnlock = 'M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z';
+
+function createItem(key) {
+  return {
+    icon: {
+      path: IconEye
+    },
+    label: 'Item 1',
+    actions: [{
+      type: PgTreeButtonIcon,
+      icon:  IconEye,
+      enabled: true
+    },
+    {
+      type: PgTreeButtonIcon,
+      label: 'Delete',
+      icon: IconUnlock,
+      enabled: false
+    }]
+  };
+}
 
 @Component({
   selector: 'x-pg-tree-basic',
   template
 })
 export default class XPgTreeBasic extends HTMLElement {
   @Part() $tree: PgTree;
+  @Part() $tree2: PgTree;
   @Part() $addItem: HTMLButtonElement;
+  @Part() $removeItem: HTMLButtonElement;
+  @Part() $updateItem: HTMLButtonElement;
 
   connectedCallback() {
-    this.$tree.addEventListener('action', (e) => {
+    this.$tree.addEventListener('action', (e: any) => {
       // action clicked
-      console.log('action')
+      const { index, actionIndex } = e.detail;
+      const action = this.$tree.items[index].actions[actionIndex];
+      const { enabled } = action;
+      if (actionIndex === 0 && enabled) {
+        action.icon = IconEyeOff;
+        action.enabled = false;
+      } else if (actionIndex === 0 && !enabled){
+        action.icon = IconEye;
+        action.enabled = true;
+      }
+      if (actionIndex === 1 && enabled) {
+        action.icon = IconUnlock;
+        action.enabled = false;
+      } else if (actionIndex === 1 && !enabled){
+        action.icon = IconLock;
+        action.enabled = true;
+      }
     });
-    this.$tree.addEventListener('rename', (e) => {
-      // action clicked
+    this.$tree.addEventListener('rename', (e: any) => {
+      const { index, label } = e.detail;
+      this.$tree.items[index].label = label;
     });
-    this.$tree.addEventListener('menu', (e) => {
+    this.$tree.addEventListener('menu', (e: any) => {
       // action clicked
     });
-    this.$tree.items.push({
-      key: 1,
+    this.$tree.items = [{
       icon: {
         path: IconEye
       },
       label: 'Item 1',
       actions: [{
         type: PgTreeButtonIcon,
-        icon: {
-          path: IconEye
-        }
+        icon:  IconEye,
+        enabled: true
       },
       {
         type: PgTreeButtonIcon,
         label: 'Delete',
-        icon: {
-          path: IconEye
-        }
+        icon: IconUnlock,
+        enabled: false
       }]
     },
     {
-      key: 2,
       label: 'Item 2'
-    });
+    }];
+    // Assign to same array instance!
+    this.$tree2.items = this.$tree.items;
+    // Push to same array instance!
+    this.$tree.items.push({ label: 'testing' });
 
     let next: number = 2;
     this.$addItem.addEventListener('click', () => {
       next++;
       this.$tree.items.push({
-        key: `${next}`,
         label: `Item ${next}`
       });
     });
+
+    this.$removeItem.addEventListener('click', () => {
+      this.$tree.items.pop();
+    });
+
+    let updatedTimes = 0;
+    this.$updateItem.addEventListener('click', () => {
+      this.$tree.items[1].label = `Updated ${updatedTimes++}`;
+    });
   }
 }

src/pg/tree/__examples__/basic/basic.ts

@@ -5,4 +5,6 @@
 [part="items"] {
   display: flex;
   flex-direction: column;
+  background: var(--pg-tree-background, #2C2C2C);
+  padding: 0.25rem;
 }

src/pg/tree/tree.css

@@ -4,6 +4,10 @@ import template from './tree.html';
 import style from './tree.css';
 import PgTreeItem from '../treeItem/treeItem';
 
+function ForBlah(foo: any) {
+
+}
+
 @Component({
   selector: 'pg-tree',
   style,
@@ -14,21 +18,25 @@ export default class PgTree extends HTMLElement {
 
   @Part() $items: HTMLDivElement;
 
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: (item) => {
+        return PgTreeItem;
+      },
+      create: ($item, item) => {
+        // after creation of $item element
+      },
+      update: ($item, item) => {
+        // after every $item update
+      },
+    });
+  }
+
   render(changes) {
     if (changes.items) {
-      forEach({
-        container: this.$items,
-        items: this.items,
-        type: (item) => {
-          return PgTreeItem;
-        },
-        create: ($item, item) => {
-          // after creation of $item element
-        },
-        update: ($item, item) => {
-          // after every $item update
-        },
-      });
+      console.log('yay', this.items.map(x => x));
     }
   }
 }

src/pg/tree/tree.ts

@@ -0,0 +1,12 @@
+:host {
+  display: contents;
+}
+
+[part="button"] {
+  display: flex;
+  background: transparent;
+  border: 0;
+  color: #FFF;
+  padding: 0;
+  --pg-icon-color: #FFF;
+}