import { Directive, output, input, model } from "@angular/core"; import { RouterLink, RouterLinkActive } from "@angular/router"; /** * Base class for navigation components in the side navigation. * * `NavGroupComponent` builds upon `NavItemComponent`. This class represents the properties * that are passed down to `NavItemComponent`. */ @Directive() export abstract class NavBaseComponent { /** * Text to display in main content */ readonly text = input(); /** * `aria-label` for main content */ readonly ariaLabel = input(); /** * Optional icon, e.g. `"bwi-collection-shared"` */ readonly icon = input(); /** * If this item is used within a tree, set `variant` to `"tree"` */ readonly variant = input<"default" | "tree">("default"); /** * Depth level when nested inside of a `'tree'` variant */ readonly treeDepth = model(0); /** * Optional route to be passed to internal `routerLink`. If not provided, the nav component will render as a button. * * See: {@link RouterLink.routerLink} * * --- * * @remarks * We can't name this "routerLink" because Angular will mount the `RouterLink` directive. * * @see {@link RouterLink.routerLink} * @see {@link https://github.com/angular/angular/issues/24482} */ readonly route = input(); /** * Passed to internal `routerLink` * * @see {@link RouterLink.relativeTo} */ readonly relativeTo = input(); /** * Passed to internal `routerLink` * * @default { paths: "subset", queryParams: "ignored", fragment: "ignored", matrixParams: "ignored" } * @see {@link RouterLinkActive.routerLinkActiveOptions} */ readonly routerLinkActiveOptions = input({ paths: "subset", queryParams: "ignored", fragment: "ignored", matrixParams: "ignored", }); /** * If `true`, do not change styles when nav item is active. */ readonly hideActiveStyles = input(false); /** * Fires when main content is clicked */ readonly mainContentClicked = output(); }