@star-ng/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,188 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var StarIconField = class StarIconField {
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconPosition = input("start", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarIconField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarIconField,
+		isStandalone: true,
+		selector: "star-icon-field",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			iconPosition: {
+				classPropertyName: "iconPosition",
+				publicName: "iconPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "class.star-icon-field--end": "iconPosition() === 'end'" },
+			classAttribute: "star-icon-field"
+		},
+		ngImport: i0,
+		template: `
+    <i [class]="icon() + ' star-icon-field__icon'" aria-hidden="true"></i>
+    <ng-content />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarIconField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-icon-field",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-icon-field",
+				"[class.star-icon-field--end]": "iconPosition() === 'end'"
+			},
+			template: `
+    <i [class]="icon() + ' star-icon-field__icon'" aria-hidden="true"></i>
+    <ng-content />
+  `
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		iconPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconPosition",
+				required: false
+			}]
+		}]
+	}
+});
+var StarInputGroup = class StarInputGroup {
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInputGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarInputGroup,
+		isStandalone: true,
+		selector: "star-input-group",
+		inputs: { ariaLabel: {
+			classPropertyName: "ariaLabel",
+			publicName: "ariaLabel",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "group" },
+			properties: { "attr.aria-label": "ariaLabel()" },
+			classAttribute: "star-input-group"
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInputGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-input-group",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-input-group",
+				role: "group",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { ariaLabel: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "ariaLabel",
+			required: false
+		}]
+	}] }
+});
+var StarInputGroupAddon = class StarInputGroupAddon {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInputGroupAddon,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarInputGroupAddon,
+		isStandalone: true,
+		selector: "star-input-group-addon",
+		host: { classAttribute: "star-input-group__addon" },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInputGroupAddon,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-input-group-addon",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-input-group__addon" },
+			template: `<ng-content />`
+		}]
+	}]
+});
+export { StarIconField, StarInputGroup, StarInputGroupAddon };
+
+//# sourceMappingURL=star-ng-ui-input-group.mjs.map

package/fesm2022/star-ng-ui-input-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-input-group.mjs","names":[],"sources":["../../../projects/star-ng/input-group/input-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n/**\n * Icon inside a text input (PrimeNG `p-iconfield` + `p-inputicon`). The icon is decoration\n * only: the input still needs a label (`star-field` or `aria-label`).\n *\n * ```html\n * <star-icon-field icon=\"ph-bold ph-magnifying-glass\">\n *   <input starInput type=\"search\" aria-label=\"Search cases\" />\n * </star-icon-field>\n * ```\n */\n@Component({\n  selector: 'star-icon-field',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-icon-field',\n    '[class.star-icon-field--end]': \"iconPosition() === 'end'\",\n  },\n  template: `\n    <i [class]=\"icon() + ' star-icon-field__icon'\" aria-hidden=\"true\"></i>\n    <ng-content />\n  `,\n})\nexport class StarIconField {\n  /** Phosphor icon classes, for example `ph-bold ph-magnifying-glass`. */\n  readonly icon = input.required<string>();\n  readonly iconPosition = input<'start' | 'end'>('start');\n}\n\n/**\n * Joins an input with add-ons before or after it (PrimeNG `p-inputgroup`): a unit, a prefix\n * text, an icon or a button. Put `star-input-group-addon` elements, native `starInput` inputs\n * and `star-button` elements inside, in visual order.\n *\n * ```html\n * <star-input-group>\n *   <star-input-group-addon>https://</star-input-group-addon>\n *   <input starInput aria-label=\"Website\" />\n *   <star-button variant=\"secondary\">Check</star-button>\n * </star-input-group>\n * ```\n */\n@Component({\n  selector: 'star-input-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-input-group', role: 'group', '[attr.aria-label]': 'ariaLabel()' },\n  template: `<ng-content />`,\n})\nexport class StarInputGroup {\n  readonly ariaLabel = input<string | null>(null);\n}\n\n/** Text or icon add-on of `star-input-group`. */\n@Component({\n  selector: 'star-input-group-addon',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-input-group__addon' },\n  template: `<ng-content />`,\n})\nexport class StarInputGroupAddon {}\n"],"mappings":"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"}

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

