@pictogrammers/components 0.3.1

package/pg/icon/icon.spec.ts

@@ -0,0 +1,46 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './icon';
+import PgIcon from './icon';
+
+const PG_ICON = 'pg-icon';
+const ICON = 'M12,4C14.21,4 16,5.79 16,8C16,10.21 14.21,12 12,12C9.79,12 8,10.21 8,8C8,5.79 9.79,4 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
+const DEFAULT_ICON = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+describe('pg-icon', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_ICON);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_ICON)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_ICON);
+    expect(props.length).toBe(1);
+    expect(props).toContain('path');
+  });
+
+  it('should default path value', () => {
+    const component = selectComponent<PgIcon>(PG_ICON);
+    const { $path } = component;
+    expect($path.getAttribute('d')).toEqual(DEFAULT_ICON);
+  });
+
+  it('path should be set', async () => {
+    const component = selectComponent<PgIcon>(PG_ICON);
+    const { $path } = component;
+    await component.setAttribute('path', ICON);
+    expect($path.getAttribute('d')).toEqual(ICON);
+  });
+
+});

package/pg/icon/icon.ts

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

package/pg/icon/index.ts

@@ -0,0 +1,3 @@
+import PgIcon from './icon';
+
+export default PgIcon;

package/pg/inputCheck/README.md

@@ -0,0 +1,32 @@
+# `<pg-input-check>`
+
+The `pg-input-check` component is a styled checkbox.
+
+```typescript
+import '@pictogrammers/components/pg/inputCheck';
+import PgInputCheck from '@pictogrammers/components/pg/inputCheck';
+```
+
+```html
+<pg-input-check></pg-input-check>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| value      | &#x2705; | `true` or `false` |
+
+## Events
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     | &#x2705; | Click toggles boolean. |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-input-check-blank-color`  | `#453C4F` | Color       |
+| `--pg-input-check-chcked-color`  | `#453C4F`  | Color       |
+| `--pg-icon-size` | `1.5rem`  | Width / Height      |

package/pg/inputCheck/__examples__/basic/basic.html

@@ -0,0 +1,8 @@
+<div class="example">
+  <pg-input-check part="input" value="true"></pg-input-check>
+  <pg-input-check disabled></pg-input-check>
+  <pg-input-check value="true" disabled></pg-input-check>
+  <div>
+    <code>onchange: <span part="value"></span></code>
+  </div>
+</div>

package/pg/inputCheck/__examples__/basic/basic.ts

@@ -0,0 +1,23 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputCheck from 'pg/inputCheck/inputCheck';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-check-basic',
+  template
+})
+export default class XPgInputCheckBasic extends HTMLElement {
+
+  @Part() $input: PgInputCheck;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e) {
+    var value = e.target.value;
+    this.$value.innerText = value;
+  }
+}

package/pg/inputCheck/index.ts

@@ -0,0 +1,3 @@
+import PgInputCheck from './inputCheck';
+
+export default PgInputCheck;

package/pg/inputCheck/inputCheck.css

