Bumping element and bug fixes.

Author: Templarian

package-lock.json

@@ -25,7 +25,7 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.70",
+    "@pictogrammers/element": "0.0.71",
     "@pictogrammers/element-jest": "^0.1.10",
     "@pictogrammers/element-webpack": "^0.1.56",
     "cross-env": "^7.0.3",

package.json

@@ -1,11 +1,14 @@
 import { Component, Part } from '@pictogrammers/element';
 import PgInputPixelEditor from '../../inputPixelEditor';
+import PgTable, { createTableItem } from '../../../table/table';
+import PgTableCellButtonIcon from '../../../tableCellButtonIcon/tableCellButtonIcon';
 import { maskToBitmap } from '../../utils/maskToBitmap';
 import { patterns } from './constants';
 
 import template from './basic.html';
 import style from './basic.css';
-import PgTable from 'pg/table/table';
+
+const IconTrash = 'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z';
 
 @Component({
   selector: 'x-pg-input-pixel-editor-basic',
@@ -45,6 +48,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $savePng: HTMLInputElement;
 
   @Part() $addLayer: HTMLButtonElement;
+  @Part() $addColor: HTMLButtonElement;
 
   @Part() $colors: PgTable;
   @Part() $layers: PgTable;
@@ -154,10 +158,12 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     }, {
       label: 'Selected',
       key: 'selected',
+      hideLabel: true,
     }];
     this.$addLayer.addEventListener('click', () => {
       // number[][][]
       // this.$input.addLayer();
+
     });
     // Colors
     this.$colors.columns = [{
@@ -172,7 +178,23 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     }, {
       label: 'Alpha',
       key: 'a',
+    }, {
+      label: 'Delete',
+      key: 'delete',
+      hideLabel: true,
     }];
+    this.$addColor.addEventListener('click', () => {
+      this.$colors.data.push(createTableItem({
+        r: 5,
+        g: 5,
+        b: 5,
+        a: 1,
+        delete: {
+          type: PgTableCellButtonIcon,
+          icon: IconTrash
+        }
+      }));
+    });
   }
 
   handleFile(e) {

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

@@ -116,4 +116,4 @@ export default class PgMenu extends HTMLElement {
     return ele.getHeight();
   }
 
-}
+}

src/pg/menu/menu.ts

@@ -1,4 +1,4 @@
-<div class="example">
+<div class="example" part="example">
   <pg-menu-item-icon part="item"></pg-menu-item-icon>
 </div>
 <div>

src/pg/menuItemIcon/__examples__/basic/basic.html

@@ -19,6 +19,7 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
   @Part() $iconFolder: HTMLButtonElement;
   @Part() $checkedValue: HTMLDivElement;
   @Part() $disabledValue: HTMLDivElement;
+  @Part() $example: HTMLDivElement;
 
   connectedCallback() {
     this.$item.icon = IconFile;
@@ -45,6 +46,12 @@ export default class XPgMenuItemIconBasic extends HTMLElement {
     this.$checkedToggle.addEventListener('change', (e: any) => {
       this.$item.checked = e.target.checked;
       this.$checkedValue.textContent = `${this.$item.checked}`;
+      // simulate check column
+      if (e.target.checked) {
+        this.$example.style.setProperty('--pg-menu-_has-check', 'true');
+      } else {
+        this.$example.style.removeProperty('--pg-menu-_has-check');
+      }
     });
 
     this.$disabledToggle.addEventListener('change', (e: any) => {

src/pg/menuItemIcon/__examples__/basic/basic.ts

@@ -1,4 +0,0 @@
-[part=table] {
-  --pg-button-padding: 0;
-  --pg-button-border-width: 0;
-}

src/pg/table/__examples__/basic/basic.css

@@ -11,4 +11,6 @@
   vertical-align: middle;
   justify-items: center;
   --pg-button-background-color: transparent;
+  --pg-button-padding: 0;
+  --pg-button-border-width: 0;
 }

src/pg/tableCellButtonIcon/tableCellButtonIcon.css

@@ -0,0 +1,3 @@
+# `PgTableCellCheck`
+
+See `PgTable`. Default cell render for `string` type.

src/pg/tableCellCheck/README.md

@@ -0,0 +1,12 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  display: table-cell;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--pg-table-row-background-color);
+  border-top: 0;
+  border-radius: 0.125rem;
+  vertical-align: middle;
+}