Start wiring up number editing.

Author: Templarian

src/pg/inputNumber/README.md

@@ -0,0 +1,27 @@
+# `<pg-input-number>`
+
+The `pg-input-number` component creates an input that accepts number input.
+
+```typescript
+import '@pictogrammers/components/pgInputNumber';
+import PgInputNumber from '@pictogrammers/components/pgInputText';
+```
+
+```html
+<pg-input-number value="50"></pg-input-number>
+```
+
+## 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 }` |

src/pg/inputNumber/__examples__/basic/basic.html

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

src/pg/inputNumber/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputNumber from '../../inputNumber';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-number-basic',
+  template
+})
+export default class XPgInputNumberBasic extends HTMLElement {
+
+  @Part() $input: PgInputNumber;
+  @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.textContent = value;
+  }
+
+  #handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.textContent = value;
+  }
+}

src/pg/inputNumber/inputNumber.css

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family);
+}
+
+[part=input] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
+  font-family: var(--pg-font-family);
+  font-size: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(100% - 0.5rem - 2px);
+  max-width: calc(var(--pg-input-text-max-width, 100%) - 0.5rem - 2px);
+  background-color: transparent;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part=input]:focus {
+  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

src/pg/inputNumber/inputNumber.html

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

src/pg/inputNumber/inputNumber.spec.ts

@@ -0,0 +1,59 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './inputNumber';
+import PgInputText from './inputNumber';
+
+const PG_INPUT_TEXT = 'pg-input-text';
+
+describe('pg-input-text', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_INPUT_TEXT);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_INPUT_TEXT)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_INPUT_TEXT);
+    expect(props.length).toBe(3);
+    expect(props).toContain('name');
+    expect(props).toContain('value');
+    expect(props).toContain('placeholder');
+  });
+
+  it('should default value to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.value).toEqual('');
+  });
+
+  it('should set value to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.value = 'Hello World!';
+    const { $input } = component;
+    expect($input.value).toEqual('Hello World!');
+  });
+
+  it('should default placeholder to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.placeholder).toEqual('');
+  });
+
+  it('should set placeholder to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.placeholder = 'Hello World!';
+    const { $input } = component;
+    expect($input.placeholder).toEqual('Hello World!');
+  });
+
+});

src/pg/inputNumber/inputNumber.ts

@@ -0,0 +1,63 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputNumber.html';
+import style from './inputNumber.css';
+
+@Component({
+  selector: 'pg-input-number',
+  style,
+  template,
+})
+export default class PgInputNumber extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+}

src/pg/inputText/inputText.ts

@@ -60,4 +60,4 @@ export default class PgInputText extends HTMLElement {
       })
     );
   }
-}
+}

src/pg/jsonNumber/jsonNumber.html

@@ -1,5 +1,5 @@
 <div part="key"></div>
 <div part="seperator">:&nbsp;</div>
 <div part="container">
-  <div part="value"></div>
+  <pg-input-number part="value"></pg-input-number>
 </div>

src/pg/jsonString/jsonString.css

@@ -4,4 +4,7 @@
 
 [part=value] {
   user-select: text;
+  --pg-input-text-padding: 0 0.25rem;
+  display: inline-flex;
+  vertical-align: middle;
 }