@@ -0,0 +1,45 @@
+:host {
+  display: inline-flex;
+}
+
+.blank {
+  color: var(--pg-input-check-blank-color, #453C4F);
+}
+.blank [part="check"] {
+  visibility: hidden;
+}
+
+.checked {
+  color: var(--pg-input-check-checked-color, #453C4F);
+}
+
+[part="button"] {
+  display: flex;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  border-radius: 0.25rem;
+  background: transparent;
+}
+
+[part="svg"] {
+  width: var(--pg-icon-check-size, 1.5rem);
+  height: var(--pg-icon-check-size, 1.5rem);
+}
+
+[part="button"]:not(:hover):active {
+  box-shadow: 0 0 0 3px var(--pg-input-check-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part="button"]:not(:hover):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+[part="button"]:not(:hover):focus {
+  box-shadow: 0 0 0 3px var(--pg-input-check-focus-glow, rgb(79, 143, 249, 0.5));
+}
+[part="button"]:not(:disabled):hover [part="path"] {
+  fill: #4f8ff9;
+}
+
+[part="button"]:disabled {
+  color: #AAA;
+}

package/pg/inputCheck/inputCheck.html

@@ -0,0 +1,6 @@
+<button part="button">
+  <svg part="svg" viewBox="0 0 24 24">
+    <path part="path" fill="currentColor" d="M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19"/>
+	  <path part="check" fill="currentColor" d="M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z"/>
+  </svg>
+</button>

package/pg/inputCheck/inputCheck.ts

@@ -0,0 +1,42 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputCheck.html';
+import style from './inputCheck.css';
+
+const PATH_BLANK = 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z';
+const PATH_CHECKED = 'M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19';
+
+@Component({
+  selector: 'pg-input-check',
+  style,
+  template
+})
+export default class PgInputCheck extends HTMLElement {
+  @Prop() value: string | boolean = false;
+  @Prop() disabled: boolean = false;
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $path: SVGPathElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+    const value = [true, 'true'].includes(this.value);
+    this.value = !value;
+    this.dispatchEvent(new CustomEvent('change'));
+  }
+
+  render(changes) {
+    if (changes.value) {
+      const value = [true, 'true'].includes(this.value);
+      this.$path.setAttribute('d', value ? PATH_CHECKED : PATH_BLANK);
+      this.$button.classList.toggle('blank', !value);
+      this.$button.classList.toggle('checked', value);
+    }
+    if (changes.disabled) {
+      this.$button.disabled = ['', true, 'true'].includes(this.disabled);
+    }
+  }
+}

package/pg/inputCheckList/README.md

@@ -0,0 +1,35 @@
+# `<pg-input-check-list>`
+
+The `pg-input-check-list` component is a list of checkboxes.
+
+```typescript
+import '@pictogrammers/components/pg/inputCheck';
+import PgInputCheck from '@pictogrammers/components/pg/inputCheck';
+```
+
+```html
+<pg-input-check-list></pg-input-check-list>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| value      | &#x2705; | Array of checked values. |
+| options    | &#x2705; | Array of items. |
+
+Each option object must have a `value`. Optionally a `label` and `disabled`.
+
+## Events
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     | &#x2705; | Any change in the list checks. |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-input-check-blank-color`  | `#453C4F` | Color       |
+| `--pg-input-check-chcked-color`  | `#453C4F`  | Color       |
+| `--pg-icon-size` | `1.5rem`  | Width / Height      |

package/pg/inputCheckList/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <pg-input-check-list part="input"></pg-input-check-list>
+  <code>Value: <span part="value"></span></code>
+</div>

package/pg/inputCheckList/__examples__/basic/basic.ts

@@ -0,0 +1,31 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputCheckList from 'pg/inputCheckList/inputCheckList';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-check-list-basic',
+  template
+})
+export default class XPgInputCheckListBasic extends HTMLElement {
+
+  @Part() $input: PgInputCheckList;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+      this.$input.value = ['uuid1', 'uuid3'];
+      this.$input.options = [
+        { value: 'uuid1', label: 'Item 1' },
+        { value: 'uuid2', label: 'Item 2' },
+        { value: 'uuid3', label: 'Item 3', disabled: true },
+        { value: 'uuid4', label: 'Item 4' }
+      ];
+      this.$value.innerText = this.$input.value.join(',');
+      this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e) {
+    const { value } = e.detail;
+    this.$value.innerText = value.join(',');
+  }
+}

package/pg/inputCheckList/index.ts

@@ -0,0 +1,3 @@
+import PgInputCheckList from './inputCheckList';
+
+export default PgInputCheckList;

package/pg/inputCheckList/inputCheckList.css

