@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-tag-input.mjs

@@ -0,0 +1,685 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, inject, input, model, output, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { NgControl } from "@angular/forms";
+import { FormField } from "@angular/forms/signals";
+import { VD_FIELD, vdNgControlState, vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+function vdTagKey(tag) {
+	return tag.trim().normalize("NFC").toLowerCase();
+}
+function vdNormalizeTags(value) {
+	const seen = /* @__PURE__ */ new Set();
+	return (value ?? []).filter((tag) => {
+		if (typeof tag !== "string") return false;
+		const key = vdTagKey(tag);
+		if (!key || seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	}).map((tag) => tag.trim().normalize("NFC"));
+}
+function vdAddTag(value, draft) {
+	const tag = draft.trim().normalize("NFC");
+	if (!tag) return {
+		kind: "empty",
+		tag
+	};
+	const tags = vdNormalizeTags(value);
+	if (tags.some((item) => vdTagKey(item) === vdTagKey(tag))) return {
+		kind: "duplicate",
+		tag
+	};
+	return {
+		kind: "added",
+		tag,
+		value: [...tags, tag]
+	};
+}
+var VdTagInput = class VdTagInput {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* 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
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaLabelledby = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	addLabel = input(...ngDevMode ? [void 0, { debugName: "addLabel" }] : /* istanbul ignore next */ []);
+	tagsLabel = input(...ngDevMode ? [void 0, { debugName: "tagsLabel" }] : /* istanbul ignore next */ []);
+	removeLabel = input(...ngDevMode ? [void 0, { debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	addedMessage = input(...ngDevMode ? [void 0, { debugName: "addedMessage" }] : /* istanbul ignore next */ []);
+	removedMessage = input(...ngDevMode ? [void 0, { debugName: "removedMessage" }] : /* istanbul ignore next */ []);
+	duplicateMessage = input(...ngDevMode ? [void 0, { debugName: "duplicateMessage" }] : /* istanbul ignore next */ []);
+	t = vdTexts("tagInput", {
+		addLabel: this.addLabel,
+		tagsLabel: this.tagsLabel,
+		removeLabel: this.removeLabel,
+		addedMessage: this.addedMessage,
+		removedMessage: this.removedMessage,
+		duplicateMessage: this.duplicateMessage
+	});
+	touch = output();
+	controlId = vdUniqueId("vd-tags");
+	feedbackId = vdUniqueId("vd-tags-feedback");
+	tagKey = vdTagKey;
+	tags = computed(() => vdNormalizeTags(this.value()), ...ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []);
+	draft = signal("", ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
+	feedback = signal("", ...ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []);
+	composing = false;
+	pendingFeedback = signal(null, ...ngDevMode ? [{ debugName: "pendingFeedback" }] : /* istanbul ignore next */ []);
+	inputRef = viewChild("draftInput", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	removeButtons = viewChildren("removeButton", ...ngDevMode ? [{ debugName: "removeButtons" }] : /* istanbul ignore next */ []);
+	hostEl = inject(ElementRef).nativeElement;
+	field = inject(VD_FIELD, { optional: true });
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	formBound = signal(false, ...ngDevMode ? [{ debugName: "formBound" }] : /* istanbul ignore next */ []);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? {
+		invalid: false,
+		touched: false,
+		disabled: false,
+		required: false
+	}, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.ngState().disabled, ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	locked = computed(() => this.isDisabled() || this.readonly(), ...ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() && (!this.formBound() || this.touched()) || this.ngState().invalid && this.ngState().touched, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	isRequired = computed(() => this.required() || this.ngState().required, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+	descriptionIds = computed(() => [this.field?.describedBy(), this.feedback() ? this.feedbackId : null].filter(Boolean).join(" ") || null, ...ngDevMode ? [{ debugName: "descriptionIds" }] : /* istanbul ignore next */ []);
+	lastValue = null;
+	constructor() {
+		const control = {
+			id: signal(this.controlId),
+			invalid: this.showInvalid,
+			required: this.isRequired,
+			disabled: this.isDisabled
+		};
+		this.field?.register(control);
+		this.destroyRef.onDestroy(() => this.field?.unregister(control));
+		afterRenderEffect(() => {
+			const value = this.value();
+			if (value !== this.lastValue) {
+				this.lastValue = value;
+				untracked(() => this.reset());
+			}
+		});
+		afterRenderEffect(() => {
+			const message = this.pendingFeedback();
+			if (message !== null) {
+				this.pendingFeedback.set(null);
+				this.feedback.set(message);
+			}
+		});
+	}
+	ngOnInit() {
+		const ng = this.injector.get(NgControl, null, {
+			self: true,
+			optional: true
+		});
+		this.formBound.set(!!ng || !!this.injector.get(FormField, null, {
+			self: true,
+			optional: true
+		}));
+		this.ngSource.set(vdNgControlState(ng, this.destroyRef));
+	}
+	focus(options) {
+		this.inputRef()?.nativeElement.focus(options);
+	}
+	reset() {
+		this.draft.set("");
+		const input = this.inputRef()?.nativeElement;
+		if (input) input.value = "";
+		this.feedback.set("");
+		this.pendingFeedback.set(null);
+		this.composing = false;
+	}
+	onInput(event) {
+		this.draft.set(event.target.value);
+		this.feedback.set("");
+		this.pendingFeedback.set(null);
+	}
+	add() {
+		if (this.locked() || this.composing) return;
+		const result = vdAddTag(this.tags(), this.draft());
+		if (result.kind === "empty") return;
+		if (result.kind === "duplicate") this.announce(this.t().duplicateMessage(result.tag));
+		else {
+			this.commit(result.value);
+			this.draft.set("");
+			this.announce(this.t().addedMessage(result.tag));
+		}
+		this.focus();
+	}
+	remove(tag) {
+		if (this.locked() || !this.tags().includes(tag)) return;
+		this.commit(this.tags().filter((item) => item !== tag));
+		this.focus();
+		this.announce(this.t().removedMessage(tag));
+	}
+	returnToInput(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.focus();
+	}
+	onKeydown(event) {
+		if (event.isComposing || this.composing || this.locked() || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.add();
+		} else if (event.key === "Backspace" && this.draft() === "") {
+			const last = this.removeButtons().at(-1);
+			if (last) {
+				event.preventDefault();
+				last.nativeElement.focus();
+			}
+		}
+	}
+	onFocusOut(event) {
+		if (event.relatedTarget && this.hostEl.contains(event.relatedTarget)) return;
+		this.touch.emit();
+	}
+	onFieldPointerDown(event) {
+		if (!this.isDisabled() && event.target === event.currentTarget) {
+			event.preventDefault();
+			this.focus();
+		}
+	}
+	commit(value) {
+		this.lastValue = value;
+		this.value.set(value);
+	}
+	announce(message) {
+		this.feedback.set("");
+		this.pendingFeedback.set(message);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTagInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdTagInput,
+		isStandalone: true,
+		selector: "vd-tag-input",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				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
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			addLabel: {
+				classPropertyName: "addLabel",
+				publicName: "addLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tagsLabel: {
+				classPropertyName: "tagsLabel",
+				publicName: "tagsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			addedMessage: {
+				classPropertyName: "addedMessage",
+				publicName: "addedMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removedMessage: {
+				classPropertyName: "removedMessage",
+				publicName: "removedMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			duplicateMessage: {
+				classPropertyName: "duplicateMessage",
+				publicName: "duplicateMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onFocusOut($event)" },
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.data-readonly": "readonly() ? \"\" : null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null"
+			},
+			classAttribute: "vd-tag-input"
+		},
+		viewQueries: [{
+			propertyName: "inputRef",
+			first: true,
+			predicate: ["draftInput"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "removeButtons",
+			predicate: ["removeButton"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="vd-input-group vd-tag-input__field" (pointerdown)="onFieldPointerDown($event)">
+      @if (tags().length) {
+        <ul class="vd-tag-input__tags" role="list" [attr.aria-label]="t().tagsLabel">
+          @for (tag of tags(); track tagKey(tag)) {
+            <li class="vd-tag-input__tag">
+              <span class="vd-tag-input__label">{{ tag }}</span>
+              <button
+                #removeButton
+                class="vd-tag-input__remove"
+                type="button"
+                [disabled]="locked()"
+                [attr.aria-label]="t().removeLabel(tag)"
+                (click)="remove(tag)"
+                (keydown.escape)="returnToInput($event)"
+              >
+                <vd-icon name="x" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+      <input
+        #draftInput
+        type="text"
+        class="vd-input vd-tag-input__input"
+        autocomplete="off"
+        [id]="controlId"
+        [attr.data-size]="size()"
+        [value]="draft()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readOnly]="readonly()"
+        [attr.data-invalid]="showInvalid() ? '' : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="descriptionIds()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionstart)="composing = true"
+        (compositionend)="composing = false"
+      />
+      <button
+        class="vd-button vd-tag-input__add"
+        type="button"
+        data-variant="ghost"
+        [attr.data-size]="size()"
+        [disabled]="locked() || !draft().trim()"
+        (click)="add()"
+      >
+        {{ t().addLabel }}
+      </button>
+    </div>
+    <p
+      class="vd-tag-input__feedback"
+      [id]="feedbackId"
+      role="status"
+      aria-atomic="true"
+      [textContent]="feedback()"
+    ></p>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTagInput,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-tag-input",
+			imports: [VdIcon],
+			template: `
+    <div class="vd-input-group vd-tag-input__field" (pointerdown)="onFieldPointerDown($event)">
+      @if (tags().length) {
+        <ul class="vd-tag-input__tags" role="list" [attr.aria-label]="t().tagsLabel">
+          @for (tag of tags(); track tagKey(tag)) {
+            <li class="vd-tag-input__tag">
+              <span class="vd-tag-input__label">{{ tag }}</span>
+              <button
+                #removeButton
+                class="vd-tag-input__remove"
+                type="button"
+                [disabled]="locked()"
+                [attr.aria-label]="t().removeLabel(tag)"
+                (click)="remove(tag)"
+                (keydown.escape)="returnToInput($event)"
+              >
+                <vd-icon name="x" />
+              </button>
+            </li>
+          }
+        </ul>
+      }
+      <input
+        #draftInput
+        type="text"
+        class="vd-input vd-tag-input__input"
+        autocomplete="off"
+        [id]="controlId"
+        [attr.data-size]="size()"
+        [value]="draft()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readOnly]="readonly()"
+        [attr.data-invalid]="showInvalid() ? '' : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="descriptionIds()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionstart)="composing = true"
+        (compositionend)="composing = false"
+      />
+      <button
+        class="vd-button vd-tag-input__add"
+        type="button"
+        data-variant="ghost"
+        [attr.data-size]="size()"
+        [disabled]="locked() || !draft().trim()"
+        (click)="add()"
+      >
+        {{ t().addLabel }}
+      </button>
+    </div>
+    <p
+      class="vd-tag-input__feedback"
+      [id]="feedbackId"
+      role="status"
+      aria-atomic="true"
+      [textContent]="feedback()"
+    ></p>
+  `,
+			host: {
+				class: "vd-tag-input",
+				"[attr.data-size]": "size()",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.data-readonly]": "readonly() ? \"\" : null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null",
+				"(focusout)": "onFocusOut($event)"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		addLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "addLabel",
+				required: false
+			}]
+		}],
+		tagsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tagsLabel",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		addedMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "addedMessage",
+				required: false
+			}]
+		}],
+		removedMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removedMessage",
+				required: false
+			}]
+		}],
+		duplicateMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "duplicateMessage",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["draftInput", { isSignal: true }]
+		}],
+		removeButtons: [{
+			type: i0.ViewChildren,
+			args: ["removeButton", { isSignal: true }]
+		}]
+	}
+});
+export { VdTagInput };
+
+//# sourceMappingURL=vadem-ui-tag-input.mjs.map