@pictogrammers/components 0.3.1

package/pg/inputUserSelect/inputUserSelect.ts

@@ -0,0 +1,266 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputUserSelect.html';
+import style from './inputUserSelect.css';
+import { User } from '../shared/models/user';
+import PgIcon from '../icon/icon';
+
+function createIcon(d: string, className: string) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', d);
+  path.setAttribute('fill', 'currentColor');
+  svg.appendChild(path);
+  svg.classList.add(className);
+  return svg;
+}
+
+const KEY = {
+  ArrowUp: 'ArrowUp',
+  ArrowRight: 'ArrowRight',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  Escape: 'Escape',
+  Tab: 'Tab'
+};
+
+const mdiGithub = 'M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z';
+const mdiShape = 'M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z';
+
+@Component({
+  selector: 'pg-input-user-select',
+  style,
+  template
+})
+export default class PgInputUserSelect extends HTMLElement {
+  @Prop() options: User[] | null = null;
+  @Prop() value: User | null = null;
+  @Prop() clear: boolean = false;
+  @Prop() noDataText: string = 'Empty Users List';
+  @Prop() noSelectionText: string = 'Select a User';
+  @Prop() name: string = '';
+
+  @Part() $select: HTMLButtonElement;
+  @Part() $selectedAvatar: HTMLImageElement;
+  @Part() $selectedName: HTMLSpanElement;
+  @Part() $githubIcon: PgIcon;
+  @Part() $selectedGithub: HTMLSpanElement;
+  @Part() $countIcon: PgIcon;
+  @Part() $selectedCount: HTMLSpanElement;
+  @Part() $dropdown: HTMLDivElement;
+  @Part() $loading: SVGElement;
+  @Part() $loadingText: HTMLSpanElement;
+  @Part() $noData: HTMLSpanElement;
+  @Part() $noSelection: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$select.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('keydown', this.handleKeys.bind(this));
+  }
+
+  isOpen = false;
+  handleCloseBind;
+  optionsElements: HTMLButtonElement[] = [];
+
+  close() {
+    this.isOpen = false;
+    this.$dropdown.classList.remove('open');
+    document.removeEventListener('mousedown', this.handleCloseBind);
+  }
+
+  handleClose(e) {
+    // This is wrong
+    const target = e.target as PgInputUserSelect;
+    if (target.nodeName === this.nodeName && target.isOpen) {
+      // Do nothing!
+    } else {
+      this.close();
+    }
+  }
+
+  handleClick() {
+    this.isOpen = !this.isOpen;
+    this.$dropdown.classList.toggle('open', this.isOpen);
+    this.handleCloseBind = this.handleClose.bind(this);
+    document.addEventListener('mousedown', this.handleCloseBind);
+    this.focusSelected();
+  }
+
+  focusSelected() {
+    const find = this.options?.findIndex((value) => value === this.value);
+    if (find && find !== -1) {
+      this.optionsElements[find].focus();
+      this.index = find;
+    } else if (this.optionsElements.length) {
+      this.optionsElements[0].focus();
+    }
+  }
+
+  handleSelect(e) {
+    console.log('clicked');
+    const { id } = e.currentTarget.dataset;
+    const selected = this.options?.find(d => d.id === id);
+    this.value = selected || null;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: this.value,
+          name: this.name
+        }
+      })
+    );
+    this.close();
+  }
+
+  loadingMode() {
+    this.$selectedAvatar.style.display = 'none';
+    this.$selectedName.style.display = 'none';
+    this.$githubIcon.style.display = 'none';
+    this.$selectedGithub.style.display = 'none';
+    this.$countIcon.style.display = 'none';
+    this.$selectedCount.style.display = 'none';
+    this.$noData.style.display = 'none';
+    this.$noSelection.style.display = 'none';
+    this.$loading.style.display = 'flex';
+    this.$loadingText.style.display = 'initial';
+    this.$select.disabled = true;
+  }
+
+  noDataMode() {
+    this.$selectedAvatar.style.display = 'none';
+    this.$selectedName.style.display = 'none';
+    this.$githubIcon.style.display = 'none';
+    this.$selectedGithub.style.display = 'none';
+    this.$countIcon.style.display = 'none';
+    this.$selectedCount.style.display = 'none';
+    this.$noData.style.display = 'initial';
+    this.$noSelection.style.display = 'none';
+    this.$loading.style.display = 'none';
+    this.$loadingText.style.display = 'none';
+    this.$select.disabled = true;
+  }
+
+  noSelectionMode() {
+    this.$selectedAvatar.style.display = 'none';
+    this.$selectedName.style.display = 'none';
+    this.$githubIcon.style.display = 'none';
+    this.$selectedGithub.style.display = 'none';
+    this.$countIcon.style.display = 'none';
+    this.$selectedCount.style.display = 'none';
+    this.$noData.style.display = 'none';
+    this.$noSelection.style.display = 'initial';
+    this.$loading.style.display = 'none';
+    this.$loadingText.style.display = 'none';
+    this.$select.disabled = false;
+  }
+
+  selectMode() {
+    this.$selectedAvatar.style.display = 'initial';
+    this.$selectedName.style.display = 'initial';
+    this.$githubIcon.style.display = 'initial';
+    this.$selectedGithub.style.display = 'initial';
+    this.$countIcon.style.display = 'initial';
+    this.$selectedCount.style.display = 'initial';
+    this.$noData.style.display = 'none';
+    this.$noSelection.style.display = 'none';
+    this.$loading.style.display = 'none';
+    this.$loadingText.style.display = 'none';
+    this.$select.disabled = false;
+  }
+
+  render(changes) {
+    if (changes.options) {
+      if (this.options === null) {
+        this.loadingMode();
+      } else if (this.options.length === 0) {
+        this.noDataMode();
+      } else {
+        this.selectMode();
+        this.calculateMinWidth();
+        this.optionsElements = this.options.map(o => {
+          const button = document.createElement('button');
+          const img = document.createElement('img');
+          img.src = `${o.base64}`;
+          img.classList.add('avatar');
+          button.appendChild(img);
+          const spanName = document.createElement('span');
+          spanName.innerText = `${o.name}`;
+          spanName.classList.add('name');
+          button.appendChild(spanName);
+          const spanGitHub = document.createElement('span');
+          spanGitHub.innerText = `${o.github}`;
+          spanGitHub.classList.add('github');
+          button.appendChild(spanGitHub);
+          const spanIconCount = document.createElement('span');
+          spanIconCount.innerText = `${o.iconCount}`;
+          spanIconCount.classList.add('iconCount');
+          button.appendChild(spanIconCount);
+          button.dataset.id = `${o.id}`;
+          button.appendChild(createIcon(mdiGithub, 'githubIcon'));
+          button.appendChild(createIcon(mdiShape, 'countIcon'));
+          button.addEventListener('click', this.handleSelect.bind(this));
+          this.$dropdown.appendChild(button);
+          return button;
+        });
+        if (this.value === null) {
+          this.noSelectionMode();
+        }
+      }
+      //if (this.$select.value !== this.value) {
+      //  this.$select.value = this.value;
+      //}
+    }
+    if (changes.value) {
+      if (changes.value && this.value) {
+        this.$selectedAvatar.src = this.value.base64 || '';
+        this.$selectedCount.innerText = `${this.value.iconCount}`;
+        this.$selectedName.innerText = `${this.value.name}`;
+        this.$selectedGithub.innerText = `${this.value.github}`;
+        this.selectMode();
+      }
+    }
+    if (changes.noDataText) {
+      this.$noData.innerText = this.noDataText;
+    }
+    if (changes.noSelectionText) {
+      this.$noSelection.innerText = this.noSelectionText;
+    }
+  }
+
+  calculateMinWidth() {
+    const { width } = this.$select.getBoundingClientRect();
+    this.$dropdown.style.minWidth = `${width - 2}px`;
+  }
+
+  index = -1;
+  handleKeys(e: KeyboardEvent) {
+    const items = this.optionsElements;
+    let newIndex = this.index;
+    switch (e.key) {
+      case KEY.ArrowUp:
+        if (newIndex === 0) {
+          newIndex = items.length - 1;
+        } else if (newIndex >= 0) {
+          newIndex -= 1;
+        }
+        break;
+      case KEY.ArrowDown:
+        if (newIndex < items.length - 1) {
+          newIndex += 1;
+        } else if (newIndex === items.length - 1) {
+          newIndex = 0;
+        }
+        break;
+      case KEY.Tab:
+      case KEY.Escape:
+          this.close();
+          break;
+    }
+    if (newIndex != this.index) {
+      this.index = newIndex;
+      items[newIndex].focus();
+      e.preventDefault();
+    }
+  }
+}

