carbon-components-angular
Version:
Next generation components
51 lines • 4.82 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;
}
/**
* 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" }, usesOnChanges: true, ngImport: i0, template: `
<p
*ngFor="let width of lineWidths"
class="cds--skeleton__text"
[style.width]="width">
</p>
`, isInline: true, dependencies: [{ 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"
[style.width]="width">
</p>
`
}]
}], propDecorators: { lines: [{
type: Input
}], minLineWidth: [{
type: Input
}], maxLineWidth: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24tdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvc2tlbGV0b24vc2tlbGV0b24tdGV4dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7OztBQVk1RCxNQUFNLE9BQU8sWUFBWTtJQVZ6QjtRQVdVLFVBQUssR0FBRyxDQUFDLENBQUM7UUFFVixpQkFBWSxHQUFHLEdBQUcsQ0FBQztRQUVuQixpQkFBWSxHQUFHLEdBQUcsQ0FBQztLQWtCNUI7SUFkQTs7T0FFRztJQUNILFlBQVksQ0FBQyxHQUFHLEVBQUUsR0FBRztRQUNwQixPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLElBQUksRUFBRSxDQUFDO0lBQ3RFLENBQUM7SUFFRCxXQUFXO1FBQ1Ysc0VBQXNFO1FBQ3RFLCtEQUErRDtRQUMvRCxJQUFJLENBQUMsVUFBVTtZQUNkLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztpQkFDbEMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7O3lHQXRCVyxZQUFZOzZGQUFaLFlBQVkseUxBUmQ7Ozs7OztFQU1UOzJGQUVXLFlBQVk7a0JBVnhCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHNDQUFzQztvQkFDaEQsUUFBUSxFQUFFOzs7Ozs7RUFNVDtpQkFDRDs4QkFFUyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsWUFBWTtzQkFBcEIsS0FBSztnQkFFRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1za2VsZXRvbi10ZXh0LCBpYm0tc2tlbGV0b24tdGV4dFwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxwXG5cdFx0XHQqbmdGb3I9XCJsZXQgd2lkdGggb2YgbGluZVdpZHRoc1wiXG5cdFx0XHRjbGFzcz1cImNkcy0tc2tlbGV0b25fX3RleHRcIlxuXHRcdFx0W3N0eWxlLndpZHRoXT1cIndpZHRoXCI+XG5cdFx0PC9wPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFNrZWxldG9uVGV4dCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG5cdEBJbnB1dCgpIGxpbmVzID0gNTtcblxuXHRASW5wdXQoKSBtaW5MaW5lV2lkdGggPSAxMDA7XG5cblx0QElucHV0KCkgbWF4TGluZVdpZHRoID0gMzAwO1xuXG5cdGxpbmVXaWR0aHM6IEFycmF5PHN0cmluZz47XG5cblx0LyoqXG5cdCAqIFJldHVybnMgYSByYW5kb20gd2lkdGggaW4gcGl4ZWxzIGJhc2VkIG9mZiBhIG1pbiB3aWR0aCwgYW5kIGEgbWF4IHdpZHRoLlxuXHQgKi9cblx0Z2V0UmFuZG9tSW50KG1pbiwgbWF4KSB7XG5cdFx0cmV0dXJuIGAke01hdGguZmxvb3IoTWF0aC5yYW5kb20oKSAqIChtYXggLSBtaW4gKyAxKSArIG1pbikgKyBcInB4XCJ9YDtcblx0fVxuXG5cdG5nT25DaGFuZ2VzKCkge1xuXHRcdC8vIENyZWF0ZXMgYW4gYXJyYXkgb2YgbGVuZ3RoIGRlZmluZWQgYnkgaW5wdXQgbGluZXMgd2l0aCBjb250ZW50IGZyb21cblx0XHQvLyAwIHRvIGxpbmVzIC0gMSwgbWFwcyBlYWNoIHZhbHVlIHRvIGEgcmFuZG9tIHdpZHRoIGluIHBpeGVscy5cblx0XHR0aGlzLmxpbmVXaWR0aHMgPVxuXHRcdFx0QXJyYXkuZnJvbShBcnJheSh0aGlzLmxpbmVzKS5rZXlzKCkpXG5cdFx0XHRcdC5tYXAobnVtID0+IHRoaXMuZ2V0UmFuZG9tSW50KHRoaXMubWluTGluZVdpZHRoLCB0aGlzLm1heExpbmVXaWR0aCkpO1xuXHR9XG59XG4iXX0=