@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-input-number.mjs

@@ -0,0 +1,691 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, linkedSignal, model, output, signal, untracked, viewChild } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+import { StarField } from "@star-ng/ui/field";
+var StarInputNumber = class StarInputNumber {
+	uiText = inject(STAR_UI_TEXT);
+	field = inject(StarField, { optional: true });
+	showInvalid = computed(() => this.invalid() && this.touched() || !!this.field?.errorText(), ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.field?.linkControl(this.inputId);
+	}
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	mode = input("decimal", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	currency = input("USD", ...ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []);
+	unit = input("", ...ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []);
+	prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
+	suffix = input("", ...ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	minFractionDigits = input(void 0, ...ngDevMode ? [{ debugName: "minFractionDigits" }] : /* istanbul ignore next */ []);
+	maxFractionDigits = input(void 0, ...ngDevMode ? [{ debugName: "maxFractionDigits" }] : /* istanbul ignore next */ []);
+	useGrouping = input(true, {
+		...ngDevMode ? { debugName: "useGrouping" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(void 0, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	showButtons = input(false, {
+		...ngDevMode ? { debugName: "showButtons" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	inputId = input(inject(_IdGenerator).getId("star-number-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	touch = output();
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	focused = signal(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	fallbackUnit = signal("", ...ngDevMode ? [{ debugName: "fallbackUnit" }] : /* istanbul ignore next */ []);
+	formatter = computed(() => {
+		const mode = this.mode();
+		const options = {
+			style: mode,
+			currency: mode === "currency" ? this.currency() : void 0,
+			unit: mode === "unit" ? this.unit() : void 0,
+			minimumFractionDigits: this.minFractionDigits(),
+			maximumFractionDigits: this.maxFractionDigits(),
+			useGrouping: this.useGrouping()
+		};
+		try {
+			const format = new Intl.NumberFormat(this.locale(), options);
+			untracked(() => this.fallbackUnit.set(""));
+			return format;
+		} catch (error) {
+			if (mode !== "unit") throw error;
+			untracked(() => this.fallbackUnit.set(this.unit() ? " " + this.unit() : ""));
+			return new Intl.NumberFormat(this.locale(), {
+				...options,
+				style: "decimal",
+				unit: void 0
+			});
+		}
+	}, ...ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []);
+	decimal = computed(() => new Intl.NumberFormat(this.locale()).formatToParts(1.1).find((part) => part.type === "decimal")?.value ?? ".", ...ngDevMode ? [{ debugName: "decimal" }] : /* istanbul ignore next */ []);
+	formatted = computed(() => {
+		const value = this.value();
+		if (value === null) return "";
+		const number = this.formatter().format(this.mode() === "percent" ? value / 100 : value);
+		return this.prefix() + number + this.fallbackUnit() + this.suffix();
+	}, ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
+	text = linkedSignal(() => this.focused() ? this.plain(this.value()) : this.formatted(), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	plain(value) {
+		if (value === null) return "";
+		return String(value).replace(".", this.decimal());
+	}
+	parse(text) {
+		const decimal = this.decimal();
+		const cleaned = text.replace(new RegExp(`[^0-9${decimal === "," ? "," : "."}-]`, "g"), "").replace(decimal, ".");
+		if (!cleaned || cleaned === "-") return null;
+		const number = Number(cleaned);
+		return Number.isFinite(number) ? number : void 0;
+	}
+	clamp(value) {
+		const min = this.min();
+		const max = this.max();
+		const digits = this.formatter().resolvedOptions().maximumFractionDigits ?? 2;
+		let result = Number(value.toFixed(this.mode() === "percent" ? Math.max(0, digits - 2) : digits));
+		if (min !== void 0) result = Math.max(min, result);
+		if (max !== void 0) result = Math.min(max, result);
+		return result;
+	}
+	onFocus() {
+		this.focused.set(true);
+	}
+	onBlur() {
+		this.commit();
+		this.focused.set(false);
+		this.input().nativeElement.value = this.formatted();
+		this.touch.emit();
+	}
+	commit() {
+		const parsed = this.parse(this.text());
+		if (parsed === void 0) return;
+		this.value.set(parsed === null ? null : this.clamp(parsed));
+	}
+	canStep(direction) {
+		if (this.disabled() || this.readonly()) return false;
+		const value = this.value();
+		if (value === null) return true;
+		const limit = direction === 1 ? this.max() : this.min();
+		return limit === void 0 || (direction === 1 ? value < limit : value > limit);
+	}
+	stepBy(direction) {
+		if (this.disabled() || this.readonly()) return;
+		if (this.focused()) this.commit();
+		const start = this.value() ?? this.min() ?? 0;
+		const next = this.clamp(start + direction * this.step());
+		this.value.set(next);
+		this.input().nativeElement.value = this.focused() ? this.plain(next) : this.formatted();
+	}
+	onKeydown(event) {
+		const steps = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: 10,
+			PageDown: -10
+		};
+		if (event.key in steps) {
+			event.preventDefault();
+			this.stepBy(steps[event.key]);
+		} else if (event.key === "Home" && this.min() !== void 0) {
+			event.preventDefault();
+			this.value.set(this.min() ?? null);
+		} else if (event.key === "End" && this.max() !== void 0) {
+			event.preventDefault();
+			this.value.set(this.max() ?? null);
+		} else if (event.key === "Enter") this.commit();
+	}
+	focus(options) {
+		this.input().nativeElement.focus(options);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInputNumber,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarInputNumber,
+		isStandalone: true,
+		selector: "star-input-number",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			currency: {
+				classPropertyName: "currency",
+				publicName: "currency",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			unit: {
+				classPropertyName: "unit",
+				publicName: "unit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			prefix: {
+				classPropertyName: "prefix",
+				publicName: "prefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffix: {
+				classPropertyName: "suffix",
+				publicName: "suffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minFractionDigits: {
+				classPropertyName: "minFractionDigits",
+				publicName: "minFractionDigits",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFractionDigits: {
+				classPropertyName: "maxFractionDigits",
+				publicName: "maxFractionDigits",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			useGrouping: {
+				classPropertyName: "useGrouping",
+				publicName: "useGrouping",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtons: {
+				classPropertyName: "showButtons",
+				publicName: "showButtons",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"class.star-number--disabled": "disabled()",
+				"class.star-number--invalid": "showInvalid()",
+				"class.star-number--buttons": "showButtons()"
+			},
+			classAttribute: "star-number"
+		},
+		viewQueries: [{
+			propertyName: "input",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-number__control">
+      @if (showButtons()) {
+        <button
+          type="button"
+          class="star-number__btn"
+          tabindex="-1"
+          [attr.aria-label]="uiText.decrease"
+          [disabled]="!canStep(-1)"
+          (click)="stepBy(-1)"
+        >
+          <i class="ph-bold ph-minus" aria-hidden="true"></i>
+        </button>
+      }
+      <input
+        #input
+        type="text"
+        class="star-number__input"
+        role="spinbutton"
+        autocomplete="off"
+        [attr.inputmode]="maxFractionDigits() === 0 ? 'numeric' : 'decimal'"
+        [id]="inputId()"
+        [attr.name]="name() || null"
+        [value]="text()"
+        [attr.placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-valuenow]="value()"
+        [attr.aria-valuetext]="formatted()"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        [attr.aria-invalid]="showInvalid() || null"
+        (focus)="onFocus()"
+        (input)="text.set(input.value)"
+        (blur)="onBlur()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (showButtons()) {
+        <button
+          type="button"
+          class="star-number__btn"
+          tabindex="-1"
+          [attr.aria-label]="uiText.increase"
+          [disabled]="!canStep(1)"
+          (click)="stepBy(1)"
+        >
+          <i class="ph-bold ph-plus" aria-hidden="true"></i>
+        </button>
+      }
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInputNumber,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-input-number",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-number",
+				"[class.star-number--disabled]": "disabled()",
+				"[class.star-number--invalid]": "showInvalid()",
+				"[class.star-number--buttons]": "showButtons()"
+			},
+			template: `
+    <div class="star-number__control">
+      @if (showButtons()) {
+        <button
+          type="button"
+          class="star-number__btn"
+          tabindex="-1"
+          [attr.aria-label]="uiText.decrease"
+          [disabled]="!canStep(-1)"
+          (click)="stepBy(-1)"
+        >
+          <i class="ph-bold ph-minus" aria-hidden="true"></i>
+        </button>
+      }
+      <input
+        #input
+        type="text"
+        class="star-number__input"
+        role="spinbutton"
+        autocomplete="off"
+        [attr.inputmode]="maxFractionDigits() === 0 ? 'numeric' : 'decimal'"
+        [id]="inputId()"
+        [attr.name]="name() || null"
+        [value]="text()"
+        [attr.placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        [required]="required()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-valuenow]="value()"
+        [attr.aria-valuetext]="formatted()"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        [attr.aria-invalid]="showInvalid() || null"
+        (focus)="onFocus()"
+        (input)="text.set(input.value)"
+        (blur)="onBlur()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (showButtons()) {
+        <button
+          type="button"
+          class="star-number__btn"
+          tabindex="-1"
+          [attr.aria-label]="uiText.increase"
+          [disabled]="!canStep(1)"
+          (click)="stepBy(1)"
+        >
+          <i class="ph-bold ph-plus" aria-hidden="true"></i>
+        </button>
+      }
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		currency: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currency",
+				required: false
+			}]
+		}],
+		unit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unit",
+				required: false
+			}]
+		}],
+		prefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prefix",
+				required: false
+			}]
+		}],
+		suffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffix",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		minFractionDigits: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minFractionDigits",
+				required: false
+			}]
+		}],
+		maxFractionDigits: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFractionDigits",
+				required: false
+			}]
+		}],
+		useGrouping: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "useGrouping",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		showButtons: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtons",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}]
+	}
+});
+export { StarInputNumber };
+
+//# sourceMappingURL=star-ng-ui-input-number.mjs.map