mirror of
https://github.com/bitwarden/browser
synced 2025-12-21 02:33:46 +00:00
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { Component, computed, input } from "@angular/core";
|
|
|
|
import { SkeletonComponent } from "./skeleton.component";
|
|
|
|
/**
|
|
* Specific skeleton component used to represent lines of text. It uses the `bit-skeleton`
|
|
* under the hood.
|
|
*
|
|
* Customize the number of lines represented with the `lines` input. Customize the width
|
|
* by applying a class to the `bit-skeleton-text` element (i.e. `tw-w-1/2`).
|
|
*/
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
|
|
@Component({
|
|
selector: "bit-skeleton-text",
|
|
templateUrl: "./skeleton-text.component.html",
|
|
imports: [CommonModule, SkeletonComponent],
|
|
host: {
|
|
class: "tw-block",
|
|
},
|
|
})
|
|
export class SkeletonTextComponent {
|
|
/**
|
|
* The number of text lines to display
|
|
*/
|
|
readonly lines = input<number>(1);
|
|
|
|
/**
|
|
* Array-transformed version of the `lines` to loop over
|
|
*/
|
|
protected readonly linesArray = computed(() => [...Array(this.lines()).keys()]);
|
|
}
|