@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-toolbar.mjs

@@ -0,0 +1,396 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, afterRenderEffect, booleanAttribute, computed, contentChildren, inject, input, linkedSignal } from "@angular/core";
+import { DOCUMENT } from "@angular/common";
+import { VdButton } from "@vadem/ui/button";
+import { vdRovingTarget } from "@vadem/ui/keyboard";
+import { vdTexts } from "@vadem/ui/locale";
+function vdToolbarEntry(unavailable, current, former = 0) {
+	if (current >= 0 && current < unavailable.length && !unavailable[current]) return current;
+	const start = Math.max(0, Math.min(former, unavailable.length - 1));
+	for (let i = start; i < unavailable.length; i++) if (!unavailable[i]) return i;
+	for (let i = start - 1; i >= 0; i--) if (!unavailable[i]) return i;
+	return null;
+}
+var VdToolbar = class VdToolbar {
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	t = vdTexts("toolbar", { label: this.label });
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	element = inject(ElementRef).nativeElement;
+	document = inject(DOCUMENT);
+	descendants = contentChildren(VdToolbarItem, {
+		...ngDevMode ? { debugName: "descendants" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	snapshot = computed(() => {
+		const items = this.descendants().filter((item) => item.toolbar === this);
+		return {
+			items,
+			unavailable: items.map((item) => item.unavailable())
+		};
+	}, ...ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []);
+	active = linkedSignal({
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		source: this.snapshot,
+		computation: (source, previous) => {
+			const index = vdToolbarEntry(source.unavailable, previous?.value ? source.items.indexOf(previous.value) : -1, previous?.value ? previous.source.items.indexOf(previous.value) : 0);
+			return index === null ? null : source.items[index];
+		}
+	});
+	lastFocused = null;
+	constructor() {
+		afterRenderEffect(() => {
+			const { items, unavailable } = this.snapshot();
+			const target = this.active();
+			for (const item of items) {
+				const tabIndex = item === target ? 0 : -1;
+				if (item.element.tabIndex !== tabIndex) item.element.tabIndex = tabIndex;
+			}
+			const active = this.document.activeElement;
+			const oldIndex = this.lastFocused ? items.indexOf(this.lastFocused) : -1;
+			if (this.lastFocused && (oldIndex < 0 || unavailable[oldIndex]) && target && (active === this.document.body || active && this.element.contains(active)) && !this.element.closest("[hidden], [inert]")) target.element.focus();
+		});
+	}
+	remember(item) {
+		if (item.unavailable()) return;
+		this.lastFocused = item;
+		this.active.set(item);
+	}
+	onFocusOut(event) {
+		if (event.relatedTarget && !this.element.contains(event.relatedTarget)) this.lastFocused = null;
+	}
+	onKeydown(event) {
+		if (event.isComposing || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+		const { items, unavailable } = this.snapshot();
+		const index = items.findIndex((item) => item.element === event.target);
+		if (index < 0) return;
+		const target = vdRovingTarget(event.key, index, unavailable, {
+			orientation: this.orientation(),
+			dir: this.element.matches(":dir(rtl)") ? "rtl" : "ltr",
+			loop: true
+		});
+		if (target === null) return;
+		event.preventDefault();
+		this.active.set(items[target]);
+		items[target].element.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdToolbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: VdToolbar,
+		isStandalone: true,
+		selector: "[vdToolbar]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "toolbar" },
+			listeners: {
+				"keydown": "onKeydown($event)",
+				"focusout": "onFocusOut($event)"
+			},
+			properties: {
+				"attr.aria-label": "t().label",
+				"attr.aria-orientation": "orientation()",
+				"attr.data-orientation": "orientation()"
+			},
+			classAttribute: "vd-toolbar"
+		},
+		queries: [{
+			propertyName: "descendants",
+			predicate: VdToolbarItem,
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["vdToolbar"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdToolbar,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdToolbar]",
+			exportAs: "vdToolbar",
+			host: {
+				class: "vd-toolbar",
+				role: "toolbar",
+				"[attr.aria-label]": "t().label",
+				"[attr.aria-orientation]": "orientation()",
+				"[attr.data-orientation]": "orientation()",
+				"(keydown)": "onKeydown($event)",
+				"(focusout)": "onFocusOut($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		descendants: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => VdToolbarItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var VdToolbarItem = class VdToolbarItem {
+	hidden = input(false, {
+		...ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	toolbar = inject(VdToolbar);
+	element = inject(ElementRef).nativeElement;
+	button = inject(VdButton, { self: true });
+	group = inject(VdToolbarGroup, { optional: true });
+	unavailable = computed(() => {
+		if (this.hidden() || this.button.disabled() || this.button.loading()) return true;
+		let group = this.group;
+		while (group && group.toolbar === this.toolbar) {
+			if (group.hidden()) return true;
+			group = group.parent;
+		}
+		return false;
+	}, ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdToolbarItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdToolbarItem,
+		isStandalone: true,
+		selector: "button[vdButton][vdToolbarItem]",
+		inputs: { hidden: {
+			classPropertyName: "hidden",
+			publicName: "hidden",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			listeners: { "focus": "toolbar.remember(this)" },
+			properties: {
+				"hidden": "hidden()",
+				"attr.tabindex": "toolbar.active() === this ? 0 : -1"
+			},
+			classAttribute: "vd-toolbar__item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdToolbarItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[vdButton][vdToolbarItem]",
+			host: {
+				class: "vd-toolbar__item",
+				"[hidden]": "hidden()",
+				"[attr.tabindex]": "toolbar.active() === this ? 0 : -1",
+				"(focus)": "toolbar.remember(this)"
+			}
+		}]
+	}],
+	propDecorators: { hidden: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "hidden",
+			required: false
+		}]
+	}] }
+});
+var VdToolbarGroup = class VdToolbarGroup {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	hidden = input(false, {
+		...ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	toolbar = inject(VdToolbar);
+	parent = inject(VdToolbarGroup, {
+		optional: true,
+		skipSelf: true
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdToolbarGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdToolbarGroup,
+		isStandalone: true,
+		selector: "[vdToolbarGroup]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hidden: {
+				classPropertyName: "hidden",
+				publicName: "hidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: {
+				"attr.aria-label": "label()",
+				"attr.data-orientation": "toolbar.orientation()",
+				"hidden": "hidden()"
+			},
+			classAttribute: "vd-toolbar__group"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdToolbarGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdToolbarGroup]",
+			host: {
+				class: "vd-toolbar__group",
+				role: "group",
+				"[attr.aria-label]": "label()",
+				"[attr.data-orientation]": "toolbar.orientation()",
+				"[hidden]": "hidden()"
+			}
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		hidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidden",
+				required: false
+			}]
+		}]
+	}
+});
+var VdToolbarSeparator = class VdToolbarSeparator {
+	toolbar = inject(VdToolbar);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdToolbarSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdToolbarSeparator,
+		isStandalone: true,
+		selector: "[vdToolbarSeparator]",
+		host: {
+			attributes: { "role": "separator" },
+			properties: {
+				"attr.aria-orientation": "toolbar.orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"",
+				"attr.data-orientation": "toolbar.orientation()"
+			},
+			classAttribute: "vd-toolbar__separator"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdToolbarSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdToolbarSeparator]",
+			host: {
+				class: "vd-toolbar__separator",
+				role: "separator",
+				"[attr.aria-orientation]": "toolbar.orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"",
+				"[attr.data-orientation]": "toolbar.orientation()"
+			}
+		}]
+	}]
+});
+const VD_TOOLBAR = [
+	VdToolbar,
+	VdToolbarItem,
+	VdToolbarGroup,
+	VdToolbarSeparator
+];
+export { VD_TOOLBAR, VdToolbar, VdToolbarGroup, VdToolbarItem, VdToolbarSeparator };
+
+//# sourceMappingURL=vadem-ui-toolbar.mjs.map

