mirror of
https://github.com/bitwarden/browser
synced 2026-02-13 23:13:36 +00:00
ea052b9e07
* remove private/protected/lifecycle fields from Storybook docs table * move theme override decorator into util method * implement base drawer component * update bit-layout to be drawer container * create drawer helper components * expose new APIs to DS barrel file * write docs * update docs; add role input * use host directive instead of service * clean up logic a tad * add start slot to story * update docs * Apply suggestions from code review Co-authored-by: Victoria League <vleague@bitwarden.com> * update docs * Update libs/components/src/drawer/drawer.mdx Co-authored-by: Victoria League <vleague@bitwarden.com> * update docs / stories * add non text element to drawer --------- Co-authored-by: Victoria League <vleague@bitwarden.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { CdkScrollable } from "@angular/cdk/scrolling";
|
|
import { ChangeDetectionStrategy, Component, Signal, inject } from "@angular/core";
|
|
import { toSignal } from "@angular/core/rxjs-interop";
|
|
import { map } from "rxjs";
|
|
|
|
/**
|
|
* Body container for `bit-drawer`
|
|
*/
|
|
@Component({
|
|
selector: "bit-drawer-body",
|
|
standalone: true,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [],
|
|
host: {
|
|
class:
|
|
"tw-p-4 tw-pt-0 tw-block tw-overflow-auto tw-border-solid tw-border tw-border-transparent tw-transition-colors tw-duration-200",
|
|
"[class.tw-border-t-secondary-300]": "isScrolled()",
|
|
},
|
|
hostDirectives: [
|
|
{
|
|
directive: CdkScrollable,
|
|
},
|
|
],
|
|
template: ` <ng-content></ng-content> `,
|
|
})
|
|
export class DrawerBodyComponent {
|
|
private scrollable = inject(CdkScrollable);
|
|
|
|
/** TODO: share this utility with browser popup header? */
|
|
protected isScrolled: Signal<boolean> = toSignal(
|
|
this.scrollable
|
|
.elementScrolled()
|
|
.pipe(map(() => this.scrollable.measureScrollOffset("top") > 0)),
|
|
{ initialValue: false },
|
|
);
|
|
}
|