@kumori/aurora-wui-components 0.0.177 → 0.0.178

package/dist/components/axebow-input/axebow-input.d.ts

@@ -44,6 +44,10 @@ export declare class AxebowInput extends LitElement {
     addDialogLabels: AddDialogLabels;
     compact: boolean;
     integerOnly: boolean;
+    fixedWidth?: string;
+    fixedHeight?: string;
+    showStepper: boolean;
+    stepAmount: number;
     render(): TemplateResult<1>;
 }
 //# sourceMappingURL=axebow-input.d.ts.map

package/dist/components/axebow-input/axebow-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAA6B,MAAM,0BAA0B,CAAC;AACtF,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAC7H,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAED,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAE9C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BASX;IAE0B,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IAChB,QAAQ,UAAS;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,WAAW,CAAW;IACpC,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,aAAa,EAAE,YAAY,EAAE,CAAM;IACf,QAAQ,UAAS;IAChC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAC3D,YAAY,SAAM;IACjB,QAAQ,UAAS;IAClB,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,UAAS;IACrB,WAAW,SAAkB;IAC7B,gBAAgB,SAAmB;IAClC,mBAAmB,UAAQ;IAC3B,SAAS,UAAQ;IACd,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrF,eAAe,EAAE,eAAe,CAA6B;IAChE,OAAO,UAAS;IAChB,WAAW,UAAS;IAEjD,MAAM;CAuKP"}
+{"version":3,"file":"axebow-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAA6B,MAAM,0BAA0B,CAAC;AACtF,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAC7H,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAED,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAE9C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAaX;IAE0B,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IAChB,QAAQ,UAAS;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,WAAW,CAAW;IACpC,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,aAAa,EAAE,YAAY,EAAE,CAAM;IACf,QAAQ,UAAS;IAChC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAC3D,YAAY,SAAM;IACjB,QAAQ,UAAS;IAClB,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,UAAS;IACrB,WAAW,SAAkB;IAC7B,gBAAgB,SAAmB;IAClC,mBAAmB,UAAQ;IAC3B,SAAS,UAAQ;IACd,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrF,eAAe,EAAE,eAAe,CAA6B;IAChE,OAAO,UAAS;IAChB,WAAW,UAAS;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,UAAS;IACrB,UAAU,SAAK;IAE3C,MAAM;CA+KP"}

package/dist/components/axebow-input/axebow-numeric-input.d.ts

@@ -1,11 +1,25 @@
+import { PropertyValues } from 'lit';
 import { AxebowInputBase } from './axebow-input-base.js';
 export declare class AxebowNumericInput extends AxebowInputBase {
     static styles: import('lit').CSSResult[];
     max: number;
     min: number;
     integerOnly: boolean;
+    /** Opt-in exact field width/height (e.g. '6.1875rem' / '2.5rem'). Left
+     *  unset, every existing caller keeps the field's previous default sizing
+     *  unchanged. */
+    fixedWidth?: string;
+    fixedHeight?: string;
+    /** Adds a 22x38 +/- stepper flush against the field's right border,
+     *  wired to the same min/max/integerOnly rules as typed input. Off by
+     *  default - opt in per caller. */
+    showStepper: boolean;
+    stepAmount: number;
+    updated(changed: PropertyValues): void;
     protected handleChange(e: Event): void;
     protected handleKeyDown(e: KeyboardEvent): void;
+    private _bumpValue;
+    private _renderStepper;
     render(): import('lit-html').TemplateResult;
 }
 //# sourceMappingURL=axebow-numeric-input.d.ts.map

