carbon-components-angular
Version:
Next generation components
173 lines (166 loc) • 6.97 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';
class SkeletonIcon {
constructor() {
/**
* When `true`, applies the AI skeleton gradient treatment (`cds--skeleton__icon--ai`).
*/
this.ai = false;
}
}
SkeletonIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonIcon.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SkeletonIcon, selector: "cds-skeleton-icon, ibm-skeleton-icon", inputs: { ai: "ai" }, ngImport: i0, template: `
<div
class="cds--icon--skeleton"
[class.cds--skeleton__icon--ai]="ai">
</div>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SkeletonIcon, decorators: [{
type: Component,
args: [{
selector: "cds-skeleton-icon, ibm-skeleton-icon",
template: `
<div
class="cds--icon--skeleton"
[class.cds--skeleton__icon--ai]="ai">
</div>`
}]
}], propDecorators: { ai: [{
type: Input
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { SkeletonModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-skeleton--basic)
*/
class SkeletonPlaceholder {
constructor() {
/**
* When `true`, applies the AI skeleton gradient treatment
*/
this.ai = false;
}
}
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", inputs: { ai: "ai" }, ngImport: i0, template: `
<div
class="cds--skeleton__placeholder"
[class.cds--skeleton__placeholder--ai]="ai">
</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"
[class.cds--skeleton__placeholder--ai]="ai">
</div>`
}]
}], propDecorators: { ai: [{
type: Input
}] } });
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
}] } });
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: [SkeletonIcon,
SkeletonPlaceholder,
SkeletonText], imports: [CommonModule], exports: [SkeletonIcon,
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: [
SkeletonIcon,
SkeletonPlaceholder,
SkeletonText
],
exports: [
SkeletonIcon,
SkeletonPlaceholder,
SkeletonText
],
imports: [
CommonModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SkeletonIcon, SkeletonModule, SkeletonPlaceholder, SkeletonText };
//# sourceMappingURL=carbon-components-angular-skeleton.mjs.map