Various updates.

Author: Templarian

src/pg/inputSelect/inputSelect.html

@@ -1,4 +1,4 @@
 <div part="wrapper">
-  <select part="select"></select>
+  <button part="select"></button>
   <svg part="chevron" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 </div>

src/pg/inputSelect/inputSelect.ts

@@ -1,4 +1,4 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
 import template from './inputSelect.html';
 import style from './inputSelect.css';
@@ -20,18 +20,20 @@ export default class PgInputSelect extends HTMLElement {
 
   @Part() $select: HTMLSelectElement;
 
+  //cacheKeys: string[] = [];
+
   render(changes) {
-    if (changes.options) {
-      this.options.forEach(o => {
+    /*if (changes.options) {
+      this.options.forEach((o) => {
         const option = document.createElement('option');
-        option.innerText = o.label;
+        option.textContent = o.label;
         option.value = o.value;
         this.$select.appendChild(option);
       });
       if (this.$select.value !== this.value) {
         this.$select.value = this.value;
       }
-    }
+    }*/
     if (changes.value) {
       if (this.$select.value !== this.value) {
         this.$select.value = this.value;
@@ -40,6 +42,13 @@ export default class PgInputSelect extends HTMLElement {
   }
 
   connectedCallback() {
+    forEach({
+      container: this.$select,
+      items: this.options,
+      type: () => {
+        return HTMLOptionElement;
+      }
+    })
     this.$select.addEventListener('change', this.handleSelect.bind(this));
   }
 

src/pg/menu/__examples__/basic/basic.html

@@ -1,5 +1,3 @@
 <div class="example">
-  <pg-nav
-    logo="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z"
-    name="Material Design Icons"></pg-nav>
+  <pg-menu part="menu"></pg-menu>
 </div>

src/pg/menu/__examples__/basic/basic.ts

@@ -1,4 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+import PgMenu from '../../menu';
 
 import template from './basic.html';
 
@@ -7,5 +8,12 @@ import template from './basic.html';
   template
 })
 export default class XPgMenuBasic extends HTMLElement {
+  @Part() $menu: PgMenu;
 
+  connectedCallback() {
+    this.$menu.items = [{
+      label: 'Item 1',
+      value: 'item1'
+    }];
+  }
 }

src/pg/menu/menu.css

@@ -1,3 +1,8 @@
 :host {
   display: contents;
 }
+
+[part="items"] {
+  display: flex;
+  flex-direction: column;
+}

src/pg/menu/menu.ts

@@ -12,6 +12,7 @@ const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
   template
 })
 export default class PgMenu extends HTMLElement {
+
   @Prop() items: any[] = [];
 
   @Part() $items: HTMLDivElement;
@@ -22,6 +23,14 @@ export default class PgMenu extends HTMLElement {
       items: this.items,
       type: (item) => {
         return PgMenuItem;
+      },
+      create: ($item) => {
+        $item.addEventListener('select', (e: any) => {
+          const { index } = e.detail;
+          this.dispatchEvent(new CustomEvent('select', {
+            detail: { index }
+          }))
+        });
       }
     });
   }

src/pg/menuItem/__examples__/basic/basic.html

@@ -1,5 +1,3 @@
 <div class="example">
-  <pg-nav
-    logo="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z"
-    name="Material Design Icons"></pg-nav>
+  <pg-menu-item part="item"></pg-menu-item>
 </div>

src/pg/menuItem/menuItem.html

@@ -1 +1 @@
-<div part="label"></div>
+<button part="label"></button>

src/pg/menuItem/menuItem.ts

@@ -11,12 +11,23 @@ const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
   template
 })
 export default class PgMenuItem extends HTMLElement {
+  @Prop() index: number;
   @Prop() label: string = '';
 
   @Part() $label: HTMLDivElement;
 
-  connectedCallback() {
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+  }
 
+  connectedCallback() {
+    this.$label.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { index: this.index }
+      }));
+    })
   }
 
 }

src/pg/overlayMenu/README.md

@@ -0,0 +1,16 @@
+# Overlay Menu
+
+The `PgOverlayMenu` creates a menu.
+
+```typescript
+const result = await PgOverlayMenu.open({
+  source: this.$element,
+  items: [{
+    label: 'Item 1',
+    value: 'item1'
+  }, {
+    label: 'Item 2',
+    value: 'item2'
+  }]
+});
+```