Buttons on input number

Author: Templarian

src/components/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);
   }
 }

src/components/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;
   }
 }

src/components/pg/inputNumber/inputNumber.css

@@ -6,13 +6,16 @@
 [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);
+  padding-inline-start: var(--pg-input-number-padding-inline, var(--pg-input-number-padding-inline-start, 0.5rem));
+  padding-inline-end: var(--pg-input-number-padding-inline, var(--pg-input-number-padding-inline-end, 0.5rem));
+  padding-block-start: var(--pg-input-number-padding-block, var(--pg-input-number-padding-block-start, 0.25rem));
+  padding-block-end: var(--pg-input-number-padding-block, var(--pg-input-number-padding-block-start, 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% - 1rem - 2px);
+  max-width: calc(var(--pg-input-number-max-width, 100%) - 1.5rem - 2px);
   background-color: transparent;
   appearance: textfield;
 }
@@ -29,6 +32,32 @@
 [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;
+}
+
+[part=input]:has(+ [part=buttonMinus]) {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[part=buttonMinus] {
+  --pg-button-border-radius: 0;
+  margin-left: -1px;
+  --pg-button-padding-block: var(--pg-input-number-padding-block, unset);
+  --pg-button-padding-block-start: var(--pg-input-number-padding-block-start, unset);
+  --pg-button-padding-block-end: var(--pg-input-number-padding-block-end, unset);
 }
+
+[part=buttonPlus] {
+  --pg-button-border-radius: 0 0.25rem 0.25rem 0;
+  margin-left: -1px;
+}

src/components/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>

src/components/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', {