@pictogrammers/components 0.3.1

package/pg/dropdown/README.md

@@ -0,0 +1,13 @@
+# `<pg-dropdown>`
+
+Visual color picker using the standard Material Design pallet.
+
+```typescript
+import '@pictogrammers/components/pg/dropdown';
+```
+
+## Usage
+
+| Events | Description |
+| ------ | ----------- |
+| `onchange` | `event = { detail: { r, g, b, hex } }` |

package/pg/dropdown/__examples__/basic/basic.html

@@ -0,0 +1,14 @@
+<div class="example">
+  <pg-dropdown>
+    <button>Click Me</button>
+    <div slot="popover">
+      Render anything inside...
+    </div>
+  </pg-dropdown>
+  <pg-dropdown>
+    <a href="/">Click Me</a>
+    <div slot="popover">
+      Render anything inside...
+    </div>
+  </pg-dropdown>
+</div>

package/pg/dropdown/__examples__/basic/basic.ts

@@ -0,0 +1,11 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-dropdown-basic',
+  template
+})
+export default class XPgDropdownBasic extends HTMLElement {
+
+}

package/pg/dropdown/dropdown.css

@@ -0,0 +1,46 @@
+[part~=popover] {
+  background: #FFF;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.2);
+  border: 4px solid var(--pg-dropdown-border-color);
+}
+
+[part~=arrow],
+[part~=arrow]::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+
+[part~=arrow]::before {
+  content: '';
+  transform: rotate(45deg);
+  background: #FFF;
+}
+
+[part~=popover][data-popper-placement^='top'] > [part~=arrow] {
+  bottom: -5px;
+}
+[part~=popover][data-popper-placement^='top'] > [part~=arrow]::before {
+  border-bottom: 4px solid var(--pg-dropdown-border-color);
+  border-right: 4px solid var(--pg-dropdown-border-color);
+  border-bottom-right-radius: 0.25rem;
+}
+
+[part~=popover][data-popper-placement^='bottom'] > [part~=arrow] {
+  top: -10px;
+}
+[part~=popover][data-popper-placement^='bottom'] > [part~=arrow]::before {
+  border-top: 4px solid var(--pg-dropdown-border-color);
+  border-left: 4px solid var(--pg-dropdown-border-color);
+  border-top-left-radius: 0.25rem;
+}
+
+[part~=popover][data-popper-placement^='left'] > [part~=arrow] {
+  right: -5px;
+}
+
+[part~=popover][data-popper-placement^='right'] > [part~=arrow] {
+  left: -5px;
+}

package/pg/dropdown/dropdown.html

@@ -0,0 +1,5 @@
+<slot part="main"></slot>
+<div part="popover">
+  <div part="arrow"></div>
+  <slot name="popover"></slot>
+</div>

package/pg/dropdown/dropdown.ts

@@ -0,0 +1,60 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import { createPopper } from '@popperjs/core';
+
+import template from './dropdown.html';
+import style from './dropdown.css';
+
+window.process = { env: {} } as any;
+
+@Component({
+  selector: 'pg-dropdown',
+  style,
+  template
+})
+export default class PgDropdown extends HTMLElement {
+  @Part() $main: HTMLSlotElement;
+  @Part() $popover: HTMLDivElement;
+  @Part() $arrow: HTMLDivElement;
+
+  isVisible = false;
+  connectedCallback() {
+    this.$main.addEventListener('slotchange', (e) => {
+      var nodes = this.$main.assignedElements();
+      for(var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        this.wireUpPopover(node);
+      }
+    });
+  }
+
+  wireUpPopover(node) {
+    createPopper(node, this.$popover, {
+      placement: 'bottom-start',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [-4, 8],
+          },
+        },
+        {
+          name: 'arrow',
+          options: {
+            element: this.$arrow,
+            padding: 0,
+          },
+        },
+      ]
+    });
+    this.$popover.style.visibility = 'hidden';
+    node.addEventListener('click', (e) => {
+      this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';
+      this.isVisible = !this.isVisible;
+      e.preventDefault();
+    });
+  }
+
+  render() {
+
+  }
+}

