mirror of
https://github.com/bitwarden/browser
synced 2025-12-20 02:03:39 +00:00
07076ebf9d
* refactor: move logic for products into a service - This is in preparation for having having the navigation menu show products based off of the same logic. * add extra small font size to tailwind config * remove absolute positioning from toggle width component - it now sits beneath the product switcher * update product switcher to have UI details that are only shown in the navigation pane * add navigation oriented product switcher * integrate navigation product switcher into secrets manager * integrate navigation product switcher into provider console * integrate navigation product switcher into user layout * integrate navigation product switcher into organizations * add translation for "switch" * hide active styles from navigation product switcher * update storybook for product switcher stories * remove unneeded full width style * use protected readonly variable instead of getter * migrate stories to CSF3 * remove double subscription to `moreProducts$` * only use wrapping div in navigation switcher story - less vertical space is taken up * update to satisfies * refactor `navigationUI` to `otherProductOverrides` * move observables to protected readonly * apply margin-top via class on the host component * remove switch text from the navigation product switcher * Allow for the active navigation switcher to be shown * remove xxs font style * remove unneeded module * remove switch from stories * remove defensive nullish coalescing * remove merge leftovers * Defect PM-7899 - show organizations product at the top of the other products list * Defect PM-7951 use attr.icon to keep the icon as an attribute after prod mode is enabled * Defect PM-7948 update path based on the current org * force active styles for navigation items (#9128) * add horizontal margin to icon --------- Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import { Component, HostListener, Input, Optional } from "@angular/core";
|
|
import { BehaviorSubject, map } from "rxjs";
|
|
|
|
import { NavBaseComponent } from "./nav-base.component";
|
|
import { NavGroupComponent } from "./nav-group.component";
|
|
|
|
@Component({
|
|
selector: "bit-nav-item",
|
|
templateUrl: "./nav-item.component.html",
|
|
providers: [{ provide: NavBaseComponent, useExisting: NavItemComponent }],
|
|
})
|
|
export class NavItemComponent extends NavBaseComponent {
|
|
/** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
|
|
@Input() forceActiveStyles? = false;
|
|
|
|
/**
|
|
* Is `true` if `to` matches the current route
|
|
*/
|
|
private _isActive = false;
|
|
protected setIsActive(isActive: boolean) {
|
|
this._isActive = isActive;
|
|
if (this._isActive && this.parentNavGroup) {
|
|
this.parentNavGroup.setOpen(true);
|
|
}
|
|
}
|
|
protected get showActiveStyles() {
|
|
return this.forceActiveStyles || (this._isActive && !this.hideActiveStyles);
|
|
}
|
|
|
|
/**
|
|
* The design spec calls for the an outline to wrap the entire element when the template's anchor/button has :focus-visible.
|
|
* Usually, we would use :focus-within for this. However, that matches when a child element has :focus instead of :focus-visible.
|
|
*
|
|
* Currently, the browser does not have a pseudo selector that combines these two, e.g. :focus-visible-within (WICG/focus-visible#151)
|
|
* To make our own :focus-visible-within functionality, we use event delegation on the host and manually check if the focus target (denoted with the .fvw class) matches :focus-visible. We then map that state to some styles, so the entire component can have an outline.
|
|
*/
|
|
protected focusVisibleWithin$ = new BehaviorSubject(false);
|
|
protected fvwStyles$ = this.focusVisibleWithin$.pipe(
|
|
map((value) =>
|
|
value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-inset tw-ring-text-alt2" : "",
|
|
),
|
|
);
|
|
@HostListener("focusin", ["$event.target"])
|
|
onFocusIn(target: HTMLElement) {
|
|
this.focusVisibleWithin$.next(target.matches(".fvw:focus-visible"));
|
|
}
|
|
@HostListener("focusout")
|
|
onFocusOut() {
|
|
this.focusVisibleWithin$.next(false);
|
|
}
|
|
|
|
constructor(@Optional() private parentNavGroup: NavGroupComponent) {
|
|
super();
|
|
}
|
|
}
|