package/pg/listTag/README.md

@@ -0,0 +1,26 @@
+# `<pg-icon>`
+
+The `pg-icon` component allows a standard way to render [MaterialDesignIcons.com](https://materialdesignicons.com) icons.
+
+```typescript
+import '@pictogrammers/components/pg/icon';
+import PgIcon from '@pictogrammers/components/pg/icon';
+```
+
+```html
+<pg-icon path="..."></pg-icon>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| path       | &#x2705; | Set path data |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-icon-color`  | `#453C4F` | Color       |
+| `--pg-icon-width`  | `1.5rem`  | Width       |
+| `--pg-icon-height` | `1.5rem`  | Height      |

package/pg/listTag/__examples__/basic/basic.html

@@ -0,0 +1,16 @@
+<button part="buttonClear">
+  Clear Tags
+</button>
+<button part="buttonAdd">
+  Add Tag
+</button>
+<button part="buttonRemove">
+  Remove Tag
+</button>
+<button part="buttonEdit">
+  Toggle Edit
+</button>
+
+<div class="example">
+  <pg-list-tag part="tags"></pg-list-tag>
+</div>

package/pg/listTag/__examples__/basic/basic.ts

@@ -0,0 +1,53 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgListTag from '../../listTag';
+import { tags } from './constants';
+
+import template from './basic.html';
+import { Tag } from '../../../shared/models/tag';
+
+@Component({
+  selector: 'x-pg-list-tag-basic',
+  template
+})
+export default class XPgIconBasic extends HTMLElement {
+  @Part() $tags: PgListTag;
+  @Part() $buttonClear: HTMLButtonElement;
+  @Part() $buttonAdd: HTMLButtonElement;
+  @Part() $buttonRemove: HTMLButtonElement;
+  @Part() $buttonEdit: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$buttonClear.addEventListener('click', this.handleClear.bind(this));
+    this.$buttonAdd.addEventListener('click', this.handleAdd.bind(this));
+    this.$buttonRemove.addEventListener('click', this.handleRemove.bind(this));
+    this.$buttonEdit.addEventListener('click', this.handleEdit.bind(this));
+    this.$tags.items = tags;
+  }
+
+  handleClear() {
+    this.$tags.items = [];
+  }
+
+  uuid = 4;
+
+  handleAdd() {
+    this.$tags.items = [
+      ...this.$tags.items,
+      new Tag().from({
+        id: `uuid${this.uuid++}`,
+        count: 42,
+        name: 'Foo Bar',
+        url: 'foo-bar'
+      })
+    ];
+  }
+
+  handleRemove() {
+    this.$tags.items = this.$tags.items.slice(0, this.$tags.items.length - 1);
+  }
+
+  handleEdit() {
+    this.$tags.edit = !this.$tags.edit;
+  }
+
+}

