Start wiring up layers and colors in demo.

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -52,12 +52,12 @@ <h3>Drawing Tools</h3>
   <div>
     <h3>Color Tools</h3>
     <button part="addColor">Add Color</button>
-    <pre part="colors"></pre>
+    <pg-table part="colors"></pg-table>
   </div>
   <div>
     <h3>Layer Tools</h3>
     <button part="addLayer">Add Layer</button>
-    <pre part="layers"></pre>
+    <pg-table part="layers"></table>
   </div>
   <div>
     <h3>Example Tools</h3>

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -5,6 +5,7 @@ import { patterns } from './constants';
 
 import template from './basic.html';
 import style from './basic.css';
+import PgTable from 'pg/table/table';
 
 @Component({
   selector: 'x-pg-input-pixel-editor-basic',
@@ -45,9 +46,8 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
 
   @Part() $addLayer: HTMLButtonElement;
 
-  // MAKE A LIST COMPONENT!!!! [text | delete]
-  @Part() $colors: HTMLPreElement;
-  @Part() $layers: HTMLPreElement;
+  @Part() $colors: PgTable;
+  @Part() $layers: PgTable;
 
   connectedCallback() {
     this.$width.value = '10';
@@ -144,10 +144,20 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
         // no save
       }
     });
+    // Layers
+    this.$layers.columns = [{
+      label: 'Color',
+      key: 'color'
+    }];
     this.$addLayer.addEventListener('click', () => {
       // number[][][]
       // this.$input.addLayer();
     });
+    // Colors
+    this.$colors.columns = [{
+      label: 'Name',
+      key: 'name'
+    }];
   }
 
   handleFile(e) {

src/pg/table/README.md

@@ -25,7 +25,7 @@ import PgTable, { createTableItem } from '@pictogrammers/components/pg/table';
 | ------------------- | --------- | ----------- |
 | `--pg-tree-font-size`  | `inherit` | Font size |
 | `--pg-tree-border-color`  | `3rem`  | Width       |
-| `--pg-avatar-height` | `3rem`  | Height      |
+| `--pg-table-row-background-color` | `#f1f1f1`  | Row background |
 
 ## Columns