@bitforgehq/ui 0.3.0

package/fesm2022/bitforgehq-ui-number-input.mjs

@@ -0,0 +1,680 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { transformedValue } from "@angular/forms/signals";
+import { BF_DEFAULTS, BF_LABELS, BfFieldComponent, ɵFIELD_BOX, ɵFIELD_ICON_END, ɵFIELD_ICON_START, ɵFIELD_PADDING_END, ɵFIELD_PADDING_START, ɵfieldDescribedBy, ɵfieldErrorMessageId, ɵfieldErrorText, ɵfieldShowsError, ɵuniqueId } from "@bitforgehq/ui";
+const BASE = "block w-full rounded-field border bg-surface text-text placeholder:text-text-muted transition-colors focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-ring read-only:bg-surface-muted disabled:cursor-not-allowed disabled:border-surface-sunken disabled:bg-surface-muted disabled:text-text-disabled";
+var BfNumberInputComponent = class BfNumberInputComponent {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : 	/* istanbul ignore next */ []);
+	max = input(void 0, ...ngDevMode ? [{ debugName: "max" }] : 	/* istanbul ignore next */ []);
+	step = input(void 0, ...ngDevMode ? [{ debugName: "step" }] : 	/* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	helpText = input("", ...ngDevMode ? [{ debugName: "helpText" }] : 	/* istanbul ignore next */ []);
+	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : 	/* 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
+	});
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : 	/* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	id = input(ɵuniqueId("bf-number-input"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	iconStart = input(false, {
+		...ngDevMode ? { debugName: "iconStart" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	iconEnd = input(false, {
+		...ngDevMode ? { debugName: "iconEnd" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autocomplete = input("", ...ngDevMode ? [{ debugName: "autocomplete" }] : 	/* istanbul ignore next */ []);
+	inputMode = input("", ...ngDevMode ? [{ debugName: "inputMode" }] : 	/* istanbul ignore next */ []);
+	enterKeyHint = input("", ...ngDevMode ? [{ debugName: "enterKeyHint" }] : 	/* istanbul ignore next */ []);
+	changed = output();
+	focused = output();
+	blurred = output();
+	touch = output();
+	el = viewChild.required("el", ...ngDevMode ? [{ debugName: "el" }] : 	/* istanbul ignore next */ []);
+	labels = inject(BF_LABELS);
+	defaults = inject(BF_DEFAULTS);
+	badInput = signal(false, ...ngDevMode ? [{ debugName: "badInput" }] : 	/* istanbul ignore next */ []);
+	left = signal(false, ...ngDevMode ? [{ debugName: "left" }] : 	/* istanbul ignore next */ []);
+	raw = transformedValue(this.value, {
+		parse: (text) => {
+			if (this.badInput()) return { error: {
+				kind: "parse",
+				message: this.labels.validation.parse
+			} };
+			return { value: text === "" ? null : Number(text) };
+		},
+		format: (value) => value === null ? "" : String(value)
+	});
+	resolvedSize = computed(() => this.size() ?? this.defaults.fieldSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	iconStartClasses = computed(() => `text-text-subtle pointer-events-none absolute inset-y-0 flex items-center ${ɵFIELD_ICON_START[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "iconStartClasses" }] : 	/* istanbul ignore next */ []);
+	iconEndClasses = computed(() => `text-text-subtle absolute inset-y-0 flex items-center ${ɵFIELD_ICON_END[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "iconEndClasses" }] : 	/* istanbul ignore next */ []);
+	allErrors = computed(() => {
+		const errors = [...this.errors()];
+		for (const error of this.raw.parseErrors()) if (!errors.some((e) => e.kind === error.kind)) errors.push(error);
+		return errors;
+	}, ...ngDevMode ? [{ debugName: "allErrors" }] : 	/* istanbul ignore next */ []);
+	errorText = computed(() => ɵfieldErrorText(this.errorMessage(), this.touched() || this.left() && this.raw.parseErrors().length > 0, this.allErrors(), this.labels.validation), ...ngDevMode ? [{ debugName: "errorText" }] : 	/* istanbul ignore next */ []);
+	showError = computed(() => ɵfieldShowsError(this.errorText(), this.invalid(), this.touched()), ...ngDevMode ? [{ debugName: "showError" }] : 	/* istanbul ignore next */ []);
+	describedBy = computed(() => ɵfieldDescribedBy(this.id(), this.errorText(), this.helpText()), ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
+	errorMessageId = computed(() => ɵfieldErrorMessageId(this.id(), this.errorText(), this.showError()), ...ngDevMode ? [{ debugName: "errorMessageId" }] : 	/* istanbul ignore next */ []);
+	ariaLabelAttr = computed(() => this.label() ? null : this.ariaLabel() || null, ...ngDevMode ? [{ debugName: "ariaLabelAttr" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledbyAttr = computed(() => this.label() ? null : this.ariaLabelledby() || null, ...ngDevMode ? [{ debugName: "ariaLabelledbyAttr" }] : 	/* istanbul ignore next */ []);
+	inputModeAttr = computed(() => {
+		const explicit = this.inputMode();
+		if (explicit) return explicit;
+		const lowest = this.min();
+		if (lowest === void 0 || lowest < 0) return null;
+		const step = this.step();
+		return step === void 0 || typeof step === "number" && Number.isInteger(step) ? "numeric" : "decimal";
+	}, ...ngDevMode ? [{ debugName: "inputModeAttr" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => {
+		const size = this.resolvedSize();
+		return [
+			BASE,
+			ɵFIELD_BOX[size],
+			ɵFIELD_PADDING_START[size][this.iconStart() ? "icon" : "text"],
+			ɵFIELD_PADDING_END[size][this.iconEnd() ? "icon" : "text"],
+			this.showError() ? "border-danger-border" : "border-border-strong"
+		].join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	clearBadText = effect(() => {
+		if (!this.badInput() || this.raw.parseErrors().length > 0) return;
+		untracked(() => {
+			this.el().nativeElement.value = this.raw();
+			this.badInput.set(false);
+			this.left.set(false);
+		});
+	}, ...ngDevMode ? [{ debugName: "clearBadText" }] : 	/* istanbul ignore next */ []);
+	focus(options) {
+		this.el().nativeElement.focus(options);
+	}
+	onInput(el) {
+		const bad = el.validity.badInput;
+		this.badInput.set(bad);
+		const before = this.value();
+		this.raw.set(bad ? this.raw() : el.value);
+		const after = this.value();
+		if (!Object.is(before, after)) this.changed.emit(after);
+	}
+	onBlur(event) {
+		this.left.set(true);
+		this.blurred.emit(event);
+		this.touch.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfNumberInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfNumberInputComponent,
+		isStandalone: true,
+		selector: "bf-number-input",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				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
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "ariaLabelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helpText: {
+				classPropertyName: "helpText",
+				publicName: "helpText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				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
+			},
+			errors: {
+				classPropertyName: "errors",
+				publicName: "errors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconStart: {
+				classPropertyName: "iconStart",
+				publicName: "iconStart",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconEnd: {
+				classPropertyName: "iconEnd",
+				publicName: "iconEnd",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputMode: {
+				classPropertyName: "inputMode",
+				publicName: "inputMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enterKeyHint: {
+				classPropertyName: "enterKeyHint",
+				publicName: "enterKeyHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			changed: "changed",
+			focused: "focused",
+			blurred: "blurred",
+			touch: "touch"
+		},
+		host: {
+			properties: { "attr.id": "null" },
+			classAttribute: "block"
+		},
+		viewQueries: [{
+			propertyName: "el",
+			first: true,
+			predicate: ["el"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <bf-field
+      [label]="label()"
+      [helpText]="helpText()"
+      [error]="errorText()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [controlId]="id()"
+    >
+      <div class="relative">
+        @if (iconStart()) {
+          <span [class]="iconStartClasses()">
+            <ng-content select="[bfSlot=icon-start]" />
+          </span>
+        }
+        <input
+          #el
+          type="number"
+          [id]="id()"
+          [name]="name()"
+          [value]="raw()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [readOnly]="readonly()"
+          [required]="required()"
+          [attr.autocomplete]="autocomplete() || null"
+          [attr.min]="min() ?? null"
+          [attr.max]="max() ?? null"
+          [attr.step]="step() ?? null"
+          [attr.inputmode]="inputModeAttr()"
+          [attr.enterkeyhint]="enterKeyHint() || null"
+          [attr.aria-label]="ariaLabelAttr()"
+          [attr.aria-labelledby]="ariaLabelledbyAttr()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-errormessage]="errorMessageId()"
+          [class]="classes()"
+          (input)="onInput(el)"
+          (focus)="focused.emit($event)"
+          (blur)="onBlur($event)"
+        />
+        @if (iconEnd()) {
+          <span [class]="iconEndClasses()">
+            <ng-content select="[bfSlot=icon-end]" />
+          </span>
+        }
+      </div>
+    </bf-field>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfFieldComponent,
+			selector: "bf-field",
+			inputs: [
+				"label",
+				"helpText",
+				"error",
+				"required",
+				"disabled",
+				"controlId"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfNumberInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-number-input",
+			imports: [BfFieldComponent],
+			host: {
+				class: "block",
+				"[attr.id]": "null"
+			},
+			template: `
+    <bf-field
+      [label]="label()"
+      [helpText]="helpText()"
+      [error]="errorText()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [controlId]="id()"
+    >
+      <div class="relative">
+        @if (iconStart()) {
+          <span [class]="iconStartClasses()">
+            <ng-content select="[bfSlot=icon-start]" />
+          </span>
+        }
+        <input
+          #el
+          type="number"
+          [id]="id()"
+          [name]="name()"
+          [value]="raw()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [readOnly]="readonly()"
+          [required]="required()"
+          [attr.autocomplete]="autocomplete() || null"
+          [attr.min]="min() ?? null"
+          [attr.max]="max() ?? null"
+          [attr.step]="step() ?? null"
+          [attr.inputmode]="inputModeAttr()"
+          [attr.enterkeyhint]="enterKeyHint() || null"
+          [attr.aria-label]="ariaLabelAttr()"
+          [attr.aria-labelledby]="ariaLabelledbyAttr()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-errormessage]="errorMessageId()"
+          [class]="classes()"
+          (input)="onInput(el)"
+          (focus)="focused.emit($event)"
+          (blur)="onBlur($event)"
+        />
+        @if (iconEnd()) {
+          <span [class]="iconEndClasses()">
+            <ng-content select="[bfSlot=icon-end]" />
+          </span>
+        }
+      </div>
+    </bf-field>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		helpText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helpText",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				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
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		iconStart: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconStart",
+				required: false
+			}]
+		}],
+		iconEnd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconEnd",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		inputMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputMode",
+				required: false
+			}]
+		}],
+		enterKeyHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enterKeyHint",
+				required: false
+			}]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		el: [{
+			type: i0.ViewChild,
+			args: ["el", { isSignal: true }]
+		}]
+	}
+});
+export { BfNumberInputComponent };
+
+//# sourceMappingURL=bitforgehq-ui-number-input.mjs.map