package/pg/listTag/__examples__/basic/constants.ts

@@ -0,0 +1,22 @@
+import { Tag } from "../../../shared/models/tag";
+
+export const tags = [
+  new Tag().from({
+    id: 'uuid1',
+    name: 'test 1',
+    url: 'test-1',
+    count: 42
+  }),
+  new Tag().from({
+    id: 'uuid2',
+    name: 'test 2',
+    url: 'test-2',
+    count: 12
+  }),
+  new Tag().from({
+    id: 'uuid3',
+    name: 'test 3',
+    url: 'test-3',
+    count: 0
+  })
+]

package/pg/listTag/index.ts

@@ -0,0 +1,3 @@
+import PgListTag from './listTag';
+
+export default PgListTag;

package/pg/listTag/listTag.css

@@ -0,0 +1,9 @@
+:host {
+  display: inline-flex;
+  color: var(--pg-icon-color, #453C4F);
+}
+
+[part="svg"] {
+  width: var(--pg-icon-width, 1.5rem);
+  height: var(--pg-icon-height, 1.5rem);
+}

package/pg/listTag/listTag.html

@@ -0,0 +1 @@
+<div part="items"></div>

package/pg/listTag/listTag.ts

@@ -0,0 +1,48 @@
+import { Component, Prop, Part, node } from '@pictogrammers/element';
+import { Tag } from '../shared/models/tag';
+import { list, item } from '../shared/list';
+
+import partialTag from './partials/tag.html';
+
+import template from './listTag.html';
+import style from './listTag.css';
+
+@Component({
+  selector: 'pg-list-tag',
+  style,
+  template
+})
+export default class PgListTag extends HTMLElement {
+  @Prop() items: Tag[] = [];
+  @Prop() edit: boolean = false;
+
+  @Part() $items: HTMLDivElement;
+
+  render(changes) {
+    if (changes.items) {
+      list(
+        this.$items,
+        this.items,
+        'id',
+        (tag: Tag) => {
+          const n = node<HTMLDivElement>(partialTag, {
+            name: {
+              innerText: tag.name
+            }
+          });
+          const name = n.querySelector<HTMLDivElement>('[part="name"]');
+          name?.addEventListener('click', (e) => {
+            console.log(tag);
+          });
+          return n;
+        },
+        (modifiction, $item) => {
+
+        }
+      );
+    }
+    if (changes.edit) {
+
+    }
+  }
+}

package/pg/listTag/partials/tag.html

@@ -0,0 +1,3 @@
+<button part="name">
+
+</button>

package/pg/markdown/README.md

@@ -0,0 +1,13 @@
+# `<pg-markdown>`
+
+Render markdown text with rich formatting.
+
+```typescript
+import '@pictogrammers/components/pg/markdown';
+```
+
+## Usage
+
+| Events | Description |
+| ------ | ----------- |
+| `onchange` | `event = { detail: { r, g, b, hex } }` |

package/pg/markdown/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <pg-markdown part="markdown"></pg-markdown>
+</div>

package/pg/markdown/__examples__/basic/basic.ts

@@ -0,0 +1,51 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgMarkdown from '../../markdown';
+import { example, icons, mdiAlert, mdiVanish } from './constants';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-markdown-basic',
+  template
+})
+export default class XPgMarkdownBasic extends HTMLElement {
+  @Part() $markdown: PgMarkdown;
+
+  connectedCallback() {
+    this.$markdown.replace = [{
+      find: new RegExp('(\\\\mdi|mdi|icon):([a-z0-9-]+):?([#a-z0-9-]+)?', 'g'),
+      replace: (m, type, icon, color) => {
+        if (type == '\\mdi') { return `mdi:${icon}`; }
+        if (icon == 'not' || icon == 'before') { return m; }
+        const c = color ? ` style="fill:${color}"` : '';
+        if (type === 'mdi') {
+          return `<a href="icon/${icon}"><svg class="icon" data-type="link" viewBox="0 0 24 24"><path data-icon="${icon}" fill="currentColor" d="${mdiVanish}"${c} /></svg></a>`;
+        } else {
+          return `<svg class="icon" data-type="icon" viewBox="0 0 24 24"><path data-icon="${icon}" fill="currentColor" d="${mdiVanish}"${c} /></svg>`;
+        }
+      }
+    }, {
+      find: new RegExp('<blockquote>([\\\s\\\S]*?)<\\\/blockquote>', 'g'),
+      replace: (m) => {
+        const matchLabel = m.match(/<blockquote>\r?\n?<p><strong>([\w ]+):</);
+        if (matchLabel) {
+          const label = matchLabel[1];
+          const classLabel = matchLabel[1].trim().toLowerCase().replace(/[ _]/g, '-');
+          m = m.replace(new RegExp(`<strong>${label}:</strong> ?`), '');
+          m = m.replace(/^<blockquote/, `<blockquote class="${classLabel}"`);
+        }
+        return m;
+      }
+    }];
+
+    this.$markdown.text = example;
+
+    this.$markdown.modify(($content) => {
+      var paths = $content.querySelectorAll('[data-icon]');
+      for (var i = 0; i < paths.length; i++) {
+        var path = paths[i];
+        path.setAttribute('d', icons[path.dataset.icon] || mdiAlert)
+      }
+    });
+  }
+}

