carbon-components-angular
Version:
Next generation components
71 lines • 6.05 kB
JavaScript
import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SkeletonText {
constructor() {
this.lines = 5;
this.minLineWidth = 100;
this.maxLineWidth = 300;
/**
* Render a heading-styled skeleton instead of body text.
*/
this.heading = false;
/**
* When `true`, applies the AI skeleton styling
*/
this.ai = false;
}
/**
* Returns a random width in pixels based off a min width, and a max width.
*/
getRandomInt(min, max) {
return `${Math.floor(Math.random() * (max - min + 1) + min) + "px"}`;
}
ngOnChanges() {
// Creates an array of length defined by input lines with content from
// 0 to lines - 1, maps each value to a random width in pixels.
this.lineWidths =
Array.from(Array(this.lines).keys())
.map(num => this.getRandomInt(this.minLineWidth, this.maxLineWidth));
}
}
SkeletonText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonText, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: { lines: "lines", minLineWidth: "minLineWidth", maxLineWidth: "maxLineWidth", heading: "heading", ai: "ai" }, usesOnChanges: true, ngImport: i0, template: `
<p
*ngFor="let width of lineWidths"
class="cds--skeleton__text"
[ngClass]="{
'cds--skeleton__heading': heading,
'cds--skeleton__text--ai': ai
}"
[style.width]="width">
</p>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonText, decorators: [{
type: Component,
args: [{
selector: "cds-skeleton-text, ibm-skeleton-text",
template: `
<p
*ngFor="let width of lineWidths"
class="cds--skeleton__text"
[ngClass]="{
'cds--skeleton__heading': heading,
'cds--skeleton__text--ai': ai
}"
[style.width]="width">
</p>
`
}]
}], propDecorators: { lines: [{
type: Input
}], minLineWidth: [{
type: Input
}], maxLineWidth: [{
type: Input
}], heading: [{
type: Input
}], ai: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24tdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvc2tlbGV0b24vc2tlbGV0b24tdGV4dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7OztBQWdCNUQsTUFBTSxPQUFPLFlBQVk7SUFkekI7UUFlVSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBRVYsaUJBQVksR0FBRyxHQUFHLENBQUM7UUFFbkIsaUJBQVksR0FBRyxHQUFHLENBQUM7UUFFNUI7O1dBRUc7UUFDTSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRXpCOztXQUVHO1FBQ00sT0FBRSxHQUFHLEtBQUssQ0FBQztLQWtCcEI7SUFkQTs7T0FFRztJQUNILFlBQVksQ0FBQyxHQUFHLEVBQUUsR0FBRztRQUNwQixPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksRUFBRSxDQUFDO0lBQ3RFLENBQUM7SUFFRCxXQUFXO1FBQ1Ysc0VBQXNFO1FBQ3RFLCtEQUErRDtRQUMvRCxJQUFJLENBQUMsVUFBVTtZQUNkLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztpQkFDbEMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7O3lHQWhDVyxZQUFZOzZGQUFaLFlBQVksdU5BWmQ7Ozs7Ozs7Ozs7RUFVVDsyRkFFVyxZQUFZO2tCQWR4QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxzQ0FBc0M7b0JBQ2hELFFBQVEsRUFBRTs7Ozs7Ozs7OztFQVVUO2lCQUNEOzhCQUVTLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLO2dCQUtHLEVBQUU7c0JBQVYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcyB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtc2tlbGV0b24tdGV4dCwgaWJtLXNrZWxldG9uLXRleHRcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8cFxuXHRcdFx0Km5nRm9yPVwibGV0IHdpZHRoIG9mIGxpbmVXaWR0aHNcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXNrZWxldG9uX190ZXh0XCJcblx0XHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdFx0J2Nkcy0tc2tlbGV0b25fX2hlYWRpbmcnOiBoZWFkaW5nLFxuXHRcdFx0XHQnY2RzLS1za2VsZXRvbl9fdGV4dC0tYWknOiBhaVxuXHRcdFx0fVwiXG5cdFx0XHRbc3R5bGUud2lkdGhdPVwid2lkdGhcIj5cblx0XHQ8L3A+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgU2tlbGV0b25UZXh0IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcblx0QElucHV0KCkgbGluZXMgPSA1O1xuXG5cdEBJbnB1dCgpIG1pbkxpbmVXaWR0aCA9IDEwMDtcblxuXHRASW5wdXQoKSBtYXhMaW5lV2lkdGggPSAzMDA7XG5cblx0LyoqXG5cdCAqIFJlbmRlciBhIGhlYWRpbmctc3R5bGVkIHNrZWxldG9uIGluc3RlYWQgb2YgYm9keSB0ZXh0LlxuXHQgKi9cblx0QElucHV0KCkgaGVhZGluZyA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBXaGVuIGB0cnVlYCwgYXBwbGllcyB0aGUgQUkgc2tlbGV0b24gc3R5bGluZ1xuXHQgKi9cblx0QElucHV0KCkgYWkgPSBmYWxzZTtcblxuXHRsaW5lV2lkdGhzOiBBcnJheTxzdHJpbmc+O1xuXG5cdC8qKlxuXHQgKiBSZXR1cm5zIGEgcmFuZG9tIHdpZHRoIGluIHBpeGVscyBiYXNlZCBvZmYgYSBtaW4gd2lkdGgsIGFuZCBhIG1heCB3aWR0aC5cblx0ICovXG5cdGdldFJhbmRvbUludChtaW4sIG1heCkge1xuXHRcdHJldHVybiBgJHtNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAobWF4IC0gbWluICsgMSkgKyBtaW4pICsgXCJweFwifWA7XG5cdH1cblxuXHRuZ09uQ2hhbmdlcygpIHtcblx0XHQvLyBDcmVhdGVzIGFuIGFycmF5IG9mIGxlbmd0aCBkZWZpbmVkIGJ5IGlucHV0IGxpbmVzIHdpdGggY29udGVudCBmcm9tXG5cdFx0Ly8gMCB0byBsaW5lcyAtIDEsIG1hcHMgZWFjaCB2YWx1ZSB0byBhIHJhbmRvbSB3aWR0aCBpbiBwaXhlbHMuXG5cdFx0dGhpcy5saW5lV2lkdGhzID1cblx0XHRcdEFycmF5LmZyb20oQXJyYXkodGhpcy5saW5lcykua2V5cygpKVxuXHRcdFx0XHQubWFwKG51bSA9PiB0aGlzLmdldFJhbmRvbUludCh0aGlzLm1pbkxpbmVXaWR0aCwgdGhpcy5tYXhMaW5lV2lkdGgpKTtcblx0fVxufVxuIl19