mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
e26670c029
* collect tailwind styles from the `libs/vault/*` - Some unique styles were not showing in storybook * initial add of carousel component * initial add of carousel stories * move carousel button to a standalone component for organization * add key manager for carousel buttons * add tab panel role to slide component * make carousel slide focusable when it does not contain focusable elements * add aria live to carousel slides * add labels for carousel slide buttons * emit slide change event * move icons to carousel-icons folder * add barrel file for carousel * move protected properties * remove underscore * allow differing heights of carousel slides * update interactive styles for the carousel icons * allow for focus styled on carousel buttons * fix tests * fix imports * add method to render each slide and get the height of the tallest slide - This avoids consumers having to pass in a height. - The height of the tallest slide is needed because it will stop the carousel from jumping around as the user scrolls. * add comment to content property * remove rem calculation
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
|
import { TemplatePortal } from "@angular/cdk/portal";
|
|
import { Component, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
|
|
|
|
@Component({
|
|
selector: "vault-carousel-slide",
|
|
templateUrl: "./carousel-slide.component.html",
|
|
standalone: true,
|
|
})
|
|
export class VaultCarouselSlideComponent implements OnInit {
|
|
/** `aria-label` that is assigned to the carousel toggle. */
|
|
@Input({ required: true }) label!: string;
|
|
|
|
/**
|
|
* Should be set to true when the slide has no focusable elements.
|
|
*
|
|
* When the slide does not contain any focusable elements or the first element with content is not focusable,
|
|
* this should be set to 0 to include it in the tab sequence of the page.
|
|
*
|
|
* @remarks See note 4 of https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
|
|
*/
|
|
@Input({ transform: coerceBooleanProperty }) noFocusableChildren?: true;
|
|
|
|
@ViewChild(TemplateRef, { static: true }) implicitContent!: TemplateRef<unknown>;
|
|
|
|
private _contentPortal: TemplatePortal | null = null;
|
|
|
|
/**
|
|
* A Portal containing the content of the slide.
|
|
* Used by `VaultCarouselComponent` when the slide becomes active.
|
|
*/
|
|
get content(): TemplatePortal | null {
|
|
return this._contentPortal;
|
|
}
|
|
|
|
constructor(private viewContainerRef: ViewContainerRef) {}
|
|
|
|
ngOnInit(): void {
|
|
this._contentPortal = new TemplatePortal(this.implicitContent, this.viewContainerRef);
|
|
}
|
|
}
|