@pictogrammers/components 0.3.1

package/pg/inputFileLocal/inputFileLocal.ts

@@ -0,0 +1,82 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputFileLocal.html';
+import style from './inputFileLocal.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-input-file-local',
+  style,
+  template
+})
+export default class PgInputFileLocal extends HTMLElement {
+  @Prop() acceptsFileType: string = '';
+
+  @Part() $file: HTMLInputElement;
+
+  connectedCallback() {
+    this.$file.addEventListener('change', () => {
+      if (this.$file.files === null || this.$file.files.length === 0) {
+        alert('Error : No file selected');
+        return;
+      }
+
+      // first file selected by user
+      var file = this.$file.files[0];
+
+      // perform validation on file type & size if required
+      if (this.acceptsFileType) {
+        var types = this.acceptsFileType.split(',').join('|');
+        var regex = new RegExp(`(${types})$`, 'i');
+        if (file.name.match(regex) === null) {
+          alert(`${this.acceptsFileType} file only`);
+          return;
+        }
+      }
+
+      // read the file
+      var reader = new FileReader();
+
+      // file reading started
+      reader.addEventListener('loadstart', function () {
+        // console.log('File reading started');
+      });
+
+      // file reading finished successfully
+      reader.addEventListener('load', (e: any) => {
+        // contents of file in variable
+        var text = e.target.result;
+
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            detail: {
+              value: text,
+              name: file.name
+            }
+          })
+        );
+      });
+
+      // file reading failed
+      reader.addEventListener('error', function () {
+        alert('Error : Failed to read file');
+      });
+
+      // file read progress
+      reader.addEventListener('progress', function (e) {
+        if (e.lengthComputable == true) {
+          var percent_read = Math.floor((e.loaded / e.total) * 100);
+          // console.log(percent_read + '% read');
+        }
+      });
+
+      // read as text file
+      reader.readAsText(file);
+    });
+  }
+
+  render(changes) {
+
+  }
+}

package/pg/inputHexRgb/README.md

