Start wiring up radio list

Author: Templarian

src/components/pg/inputRadio/README.md

@@ -0,0 +1,3 @@
+# `<pg-input-radio>`
+
+The `pg-input-radio` creates a radio list of options a user can pick from.

src/components/pg/inputRadio/__examples__/basic/basic.html

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

src/components/pg/inputRadio/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputRadio from '../../inputRadio';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-radio-basic',
+  template,
+})
+export default class XPgInputRadioBasic extends HTMLElement {
+
+  @Part() $input: PgInputRadio;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.items.push({
+      label: 'Item 1',
+      value: 'item1',
+    }, {
+      label: 'Item 2',
+      value: 'item2',
+    });
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e) {
+    var value = e.target.value;
+    this.$value.innerText = value;
+  }
+}

src/components/pg/inputRadio/inputRadio.css

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

src/components/pg/inputRadio/inputRadio.html

@@ -0,0 +1,28 @@
+import { Component, Prop, Part, normalizeBoolean, forEach } from '@pictogrammers/element';
+
+import template from './inputRadio.html';
+import style from './inputRadio.css';
+import PgInputRadioItem from '../inputRadioItem/inputRadioItem';
+
+@Component({
+  selector: 'pg-input-radio',
+  style,
+  template,
+})
+export default class PgInputRadio extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop(normalizeBoolean) readOnly: boolean = false;
+  @Prop(normalizeBoolean) disabled: boolean = false;
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLInputElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: () => PgInputRadioItem,
+    });
+  }
+}

src/components/pg/inputRadio/inputRadio.ts

@@ -0,0 +1,3 @@
+# `PgInputRadioItem`
+
+The `PgInputRadioItem` is used internally as options are added to the `pg-input-radio`.

src/components/pg/inputRadioItem/README.md

@@ -0,0 +1 @@
+<label><input part="input" type="radio" /> <span part="label"></span></label>

src/components/pg/inputRadioItem/inputRadioItem.css

@@ -0,0 +1,23 @@
+import { Component, Prop, Part, normalizeBoolean } from '@pictogrammers/element';
+
+import template from './inputRadioItem.html';
+import style from './inputRadioItem.css';
+
+@Component({
+  selector: 'pg-input-radio-item',
+  style,
+  template,
+})
+export default class PgInputRadioItem extends HTMLElement {
+  @Prop() label: string = '';
+  @Prop() value: string = '';
+
+  @Part() $input: HTMLInputElement;
+  @Part() $label: HTMLSpanElement;
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+  }
+}