primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
355 lines (351 loc) • 13.3 kB
JavaScript
import * as i0 from '@angular/core';
import { booleanAttribute, HostListener, Input, Directive, NgModule } from '@angular/core';
import { getTargetElement, hasClass, removeClass, addClass, isElement } from '@primeuix/utils';
/**
* StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
* @group Components
*/
class StyleClass {
el;
renderer;
zone;
constructor(el, renderer, zone) {
this.el = el;
this.renderer = renderer;
this.zone = zone;
}
/**
* Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.
* @group Props
*/
selector;
/**
* Style class to add when item begins to get displayed.
* @group Props
*/
enterFromClass;
/**
* Style class to add during enter animation.
* @group Props
*/
enterActiveClass;
/**
* Style class to add when item begins to get displayed.
* @group Props
*/
enterToClass;
/**
* Style class to add when item begins to get hidden.
* @group Props
*/
leaveFromClass;
/**
* Style class to add during leave animation.
* @group Props
*/
leaveActiveClass;
/**
* Style class to add when leave animation is completed.
* @group Props
*/
leaveToClass;
/**
* Whether to trigger leave animation when outside of the element is clicked.
* @group Props
*/
hideOnOutsideClick;
/**
* Adds or removes a class when no enter-leave animation is required.
* @group Props
*/
toggleClass;
/**
* Whether to trigger leave animation when escape key pressed.
* @group Props
*/
hideOnEscape;
/**
* Whether to trigger leave animation when the target element resized.
* @group Props
*/
hideOnResize;
/**
* Target element to listen resize. Valid values are "window", "document" or target element selector.
* @group Props
*/
resizeSelector;
eventListener;
documentClickListener;
documentKeydownListener;
windowResizeListener;
resizeObserver;
target;
enterListener;
leaveListener;
animating;
_enterClass;
_leaveClass;
_resizeTarget;
clickListener() {
this.target ||= getTargetElement(this.selector, this.el.nativeElement);
if (this.toggleClass) {
this.toggle();
}
else {
if (this.target?.offsetParent === null)
this.enter();
else
this.leave();
}
}
toggle() {
if (hasClass(this.target, this.toggleClass))
removeClass(this.target, this.toggleClass);
else
addClass(this.target, this.toggleClass);
}
enter() {
if (this.enterActiveClass) {
if (!this.animating) {
this.animating = true;
if (this.enterActiveClass.includes('slidedown')) {
this.target.style.height = '0px';
removeClass(this.target, this.enterFromClass || 'hidden');
this.target.style.maxHeight = this.target.scrollHeight + 'px';
addClass(this.target, this.enterFromClass || 'hidden');
this.target.style.height = '';
}
addClass(this.target, this.enterActiveClass);
if (this.enterFromClass) {
removeClass(this.target, this.enterFromClass);
}
this.enterListener = this.renderer.listen(this.target, 'animationend', () => {
removeClass(this.target, this.enterActiveClass);
if (this.enterToClass) {
addClass(this.target, this.enterToClass);
}
this.enterListener && this.enterListener();
if (this.enterActiveClass.includes('slidedown')) {
this.target.style.maxHeight = '';
}
this.animating = false;
});
}
}
else {
if (this.enterFromClass) {
removeClass(this.target, this.enterFromClass);
}
if (this.enterToClass) {
addClass(this.target, this.enterToClass);
}
}
if (this.hideOnOutsideClick) {
this.bindDocumentClickListener();
}
if (this.hideOnEscape) {
this.bindDocumentKeydownListener();
}
if (this.hideOnResize) {
this.bindResizeListener();
}
}
leave() {
if (this.leaveActiveClass) {
if (!this.animating) {
this.animating = true;
addClass(this.target, this.leaveActiveClass);
if (this.leaveFromClass) {
removeClass(this.target, this.leaveFromClass);
}
this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {
removeClass(this.target, this.leaveActiveClass);
if (this.leaveToClass) {
addClass(this.target, this.leaveToClass);
}
this.leaveListener && this.leaveListener();
this.animating = false;
});
}
}
else {
if (this.leaveFromClass) {
removeClass(this.target, this.leaveFromClass);
}
if (this.leaveToClass) {
addClass(this.target, this.leaveToClass);
}
}
if (this.hideOnOutsideClick) {
this.unbindDocumentClickListener();
}
if (this.hideOnEscape) {
this.unbindDocumentKeydownListener();
}
if (this.hideOnResize) {
this.unbindResizeListener();
}
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', (event) => {
if (!this.isVisible() || getComputedStyle(this.target).getPropertyValue('position') === 'static')
this.unbindDocumentClickListener();
else if (this.isOutsideClick(event))
this.leave();
});
}
}
bindDocumentKeydownListener() {
if (!this.documentKeydownListener) {
this.zone.runOutsideAngular(() => {
this.documentKeydownListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'keydown', (event) => {
const { key, keyCode, which, type } = event;
if (!this.isVisible() || getComputedStyle(this.target).getPropertyValue('position') === 'static')
this.unbindDocumentKeydownListener();
if (this.isVisible() && key === 'Escape' && keyCode === 27 && which === 27)
this.leave();
});
});
}
}
isVisible() {
return this.target.offsetParent !== null;
}
isOutsideClick(event) {
return !this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !this.target.contains(event.target);
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
unbindDocumentKeydownListener() {
if (this.documentKeydownListener) {
this.documentKeydownListener();
this.documentKeydownListener = null;
}
}
bindResizeListener() {
this._resizeTarget = getTargetElement(this.resizeSelector);
if (isElement(this._resizeTarget)) {
this.bindElementResizeListener();
}
else {
this.bindWindowResizeListener();
}
}
unbindResizeListener() {
this.unbindWindowResizeListener();
this.unbindElementResizeListener();
}
bindWindowResizeListener() {
if (!this.windowResizeListener) {
this.zone.runOutsideAngular(() => {
this.windowResizeListener = this.renderer.listen(window, 'resize', () => {
if (!this.isVisible()) {
this.unbindWindowResizeListener();
}
else {
this.leave();
}
});
});
}
}
unbindWindowResizeListener() {
if (this.windowResizeListener) {
this.windowResizeListener();
this.windowResizeListener = null;
}
}
bindElementResizeListener() {
if (!this.resizeObserver && this._resizeTarget) {
let isFirstResize = true;
this.resizeObserver = new ResizeObserver(() => {
if (isFirstResize) {
isFirstResize = false;
return;
}
if (this.isVisible()) {
this.leave();
}
});
this.resizeObserver.observe(this._resizeTarget);
}
}
unbindElementResizeListener() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = undefined;
}
}
ngOnDestroy() {
this.target = null;
this._resizeTarget = null;
if (this.eventListener) {
this.eventListener();
}
this.unbindDocumentClickListener();
this.unbindDocumentKeydownListener();
this.unbindResizeListener();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StyleClass, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: StyleClass, isStandalone: true, selector: "[pStyleClass]", inputs: { selector: ["pStyleClass", "selector"], enterFromClass: "enterFromClass", enterActiveClass: "enterActiveClass", enterToClass: "enterToClass", leaveFromClass: "leaveFromClass", leaveActiveClass: "leaveActiveClass", leaveToClass: "leaveToClass", hideOnOutsideClick: ["hideOnOutsideClick", "hideOnOutsideClick", booleanAttribute], toggleClass: "toggleClass", hideOnEscape: ["hideOnEscape", "hideOnEscape", booleanAttribute], hideOnResize: ["hideOnResize", "hideOnResize", booleanAttribute], resizeSelector: "resizeSelector" }, host: { listeners: { "click": "clickListener($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StyleClass, decorators: [{
type: Directive,
args: [{
selector: '[pStyleClass]',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { selector: [{
type: Input,
args: ['pStyleClass']
}], enterFromClass: [{
type: Input
}], enterActiveClass: [{
type: Input
}], enterToClass: [{
type: Input
}], leaveFromClass: [{
type: Input
}], leaveActiveClass: [{
type: Input
}], leaveToClass: [{
type: Input
}], hideOnOutsideClick: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], toggleClass: [{
type: Input
}], hideOnEscape: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], hideOnResize: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], resizeSelector: [{
type: Input
}], clickListener: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class StyleClassModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StyleClassModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: StyleClassModule, imports: [StyleClass], exports: [StyleClass] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StyleClassModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StyleClassModule, decorators: [{
type: NgModule,
args: [{
imports: [StyleClass],
exports: [StyleClass]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { StyleClass, StyleClassModule };
//# sourceMappingURL=primeng-styleclass.mjs.map