@pictogrammers/components 0.3.1

package/pg/modification/type/iconTagCreated.html

@@ -0,0 +1,13 @@
+<div part="iconTagCreated">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      <span class="added">Added</span> tag <code part="text"></code> to <code part="iconName"></code>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/iconTagDeleted.html

@@ -0,0 +1,13 @@
+<div part="iconTagDeleted">
+  <pg-avatar part="avatar"></pg-avatar>
+  <pg-icon part="icon"></pg-icon>
+  <span part="content">
+    <span>
+      <span class="removed">Removed</span> tag <code part="text"></code> from <code part="iconName"></code>.
+    </span>
+  </span>
+  <a part="issue"></a>
+  <button part="edit">
+    <pg-icon part="editIcon"></pg-icon>
+  </button>
+</div>

package/pg/modification/type/news.html

@@ -0,0 +1,5 @@
+<div part="news">
+  <pg-avatar part="avatar"></pg-avatar>
+  <span part="label">News</span>
+  <pg-markdown part="markdown"></pg-markdown>
+</div>

package/pg/nav/README.md

@@ -0,0 +1,16 @@
+# `<pg-nav>`
+
+The `pg-nav` component renders the navigation for the site. This includes `pg-search`.
+
+```typescript
+import '@pictogrammers/components/pgNav.js';
+```
+
+```html
+<pg-nav name="Material Design Icons"></pg-nav>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| name       | &#x2705; | Set website name |
+| logo       | &#x2705; | Set path data |

package/pg/nav/__examples__/basic/basic.html

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

package/pg/nav/__examples__/basic/basic.ts

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

package/pg/nav/index.ts

@@ -0,0 +1,3 @@
+import PgNav from './nav';
+
+export default PgNav;

package/pg/nav/nav.css

@@ -0,0 +1,14 @@
+:host {
+  align-self: center;
+}
+svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+button {
+  border: 0;
+  background: transparent;
+}
+button > svg {
+  fill: #fff;
+}

package/pg/nav/nav.html

@@ -0,0 +1,16 @@
+<nav part="nav">
+  <a href="/">
+    <span part="name"></span>
+  </a>
+  <a href="/icons">
+    Icons
+  </a>
+  <a href="/icons">
+    Docs
+  </a>
+  <button part="menu">
+    <svg viewBox="0 0 24 24">
+      <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+    </svg>
+  </button>
+</nav>

package/pg/nav/nav.ts

@@ -0,0 +1,21 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nav.html';
+import style from './nav.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-nav',
+  style,
+  template
+})
+export default class PgNav extends HTMLElement {
+  @Prop() nav: string = noIcon;
+
+  @Part() $path: SVGPathElement;
+
+  render() {
+
+  }
+}

package/pg/overlay/README.md

@@ -0,0 +1,37 @@
+# `PgOverlay`
+
+The `PgOverlay` class provides a way to create an element on the body element. Elements that should be attached at the body root should extend `PgOverlay`.
+
+
+## Example Modal
+
+```typescript
+import { Component, Prop } from '@pictogrammers/element';
+import PgOverlay from '@pictogrammers/components/pgOverlay';
+
+import template from './modal.html';
+import style from './modal.css';
+
+@Component({
+  selector: 'pg-modal',
+  template,
+  style
+})
+export default class PgModal extends PgOverlay {
+  // This will render attached to the body. To close call
+  // this.close(result);
+
+  @Prop() foo: string = 'Default';
+}
+```
+
+While this component can be inlined still it will mostly be opened via the a static open method which will create an instance and attach it to the `<body>` tag.
+
+```typescript
+import PgModal from './../modal/modal';
+
+const result = await PgModal.open({
+  foo: 'bar'
+});
+console.log(result);
+```

package/pg/overlay/__examples__/basic/basic.css

@@ -0,0 +1,3 @@
+p {
+  margin: 0.5rem 0;
+}

package/pg/overlay/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <p>Extend <code>PgOverlay</code> to create overlays. View the readme for details.</p>
+</div>

package/pg/overlay/__examples__/basic/basic.ts

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

package/pg/overlay/index.ts

@@ -0,0 +1,3 @@
+import PgOverlay from './overlay';
+
+export default PgOverlay;

package/pg/overlay/overlay.ts

@@ -0,0 +1,26 @@
+import { Component } from '@pictogrammers/element';
+
+function camelToDash(str: string): string {
+  return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
+}
+
+const layers: any[] = [];
+const promises: any[] = [];
+
+@Component()
+export default class PgOverlay extends HTMLElement {
+  static open(props: any = {}): Promise<any> {
+    var ele = document.createElement(camelToDash(this.name));
+    Object.assign(ele, props);
+    document.body.appendChild(ele);
+    layers.push(ele);
+    return new Promise((resolve) => {
+      promises.push(resolve);
+    });
+  }
+
+  close(result?: any) {
+    layers.pop().remove();
+    promises.pop()(result);
+  }
+}

package/pg/picker/README.md

@@ -0,0 +1,13 @@
+# `<pg-picker>`
+
+Deprecated
+
+```typescript
+import '@pictogrammers/components/pg/color';
+```
+
+## Usage
+
+| Events | Description |
+| ------ | ----------- |
+| `onchange` | `event = { detail: { r, g, b, hex } }` |

package/pg/picker/index.ts

@@ -0,0 +1,3 @@
+import PgPicker from './picker';
+
+export default PgPicker;

package/pg/picker/picker.css

@@ -0,0 +1,56 @@
+[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 #4F8FF9;
+}
+
+[part~=search] {
+  border: 2px solid #453C4F;
+  border-radius: 0.125rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  width: 27.25rem;
+  margin-bottom: 0.25rem;
+  outline: none;
+}
+
+[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 #4F8FF9;
+  border-right: 4px solid #4F8FF9;
+  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 #4F8FF9;
+  border-left: 4px solid #4F8FF9;
+  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/picker/picker.html

@@ -0,0 +1,8 @@
+<parent />
+<div part="popover">
+  <div part="arrow"></div>
+  <input part="search" type="text" />
+  <div part="scroll">
+    <pg-grid part="grid" height="12rem"></pg-grid>
+  </div>
+</div>

package/pg/picker/picker.ts

@@ -0,0 +1,66 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgButton from '../button/button';
+import PgGrid from '../grid/grid';
+import { createPopper } from '@popperjs/core';
+
+import template from './picker.html';
+import style from './picker.css';
+
+window.process = { env: {} } as any;
+
+@Component({
+  selector: 'pg-picker',
+  style,
+  template
+})
+export default class PgPicker extends HTMLElement { // extends PgButton = bug in parent symbol
+  @Prop() icons: any[] = [];
+
+  @Part() $popover: HTMLDivElement;
+  @Part() $arrow: HTMLDivElement;
+
+  @Part() $search: HTMLDivElement;
+  @Part() $grid: PgGrid;
+
+  isVisible = false;
+  connectedCallback() {
+    /*createPopper(this.$button, 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';
+    this.$button.addEventListener('click', () => {
+      this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';
+      this.isVisible = !this.isVisible;
+      if (this.isVisible) {
+        this.$search.focus();
+      }
+    });
+    this.$search.addEventListener('input', (e: any) => {
+      this.search = e.target.value;
+      this.render();
+    });*/
+  }
+
+  search: string = '';
+
+  render() {
+    this.$grid.icons = this.icons.filter((icon) => {
+      return icon.name.indexOf(this.search) !== -1;
+    });
+  }
+}

package/pg/preview/README.md

@@ -0,0 +1,19 @@
+# `<pg-preview>`
+
+The `pg-preview` component allows a standard way to render a grid behind an icon.
+
+```typescript
+import '@pictogrammers/components/pg/preview';
+import PgIcon from '@pictogrammers/components/pg/preview';
+```
+
+```html
+<pg-preview path="..." size="4"></pg-preview>
+```
+
+| Attributes | Tested   | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| path       | &#x2705; |         | Set path data |
+| size       | &#x2705; | 4       |   |
+| width      |          | 24      |   |
+| height     |          | 24      |   |

package/pg/preview/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<div class="example">
+  <pg-preview part="preview"></pg-preview>
+  <div>
+    <button>None</button>
+    <button>Account</button>
+    <button>24x24</button>
+    <button>36x36</button>
+    <button>Grid Size = 4</button>
+    <button>Grid Size = 8</button>
+  </div>
+</div>

package/pg/preview/__examples__/basic/basic.ts

@@ -0,0 +1,22 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgPreview from '../../preview';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-preview-basic',
+  template
+})
+export default class XPgPreviewBasic extends HTMLElement {
+
+  @Part() $preview: PgPreview;
+
+  connectedCallback() {
+    // this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+
+  }
+
+}

package/pg/preview/index.ts

@@ -0,0 +1,3 @@
+import PgPreview from './preview';
+
+export default PgPreview;

package/pg/preview/preview.css

@@ -0,0 +1,34 @@
+:host {
+  display: inline-flex;
+  color: var(--pg-icon-color, #222);
+}
+
+[part=svg] {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: 1;
+}
+
+[part="grid"] {
+  position: relative;
+  background-image:
+    repeating-linear-gradient(rgba(83, 137, 164, 0.5) 0 2px, transparent 2px 100%),
+    repeating-linear-gradient(90deg, rgba(83, 137, 164, 0.5) 0 2px, transparent 2px 100%);
+  background-size: var(--pg-preview-size, 4px) var(--pg-preview-size, 4px);
+  background-position: calc(var(--pg-preview-size, 4px) - 1px) calc(var(--pg-preview-size, 4px) - 1px);
+}
+
+[part="grid"]::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: ' ';
+  background-image:
+    repeating-linear-gradient(#5389a4 0 2px, transparent 2px 100%),
+    repeating-linear-gradient(90deg, #5389a4 0 2px, transparent 2px 100%);
+  background-size: calc(var(--pg-preview-size, 4px) * 4) calc(var(--pg-preview-size, 4px) * 4);
+  background-position: calc(var(--pg-preview-size, 4px) * 4 - 1px) calc(var(--pg-preview-size, 4px) * 4 - 1px);
+}

package/pg/preview/preview.html

@@ -0,0 +1,5 @@
+<div part="grid">
+  <svg part="svg" viewBox="0 0 24 24">
+    <path part="path" fill="currentColor" d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"/>
+  </svg>
+</div>

package/pg/preview/preview.ts

@@ -0,0 +1,38 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './preview.html';
+import style from './preview.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-preview',
+  style,
+  template
+})
+export default class PgPreview extends HTMLElement {
+  @Prop() path: string = noIcon;
+  @Prop() width: number = 24;
+  @Prop() height: number = 24;
+  @Prop() size: number = 8;
+
+  @Part() $svg: SVGSVGElement;
+  @Part() $path: SVGPathElement;
+  @Part() $grid: HTMLDivElement;
+
+  render(changes) {
+    if (changes.path) {
+      this.$path.setAttribute('d', this.path);
+    }
+    if (changes.size) {
+      const width = parseInt(`${this.width}`, 10);
+      const height = parseInt(`${this.height}`, 10);
+      const size = parseInt(`${this.size}`, 10);
+      this.$svg.style.width = `${width * size}px`;
+      this.$svg.style.height = `${height * size}px`;
+      this.$grid.style.width = `${width * size}px`;
+      this.$grid.style.height = `${height * size}px`;
+      this.$grid.style.setProperty('--pg-preview-size', `${size}px`);
+    }
+  }
+}

package/pg/scroll/README.md

@@ -0,0 +1,42 @@
+# `<pg-scroll>`
+
+The `pg-scroll` component handles scrolling data in the viewport. This component has 2 use cases.
+
+- Basic: Detecting when a element is in view and reacting differently. Useful to cut down CPU intensive things.
+- Advanced: Unlimited lists of data only rendered when in the viewport to cut down DOM elements.
+
+```typescript
+import '@pictogrammers/components/pgScroll.js';
+```
+
+```html
+<pg-scroll></pg-scroll>
+```
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| enter      | &#x2705; | Fired when element enters viewport |
+| leave      | &#x2705; | Fired when mouse leaves viewport |
+| calculate  | &#x2705; | `{ offsetY, viewHeight, height }` |
+
+## Basic
+
+To detect and manage viewport visability listen to the `enter` and `leave` events. For instance JS heavy animations or scrolling a carousel may not make sense while off screen especially if one wants to see the first slide first.
+
+> Note do not use lots of these as they do need to check on very scroll operation.
+
+## Advanced
+
+To create virtual items or scroll containers where only items in the viewport are rendered listen to the `offset` event.
+
+The slotted content will need to dispatch `height` event for the `pg-scroll` to capture.
+
+```typescript
+this.$scroll.height = 2000;
+```
+
+During resizing/scrolling the `calculate` event will fire rapidly. The container will need to in a performant way render content handling the offset data.
+
+- `height` The height calculated and sent from the child content.
+- `viewHeight` This is either equal to `height` or the viewport height.
+- `offsetY` Distance from the top. Items in the list should use this to calculate the first item position.

package/pg/scroll/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+[part=scrollList] {
+  display: flex;
+  flex-direction: column;
+}

package/pg/scroll/__examples__/basic/basic.html

@@ -0,0 +1,11 @@
+<p>
+  Content <span part="scrollCount">0</span>
+  <button part="small">10 Items</button>
+  <button part="large">500 Items</button>
+  Overflow = <code part="overflow">visible</code>
+</p>
+<div class="example" part="overflowContainer">
+  <pg-scroll part="scroll">
+    <div part="scrollList" style="display:flex;flex-direction:column;"></div>
+  </pg-scroll>
+</div>

package/pg/scroll/__examples__/basic/basic.ts

@@ -0,0 +1,88 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgScroll from 'pg/scroll/scroll';
+
+import template from './basic.html';
+import style from './basic.css';
+
+@Component({
+  selector: 'x-pg-scroll-basic',
+  template,
+  style
+})
+export default class XPgScrollBasic extends HTMLElement {
+
+  @Part() $scroll: PgScroll;
+  @Part() $scrollList: HTMLDivElement;
+  @Part() $scrollCount: HTMLSpanElement;
+  @Part() $small: HTMLButtonElement;
+  @Part() $large: HTMLButtonElement;
+  @Part() $overflow: HTMLSpanElement;
+  @Part() $overflowContainer: HTMLDivElement;
+
+  connectedCallback() {
+    const mdiScrollItems: string[] = [];
+    var currentRow = 0;
+    var currentViewHeight = 0;
+    const dispatchHeight = () => {
+      this.$scroll.height = mdiScrollItems.length * 44;
+    }
+    function small() {
+      mdiScrollItems.splice(0, mdiScrollItems.length);
+      for(var i = 0; i < 10; i++) {
+        mdiScrollItems.push(`Test Item ${i}`);
+      }
+      dispatchHeight();
+    }
+    function large() {
+      mdiScrollItems.splice(0, mdiScrollItems.length);
+      for(var i = 0; i < 500; i++) {
+        mdiScrollItems.push(`Test Item ${i}`);
+      }
+      dispatchHeight();
+    }
+    this.$small.addEventListener('click', small);
+    this.$large.addEventListener('click', large);
+    var list: HTMLElement[] = [];
+    const syncVirtual = (virtualRows) => {
+      for (var i = list.length; i < virtualRows; i++) {
+        var ele = document.createElement('button');
+        ele.innerText = 'Placeholder';
+        ele.style.height = '44px';
+        this.$scrollList.appendChild(ele);
+        list.push(ele);
+      }
+      list.forEach((e, i) => {
+        e.style.display = i < virtualRows - 1 ? '' : 'none'
+      });
+    }
+    this.$scroll.addEventListener('calculate', (e: CustomEvent) => {
+      var { offsetY, height, viewHeight } = e.detail as any;
+      var viewRows = Math.ceil(viewHeight / 44) + 1;
+      var row = Math.floor(offsetY / 44);
+      syncVirtual(viewRows);
+      if (currentRow !== row || currentViewHeight !== viewHeight) {
+        this.$scrollCount.innerText = `${row}, ${viewRows}`;
+        list.forEach((ele, index) => {
+          ele.innerText = mdiScrollItems[index + row];
+        });
+        currentRow = row;
+        currentViewHeight = viewHeight;
+      }
+      this.$scrollList.style.transform = `translateY(${-1 * offsetY % 44}px)`;
+    });
+    function overflow(overflowText) {
+      if (overflowText === 'auto') {
+        this.$overflowContainer.style.overflow = 'auto';
+        this.$overflowContainer.style.height = '300px';
+        this.$overflow.innerText = 'auto';
+      } else {
+        this.$overflowContainer.style.overflow = 'visible';
+        this.$overflowContainer.style.height = '';
+        this.$overflow.innerText = 'visible';
+      }
+    }
+    overflow('auto');
+    // overflow('visible');
+    small();
+  }
+}