@schukai/monster 4.40.1 → 4.42.0

package/source/components/form/quantity.mjs

@@ -0,0 +1,336 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+  assembleMethodSymbol,
+  registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+import { QuantityStyleSheet } from "./stylesheet/quantity.mjs";
+import "./input-group.mjs";
+
+export { Quantity };
+
+const controlElementSymbol = Symbol("quantityControl");
+const decrementButtonSymbol = Symbol("decrementButton");
+const incrementButtonSymbol = Symbol("incrementButton");
+const inputElementSymbol = Symbol("quantityInput");
+const holdTimerSymbol = Symbol("holdTimer");
+const holdIntervalSymbol = Symbol("holdInterval");
+
+/**
+ * This Control shows an input field with increment and decrement buttons.
+ *
+ * @fragments /fragments/components/form/quantity/
+ *
+ * @example /examples/components/form/quantity-simple
+ *
+ * @since 4.41.0
+ * @copyright schukai GmbH
+ * @summary A beautiful quantity control with increment and decrement buttons
+ * @fires monster-quantity-change
+ */
+class Quantity extends CustomControl {
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/form/quantity@@instance");
+  }
+
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+    applyEditableState.call(this);
+    clampAndRender.call(this, this.getOption("value"));
+
+    return this;
+  }
+
+  /**
+   * Current numeric value
+   * @return {number|null}
+   */
+  get value() {
+    return this.getOption("value");
+  }
+
+  /**
+   * Sets the value programmatically (including clamping & FormValue)
+   * @param {number|string|null} v
+   */
+  set value(v) {
+    const n = normalizeNumber(v, this.getOption("precision"));
+    clampAndRender.call(this, n);
+  }
+
+  /**
+   * Options
+   *
+   * @property {Object} templates
+   * @property {string} templates.main Main template
+   * @property {Object} templateMapping
+   * @property {string} templateMapping.plus Icon (SVG-Path) Plus
+   * @property {string} templateMapping.minus Icon (SVG-Path) Minus
+   * @property {Object} classes CSS classes
+   * @property {string} classes.button Button class (e.g. monster-button-outline-primary)
+   * @property {string} classes.input Additional class for input
+   * @property {Object} features Feature toggles
+   * @property {boolean} features.editable Allow manual input
+   * @property {boolean} features.hold Press-and-hold accelerates
+   * @property {boolean} features.enforceBounds Clamp value when manual input is out of bounds
+   * @property {number} value Current value
+   * @property {number} min Use Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY for no bounds
+   * @property {number} max Use Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY for no bounds
+   * @property {number} step Increment/decrement step
+   * @property {number} precision Round to N decimal places (null = no explicit rounding)
+   * @property {boolean} disabled Disable the input field (also disables manual input)
+   * @property {string} placeholder Placeholder text
+   * @property {string} inputmode For mobile keyboards
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: { main: getTemplate() },
+      templateMapping: {
+        plus: `
+          <path d="M8 1a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2H9v5a1 1 0 1 1-2 0V9H2a1 1 0 1 1 0-2h5V2a1 1 0 0 1 1-1z"/>`,
+        minus: `
+          <path d="M2 7.5a1 1 0 0 0 0 1H14a1 1 0 1 0 0-2H2a1 1 0 0 0 0 1z"/>`,
+      },
+      classes: {
+        button: "monster-button-outline-primary",
+        input: "",
+      },
+      features: {
+        editable: true,
+        hold: true,
+        enforceBounds: true,
+      },
+      value: 0,
+      min: 0,
+      max: Number.POSITIVE_INFINITY,
+      step: 1,
+      precision: null,
+
+      disabled: false,
+      placeholder: "",
+      inputmode: "decimal",
+    });
+  }
+
+  static getTag() {
+    return "monster-quantity";
+  }
+
+  // If you want a stylesheet, return it here.
+  static getCSSStyleSheet() {
+    return [QuantityStyleSheet];
+  }
+}
+
+/* -------------------------- internals ----------------------------------- */
+
+function initControlReferences() {
+  this[controlElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="control"]`,
+  );
+  this[decrementButtonSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="decrement"]`,
+  );
+  this[incrementButtonSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="increment"]`,
+  );
+  this[inputElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="input"]`,
+  );
+}
+
+function initEventHandler() {
+  const stepOnce = (dir) => {
+    const step = Number(this.getOption("step")) || 1;
+    const cur = toNumberOr(this.value, 0);
+    const next = cur + (dir > 0 ? step : -step);
+    clampAndRender.call(this, next, {
+      fire: true,
+      kind: dir > 0 ? "increment" : "decrement",
+    });
+  };
+
+  const startHold = (dir) => {
+    if (!this.getOption("features.hold")) return;
+    clearTimeout(this[holdTimerSymbol]);
+    clearInterval(this[holdIntervalSymbol]);
+
+    // After a short delay, repeat faster
+    this[holdTimerSymbol] = setTimeout(() => {
+      this[holdIntervalSymbol] = setInterval(() => stepOnce(dir), 60);
+    }, 300);
+  };
+
+  const stopHold = () => {
+    clearTimeout(this[holdTimerSymbol]);
+    clearInterval(this[holdIntervalSymbol]);
+  };
+
+  // Buttons
+  this[decrementButtonSymbol].addEventListener("click", (e) => stepOnce(-1));
+  this[incrementButtonSymbol].addEventListener("click", (e) => stepOnce(1));
+
+  // Press & hold (Mouse/Touch)
+  ["mousedown", "pointerdown", "touchstart"].forEach((ev) => {
+    this[decrementButtonSymbol].addEventListener(ev, () => startHold(-1));
+    this[incrementButtonSymbol].addEventListener(ev, () => startHold(1));
+  });
+  ["mouseup", "mouseleave", "pointerup", "touchend", "touchcancel"].forEach(
+    (ev) => {
+      this[decrementButtonSymbol].addEventListener(ev, stopHold);
+      this[incrementButtonSymbol].addEventListener(ev, stopHold);
+    },
+  );
+
+  // Keyboard on input
+  this[inputElementSymbol].addEventListener("keydown", (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      stepOnce(1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      stepOnce(-1);
+    }
+  });
+
+  // Manual input
+  this[inputElementSymbol].addEventListener("input", () => {
+    if (!this.getOption("features.editable")) return;
+    // Only store temporarily, clamp on blur/enter – but update FormValue immediately
+    const raw = this[inputElementSymbol].value;
+    const n = normalizeNumber(raw, this.getOption("precision"));
+    this.setOption("value", n);
+    this.setFormValue(n);
+    fireChanged.call(this, "input");
+  });
+
+  this[inputElementSymbol].addEventListener("blur", () => {
+    if (!this.getOption("features.editable")) return;
+    const n = normalizeNumber(
+      this[inputElementSymbol].value,
+      this.getOption("precision"),
+    );
+    clampAndRender.call(this, n, { fire: true, kind: "blur" });
+  });
+}
+
+function applyEditableState() {
+  const editable = !!this.getOption("features.editable");
+  this[inputElementSymbol].toggleAttribute("readonly", !editable);
+  this[inputElementSymbol].toggleAttribute(
+    "disabled",
+    !!this.getOption("disabled"),
+  );
+}
+
+function clampAndRender(n, opts = {}) {
+  const min = Number.isFinite(this.getOption("min"))
+    ? Number(this.getOption("min"))
+    : Number.NEGATIVE_INFINITY;
+  const max = Number.isFinite(this.getOption("max"))
+    ? Number(this.getOption("max"))
+    : Number.POSITIVE_INFINITY;
+
+  let value = n;
+  if (this.getOption("features.enforceBounds")) {
+    value = Math.min(max, Math.max(min, toNumberOr(n, 0)));
+  }
+
+  // Precision
+  const p = this.getOption("precision");
+  if (Number.isInteger(p) && p >= 0) {
+    value = Number(toFixedSafe(value, p));
+  }
+
+  // Render into input
+  this[inputElementSymbol].value =
+    value === null || Number.isNaN(value) ? "" : String(value);
+
+  // Options + FormValue
+  this.setOption("value", value);
+  this.setFormValue(value);
+
+  if (opts.fire) fireChanged.call(this, opts.kind || "programmatic");
+}
+
+function fireChanged(kind) {
+  fireCustomEvent(this, "monster-quantity-change", {
+    element: this,
+    value: this.value,
+    kind, // 'increment' | 'decrement' | 'input' | 'blur' | 'programmatic'
+  });
+}
+
+function normalizeNumber(v, precision) {
+  if (v === null || v === undefined || v === "") return null;
+  let n = Number(v);
+  if (!Number.isFinite(n)) return null;
+  if (Number.isInteger(precision) && precision >= 0) {
+    n = Number(toFixedSafe(n, precision));
+  }
+  return n;
+}
+
+function toNumberOr(v, dflt) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : dflt;
+}
+
+function toFixedSafe(n, p) {
+  // Prevents 1.00000000000002 effects
+  return (Math.round(n * Math.pow(10, p)) / Math.pow(10, p)).toFixed(p);
+}
+
+function getTemplate() {
+  // language=HTML
+  return `
+    <div data-monster-role="control" part="control">
+      <monster-input-group part="input-group">
+        <button type="button"
+                part="decrement-button"
+                data-monster-attributes="class path:classes.button"
+                data-monster-role="decrement"
+                aria-label="decrement">
+          <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"
+                        >\${minus}</svg>
+        </button>
+
+        <input data-monster-role="input"
+               part="input"
+               data-monster-attributes="
+                  class path:classes.input,
+                  placeholder path:placeholder,
+                  inputmode path:inputmode"
+               autocomplete="off" />
+
+        <button type="button"
+                part="increment-button"
+                data-monster-attributes="class path:classes.button"
+                data-monster-role="increment"
+                aria-label="increment">
+          <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor">\${plus}</svg>
+        </button>
+      </monster-input-group>
+    </div>
+  `;
+}
+
+registerCustomElement(Quantity);

