@pictogrammers/components 0.5.14 → 0.5.15

package/package.json

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

package/pg/inputNumber/inputNumber.ts

@@ -26,6 +26,16 @@ export default class PgInputNumber extends HTMLElement {
   connectedCallback() {
     this.$input.addEventListener('input', this.handleInput.bind(this));
     this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('beforeinput', (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowUp':
+          this.#triggerInput(this.value + this.step);
+          break;
+        case 'ArrowDown':
+          this.#triggerInput(this.value - this.step);
+          break;
+      }
+    });
     this.$buttonMinus.addEventListener('increment', (e: any) => {
       this.#triggerInput(this.value - this.step);
     });
@@ -33,18 +43,10 @@ export default class PgInputNumber extends HTMLElement {
       this.#triggerInput(this.value + this.step);
     });
     this.$buttonMinus.addEventListener('finish', (e: any) => {
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-        },
-      }));
+      this.#triggerChange(this.value);
     });
     this.$buttonPlus.addEventListener('finish', (e: any) => {
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: {
-          value: this.value,
-        },
-      }));
+      this.#triggerChange(this.value);
     });
   }
 
@@ -54,6 +56,12 @@ export default class PgInputNumber extends HTMLElement {
     if (changes.value && !this.skipValue) {
       this.$input.value = `${this.value}`;
     }
+    if (changes.min) {
+      this.$input.min = `${this.min}`;
+    }
+    if (changes.max) {
+      this.$input.max = `${this.max}`;
+    }
     if (changes.placeholder) {
       this.$input.placeholder = this.placeholder;
     }
@@ -64,6 +72,9 @@ export default class PgInputNumber extends HTMLElement {
   }
 
   #triggerInput(value) {
+    if (value < this.min || value > this.max) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent('input', {
         detail: {
@@ -81,14 +92,21 @@ export default class PgInputNumber extends HTMLElement {
     this.#triggerInput(value);
   }
 
-  handleChange(e) {
+  #triggerChange(value) {
+    if (value < this.min || value > this.max) {
+      return;
+    }
     this.dispatchEvent(
       new CustomEvent('change', {
         detail: {
-          value: e.target.value,
-          name: e.name
+          value: value,
+          name: this.name,
         }
       })
     );
   }
+
+  handleChange(e) {
+    this.#triggerChange(e.target.value);
+  }
 }

package/pg/inputRange/inputRange.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+input {
+  width: 100%;
+}

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

@@ -24,9 +24,9 @@ export default class XPgInputSelectBasic extends HTMLElement {
     this.$input.addEventListener('change', this.#handleChange.bind(this));
   }
 
-  #handleChange(e) {
+  #handleChange(e: any) {
     const { value } = e.detail;
     this.$input.value = value;
-    this.$value.innerText = `${value}`;
+    this.$value.textContent = `${value}`;
   }
 }

package/pg/inputSelect/inputSelect.css

@@ -24,7 +24,7 @@
 [part=label] {
   grid-row: 1;
   grid-column: 1;
-  padding: var(--pg-input-select-padding, 0.5rem 0.75rem);
+  padding: var(--pg-input-select-padding, 0.25rem 0.75rem);
   font-size: var(--pg-input-select-font-size, 1rem);
 }
 

package/pg/inputSelect/inputSelect.ts

@@ -25,12 +25,13 @@ export default class PgInputSelect extends HTMLElement {
 
   connectedCallback() {
     this.$button.addEventListener('click', this.#handleClick.bind(this));
+    this.$button.addEventListener('keydown', this.#handleKeyPress.bind(this));
   }
 
   render(changes) {
     if (changes.value || changes.default) {
       this.$label.textContent = this.value
-        ? this.value
+        ? (this.options.find(x => x.value === this.value) ?? { label: this.value }).label
         : this.default
           ? this.default.label
           : '\u00A0'; // nbsp
@@ -45,16 +46,68 @@ export default class PgInputSelect extends HTMLElement {
       source: this.$button,
       default: this.default,
       value: this.options.find(x => x.value === this.value) ?? null,
-      items: this.options
+      items: this.options,
     });
     if (result !== undefined) {
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
-          value: result.value
-        }
+          value: result.value,
+        },
       }));
       this.$label.textContent = result.label;
     }
     this.#menuOpen = false;
   }
+
+  #handleKeyPress(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (this.options.length <= 1) {
+          return;
+        }
+        this.#handleKeyDownArrowDown();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (this.options.length <= 1) {
+          return;
+        }
+        this.#handleKeyDownArrowUp();
+        break;
+    }
+  }
+
+  #handleKeyDownArrowDown() {
+    const index = this.options.findIndex(x => x.value === this.value);
+    let newValue = '';
+    if (index === -1 || index === this.options.length - 1) {
+      // select first or loop to top
+      newValue = this.options[0].value;
+    } else {
+      newValue = this.options[index + 1].value;
+    }
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        value: newValue,
+      },
+    }));
+  }
+
+  #handleKeyDownArrowUp() {
+    const index = this.options.findIndex(x => x.value === this.value);
+    const normalizeIndex = index === -1 ? 0 : index;
+    let newValue = '';
+    if (normalizeIndex === 0) {
+      // loop to bottom
+      newValue = this.options[this.options.length - 1].value;
+    } else {
+      newValue = this.options[normalizeIndex - 1].value;
+    }
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        value: newValue,
+      },
+    }));
+  }
 }