@pictogrammers/components 0.5.13 → 0.5.14

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.13",
+    "version": "0.5.14",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/button/button.css

@@ -80,7 +80,7 @@
 
 [part=button].active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;
-  background-color: rgba(69, 60, 79, 0.1);
+  background-color: rgb(236, 235, 237);
   color: var(--pg-button-color, #453C4F);
 }
 [part=button].active:hover {

package/pg/buttonIncrement/buttonIncrement.ts

@@ -1,4 +1,4 @@
-import { Component, normalizeInt, Part, Prop } from '@pictogrammers/element';
+import { Component, normalizeInt, Prop } from '@pictogrammers/element';
 
 import template from './buttonIncrement.html';
 import style from './buttonIncrement.css';
@@ -32,8 +32,16 @@ export default class PgButtonIncrement extends PgButton {
           this.dispatchEvent(new CustomEvent('increment'));
         }, this.incrementStepDelay);
       }, this.incrementDelay);
+      const pointerLeave = () => {
+        this.dispatchEvent(new CustomEvent('finish'));
+        clearTimers();
+        this.$button.removeEventListener('pointerleave', pointerLeave);
+      };
+      this.$button.addEventListener('pointerleave', pointerLeave);
+    });
+    this.$button.addEventListener('pointerup', () => {
+      this.dispatchEvent(new CustomEvent('finish'));
+      clearTimers();
     });
-    this.$button.addEventListener('pointerup', clearTimers);
-    this.$button.addEventListener('pointerleave', clearTimers);
   }
 }

package/pg/inputNumber/__examples__/basic/basic.ts

@@ -26,5 +26,6 @@ export default class XPgInputNumberBasic extends HTMLElement {
   #handleInput(e: CustomEvent) {
     const { value } = e.detail;
     this.$value2.textContent = value;
+    this.$input.value = value;
   }
 }

package/pg/inputNumber/index.ts

@@ -0,0 +1,3 @@
+import PgInputNumber from './inputNumber';
+
+export default PgInputNumber;

package/pg/inputNumber/inputNumber.css

@@ -4,15 +4,28 @@
 }
 
 [part=input] {
-  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border: 1px solid var(--pg-input-number-border-color, #453C4F);
   border-radius: 0.125rem;
-  padding: var(--pg-input-text-padding, calc(0.5rem - 1px) 0.75rem);
+  padding-inline-start: var(--pg-input-number-padding-inline-start, var(--pg-input-number-padding-inline, 0.5rem));
+  padding-inline-end: var(--pg-input-number-padding-inline-end, var(--pg-input-number-padding-inline, 0.5rem));
+  padding-block-start: var(--pg-input-number-padding-block-start, var(--pg-input-number-padding-block, 0.25rem));
+  padding-block-end: var(--pg-input-number-padding-block-start, var(--pg-input-number-padding-block, 0.25rem));
   font-family: var(--pg-input-number-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);
+  min-width: calc(
+    100%
+    - var(--pg-input-number-padding-inline-start, var(--pg-input-number-padding-inline, 0.5rem))
+    - var(--pg-input-number-padding-inline-end, var(--pg-input-number-padding-inline, 0.5rem))
+    - 2px
+  );
+  max-width: calc(
+    var(--pg-input-number-max-width, 100%)
+    - var(--pg-input-number-padding-inline-start, var(--pg-input-number-padding-inline, 0.5rem))
+    - var(--pg-input-number-padding-inline-end, var(--pg-input-number-padding-inline, 0.5rem))
+    - 2px
+  );
   background-color: transparent;
   appearance: textfield;
 }
@@ -29,6 +42,40 @@
 [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));
+  z-index: 1;
+}
+
+[part=layout] {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--pg-input-number-gap, 0);
+}
+
+[part=input]:has(+ [part=buttonMinus]) {
+  border-right: 0;
+  border-top-right-radius: var(--pg-input-number-minus-border-radius, var(--pg-input-number-minus-border-top-right-radius, 0));
+  border-bottom-right-radius: var(--pg-input-number-minus-border-radius, var(--pg-input-number-minus-border-top-right-radius, 0));;
+}
+
+[part=buttonMinus] {
+  --pg-button-border-radius: var(--pg-input-number-minus-border-radius, var(--pg-input-number-minus-border-top-right-radius, 0));;
+  margin-left: -1px;
+  --pg-button-padding-inline: var(--pg-input-number-minus-padding-inline, unset);
+  --pg-button-padding-block: var(--pg-input-number-minus-padding-block, unset);
 }
+
+[part=buttonPlus] {
+  --pg-button-border-radius: var(
+    --pg-input-number-plus-border-radius,
+    var(--pg-input-number-plus-border-top-right-radius, 0)
+    var(--pg-input-number-plus-border-bottom-right-radius, 0.25rem)
+    var(--pg-input-number-plus-border-bottom-left-radius, 0.25rem)
+    var(--pg-input-number-plus-border-top-left-radius, 0)
+  );
+  margin-left: -1px;
+  --pg-button-padding-inline: var(--pg-input-number-plus-padding-inline, unset);
+  --pg-button-padding-block: var(--pg-input-number-plus-padding-block, unset);
+}