package/source/components/form/style/quantity.pcss

@@ -0,0 +1,150 @@
+/* monster-quantity – Theme-aware using central Monster tokens */
+
+:host {
+  /* Size tokens */
+  --qty-height: 40px;
+  --qty-radius: 0; 
+  --qty-gap: var(--monster-space-4);
+  --qty-pad-x: var(--monster-space-4);
+
+  /* Anbindung an eure zentralen Tokens */
+  --qty-bg: var(--monster-theme-control-bg-color);
+  --qty-fg: var(--monster-theme-control-color);
+  --qty-border-color: var(--monster-theme-control-border-color);
+  --qty-outline: var(--monster-outline-width) solid var(--monster-theme-control-border-color);
+
+  /* Buttons */
+  --qty-btn-bg: var(--monster-bg-color-primary-3);
+  --qty-btn-bg-hover: var(--monster-bg-color-primary-4);
+  --qty-btn-bg-active: var(--monster-bg-color-primary-2);
+  --qty-btn-fg: var(--monster-color-primary-3);
+
+  /* Input */
+  --qty-input-fg: var(--monster-color-primary-1);
+  --qty-input-bg: transparent;
+
+  --qty-shadow:none; 
+  color: var(--qty-fg);
+  font-family: var(--monster-font-family);
+}
+
+/* Container */
+[part="control"] {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+/* Pill-Group */
+[part="input-group"] {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--qty-gap);
+  height: var(--qty-height);
+  padding-inline: var(--qty-pad-x);
+  background: var(--qty-bg);
+  color: var(--qty-fg);
+  border: var(--monster-theme-control-border-width, 1px)
+          var(--monster-theme-control-border-style, solid)
+          var(--qty-border-color);
+  border-radius: var(--qty-radius);
+  box-shadow: var(--qty-shadow);
+}
+
+/* Buttons */
+[part="decrement-button"],
+[part="increment-button"] {
+  display: inline-grid;
+  place-items: center;
+  width: calc(var(--qty-height) - var(--monster-space-4));
+  height: calc(var(--qty-height) - var(--monster-space-4));
+  border: 0;
+  border-radius: var(--qty-radius);
+  background: var(--qty-btn-bg);
+  color: var(--qty-btn-fg);
+  cursor: pointer;
+  transition: transform .08s ease, background-color .15s ease;
+}
+
+[part="decrement-button"] {
+  transform: translateX(-7px);
+}
+[part="increment-button"] {
+  transform: translateX(7px);
+}
+
+
+[part="decrement-button"]:hover,
+[part="increment-button"]:hover {
+  background: var(--qty-btn-bg-hover);
+}
+
+[part="decrement-button"]:active,
+[part="increment-button"]:active {
+  background: var(--qty-btn-bg-active);
+}
+
+[part="decrement-button"]:active {
+  transform: scale(.95) translateX(-7px);
+}
+[part="increment-button"]:active {
+  transform: scale(.95) translateX(7px);
+}
+
+[part="decrement-button"] svg,
+[part="increment-button"] svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  pointer-events: none;
+}
+
+/* Input */
+[part="input"] {
+  min-width: 2.5ch;
+  max-width: 6.5ch;
+  text-align: center;
+  font: inherit;
+  color: var(--qty-input-fg);
+  background: var(--qty-input-bg);
+  border: 0;
+  outline: none;
+  padding: 0 .25rem;
+  appearance: textfield; /* Safari */
+}
+
+/* Native Number-Spinner entfernen (falls type=number verwendet wird) */
+[part="input"]::-webkit-outer-spin-button,
+[part="input"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Fokus */
+:host(:focus-within) [part="input-group"] {
+  outline: var(--qty-outline);
+  outline-offset: 2px;
+}
+
+/* Disabled */
+:host([disabled]) [part="decrement-button"],
+:host([disabled]) [part="increment-button"] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+:host([disabled]) [part="input"] {
+  opacity: .75;
+  cursor: not-allowed;
+}
+
+/* Größen-Varianten */
+:host([data-size="compact"]) { --qty-height: 32px; }
+:host([data-size="large"])   { --qty-height: 48px; }
+
+/* Motion */
+@media (prefers-reduced-motion: reduce) {
+  [part="decrement-button"],
+  [part="increment-button"] { transition: none; }
+}
+

package/source/components/form/stylesheet/quantity.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {QuantityStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const QuantityStyleSheet = new CSSStyleSheet();
+
+try {
+  QuantityStyleSheet.insertRule(`
+@layer quantity { 
+:host{--qty-height:40px;--qty-radius:0;--qty-gap:var(--monster-space-4);--qty-pad-x:var(--monster-space-4);--qty-bg:var(--monster-theme-control-bg-color);--qty-fg:var(--monster-theme-control-color);--qty-border-color:var(--monster-theme-control-border-color);--qty-outline:var(--monster-outline-width) solid var(--monster-theme-control-border-color);--qty-btn-bg:var(--monster-bg-color-primary-3);--qty-btn-bg-hover:var(--monster-bg-color-primary-4);--qty-btn-bg-active:var(--monster-bg-color-primary-2);--qty-btn-fg:var(--monster-color-primary-3);--qty-input-fg:var(--monster-color-primary-1);--qty-input-bg:transparent;--qty-shadow:none;color:var(--qty-fg);font-family:var(--monster-font-family)}[part=control]{display:inline-flex;vertical-align:middle}[part=input-group]{align-items:center;background:var(--qty-bg);border:var(--monster-theme-control-border-width,1px) var(--monster-theme-control-border-style,solid) var(--qty-border-color);border-radius:var(--qty-radius);box-shadow:var(--qty-shadow);color:var(--qty-fg);display:inline-grid;gap:var(--qty-gap);grid-auto-flow:column;height:var(--qty-height);padding-inline:var(--qty-pad-x)}[part=decrement-button],[part=increment-button]{background:var(--qty-btn-bg);border:0;border-radius:var(--qty-radius);color:var(--qty-btn-fg);cursor:pointer;display:inline-grid;height:calc(var(--qty-height) - var(--monster-space-4));place-items:center;transition:transform .08s ease,background-color .15s ease;width:calc(var(--qty-height) - var(--monster-space-4))}[part=decrement-button]{transform:translateX(-7px)}[part=increment-button]{transform:translateX(7px)}[part=decrement-button]:hover,[part=increment-button]:hover{background:var(--qty-btn-bg-hover)}[part=decrement-button]:active,[part=increment-button]:active{background:var(--qty-btn-bg-active)}[part=decrement-button]:active{transform:scale(.95) translateX(-7px)}[part=increment-button]:active{transform:scale(.95) translateX(7px)}[part=decrement-button] svg,[part=increment-button] svg{display:block;height:18px;pointer-events:none;width:18px}[part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:var(--qty-input-bg);border:0;color:var(--qty-input-fg);font:inherit;max-width:6.5ch;min-width:2.5ch;outline:none;padding:0 .25rem;text-align:center}[part=input]::-webkit-inner-spin-button,[part=input]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(:focus-within) [part=input-group]{outline:var(--qty-outline);outline-offset:2px}:host([disabled]) [part=decrement-button],:host([disabled]) [part=increment-button]{cursor:not-allowed;opacity:.5}:host([disabled]) [part=input]{cursor:not-allowed;opacity:.75}:host([data-size=compact]){--qty-height:32px}:host([data-size=large]){--qty-height:48px}@media (prefers-reduced-motion:reduce){[part=decrement-button],[part=increment-button]{transition:none}} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}