@ojiepermana/angular 22.2.0 → 22.2.1

package/fesm2022/{ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs → ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs}

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 import { Component, computed, inject, input, output, signal } from "@angular/core";
-import { RouterLink, RouterLinkActive } from "@angular/router";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { cn } from "@ojiepermana/angular/component/utils/core";
-import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER } from "@ojiepermana/angular/navigation/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { IconComponent } from "@ojiepermana/angular/component/icon";
 import { TooltipDirective } from "@ojiepermana/angular/component/tooltip";
@@ -27,7 +27,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationItemContentComponent,
 		deps: [],
@@ -35,7 +35,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: NavigationItemContentComponent,
 		isStandalone: true,
 		selector: "NavigationItemContent",
@@ -144,7 +144,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: NavigationItemContentComponent,
 	decorators: [{
@@ -248,6 +248,9 @@ function safeNavId(value) {
 }
 var NavigationItemComponent = class NavigationItemComponent {
 	nav = inject(NAVIGATION_ADAPTER);
+	routeContext = inject(NAVIGATION_ROUTE_CONTEXT_ADAPTER);
+	router = inject(Router, { optional: true });
+	activatedRoute = inject(ActivatedRoute, { optional: true });
 	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
 	item = input.required(...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
 	level = input(0, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
@@ -275,6 +278,12 @@ var NavigationItemComponent = class NavigationItemComponent {
 	userToggled = signal(false, ...ngDevMode ? [{ debugName: "userToggled" }] : /* istanbul ignore next */ []);
 	isHorizontalRoot = computed(() => this.orientation() === "horizontal" && this.level() === 0, ...ngDevMode ? [{ debugName: "isHorizontalRoot" }] : /* istanbul ignore next */ []);
 	isActive = computed(() => this.nav.isItemActive(this.item(), this.activeIds(), this.activeUrl()), ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	isRouteActive = computed(() => {
+		const item = this.item();
+		if (item.disabled || !this.router?.lastSuccessfulNavigation()) return false;
+		return this.routeContext.isItemRouteActive(item, null, this.activatedRoute);
+	}, ...ngDevMode ? [{ debugName: "isRouteActive" }] : /* istanbul ignore next */ []);
+	isRouterItemActive = computed(() => this.isRouteActive() || this.isActive(), ...ngDevMode ? [{ debugName: "isRouterItemActive" }] : /* istanbul ignore next */ []);
 	showChildren = computed(() => !this.compact() && this.isOpen(), ...ngDevMode ? [{ debugName: "showChildren" }] : /* istanbul ignore next */ []);
 	hostClasses = computed(() => {
 		if (this.item().type === "divider") return this.dividerClasses();
@@ -305,9 +314,6 @@ var NavigationItemComponent = class NavigationItemComponent {
 	relFor() {
 		return this.nav.relFor(this.item());
 	}
-	routerLinkActiveOptions() {
-		return this.nav.routerLinkActiveOptions(this.item());
-	}
 	itemRole() {
 		return this.nav.itemRole(this.orientation(), this.level());
 	}
@@ -390,7 +396,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationItemComponent,
 		deps: [],
@@ -398,7 +404,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: NavigationItemComponent,
 		isStandalone: true,
 		selector: "li[NavigationItem]",
@@ -618,7 +624,7 @@ var NavigationItemComponent = class NavigationItemComponent {
       @default {
         @if (isRouterItem()) {
           <a
-            [class]="leafClasses(routerActive.isActive || isActive())"
+            [class]="leafClasses(isRouterItemActive())"
             [routerLink]="routerLinkFor()"
             [queryParams]="item().queryParams ?? null"
             [queryParamsHandling]="item().queryParamsHandling ?? null"
@@ -626,10 +632,7 @@ var NavigationItemComponent = class NavigationItemComponent {
             [preserveFragment]="item().preserveFragment ?? false"
             [target]="item().target ?? undefined"
             [attr.rel]="relFor()"
-            routerLinkActive
-            #routerActive="routerLinkActive"
-            [routerLinkActiveOptions]="routerLinkActiveOptions()"
-            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-current]="isRouterItemActive() ? 'page' : null"
             [attr.aria-disabled]="item().disabled || null"
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
@@ -642,7 +645,7 @@ var NavigationItemComponent = class NavigationItemComponent {
           >
             <NavigationItemContent
               [item]="item()"
-              [active]="routerActive.isActive || isActive()"
+              [active]="isRouterItemActive()"
               [compact]="compact()"
               [orientation]="orientation()"
               [level]="level()"
@@ -683,6 +686,8 @@ var NavigationItemComponent = class NavigationItemComponent {
             [attr.aria-current]="isActive() ? 'page' : null"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"
@@ -821,18 +826,6 @@ var NavigationItemComponent = class NavigationItemComponent {
 					"routerLink"
 				]
 			},
-			{
-				kind: "directive",
-				type: RouterLinkActive,
-				selector: "[routerLinkActive]",
-				inputs: [
-					"routerLinkActiveOptions",
-					"ariaCurrentWhenActive",
-					"routerLinkActive"
-				],
-				outputs: ["isActiveChange"],
-				exportAs: ["routerLinkActive"]
-			},
 			{
 				kind: "directive",
 				type: TooltipDirective,
@@ -851,7 +844,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: NavigationItemComponent,
 	decorators: [{
@@ -863,7 +856,6 @@ i0.ɵɵngDeclareClassMetadata({
 				NavigationItemContentComponent,
 				NgTemplateOutlet,
 				RouterLink,
-				RouterLinkActive,
 				TooltipDirective
 			],
 			host: {
@@ -956,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({
       @default {
         @if (isRouterItem()) {
           <a
-            [class]="leafClasses(routerActive.isActive || isActive())"
+            [class]="leafClasses(isRouterItemActive())"
             [routerLink]="routerLinkFor()"
             [queryParams]="item().queryParams ?? null"
             [queryParamsHandling]="item().queryParamsHandling ?? null"
@@ -964,10 +956,7 @@ i0.ɵɵngDeclareClassMetadata({
             [preserveFragment]="item().preserveFragment ?? false"
             [target]="item().target ?? undefined"
             [attr.rel]="relFor()"
-            routerLinkActive
-            #routerActive="routerLinkActive"
-            [routerLinkActiveOptions]="routerLinkActiveOptions()"
-            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-current]="isRouterItemActive() ? 'page' : null"
             [attr.aria-disabled]="item().disabled || null"
             [attr.tabindex]="leafTabIndex()"
             [attr.aria-label]="compactLabel()"
@@ -980,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({
           >
             <NavigationItemContent
               [item]="item()"
-              [active]="routerActive.isActive || isActive()"
+              [active]="isRouterItemActive()"
               [compact]="compact()"
               [orientation]="orientation()"
               [level]="level()"
@@ -1021,6 +1010,8 @@ i0.ɵɵngDeclareClassMetadata({
             [attr.aria-current]="isActive() ? 'page' : null"
             [attr.aria-label]="compactLabel()"
             [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
             [attr.role]="itemRole()"
             [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
             (click)="selectItem($event)"

package/fesm2022/{ojiepermana-angular-navigation-navigation-list.component-YUzHI9Pj.mjs → ojiepermana-angular-navigation-navigation-list.component-CrK16trj.mjs}

@@ -1,4 +1,4 @@
-import { t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
+import { t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs";
 import * as i0 from "@angular/core";
 import { Component, computed, input, output } from "@angular/core";
 import { cn } from "@ojiepermana/angular/component/utils/core";
@@ -7,6 +7,7 @@ var NavigationListComponent = class NavigationListComponent {
 	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 	collapsed = input(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
 	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	fill = input(false, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
 	position = input("left", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
 	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
 	activeIds = input(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
@@ -17,11 +18,11 @@ var NavigationListComponent = class NavigationListComponent {
 	openedIdsChange = output();
 	itemSelected = output();
 	isCollapsed = computed(() => this.collapsed() || this.compact(), ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
-	hostClasses = computed(() => cn("block", this.position() === "right" && "items-end text-right"), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
-	listClasses = computed(() => this.isCollapsed() ? cn("flex list-none flex-col items-center gap-0.5 p-0") : cn("flex list-none flex-col gap-0.5 p-0", this.position() === "right" && "items-end"), ...ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => this.fill() ? cn("flex flex-1 flex-col", this.position() === "right" && "text-right") : cn("block", this.position() === "right" && "items-end text-right"), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	listClasses = computed(() => cn(this.isCollapsed() ? "flex list-none flex-col items-center gap-0.5 p-0" : cn("flex list-none flex-col gap-0.5 p-0", this.position() === "right" && "items-end"), this.fill() && "flex-1"), ...ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationListComponent,
 		deps: [],
@@ -29,7 +30,7 @@ var NavigationListComponent = class NavigationListComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: NavigationListComponent,
 		isStandalone: true,
 		selector: "NavigationList",
@@ -62,6 +63,13 @@ var NavigationListComponent = class NavigationListComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			fill: {
+				classPropertyName: "fill",
+				publicName: "fill",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			position: {
 				classPropertyName: "position",
 				publicName: "position",
@@ -173,7 +181,7 @@ var NavigationListComponent = class NavigationListComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: NavigationListComponent,
 	decorators: [{
@@ -242,6 +250,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
+		}],
 		position: [{
 			type: i0.Input,
 			args: [{

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

@@ -94,13 +94,14 @@ var NavigationPersistence = class {
 	}
 	persistedTypeMode(state) {
 		if (state.type === "dockbar") return state.dockbarMode;
+		if (state.type === "minidock") return "default";
 		return state.collapsed ? "collapsed" : "default";
 	}
 	isPersistedTypeMode(value) {
 		return value === "default" || value === "collapsed" || this.isDockbarMode(value);
 	}
 	isTypeForOrientation(value, orientation) {
-		return orientation === "vertical" ? value === "sidebar" || value === "dockbar" : value === "navbar" || value === "flyout";
+		return orientation === "vertical" ? value === "sidebar" || value === "dockbar" || value === "minidock" : value === "navbar" || value === "flyout";
 	}
 	isPositionForOrientation(value, orientation) {
 		return orientation === "vertical" ? value === "left" || value === "right" : value === "top" || value === "bottom";
@@ -374,6 +375,7 @@ var NavigationService = class NavigationService {
 			id: navId,
 			orientation: "vertical"
 		});
+		if (current.type === "minidock") return current;
 		return this.setCollapsed(navId, !current.collapsed);
 	}
 	setDockbarMode(id, mode) {
@@ -523,7 +525,7 @@ var NavigationService = class NavigationService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationService,
 		deps: [],
@@ -531,14 +533,14 @@ var NavigationService = class NavigationService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: NavigationService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: NavigationService,
 	decorators: [{ type: Service }],

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

@@ -36,4 +36,116 @@ function formatNavigationBadgeCount(value) {
 	if (count <= 0) return null;
 	return count > 99 ? "99+" : String(count);
 }
-export { NAVIGATION_DOCKBAR_FALLBACK_ICON, formatNavigationBadgeCount, normalizeUiNavItems };
+const MINIDOCK_REJECTED_TYPES = /* @__PURE__ */ new Set([
+	"group",
+	"collapsible",
+	"collapsable",
+	"mega",
+	"aside"
+]);
+const MINIDOCK_ERROR_PREFIX = "[Navigation] Minidock hanya menerima item basic, divider, dan spacer.";
+function ɵcompactNavigationDividers(items) {
+	const result = [];
+	let run = [];
+	for (const item of items) {
+		if (item.type === "divider") {
+			run.push(item);
+			continue;
+		}
+		if (run.length > 0 && result.length > 0) result.push(run.find((divider) => !divider.isHidden) ?? run[0]);
+		run = [];
+		result.push(item);
+	}
+	return result;
+}
+function ɵassertMinidockItems(items) {
+	items.forEach((item, index) => {
+		const label = `Item [${index}] "${item.title ?? item.id ?? ""}"`;
+		if (item.type && MINIDOCK_REJECTED_TYPES.has(item.type)) throw new Error(`${MINIDOCK_ERROR_PREFIX} ${label} bertipe "${item.type}".`);
+		if ((item.children?.length ?? 0) > 0) throw new Error(`${MINIDOCK_ERROR_PREFIX} ${label} punya children.`);
+	});
+}
+function toMinidockItems(items) {
+	const output = [];
+	const seenIds = /* @__PURE__ */ new Set();
+	let boundaryPending = false;
+	const visit = (list, ancestors) => {
+		const topLevel = ancestors.length === 0;
+		for (const item of list) {
+			const children = item.children ?? [];
+			if (item.type === "divider") {
+				output.push(withAncestorVisibility(withoutChildren(item), ancestors));
+				boundaryPending = false;
+				continue;
+			}
+			if (item.type === "spacer") {
+				if (topLevel) {
+					output.push(withoutChildren(item));
+					boundaryPending = false;
+				}
+				continue;
+			}
+			if (item.type === "group" || item.type === "mega") {
+				const start = output.length;
+				const pendingBefore = boundaryPending;
+				const divider = { type: "divider" };
+				const isHidden = chainedVisibility([...ancestors, item]);
+				output.push(isHidden ? {
+					...divider,
+					isHidden
+				} : divider);
+				boundaryPending = false;
+				visit(children, [...ancestors, item]);
+				if (!output.slice(start + 1).some(isContent)) {
+					output.length = start;
+					boundaryPending = pendingBefore;
+					continue;
+				}
+				boundaryPending = true;
+				continue;
+			}
+			if (item.type && MINIDOCK_REJECTED_TYPES.has(item.type)) {
+				visit(children, [...ancestors, item]);
+				continue;
+			}
+			if (children.length > 0) {
+				visit(children, [...ancestors, item]);
+				continue;
+			}
+			if (item.id !== void 0) {
+				if (seenIds.has(item.id)) continue;
+				seenIds.add(item.id);
+			}
+			if (boundaryPending) {
+				output.push({ type: "divider" });
+				boundaryPending = false;
+			}
+			output.push(withAncestorVisibility(item, ancestors));
+		}
+	};
+	visit(items, []);
+	return ɵcompactNavigationDividers(output);
+}
+function isContent(item) {
+	return item.type !== "divider";
+}
+function withoutChildren(item) {
+	if (item.children === void 0) return item;
+	const copy = { ...item };
+	delete copy.children;
+	return copy;
+}
+function chainedVisibility(chain) {
+	const hiders = chain.filter((entry) => entry.isHidden !== void 0);
+	if (hiders.length === 0) return null;
+	return () => hiders.some((entry) => entry.isHidden?.(entry) === true);
+}
+function withAncestorVisibility(leaf, ancestors) {
+	const ancestorHidden = chainedVisibility(ancestors);
+	if (ancestorHidden === null) return leaf;
+	return {
+		...leaf,
+		isHidden: () => ancestorHidden(leaf) || leaf.isHidden?.(leaf) === true
+	};
+}
+export { NAVIGATION_DOCKBAR_FALLBACK_ICON, formatNavigationBadgeCount, normalizeUiNavItems, toMinidockItems, ɵassertMinidockItems, ɵcompactNavigationDividers };