package/pg/inputNumber/inputNumber.html

@@ -1 +1,9 @@
-<input part="input" type="number" />
+<div part="layout">
+  <input part="input" type="number" />
+  <pg-button-increment part="buttonMinus">
+    <pg-icon path="M19,13H5V11H19V13Z"></pg-icon>
+  </pg-button-increment>
+  <pg-button-increment part="buttonPlus">
+    <pg-icon path="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></pg-icon>
+  </pg-button-increment>
+</div>

package/pg/inputNumber/inputNumber.ts

@@ -1,7 +1,8 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, normalizeFloat } from '@pictogrammers/element';
 
 import template from './inputNumber.html';
 import style from './inputNumber.css';
+import PgButtonIncrement from '../buttonIncrement/buttonIncrement';
 
 @Component({
   selector: 'pg-input-number',
@@ -10,22 +11,48 @@ import style from './inputNumber.css';
 })
 export default class PgInputNumber extends HTMLElement {
   @Prop() name: string = '';
-  @Prop() value: string = '';
+  @Prop(normalizeFloat) value: number = 0;
+  @Prop(normalizeFloat) min: number = 0;
+  @Prop(normalizeFloat) max: number = 100;
+  @Prop(normalizeFloat) step: number = 1;
   @Prop() placeholder: string = '';
   @Prop() readOnly: boolean = false;
+  @Prop() disableButtons: boolean = false;
 
   @Part() $input: HTMLInputElement;
+  @Part() $buttonMinus: PgButtonIncrement;
+  @Part() $buttonPlus: PgButtonIncrement;
 
   connectedCallback() {
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$buttonMinus.addEventListener('increment', (e: any) => {
+      this.#triggerInput(this.value - this.step);
+    });
+    this.$buttonPlus.addEventListener('increment', (e: any) => {
+      this.#triggerInput(this.value + this.step);
+    });
+    this.$buttonMinus.addEventListener('finish', (e: any) => {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: this.value,
+        },
+      }));
+    });
+    this.$buttonPlus.addEventListener('finish', (e: any) => {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: this.value,
+        },
+      }));
+    });
   }
 
   skipValue = false;
 
   render(changes) {
     if (changes.value && !this.skipValue) {
-      this.$input.value = this.value;
+      this.$input.value = `${this.value}`;
     }
     if (changes.placeholder) {
       this.$input.placeholder = this.placeholder;
@@ -36,20 +63,24 @@ export default class PgInputNumber extends HTMLElement {
     this.skipValue = false;
   }
 
-  handleInput(e) {
-    e.stopPropagation();
-    this.skipValue = true;
-    this.value = e.target.value;
+  #triggerInput(value) {
     this.dispatchEvent(
       new CustomEvent('input', {
         detail: {
-          value: e.target.value,
-          name: e.name
+          value: value,
+          name: this.name,
         }
       })
     );
   }
 
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    const value = parseInt(e.target.value ?? '0', 10);
+    this.#triggerInput(value);
+  }
+
   handleChange(e) {
     this.dispatchEvent(
       new CustomEvent('change', {

package/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.

package/pg/inputRadio/__examples__/basic/basic.html

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

package/pg/inputRadio/__examples__/basic/basic.ts

@@ -0,0 +1,31 @@
+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: any) {
+    const { value } = e.detail;
+    this.$input.value = value;
+    this.$value.textContent = value;
+  }
+}

package/pg/inputRadio/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>

package/pg/inputRadio/basic/basic.ts

@@ -0,0 +1,23 @@
+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.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e) {
+    var value = e.target.value;
+    this.$value.innerText = value;
+  }
+}

package/pg/inputRadio/index.ts

@@ -0,0 +1,3 @@
+import PgInputRadio from './inputRadio';
+
+export default PgInputRadio;

package/pg/inputRadio/inputRadio.css

@@ -0,0 +1,5 @@
+[part=items] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}

package/pg/inputRadio/inputRadio.html

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

package/pg/inputRadio/inputRadio.ts

@@ -0,0 +1,60 @@
+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,
+      create: ($item: PgInputRadioItem, item) => {
+        $item.addEventListener('change', () => {
+          Array.from(this.$items.children).forEach(($ele: PgInputRadioItem) => {
+            if ($ele === $item) {
+              $ele.checked = true;
+            } else {
+              $ele.checked = false;
+            }
+          });
+          this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+              value: item.value,
+            }
+          }))
+        });
+        // set initial checked
+        if (item.value === this.value) {
+          $item.checked = true;
+        }
+      }
+    });
+  }
+
+  render(changes) {
+    if (changes.value && this.items.length) {
+      Array.from(this.$items.children).forEach(($ele: PgInputRadioItem) => {
+        if ($ele.value === this.value) {
+          $ele.checked = true;
+        } else {
+          $ele.checked = false;
+        }
+      });
+    }
+  }
+}