@@ -0,0 +1,70 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.blank {
+  color: var(--pg-input-check-blank-color, #453C4F);
+}
+.blank [part="check"] {
+  visibility: hidden;
+}
+
+.checked {
+  color: var(--pg-input-check-checked-color, #453C4F);
+}
+
+[part="list"] {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+[part="list"] li {
+  display: flex;
+  flex-direction: column;
+}
+
+[part="list"] li:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+
+[part="list"] button {
+  display: flex;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  border-radius: 0.25rem;
+  align-items: center;
+  background: transparent;
+}
+
+[part="svg"] {
+  width: var(--pg-icon-check-size, 1.5rem);
+  height: var(--pg-icon-check-size, 1.5rem);
+}
+
+[part="list"] button span {
+  margin-left: 0.25rem;
+}
+
+[part="list"] button:not(:hover):active {
+  box-shadow: 0 0 0 3px var(--pg-input-check-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part="list"] button:not(:hover):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+[part="list"] button:not(:hover):focus-visible {
+  box-shadow: 0 0 0 3px var(--pg-input-check-focus-glow, rgb(79, 143, 249, 0.5));
+}
+[part="list"] button:not(:disabled):hover [part="path"] {
+  fill: #4f8ff9;
+}
+[part="list"] button:not(:disabled):hover span {
+  color: #4f8ff9;
+}
+[part="list"] button:disabled {
+  color: #AAA;
+}

package/pg/inputCheckList/inputCheckList.html

@@ -0,0 +1 @@
+<ul part="list"></ul>

package/pg/inputCheckList/inputCheckList.ts

@@ -0,0 +1,103 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputCheckList.html';
+import style from './inputCheckList.css';
+import { list, item } from '../shared/list';
+
+const NS_SVG = 'http://www.w3.org/2000/svg';
+const PATH_BLANK = 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z';
+const PATH_CHECKED = 'M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19';
+const PATH_CHECK = 'M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z';
+
+export interface Option {
+  value: any;
+  label: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'pg-input-check-list',
+  style,
+  template
+})
+export default class PgInputCheckList extends HTMLElement {
+  @Prop() value: string[] = [];
+  @Prop() options: Option[] = [];
+
+  @Part() $list: HTMLLIElement;
+
+  connectedCallback() {
+  }
+
+  handleClick(option) {
+    const checked = this.value.includes(option.value);
+    const li = item<HTMLLIElement>(this.$list, option, 'value');
+    const button = li.querySelector('button');
+    button?.classList.toggle('blank', checked);
+    button?.classList.toggle('checked', !checked);
+    li.querySelector('[part="path"]')?.setAttribute('d', checked ? PATH_BLANK : PATH_CHECKED);
+    if (checked) {
+      this.value.splice(this.value.findIndex(v => v === option.value), 1);
+    } else {
+      this.value.push(option.value);
+    }
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: this.value
+        }
+      })
+    );
+  }
+
+  render(changes) {
+    if (changes.options) {
+      list(
+        this.$list,
+        this.options,
+        'value',
+        (option) => {
+          const li = document.createElement('li');
+          const button = document.createElement('button');
+          if (option.disabled === true) {
+            button.disabled = true;
+          }
+          const checked = this.value.includes(option.value);
+          button.classList.toggle('checked', checked);
+          button.classList.toggle('blank', !checked);
+          const svg = document.createElementNS(NS_SVG, 'svg') as SVGElement;
+          svg.setAttribute('viewBox', '0 0 24 24');
+          svg.setAttribute('part', 'svg');
+          const path = document.createElementNS(NS_SVG, 'path') as SVGPathElement;
+          path.setAttribute('d', checked ? PATH_CHECKED : PATH_BLANK);
+          path.setAttribute('fill', 'currentColor');
+          path.setAttribute('part', 'path');
+          svg.appendChild(path);
+          const check = document.createElementNS(NS_SVG, 'path') as SVGPathElement;
+          check.setAttribute('d', PATH_CHECK);
+          check.setAttribute('fill', 'currentColor');
+          check.setAttribute('part', 'check');
+          svg.appendChild(check);
+          button.appendChild(svg);
+          const span = document.createElement('span');
+          span.innerText = option.label;
+          button.appendChild(span);
+          button.addEventListener('click', (e) => {
+            this.handleClick(option);
+          });
+          li.appendChild(button);
+          return li;
+        },
+        (option, $item) => {
+          $item.querySelector('button').innerText = option.label;
+        }
+      );
+    }
+    if (changes.value) {
+      //const value = [true, 'true'].includes(this.value);
+      //this.$path.setAttribute('d', value ? checked : unchecked);
+      //this.$button.classList.toggle('blank', !value);
+      //this.$button.classList.toggle('checked', value);
+    }
+  }
+}

