mirror of
https://github.com/bitwarden/browser
synced 2025-12-20 02:03:39 +00:00
f865139d16
* restore tree nav view * address Claude feedback * address feedback and fix depth calculation * address feedback from Claude * do not reserve space for icon
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { Directive, EventEmitter, Output, input, model } from "@angular/core";
|
|
import { RouterLink, RouterLinkActive } from "@angular/router";
|
|
|
|
/**
|
|
* `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<string>();
|
|
|
|
/**
|
|
* `aria-label` for main content
|
|
*/
|
|
readonly ariaLabel = input<string>();
|
|
|
|
/**
|
|
* Optional icon, e.g. `"bwi-collection-shared"`
|
|
*/
|
|
readonly icon = input<string>();
|
|
|
|
/**
|
|
* 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}
|
|
*
|
|
* ---
|
|
*
|
|
* We can't name this "routerLink" because Angular will mount the `RouterLink` directive.
|
|
*
|
|
* See: {@link https://github.com/angular/angular/issues/24482}
|
|
*/
|
|
readonly route = input<RouterLink["routerLink"]>();
|
|
|
|
/**
|
|
* Passed to internal `routerLink`
|
|
*
|
|
* See {@link RouterLink.relativeTo}
|
|
*/
|
|
readonly relativeTo = input<RouterLink["relativeTo"]>();
|
|
|
|
/**
|
|
* Passed to internal `routerLink`
|
|
*
|
|
* See {@link RouterLinkActive.routerLinkActiveOptions}
|
|
*/
|
|
readonly routerLinkActiveOptions = input<RouterLinkActive["routerLinkActiveOptions"]>({
|
|
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
|
|
*/
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
|
|
// eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
|
|
@Output() mainContentClicked: EventEmitter<MouseEvent> = new EventEmitter();
|
|
}
|