@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-command.mjs

@@ -0,0 +1,735 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, forwardRef, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdListTarget, vdMatchesQuery } from "@vadem/ui/keyboard";
+import { vdTexts } from "@vadem/ui/locale";
+function vdFilterCommands(items, query) {
+	return items.filter((item) => vdMatchesQuery([item.label, ...item.keywords].join(" "), query));
+}
+function vdActiveCommand(items, activeId) {
+	return items.find((item) => item.id === activeId && !item.disabled) ?? items.find((item) => !item.disabled) ?? null;
+}
+var VdCommand = class VdCommand {
+	query = model("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	loadingText = input(...ngDevMode ? [void 0, { debugName: "loadingText" }] : /* istanbul ignore next */ []);
+	t = vdTexts("command", {
+		label: this.label,
+		placeholder: this.placeholder,
+		emptyText: this.emptyText,
+		loadingText: this.loadingText
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autofocus = input(false, {
+		...ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = output();
+	dismissed = output();
+	expanded = signal(true, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	focused = signal(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	listId = vdUniqueId("vd-command-list");
+	items = contentChildren(VdCommandItem, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	initialized = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []);
+	activeId = signal(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	search = viewChild.required("search", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+	list = viewChild.required("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	records = computed(() => this.items().filter((item) => this.initialized().has(item)).map((item) => ({
+		id: item.id,
+		label: item.label(),
+		keywords: item.keywords(),
+		disabled: item.disabled(),
+		item
+	})), ...ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => vdFilterCommands(this.records(), this.query()), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	activeItem = computed(() => {
+		if (this.disabled() || this.loading() || !this.expanded()) return null;
+		return vdActiveCommand(this.visibleItems(), this.activeId())?.item ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			const active = this.activeItem();
+			if (!active || !this.focused()) return;
+			const list = this.list().nativeElement;
+			const box = list.getBoundingClientRect();
+			const item = active.el.getBoundingClientRect();
+			if (item.top < box.top) list.scrollTop += item.top - box.top;
+			else if (item.bottom > box.bottom) list.scrollTop += item.bottom - box.bottom;
+		});
+	}
+	focus() {
+		if (!this.disabled()) this.search().nativeElement.focus();
+	}
+	register(item) {
+		this.initialized.update((items) => /* @__PURE__ */ new Set([...items, item]));
+		return () => this.initialized.update((items) => {
+			const next = new Set(items);
+			next.delete(item);
+			return next;
+		});
+	}
+	isVisible(item) {
+		return !this.loading() && this.visibleItems().some((record) => record.item === item);
+	}
+	choose(item) {
+		if (this.disabled() || this.loading() || !this.expanded() || item.disabled() || !this.isVisible(item)) return;
+		this.activeId.set(item.id);
+		this.focus();
+		const value = item.value();
+		item.selected.emit();
+		this.selected.emit(value);
+	}
+	hover(item, event) {
+		if (event.pointerType !== "mouse" || this.disabled() || this.loading() || item.disabled()) return;
+		if (this.isVisible(item)) this.activeId.set(item.id);
+	}
+	onFocus() {
+		this.focused.set(true);
+		this.expanded.set(true);
+	}
+	onInput(event) {
+		this.query.set(event.target.value);
+		this.activeId.set(null);
+		this.expanded.set(true);
+	}
+	onKeydown(event) {
+		if (event.isComposing || event.keyCode === 229 || event.defaultPrevented || this.disabled()) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.expanded.set(false);
+			this.dismissed.emit();
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (!event.repeat) {
+				const active = this.activeItem();
+				if (active) this.choose(active);
+			}
+			return;
+		}
+		if (event.ctrlKey || event.metaKey || event.altKey || this.loading()) return;
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"PageDown",
+			"PageUp"
+		].includes(event.key)) return;
+		event.preventDefault();
+		const wasExpanded = this.expanded();
+		this.expanded.set(true);
+		const records = this.visibleItems();
+		const active = wasExpanded ? this.activeItem() : null;
+		const index = records.findIndex((record) => record.item === active);
+		const next = vdListTarget(event.key, index, records.map((record) => record.disabled), {
+			loop: false,
+			pageSize: 10
+		});
+		if (next !== null) this.activeId.set(records[next]?.id ?? null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCommand,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdCommand,
+		isStandalone: true,
+		selector: "vd-command",
+		inputs: {
+			query: {
+				classPropertyName: "query",
+				publicName: "query",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingText: {
+				classPropertyName: "loadingText",
+				publicName: "loadingText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			query: "queryChange",
+			selected: "selected",
+			dismissed: "dismissed"
+		},
+		host: {
+			properties: {
+				"attr.data-open": "expanded() ? \"\" : null",
+				"attr.data-focused": "focused() ? \"\" : null",
+				"attr.data-disabled": "disabled() ? \"\" : null",
+				"attr.data-loading": "loading() ? \"\" : null"
+			},
+			classAttribute: "vd-command"
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: VdCommandItem,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "search",
+			first: true,
+			predicate: ["search"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="vd-command__search">
+      <vd-icon name="search" />
+      <!-- Opt-in for modal Dialog initial focus; false for inline use. -->
+      <!-- eslint-disable @angular-eslint/template/no-autofocus -->
+      <input
+        #search
+        class="vd-command__input"
+        type="text"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        autocomplete="off"
+        spellcheck="false"
+        [value]="query()"
+        [placeholder]="t().placeholder"
+        [disabled]="disabled()"
+        [autofocus]="autofocus()"
+        [attr.aria-label]="t().label"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="listId"
+        [attr.aria-activedescendant]="focused() && expanded() ? activeItem()?.id : null"
+        (input)="onInput($event)"
+        (focus)="onFocus()"
+        (blur)="focused.set(false)"
+        (keydown)="onKeydown($event)"
+      />
+      <!-- eslint-enable @angular-eslint/template/no-autofocus -->
+    </div>
+    <div
+      #list
+      class="vd-command__list"
+      role="listbox"
+      [id]="listId"
+      [attr.aria-label]="t().label"
+      [attr.aria-busy]="loading() || null"
+      [hidden]="!expanded()"
+    >
+      <ng-content />
+    </div>
+    <p class="vd-command__status" role="status" [hidden]="!expanded()">
+      @if (loading()) {
+        {{ t().loadingText }}
+      } @else if (visibleItems().length === 0) {
+        {{ t().emptyText }}
+      }
+    </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: VdCommand,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-command",
+			imports: [VdIcon],
+			template: `
+    <div class="vd-command__search">
+      <vd-icon name="search" />
+      <!-- Opt-in for modal Dialog initial focus; false for inline use. -->
+      <!-- eslint-disable @angular-eslint/template/no-autofocus -->
+      <input
+        #search
+        class="vd-command__input"
+        type="text"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        autocomplete="off"
+        spellcheck="false"
+        [value]="query()"
+        [placeholder]="t().placeholder"
+        [disabled]="disabled()"
+        [autofocus]="autofocus()"
+        [attr.aria-label]="t().label"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="listId"
+        [attr.aria-activedescendant]="focused() && expanded() ? activeItem()?.id : null"
+        (input)="onInput($event)"
+        (focus)="onFocus()"
+        (blur)="focused.set(false)"
+        (keydown)="onKeydown($event)"
+      />
+      <!-- eslint-enable @angular-eslint/template/no-autofocus -->
+    </div>
+    <div
+      #list
+      class="vd-command__list"
+      role="listbox"
+      [id]="listId"
+      [attr.aria-label]="t().label"
+      [attr.aria-busy]="loading() || null"
+      [hidden]="!expanded()"
+    >
+      <ng-content />
+    </div>
+    <p class="vd-command__status" role="status" [hidden]="!expanded()">
+      @if (loading()) {
+        {{ t().loadingText }}
+      } @else if (visibleItems().length === 0) {
+        {{ t().emptyText }}
+      }
+    </p>
+  `,
+			host: {
+				class: "vd-command",
+				"[attr.data-open]": "expanded() ? \"\" : null",
+				"[attr.data-focused]": "focused() ? \"\" : null",
+				"[attr.data-disabled]": "disabled() ? \"\" : null",
+				"[attr.data-loading]": "loading() ? \"\" : null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		query: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "query",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["queryChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		loadingText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingText",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => VdCommandItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		search: [{
+			type: i0.ViewChild,
+			args: ["search", { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+var VdCommandDescription = class VdCommandDescription {
+	id = vdUniqueId("vd-command-description");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCommandDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdCommandDescription,
+		isStandalone: true,
+		selector: "[vdCommandDescription]",
+		host: {
+			properties: { "id": "id" },
+			classAttribute: "vd-command-item__description"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdCommandDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdCommandDescription]",
+			host: {
+				class: "vd-command-item__description",
+				"[id]": "id"
+			}
+		}]
+	}]
+});
+var VdCommandShortcut = class VdCommandShortcut {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCommandShortcut,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdCommandShortcut,
+		isStandalone: true,
+		selector: "[vdCommandShortcut]",
+		host: {
+			attributes: { "aria-hidden": "true" },
+			classAttribute: "vd-command-item__shortcut"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdCommandShortcut,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdCommandShortcut]",
+			host: {
+				class: "vd-command-item__shortcut",
+				"aria-hidden": "true"
+			}
+		}]
+	}]
+});
+var VdCommandItem = class VdCommandItem {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	keywords = input([], ...ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = output();
+	id = vdUniqueId("vd-command-item");
+	el = inject(ElementRef).nativeElement;
+	command = inject(forwardRef(() => VdCommand));
+	description = contentChild(VdCommandDescription, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	destroyRef = inject(DestroyRef);
+	ngOnInit() {
+		this.destroyRef.onDestroy(this.command.register(this));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCommandItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: VdCommandItem,
+		isStandalone: true,
+		selector: "vd-command-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			keywords: {
+				classPropertyName: "keywords",
+				publicName: "keywords",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selected" },
+		host: {
+			attributes: { "role": "option" },
+			listeners: {
+				"click": "command.choose(this)",
+				"pointermove": "command.hover(this, $event)",
+				"pointerdown": "$event.preventDefault()"
+			},
+			properties: {
+				"id": "id",
+				"attr.aria-label": "label()",
+				"attr.aria-describedby": "description()?.id ?? null",
+				"attr.aria-selected": "command.activeItem() === this",
+				"attr.aria-disabled": "disabled() || command.disabled() || command.loading() || null",
+				"attr.data-active": "command.activeItem() === this ? \"\" : null",
+				"hidden": "!command.isVisible(this)"
+			},
+			classAttribute: "vd-command-item"
+		},
+		queries: [{
+			propertyName: "description",
+			first: true,
+			predicate: VdCommandDescription,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ng-content select="[slot=start]" />
+    <span class="vd-command-item__content">
+      <span class="vd-command-item__label">{{ label() }}</span>
+      <ng-content select="[vdCommandDescription]" />
+    </span>
+    <ng-content select="[vdCommandShortcut]" />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdCommandItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-command-item",
+			template: `
+    <ng-content select="[slot=start]" />
+    <span class="vd-command-item__content">
+      <span class="vd-command-item__label">{{ label() }}</span>
+      <ng-content select="[vdCommandDescription]" />
+    </span>
+    <ng-content select="[vdCommandShortcut]" />
+  `,
+			host: {
+				class: "vd-command-item",
+				role: "option",
+				"[id]": "id",
+				"[attr.aria-label]": "label()",
+				"[attr.aria-describedby]": "description()?.id ?? null",
+				"[attr.aria-selected]": "command.activeItem() === this",
+				"[attr.aria-disabled]": "disabled() || command.disabled() || command.loading() || null",
+				"[attr.data-active]": "command.activeItem() === this ? \"\" : null",
+				"[hidden]": "!command.isVisible(this)",
+				"(click)": "command.choose(this)",
+				"(pointermove)": "command.hover(this, $event)",
+				"(pointerdown)": "$event.preventDefault()"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		keywords: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keywords",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}],
+		description: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => VdCommandDescription), { isSignal: true }]
+		}]
+	}
+});
+const VD_COMMAND = [
+	VdCommand,
+	VdCommandItem,
+	VdCommandDescription,
+	VdCommandShortcut
+];
+export { VD_COMMAND, VdCommand, VdCommandDescription, VdCommandItem, VdCommandShortcut };
+
+//# sourceMappingURL=vadem-ui-command.mjs.map