@@ -0,0 +1,434 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output, viewChild } from "@angular/core";
+import { StarField } from "@star-ng/ui/field";
+const TOKENS = {
+	"9": /\d/,
+	a: /\p{L}/u,
+	"*": /[\p{L}\d]/u
+};
+function applyMask(mask, raw, slotChar = "_") {
+	let out = "";
+	let r = 0;
+	for (const char of mask) {
+		const token = TOKENS[char];
+		if (!token) {
+			out += char;
+			continue;
+		}
+		while (r < raw.length && !token.test(raw[r])) r++;
+		out += r < raw.length ? raw[r++] : slotChar;
+	}
+	return out;
+}
+function unmask(mask, masked, slotChar = "_") {
+	let out = "";
+	[...mask].forEach((char, i) => {
+		if (TOKENS[char] && masked[i] !== void 0 && masked[i] !== slotChar) out += masked[i];
+	});
+	return out;
+}
+var StarInputMask = class StarInputMask {
+	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("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	mask = input.required(...ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []);
+	slotChar = input("_", ...ngDevMode ? [{ debugName: "slotChar" }] : /* istanbul ignore next */ []);
+	unmask = input(false, {
+		...ngDevMode ? { debugName: "unmask" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autoClear = input(true, {
+		...ngDevMode ? { debugName: "autoClear" } : /* 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-mask-"), ...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();
+	completed = output();
+	tokenPattern = /[9a*]/g;
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	numericOnly = computed(() => !/[a*]/.test(this.mask()), ...ngDevMode ? [{ debugName: "numericOnly" }] : /* istanbul ignore next */ []);
+	display = computed(() => {
+		const value = this.value();
+		return value ? applyMask(this.mask(), value, this.slotChar()) : "";
+	}, ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	slotsFilled(masked) {
+		return !masked.includes(this.slotChar());
+	}
+	onFocus(input) {
+		if (!input.value) input.value = applyMask(this.mask(), "", this.slotChar());
+		queueMicrotask(() => this.placeCaret(input));
+	}
+	onInput(input) {
+		const raw = [...input.value].filter((char) => char !== this.slotChar() && /[\p{L}\d]/u.test(char)).join("");
+		const masked = applyMask(this.mask(), raw, this.slotChar());
+		input.value = masked;
+		this.placeCaret(input);
+		const typed = unmask(this.mask(), masked, this.slotChar());
+		this.value.set(this.unmask() ? typed : typed ? masked : "");
+		if (this.slotsFilled(masked)) this.completed.emit(this.value());
+	}
+	onBlur(input) {
+		if (!unmask(this.mask(), input.value, this.slotChar()) || this.autoClear() && !this.slotsFilled(input.value)) {
+			this.value.set("");
+			input.value = "";
+		}
+		this.touch.emit();
+	}
+	placeCaret(input) {
+		const index = input.value.indexOf(this.slotChar());
+		const position = index < 0 ? input.value.length : index;
+		input.setSelectionRange?.(position, position);
+	}
+	focus() {
+		this.input().nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInputMask,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarInputMask,
+		isStandalone: true,
+		selector: "star-input-mask",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mask: {
+				classPropertyName: "mask",
+				publicName: "mask",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			slotChar: {
+				classPropertyName: "slotChar",
+				publicName: "slotChar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			unmask: {
+				classPropertyName: "unmask",
+				publicName: "unmask",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoClear: {
+				classPropertyName: "autoClear",
+				publicName: "autoClear",
+				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",
+			completed: "completed"
+		},
+		host: { classAttribute: "star-mask" },
+		viewQueries: [{
+			propertyName: "input",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <input
+      #input
+      type="text"
+      class="star-input star-mask__input"
+      autocomplete="off"
+      [attr.inputmode]="numericOnly() ? 'numeric' : null"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="display()"
+      [attr.placeholder]="placeholder() ?? mask().replace(tokenPattern, slotChar())"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [required]="required()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="field?.describedBy() ?? null"
+      [attr.aria-invalid]="showInvalid() || null"
+      (input)="onInput(input)"
+      (focus)="onFocus(input)"
+      (blur)="onBlur(input)"
+    />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInputMask,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-input-mask",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-mask" },
+			template: `
+    <input
+      #input
+      type="text"
+      class="star-input star-mask__input"
+      autocomplete="off"
+      [attr.inputmode]="numericOnly() ? 'numeric' : null"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="display()"
+      [attr.placeholder]="placeholder() ?? mask().replace(tokenPattern, slotChar())"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [required]="required()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="field?.describedBy() ?? null"
+      [attr.aria-invalid]="showInvalid() || null"
+      (input)="onInput(input)"
+      (focus)="onFocus(input)"
+      (blur)="onBlur(input)"
+    />
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		mask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mask",
+				required: true
+			}]
+		}],
+		slotChar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slotChar",
+				required: false
+			}]
+		}],
+		unmask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unmask",
+				required: false
+			}]
+		}],
+		autoClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoClear",
+				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"]
+		}],
+		completed: [{
+			type: i0.Output,
+			args: ["completed"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}]
+	}
+});
+export { StarInputMask, applyMask, unmask };
+
+//# sourceMappingURL=star-ng-ui-input-mask.mjs.map

package/fesm2022/star-ng-ui-input-mask.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-input-mask.mjs","names":[],"sources":["../../../projects/star-ng/input-mask/input-mask.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { StarField } from '@star-ng/ui/field';\n\n/** Mask slot tokens (PrimeNG `p-inputmask` syntax): `9` digit, `a` letter, `*` letter or digit. */\nconst TOKENS: Record<string, RegExp> = { '9': /\\d/, a: /\\p{L}/u, '*': /[\\p{L}\\d]/u };\n\n/** Applies a mask to raw characters; returns the masked text (unfilled slots as `slotChar`). */\nexport function applyMask(mask: string, raw: string, slotChar = '_'): string {\n  let out = '';\n  let r = 0;\n  for (const char of mask) {\n    const token = TOKENS[char];\n    if (!token) {\n      out += char;\n      continue;\n    }\n    while (r < raw.length && !token.test(raw[r])) r++;\n    out += r < raw.length ? raw[r++] : slotChar;\n  }\n  return out;\n}\n\n/** Characters typed into the slots, without literals and slot chars. */\nexport function unmask(mask: string, masked: string, slotChar = '_'): string {\n  let out = '';\n  [...mask].forEach((char, i) => {\n    if (TOKENS[char] && masked[i] !== undefined && masked[i] !== slotChar) out += masked[i];\n  });\n  return out;\n}\n\n/**\n * Masked text field (PrimeNG `p-inputmask`): fixed-format entry such as phone numbers, postal\n * codes or serial numbers. Mask tokens: `9` digit, `a` letter, `*` letter or digit; other\n * characters are literals. The value is the masked text, or the raw slots with `unmask`.\n *\n * `<star-input-mask mask=\"(999) 999-9999\" [formField]=\"form.phone\" ariaLabel=\"Phone number\" />`\n */\n@Component({\n  selector: 'star-input-mask',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-mask' },\n  template: `\n    <input\n      #input\n      type=\"text\"\n      class=\"star-input star-mask__input\"\n      autocomplete=\"off\"\n      [attr.inputmode]=\"numericOnly() ? 'numeric' : null\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"display()\"\n      [attr.placeholder]=\"placeholder() ?? mask().replace(tokenPattern, slotChar())\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-describedby]=\"field?.describedBy() ?? null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      (input)=\"onInput(input)\"\n      (focus)=\"onFocus(input)\"\n      (blur)=\"onBlur(input)\"\n    />\n  `,\n})\nexport class StarInputMask implements FormValueControl<string> {\n  protected readonly field = inject(StarField, { optional: true });\n  /** Invalid after touch, or while the parent `star-field` shows an error. */\n  protected readonly showInvalid = computed(\n    () => (this.invalid() && this.touched()) || !!this.field?.errorText(),\n  );\n\n  constructor() {\n    this.field?.linkControl(this.inputId);\n  }\n\n  readonly value = model('');\n  readonly mask = input.required<string>();\n  readonly slotChar = input('_');\n  /** Store only the typed characters (no literals). */\n  readonly unmask = input(false, { transform: booleanAttribute });\n  /** Keep a partly filled value on blur (default clears it). */\n  readonly autoClear = input(true, { transform: booleanAttribute });\n  readonly placeholder = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n  readonly inputId = input(inject(_IdGenerator).getId('star-mask-'));\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly name = input('');\n  readonly touch = output<void>();\n  readonly completed = output<string>();\n\n  protected readonly tokenPattern = /[9a*]/g;\n  private readonly input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n\n  protected readonly numericOnly = computed(() => !/[a*]/.test(this.mask()));\n  protected readonly display = computed(() => {\n    const value = this.value();\n    return value ? applyMask(this.mask(), value, this.slotChar()) : '';\n  });\n\n  private slotsFilled(masked: string): boolean {\n    return !masked.includes(this.slotChar());\n  }\n\n  protected onFocus(input: HTMLInputElement): void {\n    if (!input.value) input.value = applyMask(this.mask(), '', this.slotChar());\n    queueMicrotask(() => this.placeCaret(input));\n  }\n\n  protected onInput(input: HTMLInputElement): void {\n    // Take every letter or digit in order: works for typing inside the mask and for pasting\n    // raw text such as \"5551234567\". Mask literals are punctuation, so they drop out.\n    const raw = [...input.value]\n      .filter((char) => char !== this.slotChar() && /[\\p{L}\\d]/u.test(char))\n      .join('');\n    const masked = applyMask(this.mask(), raw, this.slotChar());\n    input.value = masked;\n    this.placeCaret(input);\n    const typed = unmask(this.mask(), masked, this.slotChar());\n    this.value.set(this.unmask() ? typed : typed ? masked : '');\n    if (this.slotsFilled(masked)) this.completed.emit(this.value());\n  }\n\n  protected onBlur(input: HTMLInputElement): void {\n    const typed = unmask(this.mask(), input.value, this.slotChar());\n    if (!typed || (this.autoClear() && !this.slotsFilled(input.value))) {\n      this.value.set('');\n      input.value = '';\n    }\n    this.touch.emit();\n  }\n\n  /** Puts the caret on the first empty slot. */\n  private placeCaret(input: HTMLInputElement): void {\n    const index = input.value.indexOf(this.slotChar());\n    const position = index < 0 ? input.value.length : index;\n    input.setSelectionRange?.(position, position);\n  }\n\n  focus(): void {\n    this.input().nativeElement.focus();\n  }\n}\n"],"mappings":"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"}