@progress/kendo-angular-ripple
Version:
Ripple Package for Angular
175 lines (167 loc) • 6.37 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 * as i0 from '@angular/core';
import { Directive, Input, HostBinding, NgModule } from '@angular/core';
import { register } from '@progress/kendo-ripple';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-ripple',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1756993063,
version: '20.0.3',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
/**
* Represents the Ripple container component.
*
* Apply this directive to any container element.
* The ripple effect will show on the following elements:
* - Buttons
* - Checkboxes
* - Radio buttons
*
* @example
* ```html
* <div kendoRippleContainer>
* <button kendoButton>Default Button</button>
* <button kendoButton [primary]="true">Primary Button</button>
* </div>
* ```
*/
class RippleContainerDirective {
renderer;
element;
ngZone;
/**
* Disables the ripple effect for the `kendoRippleContainer` element.
*
* @default false
*/
set disabled(disabled) {
this.isDisabled = disabled;
if (this.isDisabled) {
this.removeListeners();
}
else {
this.registerListeners();
}
this.renderer.setProperty(this.element.nativeElement, 'disabled', disabled);
}
isDisabled = false;
get containerClass() {
return true;
}
constructor(renderer, element, ngZone) {
this.renderer = renderer;
this.element = element;
this.ngZone = ngZone;
validatePackage(packageMetadata);
}
ngOnDestroy() {
this.removeListeners();
}
ngAfterViewInit() {
if (!this.isDisabled) {
this.ngZone.runOutsideAngular(() => {
this.registerListeners();
});
}
}
removeListeners = () => { };
registerListeners() {
if (!isDocumentAvailable()) {
return;
}
this.removeListeners();
const callback = register(this.element.nativeElement, [
{ selector: ".k-button:not(li)" },
{ selector: ".k-list>.k-item", options: { global: true } },
{ selector: ".k-checkbox,.k-radio",
options: {
events: ["focusin", "animationend", "click"]
}
}
]);
this.removeListeners = callback;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleContainerDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RippleContainerDirective, isStandalone: true, selector: "[kendoRippleContainer]", inputs: { disabled: "disabled" }, host: { properties: { "class.k-ripple-container": "this.containerClass" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleContainerDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoRippleContainer]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { disabled: [{
type: Input
}], containerClass: [{
type: HostBinding,
args: ['class.k-ripple-container']
}] } });
/**
* Use the `KENDO_RIPPLE` utility array to add all `@progress/kendo-angular-ripple` related components and directives to a standalone Angular component.
*
* @example
* ```typescript
* import { Component } from '@angular/core';
* import { KENDO_RIPPLE } from '@progress/kendo-angular-ripple';
* import { KENDO_BUTTON } from "@progress/kendo-angular-buttons";
*
* @Component({
* standalone: true,
* imports: [KENDO_RIPPLE, KENDO_BUTTON],
* template: `
* <div kendoRippleContainer>
* <button kendoButton>Ripple Button</button>
* </div>
* `,
* })
* export class AppComponent {}
* ```
*/
const KENDO_RIPPLE = [RippleContainerDirective];
//IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
* definition for the Ripple directive.
*
* @example
* ```typescript
* import { NgModule } from '@angular/core';
* import { BrowserModule } from '@angular/platform-browser';
* import { RippleModule } from '@progress/kendo-angular-ripple';
* import { AppComponent } from './app.component';
*
* @NgModule({
* declarations: [AppComponent],
* imports: [BrowserModule, RippleModule],
* bootstrap: [AppComponent]
* })
* export class AppModule {}
* ```
*/
class RippleModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, imports: [RippleContainerDirective], exports: [RippleContainerDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, decorators: [{
type: NgModule,
args: [{
imports: [...KENDO_RIPPLE],
exports: [...KENDO_RIPPLE]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { KENDO_RIPPLE, RippleContainerDirective, RippleModule };