@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-toggle.mjs

@@ -0,0 +1,219 @@
+import * as i0 from "@angular/core";
+import { Directive, booleanAttribute, computed, forwardRef, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { cva } from "class-variance-authority";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent hover:bg-muted",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var UiToggle = class UiToggle {
+	pressed = model(false, ...ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(toggleVariants({
+		variant: this.variant(),
+		size: this.size()
+	}), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	toggle() {
+		if (this.isDisabled()) return;
+		const next = !this.pressed();
+		this.pressed.set(next);
+		this.onChange(next);
+	}
+	writeValue(v) {
+		this.pressed.set(!!v);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiToggle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiToggle,
+		isStandalone: true,
+		selector: "button[uiToggle], ui-toggle",
+		inputs: {
+			pressed: {
+				classPropertyName: "pressed",
+				publicName: "pressed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				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
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pressed: "pressedChange" },
+		host: {
+			attributes: {
+				"type": "button",
+				"data-slot": "toggle"
+			},
+			listeners: {
+				"click": "toggle()",
+				"blur": "onTouched()"
+			},
+			properties: {
+				"attr.aria-pressed": "pressed()",
+				"attr.data-state": "pressed() ? \"on\" : \"off\"",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.disabled": "(isDisabled()) ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiToggle),
+			multi: true
+		}],
+		exportAs: ["uiToggle"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiToggle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[uiToggle], ui-toggle",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiToggle",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiToggle),
+				multi: true
+			}],
+			host: {
+				type: "button",
+				"data-slot": "toggle",
+				"[attr.aria-pressed]": "pressed()",
+				"[attr.data-state]": "pressed() ? \"on\" : \"off\"",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.disabled]": "(isDisabled()) ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "toggle()",
+				"(blur)": "onTouched()"
+			}
+		}]
+	}],
+	propDecorators: {
+		pressed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pressed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pressedChange"]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_TOGGLE = [UiToggle];
+export { UI_TOGGLE, UiToggle, toggleVariants };
+
+//# sourceMappingURL=loomui-ng-ui-toggle.mjs.map

package/fesm2022/loomui-ng-ui-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-toggle.mjs","names":[],"sources":["../../../libs/ui/toggle/toggle.ts"],"sourcesContent":["import { booleanAttribute, computed, Directive, forwardRef, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/** Classes derived from the live Toggle (docs/behavior-specs/toggle.md); pl/pr → ps/pe for RTL. */\nexport const toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent hover:bg-muted',\n        outline: 'border border-input bg-transparent hover:bg-muted',\n      },\n      size: {\n        default: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n\n/** <button uiToggle [(pressed)]=\"bold\" aria-label=\"Toggle bold\">B</button> */\n@Directive({\n  selector: 'button[uiToggle], ui-toggle', hostDirectives: [UiElementHost],\n  exportAs: 'uiToggle',\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiToggle), multi: true }],\n  host: {\n    type: 'button',\n    'data-slot': 'toggle',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.disabled]': '(isDisabled()) ? \"\" : null',\n    '[attr.class]': 'classes()',\n    '(click)': 'toggle()',\n    '(blur)': 'onTouched()',\n  },\n})\nexport class UiToggle implements ControlValueAccessor {\n  readonly pressed = model(false);\n  readonly variant = input<NonNullable<ToggleVariants['variant']>>('default');\n  readonly size = input<NonNullable<ToggleVariants['size']>>('default');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  private readonly cvaDisabled = signal(false);\n  protected readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n  protected readonly classes = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.userClass()));\n\n  private onChange: (v: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  protected toggle(): void {\n    if (this.isDisabled()) return;\n    const next = !this.pressed();\n    this.pressed.set(next);\n    this.onChange(next);\n  }\n  writeValue(v: boolean | null): void {\n    this.pressed.set(!!v);\n  }\n  registerOnChange(fn: (v: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.cvaDisabled.set(d);\n  }\n}\n\nexport const UI_TOGGLE = [UiToggle] as const;\n"],"mappings":"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"}

package/fesm2022/loomui-ng-ui-tooltip.mjs

@@ -0,0 +1,240 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, computed, inject, input, numberAttribute, signal } 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 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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 UiTooltip = class UiTooltip extends UiLayerRoot {
+	delay = input(0, {
+		...ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	openedBy = signal("hover", ...ngDevMode ? [{ debugName: "openedBy" }] : /* istanbul ignore next */ []);
+	timer;
+	constructor() {
+		super();
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+	}
+	show(by) {
+		clearTimeout(this.timer);
+		this.openedBy.set(by);
+		if (by === "focus" || this.delay() === 0) return this.open.set(true);
+		this.timer = setTimeout(() => this.open.set(true), this.delay());
+	}
+	hide(graceMs = 0) {
+		clearTimeout(this.timer);
+		if (!graceMs) return this.open.set(false);
+		this.timer = setTimeout(() => this.open.set(false), graceMs);
+	}
+	cancelHide() {
+		clearTimeout(this.timer);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiTooltip,
+		isStandalone: true,
+		selector: "[uiTooltip], ui-tooltip",
+		inputs: { delay: {
+			classPropertyName: "delay",
+			publicName: "delay",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		exportAs: ["uiTooltip"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTooltip,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTooltip], ui-tooltip",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiTooltip"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { delay: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "delay",
+			required: false
+		}]
+	}] }
+});
+var UiTooltipTrigger = class UiTooltipTrigger {
+	tip = inject(UiTooltip);
+	constructor() {
+		this.tip.trigger.set(inject(ElementRef).nativeElement);
+	}
+	onEnter(e) {
+		if (e.pointerType === "touch") return;
+		this.tip.show("hover");
+	}
+	onFocus() {
+		if (this.tip.trigger()?.matches(":focus-visible")) this.tip.show("focus");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTooltipTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiTooltipTrigger,
+		isStandalone: true,
+		selector: "[uiTooltipTrigger], ui-tooltip-trigger",
+		host: {
+			attributes: { "data-slot": "tooltip-trigger" },
+			listeners: {
+				"pointerenter": "onEnter($event)",
+				"pointerleave": "tip.hide(100)",
+				"focus": "onFocus()",
+				"blur": "tip.hide()",
+				"pointerdown": "tip.hide()",
+				"keydown.escape": "tip.hide()"
+			},
+			properties: {
+				"attr.data-state": "tip.open() ? (tip.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\") : \"closed\"",
+				"attr.aria-describedby": "tip.open() ? tip.id + \"-tip\" : null"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTooltipTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTooltipTrigger], ui-tooltip-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "tooltip-trigger",
+				"[attr.data-state]": "tip.open() ? (tip.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\") : \"closed\"",
+				"[attr.aria-describedby]": "tip.open() ? tip.id + \"-tip\" : null",
+				"(pointerenter)": "onEnter($event)",
+				"(pointerleave)": "tip.hide(100)",
+				"(focus)": "onFocus()",
+				"(blur)": "tip.hide()",
+				"(pointerdown)": "tip.hide()",
+				"(keydown.escape)": "tip.hide()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiTooltipContent = class UiTooltipContent extends UiPopperContentBase {
+	root = inject(UiTooltip);
+	varPrefix = "--radix-tooltip";
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	sr = null;
+	arrow = null;
+	constructor() {
+		super();
+		this.closeOnOutside = false;
+		this.restoreFocusOnClose = false;
+		this.init();
+	}
+	onAttached() {
+		this.sr = document.createElement("span");
+		this.sr.id = `${this.root.id}-tip`;
+		this.sr.setAttribute("role", "tooltip");
+		this.sr.style.cssText = "position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;overflow-wrap:normal";
+		this.sr.textContent = this.el.textContent;
+		this.el.appendChild(this.sr);
+		this.arrow = document.createElement("span");
+		this.arrow.setAttribute("data-slot", "tooltip-arrow");
+		this.arrow.setAttribute("aria-hidden", "true");
+		this.arrow.className = "absolute size-2.5 rotate-45 rounded-[2px] bg-foreground group-data-[side=bottom]:-top-1 group-data-[side=top]:-bottom-1 left-1/2 -translate-x-1/2";
+		this.el.classList.add("group", "relative");
+		this.el.appendChild(this.arrow);
+	}
+	onDetached() {
+		this.sr?.remove();
+		this.arrow?.remove();
+		this.sr = this.arrow = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTooltipContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiTooltipContent,
+		isStandalone: true,
+		selector: "[uiTooltipContent], ui-tooltip-content",
+		host: {
+			attributes: { "data-slot": "tooltip-content" },
+			listeners: {
+				"pointerenter": "root.cancelHide()",
+				"pointerleave": "root.hide(100)"
+			},
+			properties: {
+				"attr.data-state": "root.state() === \"closed\" ? \"closed\" : root.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\"",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTooltipContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTooltipContent], ui-tooltip-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "tooltip-content",
+				"[attr.data-state]": "root.state() === \"closed\" ? \"closed\" : root.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\"",
+				"[attr.class]": "classes()",
+				"(pointerenter)": "root.cancelHide()",
+				"(pointerleave)": "root.hide(100)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+const UI_TOOLTIP = [
+	UiTooltip,
+	UiTooltipTrigger,
+	UiTooltipContent
+];
+export { UI_TOOLTIP, UiTooltip, UiTooltipContent, UiTooltipTrigger };
+
+//# sourceMappingURL=loomui-ng-ui-tooltip.mjs.map

package/fesm2022/loomui-ng-ui-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-tooltip.mjs","names":[],"sources":["../../../libs/ui/tooltip/tooltip.ts"],"sourcesContent":["import { computed, signal, 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\nconst CONTENT_CLASS =\n  'z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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 uiTooltip class=\"contents\">\n *   <button uiButton uiTooltipTrigger>Hover</button>\n *   <div uiTooltipContent>Add to library</div>\n * </div>\n *\n * Observed on live site: content `data-state=\"delayed-open\"` when opened by hover; a visually-hidden\n * `role=\"tooltip\"` copy of the text is inside the content and referenced by the trigger's aria-describedby.\n */\n@Directive({ selector: '[uiTooltip], ui-tooltip', hostDirectives: [UiElementHost], exportAs: 'uiTooltip' })\nexport class UiTooltip extends UiLayerRoot {\n  /** Hover-open delay in ms (shadcn default is 0). */\n  readonly delay = input(0, { transform: numberAttribute });\n  readonly openedBy = signal<'hover' | 'focus'>('hover');\n  private timer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor() {\n    super();\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n\n  show(by: 'hover' | 'focus'): void {\n    clearTimeout(this.timer);\n    this.openedBy.set(by);\n    if (by === 'focus' || this.delay() === 0) return this.open.set(true);\n    this.timer = setTimeout(() => this.open.set(true), this.delay());\n  }\n\n  hide(graceMs = 0): void {\n    clearTimeout(this.timer);\n    if (!graceMs) return this.open.set(false);\n    this.timer = setTimeout(() => this.open.set(false), graceMs);\n  }\n\n  cancelHide(): void {\n    clearTimeout(this.timer);\n  }\n}\n\n@Directive({\n  selector: '[uiTooltipTrigger], ui-tooltip-trigger', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'tooltip-trigger',\n    '[attr.data-state]': 'tip.open() ? (tip.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\") : \"closed\"',\n    '[attr.aria-describedby]': 'tip.open() ? tip.id + \"-tip\" : null',\n    '(pointerenter)': 'onEnter($event)',\n    '(pointerleave)': 'tip.hide(100)',\n    '(focus)': 'onFocus()',\n    '(blur)': 'tip.hide()',\n    '(pointerdown)': 'tip.hide()',\n    '(keydown.escape)': 'tip.hide()',\n  },\n})\nexport class UiTooltipTrigger {\n  protected readonly tip = inject(UiTooltip);\n  constructor() {\n    this.tip.trigger.set(inject<ElementRef<HTMLElement>>(ElementRef).nativeElement);\n  }\n  protected onEnter(e: PointerEvent): void {\n    if (e.pointerType === 'touch') return;\n    this.tip.show('hover');\n  }\n  protected onFocus(): void {\n    // Only keyboard focus opens the tooltip (focus-visible), like Radix.\n    const el = this.tip.trigger();\n    if (el?.matches(':focus-visible')) this.tip.show('focus');\n  }\n}\n\n@Directive({\n  selector: '[uiTooltipContent], ui-tooltip-content', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'tooltip-content',\n    '[attr.data-state]': 'root.state() === \"closed\" ? \"closed\" : root.openedBy() === \"hover\" ? \"delayed-open\" : \"instant-open\"',\n    '[attr.class]': 'classes()',\n    '(pointerenter)': 'root.cancelHide()',\n    '(pointerleave)': 'root.hide(100)',\n  },\n})\nexport class UiTooltipContent extends UiPopperContentBase {\n  protected readonly root = inject(UiTooltip);\n  protected readonly varPrefix = '--radix-tooltip';\n  protected readonly classes = computed(() => cn(CONTENT_CLASS, this.userClass()));\n  private sr: HTMLElement | null = null;\n  private arrow: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    this.closeOnOutside = false;\n    this.restoreFocusOnClose = false;\n    this.init();\n  }\n\n  protected override onAttached(): void {\n    // Visually hidden tooltip for assistive tech (matches Radix output).\n    this.sr = document.createElement('span');\n    this.sr.id = `${this.root.id}-tip`;\n    this.sr.setAttribute('role', 'tooltip');\n    this.sr.style.cssText =\n      'position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;overflow-wrap:normal';\n    this.sr.textContent = this.el.textContent;\n    this.el.appendChild(this.sr);\n\n    this.arrow = document.createElement('span');\n    this.arrow.setAttribute('data-slot', 'tooltip-arrow');\n    this.arrow.setAttribute('aria-hidden', 'true');\n    // Arrow classes are UNKNOWN on the live site (only a Radix svg was observed); a rotated square is used.\n    this.arrow.className =\n      'absolute size-2.5 rotate-45 rounded-[2px] bg-foreground ' +\n      'group-data-[side=bottom]:-top-1 group-data-[side=top]:-bottom-1 left-1/2 -translate-x-1/2';\n    this.el.classList.add('group', 'relative');\n    this.el.appendChild(this.arrow);\n  }\n\n  protected override onDetached(): void {\n    this.sr?.remove();\n    this.arrow?.remove();\n    this.sr = this.arrow = null;\n  }\n}\n\nexport const UI_TOOLTIP = [UiTooltip, UiTooltipTrigger, UiTooltipContent] as const;\n"],"mappings":"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"}

package/fesm2022/loomui-ng-ui-typography.mjs

@@ -0,0 +1,129 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const typographyClasses = {
+	h1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",
+	h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+	h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+	h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+	p: "leading-7 [&:not(:first-child)]:mt-6",
+	blockquote: "mt-6 border-s-2 ps-6 italic",
+	list: "my-6 ms-6 list-disc [&>li]:mt-2",
+	code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+	lead: "text-xl text-muted-foreground",
+	large: "text-lg font-semibold",
+	small: "text-sm leading-none font-medium",
+	muted: "text-sm text-muted-foreground"
+};
+var UiTypography = class UiTypography {
+	attrVariant = input("", {
+		...ngDevMode ? { debugName: "attrVariant" } : /* istanbul ignore next */ {},
+		alias: "uiTypography"
+	});
+	elVariant = input("", {
+		...ngDevMode ? { debugName: "elVariant" } : /* istanbul ignore next */ {},
+		alias: "variant"
+	});
+	variant = computed(() => this.attrVariant() || this.elVariant() || "p", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(typographyClasses[this.variant()], this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiTypography,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiTypography,
+		isStandalone: true,
+		selector: "[uiTypography], ui-typography",
+		inputs: {
+			attrVariant: {
+				classPropertyName: "attrVariant",
+				publicName: "uiTypography",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			elVariant: {
+				classPropertyName: "elVariant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "typography" },
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiTypography,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiTypography], ui-typography",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "typography",
+				"[attr.data-variant]": "variant()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		attrVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uiTypography",
+				required: false
+			}]
+		}],
+		elVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_TYPOGRAPHY = [UiTypography];
+export { UI_TYPOGRAPHY, UiTypography, typographyClasses };
+
+//# sourceMappingURL=loomui-ng-ui-typography.mjs.map

package/fesm2022/loomui-ng-ui-typography.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-typography.mjs","names":[],"sources":["../../../libs/ui/typography/typography.ts"],"sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nexport type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'list' | 'code' | 'lead' | 'large' | 'small' | 'muted';\n\nexport const typographyClasses: Record<TypographyVariant, string> = {\n  h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight text-balance',\n  h2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',\n  h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',\n  h4: 'scroll-m-20 text-xl font-semibold tracking-tight',\n  p: 'leading-7 [&:not(:first-child)]:mt-6',\n  blockquote: 'mt-6 border-s-2 ps-6 italic',\n  list: 'my-6 ms-6 list-disc [&>li]:mt-2',\n  code: 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',\n  lead: 'text-xl text-muted-foreground',\n  large: 'text-lg font-semibold',\n  small: 'text-sm leading-none font-medium',\n  muted: 'text-sm text-muted-foreground',\n};\n\n/**\n * Typographic styles as a directive: <h1 uiTypography=\"h1\">Title</h1>, <p uiTypography=\"lead\">…</p>, or as an element:\n * <ui-typography variant=\"h1\">Title</ui-typography>.\n * Deviation: the live docs Typography page now redirects to \"Typeset\" (a CSS system with its own builder). This ships the\n * classic shadcn typography recipe (class strings from the former docs page) as a thin directive; Typeset is not reproduced.\n */\n@Directive({\n  selector: '[uiTypography], ui-typography', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'typography', '[attr.data-variant]': 'variant()', '[attr.class]': 'classes()' },\n})\nexport class UiTypography {\n  /** Attribute form: `<p uiTypography=\"lead\">`. */\n  readonly attrVariant = input<TypographyVariant | ''>('', { alias: 'uiTypography' });\n  /** Element form: `<ui-typography variant=\"lead\">`. */\n  readonly elVariant = input<TypographyVariant | ''>('', { alias: 'variant' });\n  readonly variant = computed<TypographyVariant>(() => this.attrVariant() || this.elVariant() || 'p');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(typographyClasses[this.variant()], this.userClass()));\n}\n\nexport const UI_TYPOGRAPHY = [UiTypography] as const;\n"],"mappings":";;;;AAMA,MAAa,oBAAuD;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,GAAG;CACH,YAAY;CACZ,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;AACR;AAYD,IAAa,eAAb,MAAa,aAAY;CAEd,cAAc,MAA8B,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,OAAO;CAAc,CAAA;CAEvE,YAAY,MAA8B,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAS,CAAA;CAChE,UAAU,eAAkC,KAAK,YAAW,KAAM,KAAK,UAAS,KAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC1F,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAe,GAAG,kBAAkB,KAAK,QAAO,IAAK,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAPzF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,aAAA,aAAA;GAAA,YAAA;IAAA,qBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAJxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAiC,gBAAgB,CAAC,aAAa;GACzE,MAAM;IAAE,aAAa;IAAc,uBAAuB;IAAa,gBAAgB;GAAW;EACnG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWD,MAAa,gBAAgB,CAAC,YAAY"}