package/pg/inputCheckList/templates/option.html

@@ -0,0 +1,8 @@
+<li>
+  <button class="checked"><svg viewBox="0 0 24 24" part="svg">
+      <path part="path" fill="currentColor" d="M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19"></path>
+      <path part="check" fill="currentColor" d="M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z"></path>
+    </svg>
+    <span part="label"></span>
+  </button>
+</li>

package/pg/inputFileLocal/README.md

@@ -0,0 +1,30 @@
+# `<pg-input-file-local>`
+
+The `pg-input-file-local` component allows a quick way to read uploaded files for local processing. Such as reading a JSON file or text based file. It can also take in image files.
+
+```typescript
+import '@pictogrammers/components/pg/inputLocalFile';
+import PgInputFileLocal from '@pictogrammers/components/pg/inputLocalFile';
+```
+
+```html
+<pg-input-file-local
+  acceptsFileType="json,txt">
+</pg-input-file-local>
+```
+
+## Attributes
+
+| Attributes          | Tested   | Description |
+| ------------------- | -------- | ----------- |
+| `accepts-file-type` | &#x2705; | Allowed files. |
+
+## Events
+
+| Events     | Detail |
+| ---------- | ------ |
+| `change`   | `{ value, name }` |
+
+## CSS Variables
+
+For CSS Variables please look at the `pg-button` as all CSS styles are shared.

package/pg/inputFileLocal/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <pg-input-file-local part="input" accepts-file-type="svg"></pg-input-file-local>
+  <code>onchange: <span part="value"></span></code>
+</div>

package/pg/inputFileLocal/__examples__/basic/basic.ts

@@ -0,0 +1,23 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputFileLocal from '../../inputFileLocal';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-file-local-basic',
+  template
+})
+export default class XPgInputFileLocalBasic extends HTMLElement {
+
+  @Part() $input: PgInputFileLocal;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e: CustomEvent) {
+    const { name, value } = e.detail;
+    this.$value.innerText = `${name} - ${value}`;
+  }
+}

package/pg/inputFileLocal/index.ts

@@ -0,0 +1,3 @@
+import PgInputFileLocal from './inputFileLocal';
+
+export default PgInputFileLocal;

package/pg/inputFileLocal/inputFileLocal.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+}
+
+[part="label"] {
+  display: grid;
+  grid-template-columns: 1.5rem auto;
+  grid-template-rows: auto;
+  font-family: var(--pg-font-family);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border: 1px solid var(--pg-button-border-color, #453C4F);
+  background-color: var(--pg-button-background-color, #fff);
+  color: var(--pg-button-color, #453C4F);
+  padding: var(--pg-button-padding, 0.25rem 0.5rem);
+  border-radius: 0.25rem;
+  outline: none;
+  --pg-icon-color: var(--pg-button-color, #453C4F);
+}
+
+[part="label"]:hover {
+  border: 1px solid var(--pg-button-hover-border-color, #453C4F);
+  background-color: var(--pg-button-hover-background-color, #453C4F);
+  color: var(--pg-button-hover-color, #fff);
+  --pg-icon-color: var(--pg-button-hover-color, #fff);
+}
+
+[part="label"]:active {
+  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
+  position: relative;
+}
+
+[part="label"]:focus {
+  position: relative;
+}
+
+[part="label"]:active::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+}
+
+[part="label"]:focus::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+}
+
+[part="file"] {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  height: 1.5rem;
+  grid-row: 1;
+  grid-column: 1 / span 2;
+  visibility: hidden;
+}
+
+[part="icon"] {
+  grid-row: 1;
+  grid-column: 1;
+  transform: translate(-0.25rem, 0.075rem);
+  pointer-events: none;
+}
+
+[part="text"] {
+  grid-row: 1;
+  grid-column: 2;
+  pointer-events: none;
+}

package/pg/inputFileLocal/inputFileLocal.html

@@ -0,0 +1,5 @@
+<label part="label">
+  <input type="file" part="file" />
+  <svg part="icon" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>
+  <span part="text">Upload a File...</span>
+</label>