@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -1,7 +1,314 @@
-export * from '@ojiepermana/angular-component/utils/core';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { InjectionToken, inject, APP_ID, signal } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function cn(...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)),
+});
+/** Generates an id during component/directive construction. */
+function injectUniqueId(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.
+ */
+const RADIUS_BASE_VALUES = {
+    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',
+};
+/**
+ * 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];
+}
+/**
+ * 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];
+}
+
+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}`;
+}
+
+/**
+ * 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: () => { },
+};
+/**
+ * `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.
+            }
+        },
+    };
+}
+/**
+ * `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);
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+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,7 +1,66 @@
-export * from '@ojiepermana/angular-component/utils/overlay';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+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',
+    }),
+};
+/**
+ * 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 };
+}
+function oppositeSide(side) {
+    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());
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { connectedPositionFor, oppositeSide, overlayDismissals };

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

@@ -1,7 +1,38 @@
-export * from '@ojiepermana/angular-component/utils/scale';
+import * as i0 from '@angular/core';
+import { input, computed, Directive } from '@angular/core';
+import { radiusBaseValue, densityBaseValue } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Shared host behavior for the per-component radius and density axes.
+ *
+ * Components expose the directive inputs through `hostDirectives`, preserving
+ * their public `radius`/`density` API while keeping the CSS-variable mapping in
+ * one implementation.
+ */
+class ComponentScaleDirective {
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    density = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    radiusBase = computed(() => radiusBaseValue(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
+    densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComponentScaleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ComponentScaleDirective, isStandalone: true, inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComponentScaleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
+                }]
+        }], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ComponentScaleDirective };

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

@@ -1,6 +1,7 @@
-export * from '@ojiepermana/angular-component/utils';
+export * from '@ojiepermana/angular/component/utils/core';
+export * from '@ojiepermana/angular/component/utils/overlay';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** @deprecated Prefer the focused `utils/core` or `utils/overlay` entry point. */
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ojiepermana-angular-component.mjs

@@ -1,8 +1,8 @@
-export * from '@ojiepermana/angular-component';
-
 /*
- * Public API of @ojiepermana/angular/component
- * Re-exports the independent @ojiepermana/angular-component package.
+ * Public API Surface of @ojiepermana/angular/component
+ *
+ * Komponen dan utilitas diekspos lewat secondary entry point pada setiap folder
+ * di dalam library/component.
  */
 
 /**

package/fesm2022/ojiepermana-angular-navigation-core.mjs

@@ -1,7 +1,25 @@
-export * from '@ojiepermana/angular-navigation/core';
+import { InjectionToken, inject } from '@angular/core';
+import { NavigationService } from '@ojiepermana/angular/navigation/service';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/** Override this token to supply a custom state/persistence adapter. */
+const NAVIGATION_ADAPTER = new InjectionToken('NAVIGATION_ADAPTER', {
+    providedIn: 'root',
+    factory: () => {
+        const adapter = inject(NavigationService);
+        return adapter;
+    },
+});
+/** Override token ini untuk memasok route context dari router/state host lain. */
+const NAVIGATION_ROUTE_CONTEXT_ADAPTER = new InjectionToken('NAVIGATION_ROUTE_CONTEXT_ADAPTER', {
+    providedIn: 'root',
+    factory: () => {
+        const adapter = inject(NavigationService);
+        return adapter;
+    },
+});
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER };

package/fesm2022/ojiepermana-angular-navigation-icon.mjs

@@ -1,7 +1,24 @@
-export * from '@ojiepermana/angular-navigation/icon';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class NavigationIconDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        void context;
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationIconDirective, isStandalone: true, selector: "ng-template[NavigationIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[NavigationIcon]',
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { NavigationIconDirective };

package/fesm2022/ojiepermana-angular-navigation-navigation-badge-count.component-CDBxQ8rk.mjs

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { input, computed, isSignal, Component } from '@angular/core';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { formatNavigationBadgeCount } from '@ojiepermana/angular/navigation/types';
+import { isObservable, of, switchMap, catchError } from 'rxjs';
+
+class NavigationBadgeCountComponent {
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    observableSource = computed(() => {
+        const value = this.badge()?.value;
+        return isObservable(value) ? value : of(null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "observableSource" }] : /* istanbul ignore next */ []));
+    observableValue = toSignal(toObservable(this.observableSource).pipe(switchMap((source) => source.pipe(catchError(() => of(null))))), { initialValue: null });
+    rawValue() {
+        const value = this.badge()?.value;
+        if (isObservable(value)) {
+            return this.observableValue();
+        }
+        if (isSignal(value)) {
+            return value();
+        }
+        if (typeof value === 'function') {
+            return value();
+        }
+        return value;
+    }
+    resolvedBadge() {
+        const value = this.rawValue();
+        const count = value === null || value === undefined || !Number.isFinite(value)
+            ? 0
+            : Math.max(Math.trunc(value), 0);
+        const display = formatNavigationBadgeCount(count);
+        if (display === null) {
+            return null;
+        }
+        const label = this.badge()?.ariaLabel;
+        const accessibleLabel = typeof label === 'function' ? label(count) : label;
+        return {
+            count,
+            display,
+            accessibleLabel: accessibleLabel?.trim() || `${count} items`,
+        };
+    }
+    badgeClasses = computed(() => cn('nav-badge inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground', this.badge()?.classes, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationBadgeCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationBadgeCountComponent, isStandalone: true, selector: "NavigationBadgeCount", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @if (resolvedBadge(); as resolved) {
+      <span
+        role="status"
+        aria-atomic="true"
+        data-navigation-badge="true"
+        [attr.data-navigation-badge-count]="resolved.count"
+        [attr.aria-label]="resolved.accessibleLabel"
+        [class]="badgeClasses()"
+      >
+        {{ resolved.display }}
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationBadgeCountComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationBadgeCount',
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @if (resolvedBadge(); as resolved) {
+      <span
+        role="status"
+        aria-atomic="true"
+        data-navigation-badge="true"
+        [attr.data-navigation-badge-count]="resolved.count"
+        [attr.aria-label]="resolved.accessibleLabel"
+        [class]="badgeClasses()"
+      >
+        {{ resolved.display }}
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+export { NavigationBadgeCountComponent };