@progress/kendo-angular-indicators
Version:
Kendo UI Indicators for Angular
109 lines (108 loc) • 4.81 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ChangeDetectionStrategy, Input, Renderer2, ElementRef, isDevMode } from "@angular/core";
import { ANIMATION_CLASSES, SHAPE_CLASSES, skeletonAnimationError, skeletonShapeError } from "./constants";
import { validAnimations, validShapes } from "./models";
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
* Displays a Skeleton placeholder that represents loading content.
*
* Provides configuration options for animation, shape, width, and height.
*
* @example
* ```html
* <kendo-skeleton shape="circle" animation="wave" width="40px" height="40px"></kendo-skeleton>
* ```
*/
export class SkeletonComponent {
renderer;
hostElement;
/**
* Specifies the animation settings of the Skeleton.
*
* @default pulse
*/
set animation(animation) {
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
throw new Error(skeletonAnimationError(animation));
}
if (this.animation) {
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
}
if (animation) {
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
}
this._animation = animation;
}
get animation() {
return this._animation;
}
/**
* Specifies the shape of the Skeleton.
*
* @default text
*/
set shape(shape) {
if (isDevMode() && validShapes.indexOf(shape) === -1) {
throw new Error(skeletonShapeError(shape));
}
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
this._shape = shape;
}
get shape() {
return this._shape;
}
/**
* Specifies the width of the Skeleton component.
* Required for all Skeleton shapes.
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
*/
set width(width) {
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
}
/**
* Specifies the height of the Skeleton component.
* Required for `circle` and `rectangle` shapes.
* Not required for `text`, as it derives from the current CSS font-size.
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
*/
set height(height) {
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
}
_animation = "pulse";
_shape = 'text';
constructor(renderer, hostElement) {
this.renderer = renderer;
this.hostElement = hostElement;
}
ngAfterViewInit() {
const hostElement = this.hostElement.nativeElement;
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
if (this.animation) {
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SkeletonComponent, isStandalone: true, selector: "kendo-skeleton", inputs: { animation: "animation", shape: "shape", width: "width", height: "height" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, decorators: [{
type: Component,
args: [{
selector: "kendo-skeleton",
changeDetection: ChangeDetectionStrategy.OnPush,
template: ``,
standalone: true
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { animation: [{
type: Input
}], shape: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}] } });