package/fesm2022/vadem-ui-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-toolbar.mjs","names":[],"sources":["../../../projects/ui/toolbar/src/core/focus.ts","../../../projects/ui/toolbar/src/toolbar.ts"],"sourcesContent":["/** Keep remembered focus, otherwise recover at the former position, then before it. */\nexport function vdToolbarEntry(\n  unavailable: readonly boolean[],\n  current: number,\n  former = 0,\n): number | null {\n  if (current >= 0 && current < unavailable.length && !unavailable[current]) return current;\n  const start = Math.max(0, Math.min(former, unavailable.length - 1));\n  for (let i = start; i < unavailable.length; i++) if (!unavailable[i]) return i;\n  for (let i = start - 1; i >= 0; i--) if (!unavailable[i]) return i;\n  return null;\n}\n","import {\n  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { VdButton } from '@vadem/ui/button';\nimport { vdRovingTarget, type VdOrientation } from '@vadem/ui/keyboard';\nimport { vdToolbarEntry } from './core/focus';\nimport { vdTexts } from '@vadem/ui/locale';\n\ninterface ToolbarSnapshot {\n  items: readonly VdToolbarItem[];\n  unavailable: readonly boolean[];\n}\n\n/** A single keyboard stop for related button actions; consumers own activation. */\n@Directive({\n  selector: '[vdToolbar]',\n  exportAs: 'vdToolbar',\n  host: {\n    class: 'vd-toolbar',\n    role: 'toolbar',\n    '[attr.aria-label]': 't().label',\n    '[attr.aria-orientation]': 'orientation()',\n    '[attr.data-orientation]': 'orientation()',\n    '(keydown)': 'onKeydown($event)',\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class VdToolbar {\n  readonly label = input<string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('toolbar', { label: this.label });\n  readonly orientation = input<VdOrientation>('horizontal');\n  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly document = inject(DOCUMENT);\n  private readonly descendants = contentChildren(VdToolbarItem, { descendants: true });\n  readonly snapshot = computed<ToolbarSnapshot>(() => {\n    const items = this.descendants().filter((item) => item.toolbar === this);\n    return { items, unavailable: items.map((item) => item.unavailable()) };\n  });\n  readonly active = linkedSignal<ToolbarSnapshot, VdToolbarItem | null>({\n    source: this.snapshot,\n    computation: (source, previous) => {\n      const index = vdToolbarEntry(\n        source.unavailable,\n        previous?.value ? source.items.indexOf(previous.value) : -1,\n        previous?.value ? previous.source.items.indexOf(previous.value) : 0,\n      );\n      return index === null ? null : source.items[index];\n    },\n  });\n  private lastFocused: VdToolbarItem | null = null;\n\n  constructor() {\n    afterRenderEffect(() => {\n      const { items, unavailable } = this.snapshot();\n      const target = this.active();\n      // Toolbar is the sole owner of roving tabindex, including beside Button host bindings.\n      for (const item of items) {\n        const tabIndex = item === target ? 0 : -1;\n        if (item.element.tabIndex !== tabIndex) item.element.tabIndex = tabIndex;\n      }\n      const active = this.document.activeElement;\n      const oldIndex = this.lastFocused ? items.indexOf(this.lastFocused) : -1;\n      if (\n        this.lastFocused &&\n        (oldIndex < 0 || unavailable[oldIndex]) &&\n        target &&\n        (active === this.document.body || (active && this.element.contains(active))) &&\n        !this.element.closest('[hidden], [inert]')\n      ) {\n        target.element.focus();\n      }\n    });\n  }\n\n  remember(item: VdToolbarItem): void {\n    if (item.unavailable()) return;\n    this.lastFocused = item;\n    this.active.set(item);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    if (event.relatedTarget && !this.element.contains(event.relatedTarget as Node))\n      this.lastFocused = null;\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.isComposing || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)\n      return;\n    const { items, unavailable } = this.snapshot();\n    // Nested controls/independent toolbars must retain their own keys.\n    const index = items.findIndex((item) => item.element === event.target);\n    if (index < 0) return;\n    const target = vdRovingTarget(event.key, index, unavailable, {\n      orientation: this.orientation(),\n      dir: this.element.matches(':dir(rtl)') ? 'rtl' : 'ltr',\n      loop: true,\n    });\n    if (target === null) return;\n    event.preventDefault();\n    this.active.set(items[target]);\n    items[target].element.focus();\n  }\n}\n\n/** Add beside vdButton; native Enter/Space, disabled/loading and click actions stay with Button. */\n@Directive({\n  selector: 'button[vdButton][vdToolbarItem]',\n  host: {\n    class: 'vd-toolbar__item',\n    '[hidden]': 'hidden()',\n    '[attr.tabindex]': 'toolbar.active() === this ? 0 : -1',\n    '(focus)': 'toolbar.remember(this)',\n  },\n})\nexport class VdToolbarItem {\n  readonly hidden = input(false, { transform: booleanAttribute });\n  readonly toolbar = inject(VdToolbar);\n  readonly element = inject<ElementRef<HTMLButtonElement>>(ElementRef).nativeElement;\n  private readonly button = inject(VdButton, { self: true });\n  private readonly group = inject(VdToolbarGroup, { optional: true });\n  readonly unavailable = computed(() => {\n    if (this.hidden() || this.button.disabled() || this.button.loading()) return true;\n    let group = this.group;\n    while (group && group.toolbar === this.toolbar) {\n      if (group.hidden()) return true;\n      group = group.parent;\n    }\n    return false;\n  });\n}\n\n@Directive({\n  selector: '[vdToolbarGroup]',\n  host: {\n    class: 'vd-toolbar__group',\n    role: 'group',\n    '[attr.aria-label]': 'label()',\n    '[attr.data-orientation]': 'toolbar.orientation()',\n    '[hidden]': 'hidden()',\n  },\n})\nexport class VdToolbarGroup {\n  readonly label = input.required<string>();\n  readonly hidden = input(false, { transform: booleanAttribute });\n  readonly toolbar = inject(VdToolbar);\n  readonly parent = inject(VdToolbarGroup, { optional: true, skipSelf: true });\n}\n\n@Directive({\n  selector: '[vdToolbarSeparator]',\n  host: {\n    class: 'vd-toolbar__separator',\n    role: 'separator',\n    '[attr.aria-orientation]': 'toolbar.orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"',\n    '[attr.data-orientation]': 'toolbar.orientation()',\n  },\n})\nexport class VdToolbarSeparator {\n  protected readonly toolbar = inject(VdToolbar);\n}\n\nexport const VD_TOOLBAR = [VdToolbar, VdToolbarItem, VdToolbarGroup, VdToolbarSeparator] as const;\n"],"mappings":"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"}

package/fesm2022/vadem-ui-tooltip.mjs

@@ -0,0 +1,218 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, afterNextRender, effect, inject, input, numberAttribute, signal } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+const VD_TOOLTIP_DEFAULTS = {
+	showDelay: 500,
+	hideDelay: 120
+};
+let warmUntil = 0;
+const WARM_MS = 600;
+var VdTooltipController = class {
+	trigger;
+	tooltip;
+	options;
+	showTimer;
+	hideTimer;
+	hovering = false;
+	focused = false;
+	constructor(trigger, tooltip, options = VD_TOOLTIP_DEFAULTS) {
+		this.trigger = trigger;
+		this.tooltip = tooltip;
+		this.options = options;
+		trigger.addEventListener("pointerenter", this.onEnter);
+		trigger.addEventListener("pointerleave", this.onLeave);
+		tooltip.addEventListener("pointerenter", this.onEnter);
+		tooltip.addEventListener("pointerleave", this.onLeave);
+		trigger.addEventListener("focusin", this.onFocusIn);
+		trigger.addEventListener("focusout", this.onFocusOut);
+		trigger.addEventListener("pointerdown", this.onPress);
+		trigger.ownerDocument.addEventListener("keydown", this.onKeydown);
+	}
+	get isOpen() {
+		return this.tooltip.matches(":popover-open");
+	}
+	show() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		if (!this.isOpen && this.tooltip.isConnected) this.tooltip.showPopover();
+	}
+	hide() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		if (this.isOpen) {
+			this.tooltip.hidePopover();
+			warmUntil = Date.now() + WARM_MS;
+		}
+	}
+	destroy() {
+		this.hide();
+		this.trigger.removeEventListener("pointerenter", this.onEnter);
+		this.trigger.removeEventListener("pointerleave", this.onLeave);
+		this.tooltip.removeEventListener("pointerenter", this.onEnter);
+		this.tooltip.removeEventListener("pointerleave", this.onLeave);
+		this.trigger.removeEventListener("focusin", this.onFocusIn);
+		this.trigger.removeEventListener("focusout", this.onFocusOut);
+		this.trigger.removeEventListener("pointerdown", this.onPress);
+		this.trigger.ownerDocument.removeEventListener("keydown", this.onKeydown);
+	}
+	onEnter = (event) => {
+		if (event.pointerType === "touch") return;
+		this.hovering = true;
+		clearTimeout(this.hideTimer);
+		if (this.isOpen) return;
+		const delay = Date.now() < warmUntil ? 0 : this.options.showDelay;
+		clearTimeout(this.showTimer);
+		this.showTimer = setTimeout(() => this.show(), delay);
+	};
+	onLeave = (event) => {
+		if (event.pointerType === "touch") return;
+		this.hovering = false;
+		clearTimeout(this.showTimer);
+		if (this.focused) return;
+		clearTimeout(this.hideTimer);
+		this.hideTimer = setTimeout(() => this.hide(), this.options.hideDelay);
+	};
+	onFocusIn = () => {
+		if (!this.trigger.matches(":focus-visible")) return;
+		this.focused = true;
+		this.show();
+	};
+	onFocusOut = () => {
+		this.focused = false;
+		if (!this.hovering) this.hide();
+	};
+	onPress = () => this.hide();
+	onKeydown = (event) => {
+		if (event.key === "Escape" && this.isOpen) {
+			this.hide();
+			this.hovering = false;
+		}
+	};
+};
+function vdResetTooltipWarmth() {
+	warmUntil = 0;
+}
+var VdTooltip = class VdTooltip {
+	vdTooltip = input.required(...ngDevMode ? [{ debugName: "vdTooltip" }] : /* istanbul ignore next */ []);
+	vdTooltipPlacement = input("top", ...ngDevMode ? [{ debugName: "vdTooltipPlacement" }] : /* istanbul ignore next */ []);
+	vdTooltipDelay = input(VD_TOOLTIP_DEFAULTS.showDelay, {
+		...ngDevMode ? { debugName: "vdTooltipDelay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	el = inject(ElementRef).nativeElement;
+	id = vdUniqueId("vd-tooltip");
+	tip = signal(null, ...ngDevMode ? [{ debugName: "tip" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const doc = this.el.ownerDocument;
+			const tip = doc.createElement("div");
+			tip.id = this.id;
+			tip.className = "vd-tooltip";
+			tip.setAttribute("role", "tooltip");
+			tip.setAttribute("popover", "manual");
+			const anchor = `--${this.id}`;
+			this.el.style.setProperty("anchor-name", anchor);
+			tip.style.setProperty("position-anchor", anchor);
+			(this.el.closest("dialog") ?? doc.body).appendChild(tip);
+			const named = this.el.hasAttribute("aria-label") || this.el.hasAttribute("aria-labelledby") || !!this.el.textContent?.trim();
+			this.el.setAttribute(named ? "aria-describedby" : "aria-labelledby", this.id);
+			const controller = new VdTooltipController(this.el, tip, {
+				...VD_TOOLTIP_DEFAULTS,
+				showDelay: this.vdTooltipDelay()
+			});
+			this.tip.set(tip);
+			destroyRef.onDestroy(() => {
+				controller.destroy();
+				tip.remove();
+				this.el.style.removeProperty("anchor-name");
+				this.el.removeAttribute(named ? "aria-describedby" : "aria-labelledby");
+			});
+		});
+		effect(() => {
+			const tip = this.tip();
+			if (!tip) return;
+			tip.textContent = this.vdTooltip();
+			tip.dataset["placement"] = this.vdTooltipPlacement();
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdTooltip,
+		isStandalone: true,
+		selector: "[vdTooltip]",
+		inputs: {
+			vdTooltip: {
+				classPropertyName: "vdTooltip",
+				publicName: "vdTooltip",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			vdTooltipPlacement: {
+				classPropertyName: "vdTooltipPlacement",
+				publicName: "vdTooltipPlacement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			vdTooltipDelay: {
+				classPropertyName: "vdTooltipDelay",
+				publicName: "vdTooltipDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTooltip,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[vdTooltip]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		vdTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vdTooltip",
+				required: true
+			}]
+		}],
+		vdTooltipPlacement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vdTooltipPlacement",
+				required: false
+			}]
+		}],
+		vdTooltipDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vdTooltipDelay",
+				required: false
+			}]
+		}]
+	}
+});
+export { VD_TOOLTIP_DEFAULTS, VdTooltip, VdTooltipController, vdResetTooltipWarmth };
+
+//# sourceMappingURL=vadem-ui-tooltip.mjs.map