@@ -0,0 +1,15 @@
+# `<pg-input-hex-rgb>`
+
+The `pg-input-hex-rgb` component allows quick input of hex or RGB color input. This is commonly placed above the `pg-color` selection.
+
+```typescript
+import '@pictogrammers/components/pgInputHexRgb.js';
+```
+
+```html
+<pg-input-hex-rgb value="#000000"></pg-input-hex-rgb>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| value      |          | Hex |

package/pg/inputHexRgb/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <pg-input-hex-rgb part="input" value="#000000"></pg-input-hex-rgb>
+  <code>Selected: <span part="value"></span></code>
+</div>

package/pg/inputHexRgb/__examples__/basic/basic.ts

@@ -0,0 +1,23 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputHexRgb from '../../inputHexRgb';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-hex-rgb-basic',
+  template
+})
+export default class XPgInputHexRgbBasic extends HTMLElement {
+
+  @Part() $input: PgInputHexRgb;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e: CustomEvent) {
+    var { value } = e.target as any;
+    this.$value.innerText = `${value}`;
+  }
+}

package/pg/inputHexRgb/index.ts

@@ -0,0 +1,3 @@
+import PgInputHexRgb from './inputHexRgb';
+
+export default PgInputHexRgb;

package/pg/inputHexRgb/inputHexRgb.css

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+}
+
+:host > div {
+  display: grid;
+  grid-template-rows: auto 1rem 2rem 1rem 2rem 1rem 2rem;
+  grid-template-rows: 1fr;
+}
+
+[part~="hex"] {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+[part~="labelRed"] {
+  grid-row: 1;
+  grid-column: 2;
+  background: red;
+}
+
+[part~="red"] {
+  grid-row: 1;
+  grid-column: 3;
+}
+
+[part~="labelGreen"] {
+  grid-row: 1;
+  grid-column: 4;
+  background: green;
+  color: white;
+}
+
+[part~="green"] {
+  grid-row: 1;
+  grid-column: 5;
+}
+
+[part~="labelBlue"] {
+  grid-row: 1;
+  grid-column: 6;
+  background: blue;
+  color: white;
+}
+
+[part~="blue"] {
+  grid-row: 1;
+  grid-column: 7;
+}
+
+[part~="labelRed"],
+[part~="labelGreen"],
+[part~="labelBlue"] {
+  display: flex;
+  margin-left: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem 0 0 0.25rem;
+  color: white;
+  min-width: 1rem;
+}
+
+[part~="hex"] {
+  border-radius: 0.25rem;
+  min-width: 4rem;
+}
+
+[part~="hex"],
+[part~="red"],
+[part~="green"],
+[part~="blue"] {
+  outline: none;
+  font-size: 1rem;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  width: calc(100% - 1rem);
+}
+
+[part~="red"],
+[part~="green"],
+[part~="blue"] {
+  border-radius: 0 0.25rem 0.25rem 0;
+  -moz-appearance: textfield;
+  width: calc(100% - 1rem);
+  min-width: 2rem;
+}
+
+[part~="red"]::-webkit-inner-spin-button,
+[part~="red"]::-webkit-outer-spin-button,
+[part~="green"]::-webkit-inner-spin-button,
+[part~="green"]::-webkit-outer-spin-button,
+[part~="blue"]::-webkit-inner-spin-button,
+[part~="blue"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

package/pg/inputHexRgb/inputHexRgb.html

@@ -0,0 +1,9 @@
+<div>
+  <input part="hex" type="text" />
+  <label part="labelRed">R</label>
+  <input part="red" type="number" step="1" min="0" max="255" />
+  <label part="labelGreen">G</label>
+  <input part="green" type="number" step="1" min="0" max="255" />
+  <label part="labelBlue">B</label>
+  <input part="blue" type="number" step="1" min="0" max="255" />
+</div>

package/pg/inputHexRgb/inputHexRgb.ts

@@ -0,0 +1,79 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import { normalizeHex, hexToRgb, rgbToHex } from './utils';
+
+import template from './inputHexRgb.html';
+import style from './inputHexRgb.css';
+
+@Component({
+  selector: 'pg-input-hex-rgb',
+  style,
+  template
+})
+export default class PgInputHexRgb extends HTMLElement {
+  @Prop() value: string = '#000000';
+
+  @Part() $hex: HTMLInputElement;
+  @Part() $red: HTMLInputElement;
+  @Part() $green: HTMLInputElement;
+  @Part() $blue: HTMLInputElement;
+
+  connectedCallback() {
+    this.$hex.value = this.value;
+    this.updateRgb();
+    this.$hex.addEventListener('input', this.updateRgbDispatch.bind(this));
+    this.$red.addEventListener('input', this.updateHexDispatch.bind(this));
+    this.$green.addEventListener('input', this.updateHexDispatch.bind(this));
+    this.$blue.addEventListener('input', this.updateHexDispatch.bind(this));
+  }
+
+  updateRgb() {
+    const hex = normalizeHex(this.$hex.value);
+    const rgb = hexToRgb(hex);
+    if (rgb !== null) {
+      this.$red.value = rgb.r.toString();
+      this.$green.value = rgb.g.toString();
+      this.$blue.value = rgb.b.toString();
+    }
+  }
+
+  updateRgbDispatch() {
+    this.updateRgb();
+    this.dispatchSelect();
+  }
+
+  updateHexDispatch() {
+    this.$hex.value = rgbToHex(
+      parseInt(this.$red.value || '0', 10),
+      parseInt(this.$green.value || '0', 10),
+      parseInt(this.$blue.value || '0', 10)
+    );
+    this.dispatchSelect();
+  }
+
+  dispatchSelect() {
+    const hex = normalizeHex(this.$hex.value);
+    const rgb = rgbToHex(
+      parseInt(this.$red.value || '0', 10),
+      parseInt(this.$green.value || '0'),
+      parseInt(this.$blue.value || '0')
+    );
+    this.value = hex;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          hex,
+          rgb
+        }
+      })
+    );
+  }
+
+  render() {
+    const hex = normalizeHex(this.value);
+    const rgb = hexToRgb(hex);
+    this.$hex.value = hex;
+    this.$red.value = `${rgb ? rgb.r : 0}`;
+    this.$green.value = `${rgb ? rgb.g : 0}`;
+    this.$blue.value = `${rgb ? rgb.b : 0}`;
+  }
+}

package/pg/inputHexRgb/utils.ts

@@ -0,0 +1,27 @@
+export function hexToRgb(hex): { r: number, g: number, b: number} | null {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+  } : null;
+};
+
+export function normalizeHex(hex: string) {
+  const h = hex.toUpperCase();
+  if (h.length === 7) {
+    return h;
+  } else if (h.length === 4) {
+    return `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`;
+  }
+  return '#000000';
+}
+
+export function cToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+};
+
+export function rgbToHex(r, g, b) {
+  return "#" + cToHex(r) + cToHex(g) + cToHex(b);
+};

package/pg/inputRange/README.md

@@ -0,0 +1,18 @@
+# `<pg-input-range>`
+
+The `pg-input-range` component creates an input range slider.
+
+```typescript
+import '@pictogrammers/components/pgInputRange';
+import { PgInputRange } from '@pictogrammers/components/pgInputRange';
+```
+
+```html
+<pg-input-range value="50" min="1" max="100"></pg-input-range>
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| min        |          | Min |
+| max        |          | Max |
+| step       |          | Step = 1 |

package/pg/inputRange/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-range part="input" value="50"></pg-input-range>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>

package/pg/inputRange/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputRange from '../../inputRange';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-range-basic',
+  template
+})
+export default class XPgInputRangeBasic extends HTMLElement {
+
+  @Part() $input: PgInputRange;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+  }
+
+  handleChange(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value1.innerText = value;
+  }
+
+  handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.innerText = value;
+  }
+}

package/pg/inputRange/index.ts

@@ -0,0 +1,3 @@
+import PgInputRange from './inputRange';
+
+export default PgInputRange;

