@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-hover-card.mjs

@@ -0,0 +1,230 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, computed, inject, input, numberAttribute } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, UiLayerRoot, UiPopperContentBase, cn } from "@loomui-ng/ui/utils";
+const CONTENT_CLASS = "z-50 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+var UiHoverCard = class UiHoverCard extends UiLayerRoot {
+	openDelay = input(700, {
+		...ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	closeDelay = input(300, {
+		...ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	timer;
+	constructor() {
+		super();
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+	}
+	show(instant = false) {
+		clearTimeout(this.timer);
+		if (instant || this.openDelay() === 0) return this.open.set(true);
+		this.timer = setTimeout(() => this.open.set(true), this.openDelay());
+	}
+	hide() {
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => this.open.set(false), this.closeDelay());
+	}
+	keep() {
+		clearTimeout(this.timer);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiHoverCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiHoverCard,
+		isStandalone: true,
+		selector: "[uiHoverCard], ui-hover-card",
+		inputs: {
+			openDelay: {
+				classPropertyName: "openDelay",
+				publicName: "openDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeDelay: {
+				classPropertyName: "closeDelay",
+				publicName: "closeDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		exportAs: ["uiHoverCard"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiHoverCard,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiHoverCard], ui-hover-card",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiHoverCard"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		openDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openDelay",
+				required: false
+			}]
+		}],
+		closeDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeDelay",
+				required: false
+			}]
+		}]
+	}
+});
+var UiHoverCardTrigger = class UiHoverCardTrigger {
+	root = inject(UiHoverCard);
+	el = inject(ElementRef).nativeElement;
+	constructor() {
+		this.root.trigger.set(this.el);
+	}
+	onEnter(e) {
+		if (e.pointerType !== "touch") this.root.show();
+	}
+	onFocus() {
+		if (this.el.matches(":focus-visible")) this.root.show(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiHoverCardTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiHoverCardTrigger,
+		isStandalone: true,
+		selector: "[uiHoverCardTrigger], ui-hover-card-trigger",
+		host: {
+			attributes: { "data-slot": "hover-card-trigger" },
+			listeners: {
+				"pointerenter": "onEnter($event)",
+				"pointerleave": "root.hide()",
+				"focus": "onFocus()",
+				"blur": "root.hide()"
+			},
+			properties: { "attr.data-state": "root.open() ? \"open\" : \"closed\"" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiHoverCardTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiHoverCardTrigger], ui-hover-card-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "hover-card-trigger",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"(pointerenter)": "onEnter($event)",
+				"(pointerleave)": "root.hide()",
+				"(focus)": "onFocus()",
+				"(blur)": "root.hide()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiHoverCardContent = class UiHoverCardContent extends UiPopperContentBase {
+	root = inject(UiHoverCard);
+	varPrefix = "--radix-hover-card";
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		this.restoreFocusOnClose = false;
+		this.init();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiHoverCardContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiHoverCardContent,
+		isStandalone: true,
+		selector: "[uiHoverCardContent], ui-hover-card-content",
+		host: {
+			attributes: { "data-slot": "hover-card-content" },
+			listeners: {
+				"pointerenter": "root.keep()",
+				"pointerleave": "root.hide()"
+			},
+			properties: {
+				"attr.data-state": "root.state()",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiHoverCardContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiHoverCardContent], ui-hover-card-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "hover-card-content",
+				"[attr.data-state]": "root.state()",
+				"[attr.class]": "classes()",
+				"(pointerenter)": "root.keep()",
+				"(pointerleave)": "root.hide()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+const UI_HOVER_CARD = [
+	UiHoverCard,
+	UiHoverCardTrigger,
+	UiHoverCardContent
+];
+export { UI_HOVER_CARD, UiHoverCard, UiHoverCardContent, UiHoverCardTrigger };
+
+//# sourceMappingURL=loomui-ng-ui-hover-card.mjs.map

package/fesm2022/loomui-ng-ui-hover-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-hover-card.mjs","names":[],"sources":["../../../libs/ui/hover-card/hover-card.ts"],"sourcesContent":["import { computed, DestroyRef, Directive, ElementRef, inject, input, numberAttribute } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiLayerRoot } from '@loomui-ng/ui/utils';\nimport { UiPopperContentBase } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n// Observed live (hover on the demo trigger): content has data-side/data-align/data-state and NO role; width comes from the demo (w-64).\nconst CONTENT_CLASS =\n  'z-50 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95';\n\n/**\n * <div uiHoverCard class=\"contents\">\n *   <button uiButton variant=\"link\" uiHoverCardTrigger>@nextjs</button>\n *   <div uiHoverCardContent class=\"w-64\">…</div>\n * </div>\n * Opens on pointer hover (openDelay 700ms) and keyboard focus; closes after closeDelay 300ms (Radix defaults).\n */\n@Directive({ selector: '[uiHoverCard], ui-hover-card', hostDirectives: [UiElementHost], exportAs: 'uiHoverCard' })\nexport class UiHoverCard extends UiLayerRoot {\n  readonly openDelay = input(700, { transform: numberAttribute });\n  readonly closeDelay = input(300, { transform: numberAttribute });\n  private timer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor() {\n    super();\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n  show(instant = false): void {\n    clearTimeout(this.timer);\n    if (instant || this.openDelay() === 0) return this.open.set(true);\n    this.timer = setTimeout(() => this.open.set(true), this.openDelay());\n  }\n  hide(): void {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.open.set(false), this.closeDelay());\n  }\n  keep(): void {\n    clearTimeout(this.timer);\n  }\n}\n\n@Directive({\n  selector: '[uiHoverCardTrigger], ui-hover-card-trigger', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'hover-card-trigger',\n    '[attr.data-state]': 'root.open() ? \"open\" : \"closed\"',\n    '(pointerenter)': 'onEnter($event)',\n    '(pointerleave)': 'root.hide()',\n    '(focus)': 'onFocus()',\n    '(blur)': 'root.hide()',\n  },\n})\nexport class UiHoverCardTrigger {\n  protected readonly root = inject(UiHoverCard);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  constructor() {\n    this.root.trigger.set(this.el);\n  }\n  protected onEnter(e: PointerEvent): void {\n    if (e.pointerType !== 'touch') this.root.show();\n  }\n  protected onFocus(): void {\n    if (this.el.matches(':focus-visible')) this.root.show(true);\n  }\n}\n\n@Directive({\n  selector: '[uiHoverCardContent], ui-hover-card-content', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'hover-card-content',\n    '[attr.data-state]': 'root.state()',\n    '[attr.class]': 'classes()',\n    '(pointerenter)': 'root.keep()',\n    '(pointerleave)': 'root.hide()',\n  },\n})\nexport class UiHoverCardContent extends UiPopperContentBase {\n  protected readonly root = inject(UiHoverCard);\n  protected readonly varPrefix = '--radix-hover-card';\n  protected readonly classes = computed(() => cn(CONTENT_CLASS, this.userClass()));\n  constructor() {\n    super();\n    this.restoreFocusOnClose = false;\n    this.init();\n  }\n}\n\nexport const UI_HOVER_CARD = [UiHoverCard, UiHoverCardTrigger, UiHoverCardContent] as const;\n"],"mappings":"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"}