package/fesm2022/vadem-ui-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-tooltip.mjs","names":[],"sources":["../../../projects/ui/tooltip/src/core/tooltip-controller.ts","../../../projects/ui/tooltip/src/tooltip.ts"],"sourcesContent":["/**\n * Framework-agnostic tooltip behavior for a trigger + a `popover=\"manual\"` element:\n * - hover shows after a delay (instantly while another tooltip was just open: \"warm\" state),\n *   keyboard focus (:focus-visible) shows immediately;\n * - the tooltip itself is hoverable, so the pointer can move onto it (WCAG 1.4.13);\n * - Escape hides it without moving focus; touch input never shows it.\n */\n\nexport interface VdTooltipControllerOptions {\n  /** Hover delay before showing, ms. */\n  showDelay: number;\n  /** Grace period after the pointer leaves, ms. */\n  hideDelay: number;\n}\n\nexport const VD_TOOLTIP_DEFAULTS: VdTooltipControllerOptions = { showDelay: 500, hideDelay: 120 };\n\n/** Shared across instances: moving between triggers right after one closed shows instantly. */\nlet warmUntil = 0;\nconst WARM_MS = 600;\n\nexport class VdTooltipController {\n  private showTimer: ReturnType<typeof setTimeout> | undefined;\n  private hideTimer: ReturnType<typeof setTimeout> | undefined;\n  private hovering = false;\n  private focused = false;\n\n  constructor(\n    private readonly trigger: HTMLElement,\n    private readonly tooltip: HTMLElement,\n    private readonly options: VdTooltipControllerOptions = VD_TOOLTIP_DEFAULTS,\n  ) {\n    trigger.addEventListener('pointerenter', this.onEnter);\n    trigger.addEventListener('pointerleave', this.onLeave);\n    tooltip.addEventListener('pointerenter', this.onEnter);\n    tooltip.addEventListener('pointerleave', this.onLeave);\n    trigger.addEventListener('focusin', this.onFocusIn);\n    trigger.addEventListener('focusout', this.onFocusOut);\n    trigger.addEventListener('pointerdown', this.onPress);\n    trigger.ownerDocument.addEventListener('keydown', this.onKeydown);\n  }\n\n  get isOpen(): boolean {\n    return this.tooltip.matches(':popover-open');\n  }\n\n  show(): void {\n    clearTimeout(this.showTimer);\n    clearTimeout(this.hideTimer);\n    if (!this.isOpen && this.tooltip.isConnected) this.tooltip.showPopover();\n  }\n\n  hide(): void {\n    clearTimeout(this.showTimer);\n    clearTimeout(this.hideTimer);\n    if (this.isOpen) {\n      this.tooltip.hidePopover();\n      warmUntil = Date.now() + WARM_MS;\n    }\n  }\n\n  destroy(): void {\n    this.hide();\n    this.trigger.removeEventListener('pointerenter', this.onEnter);\n    this.trigger.removeEventListener('pointerleave', this.onLeave);\n    this.tooltip.removeEventListener('pointerenter', this.onEnter);\n    this.tooltip.removeEventListener('pointerleave', this.onLeave);\n    this.trigger.removeEventListener('focusin', this.onFocusIn);\n    this.trigger.removeEventListener('focusout', this.onFocusOut);\n    this.trigger.removeEventListener('pointerdown', this.onPress);\n    this.trigger.ownerDocument.removeEventListener('keydown', this.onKeydown);\n  }\n\n  private readonly onEnter = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.hovering = true;\n    clearTimeout(this.hideTimer);\n    if (this.isOpen) return;\n    const delay = Date.now() < warmUntil ? 0 : this.options.showDelay;\n    clearTimeout(this.showTimer);\n    this.showTimer = setTimeout(() => this.show(), delay);\n  };\n\n  private readonly onLeave = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    this.hovering = false;\n    clearTimeout(this.showTimer);\n    if (this.focused) return;\n    clearTimeout(this.hideTimer);\n    this.hideTimer = setTimeout(() => this.hide(), this.options.hideDelay);\n  };\n\n  private readonly onFocusIn = () => {\n    // Only keyboard-style focus; a mouse click focuses the button too and shouldn't pop it.\n    if (!this.trigger.matches(':focus-visible')) return;\n    this.focused = true;\n    this.show();\n  };\n\n  private readonly onFocusOut = () => {\n    this.focused = false;\n    if (!this.hovering) this.hide();\n  };\n\n  /** Pressing the trigger acts on it; the tooltip gets out of the way. */\n  private readonly onPress = () => this.hide();\n\n  private readonly onKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.isOpen) {\n      this.hide();\n      this.hovering = false;\n    }\n  };\n}\n\n/** Test helper: reset the shared warm-up state. */\nexport function vdResetTooltipWarmth(): void {\n  warmUntil = 0;\n}\n","import {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { vdUniqueId } from '@vadem/ui/field';\nimport { VD_TOOLTIP_DEFAULTS, VdTooltipController } from './core/tooltip-controller';\n\nexport type VdTooltipPlacement = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * Short plain-text tooltip on hover and keyboard focus. Rendered as a `popover=\"manual\"`\n * element in the top layer and positioned with CSS anchor positioning. Spec: specs/tooltip.md\n */\n@Directive({\n  selector: '[vdTooltip]',\n})\nexport class VdTooltip {\n  readonly vdTooltip = input.required<string>();\n  readonly vdTooltipPlacement = input<VdTooltipPlacement>('top');\n  readonly vdTooltipDelay = input(VD_TOOLTIP_DEFAULTS.showDelay, { transform: numberAttribute });\n\n  private readonly el: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly id = vdUniqueId('vd-tooltip');\n  private readonly tip = signal<HTMLElement | null>(null);\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    // Browser-only: create the popover, wire ARIA and anchoring.\n    afterNextRender(() => {\n      const doc = this.el.ownerDocument;\n      const tip = doc.createElement('div');\n      tip.id = this.id;\n      tip.className = 'vd-tooltip';\n      tip.setAttribute('role', 'tooltip');\n      tip.setAttribute('popover', 'manual');\n\n      const anchor = `--${this.id}`;\n      this.el.style.setProperty('anchor-name', anchor);\n      tip.style.setProperty('position-anchor', anchor);\n      // Inside a modal dialog everything outside it is inert; keep the tooltip in the dialog.\n      (this.el.closest('dialog') ?? doc.body).appendChild(tip);\n\n      // A trigger without its own name (icon button) is *labelled* by the tooltip;\n      // otherwise the tooltip is a description.\n      const named =\n        this.el.hasAttribute('aria-label') ||\n        this.el.hasAttribute('aria-labelledby') ||\n        !!this.el.textContent?.trim();\n      this.el.setAttribute(named ? 'aria-describedby' : 'aria-labelledby', this.id);\n\n      const controller = new VdTooltipController(this.el, tip, {\n        ...VD_TOOLTIP_DEFAULTS,\n        showDelay: this.vdTooltipDelay(),\n      });\n      this.tip.set(tip);\n\n      destroyRef.onDestroy(() => {\n        controller.destroy();\n        tip.remove();\n        this.el.style.removeProperty('anchor-name');\n        this.el.removeAttribute(named ? 'aria-describedby' : 'aria-labelledby');\n      });\n    });\n\n    effect(() => {\n      const tip = this.tip();\n      if (!tip) return;\n      tip.textContent = this.vdTooltip();\n      tip.dataset['placement'] = this.vdTooltipPlacement();\n    });\n  }\n}\n"],"mappings":"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"}