@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-component-utils-core.mjs

@@ -1,314 +1,181 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { InjectionToken, inject, APP_ID, signal } from '@angular/core';
-
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { APP_ID, InjectionToken, inject, signal } from "@angular/core";
 function cn(...inputs) {
-    return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
-
-/** Request/application-scoped DOM id generator with deterministic sequencing. */
-class UiIdGenerator {
-    counter = 0;
-    appInfix;
-    constructor(appId = 'ng') {
-        const safeAppId = appId.replace(/[^a-zA-Z0-9_-]/g, '');
-        this.appInfix = appId === 'ng' || !safeAppId ? '' : `-${safeAppId}`;
-    }
-    next(prefix) {
-        this.counter += 1;
-        return `${prefix}${this.appInfix}-${this.counter}`;
-    }
-}
-/**
- * One generator per Angular application injector. Separate SSR requests and a
- * hydrating browser application therefore start from the same deterministic
- * sequence instead of sharing process-global state.
- */
-const UI_ID_GENERATOR = new InjectionToken('UI_ID_GENERATOR', {
-    providedIn: 'root',
-    factory: () => new UiIdGenerator(inject(APP_ID)),
+var UiIdGenerator = class {
+	counter = 0;
+	appInfix;
+	constructor(appId = "ng") {
+		const safeAppId = appId.replace(/[^a-zA-Z0-9_-]/g, "");
+		this.appInfix = appId === "ng" || !safeAppId ? "" : `-${safeAppId}`;
+	}
+	next(prefix) {
+		this.counter += 1;
+		return `${prefix}${this.appInfix}-${this.counter}`;
+	}
+};
+const UI_ID_GENERATOR = new InjectionToken("UI_ID_GENERATOR", {
+	providedIn: "root",
+	factory: () => new UiIdGenerator(inject(APP_ID))
 });
-/** Generates an id during component/directive construction. */
 function injectUniqueId(prefix) {
-    return inject(UI_ID_GENERATOR).next(prefix);
+	return inject(UI_ID_GENERATOR).next(prefix);
 }
-
-/**
- * Roving focus across one horizontal row of items, with at most one open
- * disclosure among them.
- *
- * Shared by `Menubar` and `NavigationMenu`: both walk a single row with the
- * arrow keys plus Home/End, hold exactly one tab stop, and keep at most one
- * panel open. Everything that differs between the two -- roles, ARIA, and what
- * happens to an open panel when focus moves on -- stays in the components.
- */
-class RovingRow {
-    config;
-    activeItem = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
-    open = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    constructor(config) {
-        this.config = config;
-    }
-    items() {
-        return this.config.items();
-    }
-    enabledItems() {
-        return this.items().filter((item) => !item.disabled());
-    }
-    setActive(item) {
-        if (item.disabled()) {
-            return;
-        }
-        this.activeItem.set(item);
-    }
-    /**
-     * The roving `tabindex` for one row item.
-     *
-     * A composite widget carries exactly one tab stop: normally the active item
-     * owns it, falling back to the first enabled one. When EVERY item is disabled
-     * there is no enabled candidate, and leaving them all at `-1` drops the whole
-     * widget out of the tab order -- it becomes unreachable and a keyboard user
-     * cannot even discover that it is there. The first item keeps the tab stop
-     * instead and announces its state through `aria-disabled`, which is the APG
-     * focusable-disabled-item approach.
-     */
-    tabIndexFor(item) {
-        const enabledItems = this.enabledItems();
-        if (enabledItems.length === 0) {
-            return this.items()[0] === item ? 0 : -1;
-        }
-        if (item.disabled()) {
-            return -1;
-        }
-        const activeItem = this.activeItem();
-        const resolvedActiveItem = activeItem && enabledItems.includes(activeItem) ? activeItem : enabledItems[0];
-        return resolvedActiveItem === item ? 0 : -1;
-    }
-    openTrigger() {
-        return this.open();
-    }
-    hasOpenTrigger(except) {
-        const currentOpenTrigger = this.open();
-        return !!currentOpenTrigger && currentOpenTrigger !== except;
-    }
-    notifyOpen(trigger) {
-        const currentOpenTrigger = this.open();
-        if (currentOpenTrigger && currentOpenTrigger !== trigger) {
-            currentOpenTrigger.close({ restoreFocus: false });
-        }
-        this.open.set(trigger);
-        this.setActive(trigger);
-    }
-    notifyClosed(trigger) {
-        if (this.open() === trigger) {
-            this.open.set(null);
-        }
-    }
-    /** The row item an event came from, or `null` when it came from outside the row. */
-    itemFrom(target, scope) {
-        const candidates = scope === 'all' ? this.items() : this.enabledItems();
-        return candidates.find((item) => item.containsTarget(target)) ?? null;
-    }
-    /**
-     * Handles the keys that walk the row itself -- Home, End and the horizontal
-     * arrows -- and reports whether it claimed the event, so a component can add
-     * its own keys around this without restating the row model.
-     */
-    handleNavigationKey(item, event) {
-        if (event.key === 'Home' || event.key === 'End') {
-            event.preventDefault();
-            this.move(item, event.key === 'Home' ? 'start' : 'end');
-            return true;
-        }
-        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-            event.preventDefault();
-            this.move(item, event.key === 'ArrowRight' ? 'next' : 'previous');
-            return true;
-        }
-        return false;
-    }
-    move(currentItem, direction) {
-        const enabledItems = this.enabledItems();
-        if (enabledItems.length === 0) {
-            return;
-        }
-        const currentIndex = enabledItems.indexOf(currentItem);
-        if (currentIndex === -1) {
-            enabledItems[0]?.focus();
-            return;
-        }
-        const nextItem = direction === 'start'
-            ? enabledItems[0]
-            : direction === 'end'
-                ? enabledItems[enabledItems.length - 1]
-                : enabledItems[this.nextIndex(currentIndex, direction === 'next' ? this.horizontalStep() : -this.horizontalStep(), enabledItems.length)];
-        if (!nextItem || nextItem === currentItem) {
-            return;
-        }
-        this.config.enter(nextItem);
-    }
-    nextIndex(currentIndex, delta, length) {
-        const rawIndex = currentIndex + delta;
-        if (this.config.loop()) {
-            return (rawIndex + length) % length;
-        }
-        return Math.max(0, Math.min(length - 1, rawIndex));
-    }
-    horizontalStep() {
-        return getComputedStyle(this.config.host()).direction === 'rtl' ? -1 : 1;
-    }
-}
-
-/**
- * Per-component corner-radius / spacing-density override helpers.
- *
- * These mirror the global `theme-radius` / `theme-space` preset values from
- * `@ojiepermana/angular/theme` — kept as a local copy so this package stays
- * decoupled from the theme package (see its empty peer/deps on -theme).
- *
- * A component that accepts a `radius` / `density` input binds the resolved value
- * onto its surface element via `[style.--radius-base]` / `[style.--spacing-base]`.
- * Tailwind's `rounded-*` utilities resolve `calc(var(--radius-base) * n)` and the
- * spacing utilities resolve `calc(var(--spacing-base) * n)` (see the theme's
- * `base/tailwind.css` `@theme inline` mapping), so the override rescales that
- * subtree and shadows the global `<html theme-radius|theme-space>` axis. The
- * `'inherit'` preset binds nothing, so the component keeps following the axis.
- */
-/** Corner-radius presets for a per-component `radius` input. */
-const COMPONENT_RADII = ['inherit', 'none', 'xs', 'sm', 'md', 'xl', 'full'];
-/** Spacing-density presets for a per-component `density` input. */
-const COMPONENT_DENSITIES = ['inherit', 'compact', 'normal', 'relaxed', 'spacious'];
-/**
- * `--radius-base` knob value per preset; mirrors theme `radius/index.css`, which
- * takes Tailwind's stock radius for each name.
- */
+var RovingRow = class {
+	config;
+	activeItem = signal(null, ...ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []);
+	open = signal(null, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	constructor(config) {
+		this.config = config;
+	}
+	items() {
+		return this.config.items();
+	}
+	enabledItems() {
+		return this.items().filter((item) => !item.disabled());
+	}
+	setActive(item) {
+		if (item.disabled()) return;
+		this.activeItem.set(item);
+	}
+	tabIndexFor(item) {
+		const enabledItems = this.enabledItems();
+		if (enabledItems.length === 0) return this.items()[0] === item ? 0 : -1;
+		if (item.disabled()) return -1;
+		const activeItem = this.activeItem();
+		return (activeItem && enabledItems.includes(activeItem) ? activeItem : enabledItems[0]) === item ? 0 : -1;
+	}
+	openTrigger() {
+		return this.open();
+	}
+	hasOpenTrigger(except) {
+		const currentOpenTrigger = this.open();
+		return !!currentOpenTrigger && currentOpenTrigger !== except;
+	}
+	notifyOpen(trigger) {
+		const currentOpenTrigger = this.open();
+		if (currentOpenTrigger && currentOpenTrigger !== trigger) currentOpenTrigger.close({ restoreFocus: false });
+		this.open.set(trigger);
+		this.setActive(trigger);
+	}
+	notifyClosed(trigger) {
+		if (this.open() === trigger) this.open.set(null);
+	}
+	itemFrom(target, scope) {
+		return (scope === "all" ? this.items() : this.enabledItems()).find((item) => item.containsTarget(target)) ?? null;
+	}
+	handleNavigationKey(item, event) {
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			this.move(item, event.key === "Home" ? "start" : "end");
+			return true;
+		}
+		if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+			event.preventDefault();
+			this.move(item, event.key === "ArrowRight" ? "next" : "previous");
+			return true;
+		}
+		return false;
+	}
+	move(currentItem, direction) {
+		const enabledItems = this.enabledItems();
+		if (enabledItems.length === 0) return;
+		const currentIndex = enabledItems.indexOf(currentItem);
+		if (currentIndex === -1) {
+			enabledItems[0]?.focus();
+			return;
+		}
+		const nextItem = direction === "start" ? enabledItems[0] : direction === "end" ? enabledItems[enabledItems.length - 1] : enabledItems[this.nextIndex(currentIndex, direction === "next" ? this.horizontalStep() : -this.horizontalStep(), enabledItems.length)];
+		if (!nextItem || nextItem === currentItem) return;
+		this.config.enter(nextItem);
+	}
+	nextIndex(currentIndex, delta, length) {
+		const rawIndex = currentIndex + delta;
+		if (this.config.loop()) return (rawIndex + length) % length;
+		return Math.max(0, Math.min(length - 1, rawIndex));
+	}
+	horizontalStep() {
+		return getComputedStyle(this.config.host()).direction === "rtl" ? -1 : 1;
+	}
+};
+const COMPONENT_RADII = [
+	"inherit",
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"xl",
+	"full"
+];
+const COMPONENT_DENSITIES = [
+	"inherit",
+	"compact",
+	"normal",
+	"relaxed",
+	"spacious"
+];
 const RADIUS_BASE_VALUES = {
-    none: '0px',
-    xs: '0.125rem',
-    sm: '0.25rem',
-    md: '0.375rem',
-    xl: '0.75rem',
-    full: 'calc(infinity * 1px)',
+	none: "0px",
+	xs: "0.125rem",
+	sm: "0.25rem",
+	md: "0.375rem",
+	xl: "0.75rem",
+	full: "calc(infinity * 1px)"
 };
-/** `--spacing-base` knob value per preset; mirrors theme `space/index.css`. */
 const DENSITY_BASE_VALUES = {
-    compact: '0.2rem',
-    normal: '0.25rem',
-    relaxed: '0.28rem',
-    spacious: '0.32rem',
+	compact: "0.2rem",
+	normal: "0.25rem",
+	relaxed: "0.28rem",
+	spacious: "0.32rem"
 };
-/**
- * Resolves a `radius` input to a `--radius-base` value, or `null` to inherit the
- * global axis. Bind the result to the surface host: `[style.--radius-base]`.
- */
 function radiusBaseValue(radius) {
-    return radius === 'inherit' ? null : RADIUS_BASE_VALUES[radius];
+	return radius === "inherit" ? null : RADIUS_BASE_VALUES[radius];
 }
-/**
- * Resolves a `density` input to a `--spacing-base` value, or `null` to inherit
- * the global axis. Bind the result to the surface host: `[style.--spacing-base]`.
- */
 function densityBaseValue(density) {
-    return density === 'inherit' ? null : DENSITY_BASE_VALUES[density];
+	return density === "inherit" ? null : DENSITY_BASE_VALUES[density];
 }
-
 let counter = 0;
-/**
- * Returns a document-unique id with the given prefix, e.g. `uniqueId('Checkbox')`
- * → `"checkbox-1"`. Single shared counter for every component in the library.
- *
- * @deprecated Use `injectUniqueId` or inject `UI_ID_GENERATOR`. This legacy
- * function cannot isolate concurrent server-rendering requests.
- */
 function uniqueId(prefix) {
-    counter += 1;
-    return `${prefix}-${counter}`;
+	counter += 1;
+	return `${prefix}-${counter}`;
 }
-
-/**
- * One safe way to touch `localStorage`, for every library that persists a
- * preference.
- *
- * The same "reach localStorage through the document's window, wrap everything in
- * try/catch" block was hand-copied across the theme axes and the navigation
- * persistence unit. Every copy had to get three things right:
- *
- *  1. there may be no document at all (server side rendering),
- *  2. `window.localStorage` can THROW on property access, not just on `getItem`
- *     (a blocked or partitioned storage), so the getter itself needs guarding,
- *  3. a quota error on write must never break the caller.
- *
- * This lives in `component/utils/core` rather than in the theme package on
- * purpose: `navigation` also needs it, and navigation must not depend on
- * `theme`, which already depends on navigation. Both already depend on this
- * entry point.
- */
-/** Shared no-op, used whenever storage cannot be reached at all. */
 const UNAVAILABLE = {
-    read: () => null,
-    write: () => { },
-    remove: () => { },
+	read: () => null,
+	write: () => {},
+	remove: () => {}
 };
-/**
- * `localStorage` reached through a document's own window.
- *
- * Resolved lazily on every call and never cached: the property access is the
- * part that can throw, and a storage that is blocked now may be available later
- * (or the other way round).
- */
 function documentLocalStorage(documentRef) {
-    const resolve = () => {
-        try {
-            return documentRef?.defaultView?.localStorage ?? null;
-        }
-        catch {
-            return null;
-        }
-    };
-    return {
-        read: (key) => {
-            try {
-                return resolve()?.getItem(key) ?? null;
-            }
-            catch {
-                return null;
-            }
-        },
-        write: (key, value) => {
-            try {
-                resolve()?.setItem(key, value);
-            }
-            catch {
-                // A full or blocked storage must never break the caller: the preference
-                // simply does not survive the reload.
-            }
-        },
-        remove: (key) => {
-            try {
-                resolve()?.removeItem(key);
-            }
-            catch {
-                // Same reasoning as write.
-            }
-        },
-    };
+	const resolve = () => {
+		try {
+			return documentRef?.defaultView?.localStorage ?? null;
+		} catch {
+			return null;
+		}
+	};
+	return {
+		read: (key) => {
+			try {
+				return resolve()?.getItem(key) ?? null;
+			} catch {
+				return null;
+			}
+		},
+		write: (key, value) => {
+			try {
+				resolve()?.setItem(key, value);
+			} catch {}
+		},
+		remove: (key) => {
+			try {
+				resolve()?.removeItem(key);
+			} catch {}
+		}
+	};
 }
-/**
- * `localStorage` from the global scope, for callers that only know whether they
- * are in a browser (the `isPlatformBrowser` flavour) rather than holding a
- * `Document`.
- */
 function globalLocalStorage(isBrowser) {
-    if (!isBrowser) {
-        return UNAVAILABLE;
-    }
-    return documentLocalStorage(typeof document === 'undefined' ? null : document);
+	if (!isBrowser) return UNAVAILABLE;
+	return documentLocalStorage(typeof document === "undefined" ? null : document);
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { COMPONENT_DENSITIES, COMPONENT_RADII, RovingRow, UI_ID_GENERATOR, UiIdGenerator, cn, densityBaseValue, documentLocalStorage, globalLocalStorage, injectUniqueId, radiusBaseValue, uniqueId };
+export { COMPONENT_DENSITIES, COMPONENT_RADII, RovingRow, UI_ID_GENERATOR, UiIdGenerator, cn, densityBaseValue, documentLocalStorage, globalLocalStorage, injectUniqueId, radiusBaseValue, uniqueId };

package/fesm2022/ojiepermana-angular-component-utils-overlay.mjs

@@ -1,66 +1,54 @@
-import { merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
+import { merge } from "rxjs";
+import { filter } from "rxjs/operators";
 const POSITION_ANCHORS = {
-    top: (align) => ({
-        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
-        originY: 'top',
-        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
-        overlayY: 'bottom',
-    }),
-    bottom: (align) => ({
-        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
-        originY: 'bottom',
-        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
-        overlayY: 'top',
-    }),
-    left: (align) => ({
-        originX: 'start',
-        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
-        overlayX: 'end',
-        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
-    }),
-    right: (align) => ({
-        originX: 'end',
-        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
-        overlayX: 'start',
-        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
-    }),
+	top: (align) => ({
+		originX: align === "start" ? "start" : align === "end" ? "end" : "center",
+		originY: "top",
+		overlayX: align === "start" ? "start" : align === "end" ? "end" : "center",
+		overlayY: "bottom"
+	}),
+	bottom: (align) => ({
+		originX: align === "start" ? "start" : align === "end" ? "end" : "center",
+		originY: "bottom",
+		overlayX: align === "start" ? "start" : align === "end" ? "end" : "center",
+		overlayY: "top"
+	}),
+	left: (align) => ({
+		originX: "start",
+		originY: align === "start" ? "top" : align === "end" ? "bottom" : "center",
+		overlayX: "end",
+		overlayY: align === "start" ? "top" : align === "end" ? "bottom" : "center"
+	}),
+	right: (align) => ({
+		originX: "end",
+		originY: align === "start" ? "top" : align === "end" ? "bottom" : "center",
+		overlayX: "start",
+		overlayY: align === "start" ? "top" : align === "end" ? "bottom" : "center"
+	})
 };
-/**
- * Builds the CDK `ConnectedPosition` for a shadcn-style `side`/`align`/`sideOffset`
- * triple. Shared by every anchored overlay in the library (popover, tooltip,
- * hover-card, menus, combobox).
- */
 function connectedPositionFor(side, align, sideOffset) {
-    const anchor = POSITION_ANCHORS[side](align);
-    if (side === 'top') {
-        return { ...anchor, offsetY: -sideOffset };
-    }
-    if (side === 'bottom') {
-        return { ...anchor, offsetY: sideOffset };
-    }
-    if (side === 'left') {
-        return { ...anchor, offsetX: -sideOffset };
-    }
-    return { ...anchor, offsetX: sideOffset };
+	const anchor = POSITION_ANCHORS[side](align);
+	if (side === "top") return {
+		...anchor,
+		offsetY: -sideOffset
+	};
+	if (side === "bottom") return {
+		...anchor,
+		offsetY: sideOffset
+	};
+	if (side === "left") return {
+		...anchor,
+		offsetX: -sideOffset
+	};
+	return {
+		...anchor,
+		offsetX: sideOffset
+	};
 }
 function oppositeSide(side) {
-    return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';
+	return side === "top" ? "bottom" : side === "bottom" ? "top" : side === "left" ? "right" : "left";
 }
-/**
- * Emits whenever the user dismisses the overlay: pointer down outside (ignoring
- * the origin element so trigger clicks keep toggling), Escape, or detachment.
- * Subscribers decide how to close.
- */
 function overlayDismissals(overlayRef, origin) {
-    return merge(overlayRef
-        .outsidePointerEvents()
-        .pipe(filter((event) => !origin || !origin.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments());
+	return merge(overlayRef.outsidePointerEvents().pipe(filter((event) => !origin || !origin.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === "Escape")), overlayRef.detachments());
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { connectedPositionFor, oppositeSide, overlayDismissals };
+export { connectedPositionFor, oppositeSide, overlayDismissals };