package/pg/inputRadio copy/README.md

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

package/pg/inputRadio copy/inputRadio.html

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

package/pg/inputRadio copy/inputRadio.ts

@@ -0,0 +1,19 @@
+import { Component, Prop, Part, normalizeBoolean } from '@pictogrammers/element';
+
+import template from './inputRadio.html';
+import style from './inputRadio.css';
+
+@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() $input: HTMLInputElement;
+}

package/pg/inputRadioItem/README.md

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

package/pg/inputRadioItem/inputRadioItem.css

@@ -0,0 +1,27 @@
+svg:hover [part="path"] {
+  fill: #4f8ff9;
+}
+
+label {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+[part="input"] {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+[part="input"]:not(:checked) + svg [part="check"] {
+  display: none;
+}
+
+svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: -0.5rem;
+}

package/pg/inputRadioItem/inputRadioItem.html

@@ -0,0 +1,8 @@
+<label>
+  <input part="input" type="radio" />
+  <svg viewBox="0 0 24 24">
+    <path part="path" d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
+    <path part="check" d="M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path>
+  </svg>
+  <span part="label"></span>
+</label>

package/pg/inputRadioItem/inputRadioItem.ts

@@ -0,0 +1,36 @@
+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 = '';
+  @Prop() checked: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+  @Part() $label: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', () => {
+      this.dispatchEvent(new CustomEvent('change'));
+    });
+  }
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.value) {
+      this.$input.textContent = this.label;
+    }
+    if (changes.checked) {
+      this.$input.checked = this.checked;
+    }
+  }
+}

package/pg/inputText/inputText.css

@@ -6,16 +6,26 @@
 [part=input] {
   border: 1px solid var(--pg-input-text-border-color, #453C4F);
   border-radius: 0.125rem;
-  padding-inline-start: var(--pg-input-text-padding-inline, var(--pg-input-text-padding-inline-start, 0.5rem));
-  padding-inline-end: var(--pg-input-text-padding-inline, var(--pg-input-text-padding-inline-end, 0.5rem));
-  padding-block-start: var(--pg-input-text-padding-block, var(--pg-input-text-padding-block-start, 0.25rem));
-  padding-block-end: var(--pg-input-text-padding-block, var(--pg-input-text-padding-block-start, 0.25rem));
+  padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
   font-family: var(--pg-input-text-font-family, var(--pg-font-family));
   font-size: 1rem;
   outline: none;
   field-sizing: content;
-  min-width: calc(100% - 1rem - 2px);
-  max-width: calc(var(--pg-input-text-max-width, 100%) - 1.5rem - 2px);
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  max-width: calc(
+    var(--pg-input-text-max-width, 100%)
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
   background-color: transparent;
 }
 

package/pg/jsonNumber/jsonNumber.css

@@ -10,9 +10,19 @@
 
 [part=value] {
   user-select: text;
-  --pg-input-text-padding-inline: 0.25rem;
-  --pg-input-text-border-color: transparent;
+  --pg-input-number-border-color: transparent;
   --pg-input-number-font-family: var(--pg-json-font-family);
+  --pg-input-number-padding-block: 0;
+  --pg-input-number-padding-inline: 0.25rem;
+  --pg-input-number-gap: 0.5rem;
+  --pg-input-number-minus-padding-inline: 0;
+  --pg-input-number-minus-padding-block: 0;
+  --pg-input-number-plus-padding-inline: 0;
+  --pg-input-number-plus-padding-block: 0;
+  --pg-icon-width: 1rem;
+  --pg-icon-height: 1rem;
+  --pg-input-number-plus-border-radius: 0.25rem;
+  --pg-input-number-minus-border-radius: 0.25rem;
   display: inline-flex;
   vertical-align: middle;
   margin: 0 -0.25rem;

package/pg/jsonNumber/jsonNumber.ts

@@ -19,6 +19,7 @@ export default class PgJsonNumber extends HTMLElement {
 
   connectedCallback() {
     this.$value.addEventListener('input', (e: any) => {
+      this.$value.value = e.detail.value;
       this.dispatchEvent(
         new CustomEvent('update', {
           detail: {
@@ -36,7 +37,7 @@ export default class PgJsonNumber extends HTMLElement {
       this.$key.textContent = this.key;
     }
     if (changes.value) {
-      this.$value.value = `${this.value}`;
+      this.$value.value = this.value;
     }
   }
 }

package/pg/jsonString/jsonString.css

@@ -10,9 +10,10 @@
 
 [part=value] {
   user-select: text;
-  --pg-input-text-padding-inline: 0.25rem;
   --pg-input-text-border-color: transparent;
   --pg-input-text-font-family: var(--pg-json-font-family);
+  --pg-input-text-padding-block: 0;
+  --pg-input-text-padding-inline: 0.25rem;
   display: inline-flex;
   vertical-align: middle;
   margin: 0 -0.25rem;