mirror of
https://github.com/bitwarden/browser
synced 2025-12-13 23:03:32 +00:00
ade01c9d07
* [PM-8380] Add option to disable content padding for popup page * [PM-8380] Add cdkVirtualScroll to vault list items and fixed item heights * [PM-8380] Move item height constants to item component
44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { ChangeDetectionStrategy, Component, HostListener, signal } from "@angular/core";
|
|
|
|
import { A11yRowDirective } from "../a11y/a11y-row.directive";
|
|
|
|
import { ItemActionComponent } from "./item-action.component";
|
|
|
|
/**
|
|
* The class used to set the height of a bit item's inner content.
|
|
*/
|
|
export const BitItemHeightClass = `tw-h-[52px]`;
|
|
|
|
/**
|
|
* The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
|
|
* to estimate how many items can be displayed at once and how large the virtual container should be.
|
|
* Needs to be updated if the item height or spacing changes.
|
|
*
|
|
* 52px + 5.25px bottom margin + 1px border = 58.25px
|
|
*/
|
|
export const BitItemHeight = 58.25; //
|
|
|
|
@Component({
|
|
selector: "bit-item",
|
|
standalone: true,
|
|
imports: [CommonModule, ItemActionComponent],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
templateUrl: "item.component.html",
|
|
providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
|
|
})
|
|
export class ItemComponent extends A11yRowDirective {
|
|
/**
|
|
* We have `:focus-within` and `:focus-visible` but no `:focus-visible-within`
|
|
*/
|
|
protected focusVisibleWithin = signal(false);
|
|
@HostListener("focusin", ["$event.target"])
|
|
onFocusIn(target: HTMLElement) {
|
|
this.focusVisibleWithin.set(target.matches(".fvw-target:focus-visible"));
|
|
}
|
|
@HostListener("focusout")
|
|
onFocusOut() {
|
|
this.focusVisibleWithin.set(false);
|
|
}
|
|
}
|