package/pg/dropdown/index.ts

@@ -0,0 +1,3 @@
+import PgDropdown from './dropdown';
+
+export default PgDropdown;

package/pg/grid/README.md

@@ -0,0 +1,97 @@
+# `<pg-grid>`
+
+The `pg-grid` component allows a standard way to render a configurable grid of icons.
+
+- Performance
+  - Two events are used to track all interactions
+    - `mousemove` tracks mouse within the grid
+    - `mouseleave` tracks mouse leaving grid
+    - When icons are added or removed this means no dom events are binded
+  - Virtual icon grid
+    - Grid height is calculated based on icons present and dynamic container width
+    - Debounced `300` for resize of grid
+- Size
+  - `pg-scroll` is the only dependency
+    - Grid tests can handle grid specific logic
+    - Complex viewport and overflow container logic is centralized
+  - Tooltips and other interacts are handled via events
+    - Allows more customization in other use cases
+
+> Note: Context menus and tooltips can be triggered with events described below. These are outside of the component so they can be rendered elsewhere in the DOM.
+
+```typescript
+import '@pictogrammers/components/pgGrid';
+import PgGrid from '@pictogrammers/components/pgGrid';
+```
+
+```html
+<pg-grid></pg-grid>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description | Default |
+| ---------- | -------- | ----------- | ------ |
+| icons      |          | Set icon data | `[]` |
+| size       |          | Set icon size | `24` |
+| padding    |          | Set icon padding | `8` |
+| gap        |          | Set icon gap | `4` |
+| width      |          | Set grid width | `'auto'` |
+| height     |          | Set grid height | `'auto'` |
+
+### `icons`
+
+The minimal data set must contain the `id`, `name` and `data` field.
+
+```json
+[{
+  "id": "uuid",
+  "name": "account",
+  "data": "..."
+}]
+```
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| select     |          | Fired on icon selections |
+| openmenu   |          | Right click on icon |
+| closemenu  |          | Right click on icon |
+| entericon  |          | Keyboard / Mouse on icon |
+| leaveicon  |          | Keyboard / Mouse off icon |
+
+### All Events
+
+The `x` and `y` properties are the calculated `top` and `left` in pixels relative to the grid. The `width` and `height` include the `padding`.
+
+The `gridX` and `gridY` are relative to the grid container.
+
+The `gap + extra` will give the remaining space between icons. Note: The left of the first icon is always just the `gap`.
+
+```javascript
+interface MouseMeta {
+  gridX: number,
+  gridY: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  column: number,
+  row: number,
+  index: number,
+  gap: number,
+  extra: number
+}
+
+e = {
+  detail: MouseMeta
+}
+```
+
+## Accessibility
+
+ToDo...
+
+- Arrow key navigation
+- Should typing filter grid?

package/pg/grid/__examples__/basic/basic.html

@@ -0,0 +1,29 @@
+<pg-tooltip part="tooltip"></pg-tooltip>
+<p>
+  <button part="button0">Render 0</button>
+  <button part="button1">Render 1</button>
+  <button part="button10">Render 10</button>
+  <button part="button50">Render 50</button>
+  <button part="button250">Render 250</button>
+  <button part="buttonAll">Render 5000+</button>
+</p>
+<p>
+  <label>
+    Size (<span part="sizeText">24</span>):
+    <input part="size" type="range" min="24" max="96" step="4" value="24" />
+  </label>
+  <label>
+    Padding (<span part="paddingText">8</span>):
+    <input part="padding" type="range" min="0" max="24" step="2" value="8" />
+  </label>
+  <label>
+    Gap (<span part="gapText">4</span>):
+    <input part="gap" type="range" min="0" max="16" step="2" value="4" />
+  </label>
+</p>
+<div class="example">
+  <pg-database part="database"></pg-database>
+  <pg-grid part="grid">
+    <p>No Icons Found! default slot content</p>
+  </pg-grid>
+</div>

package/pg/grid/__examples__/basic/basic.ts

@@ -0,0 +1,139 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgDatabase from 'pg/database/database';
+import PgTooltip from 'pg/tooltip';
+import { Icon } from '../../../shared/models/icon';
+import PgGrid from '../../grid';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-grid-basic',
+  template
+})
+export default class XPgGridBasic extends HTMLElement {
+
+  @Prop() fontId = 'D051337E-BC7E-11E5-A4E9-842B2B6CFE1B';
+
+  @Part() $button0: HTMLButtonElement;
+  @Part() $button1: HTMLButtonElement;
+  @Part() $button10: HTMLButtonElement;
+  @Part() $button50: HTMLButtonElement;
+  @Part() $button250: HTMLButtonElement;
+  @Part() $buttonAll: HTMLButtonElement;
+
+  @Part() $sizeText: HTMLSpanElement;
+  @Part() $paddingText: HTMLSpanElement;
+  @Part() $gapText: HTMLSpanElement;
+
+  @Part() $size: HTMLInputElement;
+  @Part() $padding: HTMLInputElement;
+  @Part() $gap: HTMLInputElement;
+
+  @Part() $database: PgDatabase;
+  @Part() $grid: PgGrid;
+  @Part() $tooltip: PgTooltip;
+
+  icons: Icon[] = [];
+
+  connectedCallback() {
+    this.$button0.addEventListener('click', () => {
+      this.setIcons(0);
+    });
+    this.$button1.addEventListener('click', () => {
+      this.setIcons(1);
+    });
+    this.$button10.addEventListener('click', () => {
+      this.setIcons(10);
+    });
+    this.$button50.addEventListener('click', () => {
+      this.setIcons(50);
+    });
+    this.$button250.addEventListener('click', () => {
+      this.setIcons(250);
+    });
+    this.$buttonAll.addEventListener('click', () => {
+      this.setIcons(-1);
+    });
+    this.$size.addEventListener('input', this.handleSize.bind(this));
+    this.$padding.addEventListener('input', this.handlePadding.bind(this));
+    this.$gap.addEventListener('input', this.handleGap.bind(this));
+
+    this.$database.addEventListener('sync', this.handleSync.bind(this));
+    this.$database.font = this.fontId;
+
+    this.addEventListener('tooltip', this.handleTooltip.bind(this));
+  }
+
+  handleTooltip(e) {
+    const { visible, rect, text, position } = e.detail;
+    this.$tooltip.visible = visible;
+    this.$tooltip.rect = rect;
+    this.$tooltip.text = text;
+    this.$tooltip.position = position;
+    e.stopPropagation();
+  }
+
+  setIcons(count: number) {
+    if (count === -1) {
+      this.$grid.icons = this.icons;
+    }
+    this.$grid.icons = this.icons.slice(0, count);
+  }
+
+  async handleSync(e: CustomEvent) {
+    const { db } = e.detail;
+    const count = await db.getCount(this.fontId);
+    console.log('Total Icons', count);
+    const icons = await db.getIcons(this.fontId);
+    console.log('Icon Objects:', icons.length);
+    this.icons = icons;
+    this.setIcons(10);
+  }
+
+  handleSize(e) {
+    this.$grid.size = e.target.value;
+    this.$sizeText.innerText = e.target.value;
+  }
+
+  handlePadding(e) {
+    this.$grid.padding = e.target.value;
+    this.$paddingText.innerText = e.target.value;
+  }
+
+  handleGap(e) {
+    this.$grid.gap = e.target.value;
+    this.$gapText.innerText = e.target.value;
+  }
+
+/*
+      ele.addEventListener('select', (e) => {
+        var icon = e.detail;
+        alert(icon.name);
+      });
+      ele.addEventListener('entericon', (e) => {
+        var icon = e.detail.icon;
+        console.log('enter', e.detail);
+        var rect = ele.getBoundingClientRect();
+        tooltip3.style.position = 'fixed';
+        tooltip3.style.left = `${e.detail.x}px`;
+        tooltip3.style.top = `${e.detail.y}px`;
+        tooltip3.width = e.detail.width;
+        tooltip3.height = e.detail.height;
+        tooltip3.text = icon.name;
+        tooltip3.style.display = 'block';
+      });
+      ele.addEventListener('leaveicon', (e) => {
+        var icon = e.detail;
+        tooltip3.style.display = 'none';
+        console.log('leave', e.detail);
+      });
+      ele.addEventListener('openmenu', (e) => {
+        var icon = e.detail;
+        console.log(e.detail);
+      });
+      ele.addEventListener('closemenu', (e) => {
+        var icon = e.detail;
+        console.log(e.detail);
+      });
+*/
+}

package/pg/grid/grid.css

@@ -0,0 +1,68 @@
+* {
+  font-family: var(--pg-font-family);
+}
+
+:host {
+  display: block;
+}
+
+[part~=none] {
+  display: none;
+}
+
+[part~=none].show {
+  display: block;
+}
+
+[part~=grid] {
+  position: relative;
+}
+
+[part~=grid] > button {
+  border: 0;
+  background: transparent;
+  padding: 0.625rem;
+  outline: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border: 0;
+  border-radius: 0.25rem;
+}
+
+[part~=grid] > button.hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+[part~=grid] > button:focus,
+[part~=grid] > button:active {
+  background: rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.0125rem 0.25rem rgba(0, 0, 0, 0.2) inset;
+}
+
+[part~=grid] > button > svg {
+  fill: #453C4F;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+[part~=grid] > button > svg {
+  fill: #453C4F;
+}
+
+[part~=grid]::-webkit-scrollbar {
+  width: 1em;
+}
+
+[part~=grid]::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+  border-radius: 0.25rem;
+}
+
+[part~=grid]::-webkit-scrollbar-thumb {
+  background-color: #453C4F;
+  outline: 1px solid slategrey;
+  border-radius: 0.25rem;
+}

package/pg/grid/grid.html

@@ -0,0 +1,6 @@
+<div part="none">
+  <slot></slot>
+</div>
+<pg-scroll part="scroll">
+  <div part="grid"></div>
+</pg-scroll>

package/pg/grid/grid.spec.ts

@@ -0,0 +1,66 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './grid';
+import PgGrid from './grid';
+
+const PG_GRID = 'pg-grid';
+
+(window as any).ResizeObserver = class {
+  constructor(callback) { }
+  observe(ele) { }
+};
+
+describe('pg-grid', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_GRID);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_GRID)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_GRID);
+    expect(props.length).toBe(6);
+    expect(props).toContain('icons');
+    expect(props).toContain('size');
+    expect(props).toContain('padding');
+    expect(props).toContain('gap');
+    expect(props).toContain('width');
+    expect(props).toContain('height');
+  });
+
+  it('should be empty', () => {
+    const component = selectComponent<PgGrid>(PG_GRID);
+    const {
+      $grid
+    } = component;
+    expect($grid.innerHTML).toEqual('');
+  });
+
+  // ToDo: test pg-scroll first
+  /*
+  it('should contain 1 icons', async () => {
+    const component = selectComponent<PgGrid>(PG_GRID);
+    const {
+      $grid
+    } = component;
+    component.icons = [{
+      id: 'uuid',
+      name: 'foo',
+      data: 'M3,3V21H21V3'
+    }];
+    console.log(component.shadowRoot?.innerHTML);
+    expect($grid.innerHTML).toEqual('');
+  });
+  */
+
+});