@progress/kendo-angular-indicators
Version:
Kendo UI Indicators for Angular
132 lines (131 loc) • 4.95 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, Input, HostBinding, ElementRef, Renderer2 } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { NgFor } from '@angular/common';
import * as i0 from "@angular/core";
const SIZE_CLASSES = {
'small': 'k-loader-sm',
'medium': 'k-loader-md',
'large': 'k-loader-lg'
};
const SEGMENT_COUNT = {
'pulsing': 2,
'infinite-spinner': 3,
'converging-spinner': 4
};
const TYPE_CLASSES = {
'pulsing': 'k-loader-pulsing-2',
'infinite-spinner': 'k-loader-spinner-3',
'converging-spinner': 'k-loader-spinner-4'
};
/**
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
* Displays a Loader that represents an indeterminate wait time.
*
* Provides configuration options for animation type, theme color, and size.
*
* @example
* ```html
* <kendo-loader [type]="'infinite-spinner'" [themeColor]="'primary'" [size]="'large'"></kendo-loader>
* ```
*/
export class LoaderComponent {
element;
renderer;
hostClass = true;
/**
* Specifies the Loader animation type.
*
* @default pulsing
*/
set type(type) {
this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
this.renderer.addClass(this.loader, TYPE_CLASSES[type]);
this._type = type;
}
get type() {
return this._type;
}
/**
* Specifies the theme color of the Loader.
*
* @default primary
*/
set themeColor(themeColor) {
this.renderer.removeClass(this.loader, `k-loader-${this.themeColor}`);
this.renderer.addClass(this.loader, `k-loader-${themeColor}`);
this._themeColor = themeColor;
}
get themeColor() {
return this._themeColor;
}
/**
* Specifies the size of the Loader.
*
* @default medium
*/
set size(size) {
this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
this.renderer.addClass(this.loader, SIZE_CLASSES[size]);
this._size = size;
}
get size() {
return this._size;
}
_type = 'pulsing';
_themeColor = 'primary';
_size = 'medium';
loader;
constructor(element, renderer) {
this.element = element;
this.renderer = renderer;
validatePackage(packageMetadata);
this.loader = this.element.nativeElement;
}
ngAfterViewInit() {
this.setLoaderClasses();
}
/**
* @hidden
*/
get segmentCount() {
return new Array(SEGMENT_COUNT[this.type]);
}
setLoaderClasses() {
this.renderer.addClass(this.loader, TYPE_CLASSES[this.type]);
this.renderer.addClass(this.loader, `k-loader-${this.themeColor}`);
this.renderer.addClass(this.loader, SIZE_CLASSES[this.size]);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderComponent, isStandalone: true, selector: "kendo-loader", inputs: { type: "type", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-loader": "this.hostClass" } }, ngImport: i0, template: `
<div class="k-loader-canvas">
<span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-loader',
template: `
<div class="k-loader-canvas">
<span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>
</div>
`,
standalone: true,
imports: [NgFor]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-loader']
}], type: [{
type: Input
}], themeColor: [{
type: Input
}], size: [{
type: Input
}] } });