@progress/kendo-angular-indicators
Version:
Kendo UI Indicators for Angular
110 lines (109 loc) • 5.12 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 that represents loading content.
*/
export class SkeletonComponent {
renderer;
hostElement;
/**
* Specifies the animation settings of the Skeleton.
*
* The possible values are:
* * `pulse` — (Default) Shows a pulse animation effect.
* * `wave` — Shows a wave animation effect.
* * `false` — Disables the animation. Note that it's a boolean, not a string.
*/
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.
*
* The possible values are:
* * `text` — (Default) Renders a line Skeleton.
* * `circle` — Renders a circular Skeleton.
* * `rectangle` — Renders a rectangular Skeleton.
*/
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.
* * Can be set to a string, e.g. '100px', '3em', '50%'.
* * Can be set to an integer number (will be read as width in 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 is derived from the current CSS font-size.
* * Can be set to a string, e.g. '100px', '3em', '50%'.
* * Can be set to an integer number (will be read as height in 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: "16.2.12", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: SkeletonComponent, decorators: [{
type: Component,
args: [{
selector: "kendo-skeleton",
changeDetection: ChangeDetectionStrategy.OnPush,
template: ``,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], shape: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}] } });