package/pg/inputRange/inputRange.html

@@ -0,0 +1 @@
+<input part="input" type="range" />

package/pg/inputRange/inputRange.ts

@@ -0,0 +1,53 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputRange.html';
+import style from './inputRange.css';
+
+@Component({
+  selector: 'pg-input-range',
+  style,
+  template
+})
+export default class PgInputRange extends HTMLElement {
+  @Prop() min: string = '0';
+  @Prop() max: string = '100';
+  @Prop() step: string = '1';
+  @Prop() name: string = '';
+
+  @Part() $input: HTMLInputElement;
+
+  render() {
+    this.$input.min = this.min;
+    this.$input.max = this.max;
+    this.$input.step = this.step;
+  }
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+  }
+
+  handleChange(e) {
+    const { value } = e.target;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value,
+          name: this.name
+        }
+      })
+    );
+  }
+
+  handleInput(e) {
+    const { value } = e.target;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value,
+          name: this.name
+        }
+      })
+    );
+  }
+}

package/pg/inputSelect/README.md

@@ -0,0 +1,25 @@
+# `<pg-input-select>`
+
+The `pg-input-select` component creates an select drop down.
+
+```typescript
+import '@pictogrammers/components/pgInputSelect';
+import { PgInputSelect } '@mdi/components/pgInputSelect';
+```
+
+```html
+<pg-input-select></pg-input-select>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| options    |          | `[{ label: 'hello', value: 'world' }]` |
+| value      |          | `world` |
+
+## Events
+
+| Event     | Tested   | Detail |
+| --------- | -------- | ----------- |
+| change    |          | `{ label: 'hello', value: 'world' }` |

package/pg/inputSelect/__examples__/basic/basic.html

@@ -0,0 +1,6 @@
+<div class="example">
+  <pg-input-select part="input"></pg-input-select>
+  <div>
+    <code>onchange: <span part="value"></span></code>
+  </div>
+</div>

package/pg/inputSelect/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputSelect from '../../inputSelect';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-select-basic',
+  template
+})
+export default class XPgInputSelectBasic extends HTMLElement {
+
+  @Part() $input: PgInputSelect;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+      { label: 'Option 4', value: 'option4' }
+    ];
+    this.$input.value = this.$input.options[1].value;
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e) {
+    const { value } = e.detail;
+    this.$value.innerText = `${value}`;
+  }
+}

package/pg/inputSelect/index.ts

@@ -0,0 +1,3 @@
+import PgInputSelect from './inputSelect';
+
+export default PgInputSelect;

package/pg/inputSelect/inputSelect.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family);
+}
+
+[part="wrapper"] {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100% 0;
+}
+
+[part="select"] {
+  grid-row: 1;
+  grid-column: 1;
+  border: 1px solid var(--pg-input-select-border-color, #453C4F);
+  border-radius: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+  font-size: 1rem;
+  outline: 0;
+  -webkit-appearance: none;
+}
+
+[part="select"]:focus {
+  box-shadow: 0 0 0 3px rgba(79, 143, 249, 0.5);
+}
+
+[part="chevron"] {
+  grid-row: 1;
+  grid-column: 2;
+  pointer-events: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+  transform: translate(-2rem, 0);
+}

package/pg/inputSelect/inputSelect.html

@@ -0,0 +1,4 @@
+<div part="wrapper">
+  <select part="select"></select>
+  <svg part="chevron" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+</div>

package/pg/inputSelect/inputSelect.ts

@@ -0,0 +1,57 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputSelect.html';
+import style from './inputSelect.css';
+
+interface InputSelectItem {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pg-input-select',
+  style,
+  template
+})
+export default class PgInputSelect extends HTMLElement {
+  @Prop() options: InputSelectItem[] = [];
+  @Prop() value: string;
+  @Prop() name: string = '';
+
+  @Part() $select: HTMLSelectElement;
+
+  render(changes) {
+    if (changes.options) {
+      this.options.forEach(o => {
+        const option = document.createElement('option');
+        option.innerText = o.label;
+        option.value = o.value;
+        this.$select.appendChild(option);
+      });
+      if (this.$select.value !== this.value) {
+        this.$select.value = this.value;
+      }
+    }
+    if (changes.value) {
+      if (this.$select.value !== this.value) {
+        this.$select.value = this.value;
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.$select.addEventListener('change', this.handleSelect.bind(this));
+  }
+
+  handleSelect(e) {
+    const { value } = e.target;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value,
+          name: this.name
+        }
+      })
+    )
+  }
+}

package/pg/inputText/README.md

@@ -0,0 +1,27 @@
+# `<pg-input-text>`
+
+The `pg-input-text` component creates an input that accepts text input.
+
+```typescript
+import '@pictogrammers/components/pgInputText';
+import { PgInputText } from '@pictogrammers/components/pgInputText';
+```
+
+```html
+<pg-input-text value="50"></pg-input-text>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |

package/pg/inputText/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-text part="input" value="Hello World!"></pg-input-text>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>