package/pg/markdown/__examples__/basic/constants.ts

@@ -0,0 +1,129 @@
+export const mdiVanish = 'M16,13V11H21V13H16M14.83,7.76L17.66,4.93L19.07,6.34L16.24,9.17L14.83,7.76M11,16H13V21H11V16M11,3H13V8H11V3M4.93,17.66L7.76,14.83L9.17,16.24L6.34,19.07L4.93,17.66M4.93,6.34L6.34,4.93L9.17,7.76L7.76,9.17L4.93,6.34M8,13H3V11H8V13M19.07,17.66L17.66,19.07L14.83,16.24L16.24,14.83L19.07,17.66Z';
+export const mdiAlert = 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z';
+export const icons = {
+  'account': 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'
+};
+
+export const example = [
+  '# Header 1',
+  '',
+  'Paragraph text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+  '',
+  '## Header 2',
+  '',
+  'Paragraph text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+  '',
+  '### Header 3',
+  '',
+  'Paragraph text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+  '',
+  '#### Header 4',
+  '',
+  'Paragraph text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+  '',
+  'Test [`link code`](#) example.',
+  '',
+  `<a href="" class="button">icon:account Button</a>`,
+  '',
+  '- List 1',
+  '- List 2',
+  '  - List 1 `code`',
+  '  - List 2',
+  '- List 3 `inline` code',
+  '',
+  '> Blockquote',
+  '',
+  '',
+  '> **Warning:** Blockquote',
+  '',
+  '',
+  '> **Note:** Blockquote',
+  '',
+  '',
+  '> **Alert:** Blockquote',
+  '',
+  '> **Attention:** Blockquote',
+  '',
+  '> **Success:** Blockquote',
+  '',
+  '> ',
+  '>',
+  '',
+  '```javascript',
+  'function foo() {',
+  '    // Code',
+  '}',
+  '```',
+  '```typescript',
+  'function foo() {',
+  '    // Really long item with overlap. test test test test test test test test test test test test test test test test test test',
+  '}',
+  '```',
+  '```markdown',
+  '# Header',
+  '',
+  'Does markdown in markdown work...',
+  '```',
+  '',
+  '```',
+  'Nothing',
+  '```',
+  '',
+  '```yaml',
+  'type: object',
+  'properties:',
+  '  id:',
+  '    type: string',
+  '    format: uuid',
+  '  name:',
+  '    type: string',
+  '    pattern: /$[a-z0-9-]+^/',
+  '    example: user',
+  '  complex:',
+  '    type: object',
+  '    properties:',
+  '      id:',
+  '        type: string',
+  '        format: uuid',
+  '```',
+  '',
+  'Tabs without Label',
+  '',
+  'tabs',
+  'tab Tab Title 1',
+  '',
+  'Anything...',
+  '',
+  '/tab',
+  'tab icon:foo Tab Title 2',
+  '',
+  'Another tabs `content`.',
+  '',
+  '/tab',
+  '/tabs',
+  '',
+  '',
+  'Tabs with Label',
+  '',
+  'tabs Label',
+  'tab Tab Title 1',
+  '',
+  'Anything...',
+  '',
+  '/tab',
+  'tab Tab Title 2',
+  '',
+  'Another tabs `content`.',
+  '',
+  '/tab',
+  '/tabs',
+  '',
+  '| Header 1             | Header 2 |',
+  '|----------------------|----------|',
+  '| Row 1... larger size | Row 1    |',
+  '| Row 2                | Row 2    |',
+  '| Row 3                | Row 3    |',
+  '| Row 4                | Row 4    |',
+  '',
+  'Done, but `code` blocks would be useful.'
+].join('\n');

package/pg/markdown/index.ts

@@ -0,0 +1,5 @@
+import PgMarkdown from './markdown';
+
+export { MarkdownReplace } from './markdownReplace';
+
+export default PgMarkdown;