324 lines
12 KiB
JavaScript
324 lines
12 KiB
JavaScript
|
import { CommonModule } from '@angular/common';
|
||
|
|
import * as i0 from '@angular/core';
|
||
|
|
import { booleanAttribute, Directive, Input, HostListener, NgModule } from '@angular/core';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
* @deprecated Use enterFromClass instead
|
||
|
|
*/
|
||
|
|
set enterClass(value) {
|
||
|
|
this._enterClass = value;
|
||
|
|
console.warn('enterClass is deprecated, use enterFromClass instead');
|
||
|
|
}
|
||
|
|
get enterClass() {
|
||
|
|
return this._enterClass;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
* @deprecated Use leaveFromClass instead
|
||
|
|
*/
|
||
|
|
set leaveClass(value) {
|
||
|
|
this._leaveClass = value;
|
||
|
|
console.warn('leaveClass is deprecated, use leaveFromClass instead');
|
||
|
|
}
|
||
|
|
get leaveClass() {
|
||
|
|
return this._leaveClass;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 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;
|
||
|
|
eventListener;
|
||
|
|
documentClickListener;
|
||
|
|
documentKeydownListener;
|
||
|
|
target;
|
||
|
|
enterListener;
|
||
|
|
leaveListener;
|
||
|
|
animating;
|
||
|
|
_enterClass;
|
||
|
|
_leaveClass;
|
||
|
|
clickListener() {
|
||
|
|
this.target = this.resolveTarget();
|
||
|
|
if (this.toggleClass) {
|
||
|
|
this.toggle();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.target.offsetParent === null)
|
||
|
|
this.enter();
|
||
|
|
else
|
||
|
|
this.leave();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
toggle() {
|
||
|
|
if (DomHandler.hasClass(this.target, this.toggleClass))
|
||
|
|
DomHandler.removeClass(this.target, this.toggleClass);
|
||
|
|
else
|
||
|
|
DomHandler.addClass(this.target, this.toggleClass);
|
||
|
|
}
|
||
|
|
enter() {
|
||
|
|
if (this.enterActiveClass) {
|
||
|
|
if (!this.animating) {
|
||
|
|
this.animating = true;
|
||
|
|
if (this.enterActiveClass === 'slidedown') {
|
||
|
|
this.target.style.height = '0px';
|
||
|
|
DomHandler.removeClass(this.target, 'hidden');
|
||
|
|
this.target.style.maxHeight = this.target.scrollHeight + 'px';
|
||
|
|
DomHandler.addClass(this.target, 'hidden');
|
||
|
|
this.target.style.height = '';
|
||
|
|
}
|
||
|
|
DomHandler.addClass(this.target, this.enterActiveClass);
|
||
|
|
if (this.enterClass || this.enterFromClass) {
|
||
|
|
DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);
|
||
|
|
}
|
||
|
|
this.enterListener = this.renderer.listen(this.target, 'animationend', () => {
|
||
|
|
DomHandler.removeClass(this.target, this.enterActiveClass);
|
||
|
|
if (this.enterToClass) {
|
||
|
|
DomHandler.addClass(this.target, this.enterToClass);
|
||
|
|
}
|
||
|
|
this.enterListener && this.enterListener();
|
||
|
|
if (this.enterActiveClass === 'slidedown') {
|
||
|
|
this.target.style.maxHeight = '';
|
||
|
|
}
|
||
|
|
this.animating = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.enterClass || this.enterFromClass) {
|
||
|
|
DomHandler.removeClass(this.target, this.enterClass || this.enterFromClass);
|
||
|
|
}
|
||
|
|
if (this.enterToClass) {
|
||
|
|
DomHandler.addClass(this.target, this.enterToClass);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.hideOnOutsideClick) {
|
||
|
|
this.bindDocumentClickListener();
|
||
|
|
}
|
||
|
|
if (this.hideOnEscape) {
|
||
|
|
this.bindDocumentKeydownListener();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
leave() {
|
||
|
|
if (this.leaveActiveClass) {
|
||
|
|
if (!this.animating) {
|
||
|
|
this.animating = true;
|
||
|
|
DomHandler.addClass(this.target, this.leaveActiveClass);
|
||
|
|
if (this.leaveClass || this.leaveFromClass) {
|
||
|
|
DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);
|
||
|
|
}
|
||
|
|
this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {
|
||
|
|
DomHandler.removeClass(this.target, this.leaveActiveClass);
|
||
|
|
if (this.leaveToClass) {
|
||
|
|
DomHandler.addClass(this.target, this.leaveToClass);
|
||
|
|
}
|
||
|
|
this.leaveListener && this.leaveListener();
|
||
|
|
this.animating = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.leaveClass || this.leaveFromClass) {
|
||
|
|
DomHandler.removeClass(this.target, this.leaveClass || this.leaveFromClass);
|
||
|
|
}
|
||
|
|
if (this.leaveToClass) {
|
||
|
|
DomHandler.addClass(this.target, this.leaveToClass);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.hideOnOutsideClick) {
|
||
|
|
this.unbindDocumentClickListener();
|
||
|
|
}
|
||
|
|
if (this.hideOnEscape) {
|
||
|
|
this.unbindDocumentKeydownListener();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
resolveTarget() {
|
||
|
|
if (this.target) {
|
||
|
|
return this.target;
|
||
|
|
}
|
||
|
|
switch (this.selector) {
|
||
|
|
case '@next':
|
||
|
|
return this.el.nativeElement.nextElementSibling;
|
||
|
|
case '@prev':
|
||
|
|
return this.el.nativeElement.previousElementSibling;
|
||
|
|
case '@parent':
|
||
|
|
return this.el.nativeElement.parentElement;
|
||
|
|
case '@grandparent':
|
||
|
|
return this.el.nativeElement.parentElement.parentElement;
|
||
|
|
default:
|
||
|
|
return document.querySelector(this.selector);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.target = null;
|
||
|
|
if (this.eventListener) {
|
||
|
|
this.eventListener();
|
||
|
|
}
|
||
|
|
this.unbindDocumentClickListener();
|
||
|
|
this.unbindDocumentKeydownListener();
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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: "17.3.7", type: StyleClass, selector: "[pStyleClass]", inputs: { selector: ["pStyleClass", "selector"], enterClass: "enterClass", enterFromClass: "enterFromClass", enterActiveClass: "enterActiveClass", enterToClass: "enterToClass", leaveClass: "leaveClass", leaveFromClass: "leaveFromClass", leaveActiveClass: "leaveActiveClass", leaveToClass: "leaveToClass", hideOnOutsideClick: ["hideOnOutsideClick", "hideOnOutsideClick", booleanAttribute], toggleClass: "toggleClass", hideOnEscape: ["hideOnEscape", "hideOnEscape", booleanAttribute] }, host: { listeners: { "click": "clickListener($event)" }, classAttribute: "p-element" }, ngImport: i0 });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: StyleClass, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: '[pStyleClass]',
|
||
|
|
host: {
|
||
|
|
class: 'p-element'
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { selector: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['pStyleClass']
|
||
|
|
}], enterClass: [{
|
||
|
|
type: Input
|
||
|
|
}], enterFromClass: [{
|
||
|
|
type: Input
|
||
|
|
}], enterActiveClass: [{
|
||
|
|
type: Input
|
||
|
|
}], enterToClass: [{
|
||
|
|
type: Input
|
||
|
|
}], leaveClass: [{
|
||
|
|
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 }]
|
||
|
|
}], clickListener: [{
|
||
|
|
type: HostListener,
|
||
|
|
args: ['click', ['$event']]
|
||
|
|
}] } });
|
||
|
|
class StyleClassModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: StyleClassModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: StyleClassModule, declarations: [StyleClass], imports: [CommonModule], exports: [StyleClass] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: StyleClassModule, imports: [CommonModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: StyleClassModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule],
|
||
|
|
exports: [StyleClass],
|
||
|
|
declarations: [StyleClass]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generated bundle index. Do not edit.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export { StyleClass, StyleClassModule };
|
||
|
|
//# sourceMappingURL=primeng-styleclass.mjs.map
|