carbon-components-angular
Version:
Next generation components
107 lines (101 loc) • 4.69 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* Get started with importing the module:
*
* ```typescript
* import { SkeletonModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-skeleton--basic)
*/
class SkeletonPlaceholder {
}
SkeletonPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonPlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder", ngImport: i0, template: `
<div class="cds--skeleton__placeholder"></div>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonPlaceholder, decorators: [{
type: Component,
args: [{
selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder",
template: `
<div class="cds--skeleton__placeholder"></div>`
}]
}] });
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
}] } });
class SkeletonModule {
}
SkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SkeletonModule, declarations: [SkeletonPlaceholder,
SkeletonText], imports: [CommonModule], exports: [SkeletonPlaceholder,
SkeletonText] });
SkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SkeletonPlaceholder,
SkeletonText
],
exports: [
SkeletonPlaceholder,
SkeletonText
],
imports: [
CommonModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SkeletonModule, SkeletonPlaceholder, SkeletonText };
//# sourceMappingURL=carbon-components-angular-skeleton.mjs.map