package/dist/components/axebow-input/axebow-numeric-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAGA,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BAAmC;IAEpB,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAEjD,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAgB/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IAMxC,MAAM;CAkBP"}
+{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BA+CX;IAE0B,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAEjD;;qBAEiB;IACW,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;uCAEmC;IACN,WAAW,UAAS;IACrB,UAAU,SAAK;IAE3C,OAAO,CAAC,OAAO,EAAE,cAAc;IAmB/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAgB/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IAMxC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IA2BtB,MAAM;CAoBP"}

package/dist/index.js

@@ -1520,9 +1520,67 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 		this.max = Number.MAX_SAFE_INTEGER;
 		this.min = 0;
 		this.integerOnly = false;
+		this.showStepper = false;
+		this.stepAmount = 1;
 	}
 	static {
-		this.styles = [...AxebowInputBase.baseStyles];
+		this.styles = [...AxebowInputBase.baseStyles, css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+      /* Both guarded by their own host class - absent unless the matching
+         property is set - so neither ever touches sl-input's own default
+         sizing/padding for every existing caller that doesn't opt in. */
+      :host(.axebow-fixed-height) sl-input::part(base) {
+        height: var(--axebow-input-height);
+      }
+      :host(.axebow-has-stepper) sl-input::part(base) {
+        padding-right: 0;
+      }
+      :host(.axebow-has-stepper) sl-input::part(suffix) {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      .axebow-numeric-stepper {
+        display: flex;
+        flex-direction: column;
+        width: 1.375rem;
+        height: 2.375rem;
+        border-radius: 0 var(--sl-input-border-radius-medium, 0.25rem) var(--sl-input-border-radius-medium, 0.25rem) 0;
+        overflow: hidden;
+      }
+      .axebow-numeric-stepper-btn {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 0;
+        border: 1px solid var(--axebow-gray);
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+      }
+      .axebow-numeric-stepper-btn:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    `];
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("fixedWidth")) this.style.width = this.fixedWidth || "";
+		if (changed.has("fixedHeight")) if (this.fixedHeight) {
+			this.style.setProperty("--axebow-input-height", this.fixedHeight);
+			this.classList.add("axebow-fixed-height");
+		} else {
+			this.style.removeProperty("--axebow-input-height");
+			this.classList.remove("axebow-fixed-height");
+		}
+		if (changed.has("showStepper")) this.classList.toggle("axebow-has-stepper", this.showStepper);
 	}
 	handleChange(e) {
 		if (this.disabled) return;
@@ -1540,6 +1598,45 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 	handleKeyDown(e) {
 		if (this.integerOnly && (e.key === "." || e.key === "," || e.key === "e" || e.key === "E")) e.preventDefault();
 	}
+	_bumpValue(sign) {
+		if (this.disabled) return;
+		const step = this.integerOnly ? Math.trunc(this.stepAmount) || 1 : this.stepAmount;
+		const current = Number(this.value) || 0;
+		const next = Math.min(this.max, Math.max(this.min, current + sign * step));
+		const input = this.renderRoot.querySelector("sl-input");
+		if (!input) return;
+		input.value = next.toString();
+		input.dispatchEvent(new Event("sl-input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_renderStepper() {
+		if (!this.showStepper) return "";
+		const current = Number(this.value) || 0;
+		return html`
+      <div slot="suffix" class="axebow-numeric-stepper">
+        <button
+          type="button"
+          class="axebow-numeric-stepper-btn"
+          ?disabled=${this.disabled || current >= this.max}
+          aria-label="increment"
+          @click=${() => this._bumpValue(1)}
+        >
+          <axebow-icon iconName="add" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
+        </button>
+        <button
+          type="button"
+          class="axebow-numeric-stepper-btn"
+          ?disabled=${this.disabled || current <= this.min}
+          aria-label="decrement"
+          @click=${() => this._bumpValue(-1)}
+        >
+          <axebow-icon iconName="remove" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
+        </button>
+      </div>
+    `;
+	}
 	render() {
 		const containerClass = this.hasError ? "input-error" : "";
 		return this.renderWrapper(html`
@@ -1554,7 +1651,9 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
           max=${this.max}
           min=${this.min}
           step=${this.integerOnly ? "1" : "any"}
-        ></sl-input>
+        >
+          ${this._renderStepper()}
+        </sl-input>
       </div>
     `);
 	}
@@ -1562,6 +1661,10 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 __decorate([property({ type: Number })], AxebowNumericInput.prototype, "max", void 0);
 __decorate([property({ type: Number })], AxebowNumericInput.prototype, "min", void 0);
 __decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "integerOnly", void 0);
+__decorate([property({ type: String })], AxebowNumericInput.prototype, "fixedWidth", void 0);
+__decorate([property({ type: String })], AxebowNumericInput.prototype, "fixedHeight", void 0);
+__decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "showStepper", void 0);
+__decorate([property({ type: Number })], AxebowNumericInput.prototype, "stepAmount", void 0);
 AxebowNumericInput = __decorate([customElement("axebow-numeric-input")], AxebowNumericInput);
 //#endregion
 //#region src/components/axebow-input/axebow-checkbox-input.ts
@@ -1918,6 +2021,8 @@ var AxebowInput = class AxebowInput extends LitElement {
 		this.addDialogLabels = DEFAULT_ADD_DIALOG_LABELS;
 		this.compact = false;
 		this.integerOnly = false;
+		this.showStepper = false;
+		this.stepAmount = 1;
 	}
 	static {
 		this.styles = [
@@ -1928,6 +2033,10 @@ var AxebowInput = class AxebowInput extends LitElement {
       sl-select {
         width: 100%;
       }
+      axebow-numeric-input {
+        display: block;
+        width: 100%;
+      }
     `
 		];
 	}
@@ -1962,6 +2071,10 @@ var AxebowInput = class AxebowInput extends LitElement {
             .max=${this.max}
             .min=${this.min}
             .compact=${this.compact}
+            .fixedWidth=${this.fixedWidth}
+            .fixedHeight=${this.fixedHeight}
+            .showStepper=${this.showStepper}
+            .stepAmount=${this.stepAmount}
           ></axebow-numeric-input>
         `;
 			case "integer": return html`
@@ -1979,6 +2092,10 @@ var AxebowInput = class AxebowInput extends LitElement {
             .min=${this.min}
             .integerOnly=${true}
             .compact=${this.compact}
+            .fixedWidth=${this.fixedWidth}
+            .fixedHeight=${this.fixedHeight}
+            .showStepper=${this.showStepper}
+            .stepAmount=${this.stepAmount}
           ></axebow-numeric-input>
         `;
 			case "select": return html`
@@ -2114,6 +2231,10 @@ __decorate([property({ attribute: false })], AxebowInput.prototype, "onAddNew",
 __decorate([property({ attribute: false })], AxebowInput.prototype, "addDialogLabels", void 0);
 __decorate([property({ type: Boolean })], AxebowInput.prototype, "compact", void 0);
 __decorate([property({ type: Boolean })], AxebowInput.prototype, "integerOnly", void 0);
+__decorate([property({ type: String })], AxebowInput.prototype, "fixedWidth", void 0);
+__decorate([property({ type: String })], AxebowInput.prototype, "fixedHeight", void 0);
+__decorate([property({ type: Boolean })], AxebowInput.prototype, "showStepper", void 0);
+__decorate([property({ type: Number })], AxebowInput.prototype, "stepAmount", void 0);
 AxebowInput = __decorate([customElement("axebow-input")], AxebowInput);
 //#endregion
 //#region src/components/axebow-dialog/axebow-dialog.ts