You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
7.9 KiB
190 lines
7.9 KiB
import { CommonModule } from '@angular/common';
|
|
import * as i0 from '@angular/core';
|
|
import { Directive, Input, NgModule } from '@angular/core';
|
|
import { DomHandler } from 'primeng/dom';
|
|
|
|
class StyleClass {
|
|
constructor(el, renderer) {
|
|
this.el = el;
|
|
this.renderer = renderer;
|
|
}
|
|
ngAfterViewInit() {
|
|
this.eventListener = this.renderer.listen(this.el.nativeElement, 'click', () => {
|
|
this.target = this.resolveTarget();
|
|
if (this.toggleClass) {
|
|
if (DomHandler.hasClass(this.target, this.toggleClass))
|
|
DomHandler.removeClass(this.target, this.toggleClass);
|
|
else
|
|
DomHandler.addClass(this.target, this.toggleClass);
|
|
}
|
|
else {
|
|
if (this.target.offsetParent === null)
|
|
this.enter();
|
|
else
|
|
this.leave();
|
|
}
|
|
});
|
|
}
|
|
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) {
|
|
DomHandler.removeClass(this.target, this.enterClass);
|
|
}
|
|
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();
|
|
if (this.enterActiveClass === 'slidedown') {
|
|
this.target.style.maxHeight = '';
|
|
}
|
|
this.animating = false;
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
if (this.enterClass) {
|
|
DomHandler.removeClass(this.target, this.enterClass);
|
|
}
|
|
if (this.enterToClass) {
|
|
DomHandler.addClass(this.target, this.enterToClass);
|
|
}
|
|
}
|
|
if (this.hideOnOutsideClick) {
|
|
this.bindDocumentListener();
|
|
}
|
|
}
|
|
leave() {
|
|
if (this.leaveActiveClass) {
|
|
if (!this.animating) {
|
|
this.animating = true;
|
|
DomHandler.addClass(this.target, this.leaveActiveClass);
|
|
if (this.leaveClass) {
|
|
DomHandler.removeClass(this.target, this.leaveClass);
|
|
}
|
|
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.animating = false;
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
if (this.leaveClass) {
|
|
DomHandler.removeClass(this.target, this.leaveClass);
|
|
}
|
|
if (this.leaveToClass) {
|
|
DomHandler.addClass(this.target, this.leaveToClass);
|
|
}
|
|
}
|
|
if (this.hideOnOutsideClick) {
|
|
this.unbindDocumentListener();
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
bindDocumentListener() {
|
|
if (!this.documentListener) {
|
|
this.documentListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', event => {
|
|
if (getComputedStyle(this.target).getPropertyValue('position') === 'static') {
|
|
this.unbindDocumentListener();
|
|
}
|
|
else if (!this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !this.target.contains(event.target)) {
|
|
this.leave();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
unbindDocumentListener() {
|
|
if (this.documentListener) {
|
|
this.documentListener();
|
|
this.documentListener = null;
|
|
}
|
|
}
|
|
ngOnDestroy() {
|
|
this.target = null;
|
|
if (this.eventListener) {
|
|
this.eventListener();
|
|
}
|
|
this.unbindDocumentListener();
|
|
}
|
|
}
|
|
StyleClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StyleClass, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
StyleClass.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StyleClass, selector: "[pStyleClass]", inputs: { selector: ["pStyleClass", "selector"], enterClass: "enterClass", enterActiveClass: "enterActiveClass", enterToClass: "enterToClass", leaveClass: "leaveClass", leaveActiveClass: "leaveActiveClass", leaveToClass: "leaveToClass", hideOnOutsideClick: "hideOnOutsideClick", toggleClass: "toggleClass" }, host: { classAttribute: "p-element" }, ngImport: i0 });
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StyleClass, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: '[pStyleClass]',
|
|
host: {
|
|
'class': 'p-element'
|
|
}
|
|
}]
|
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { selector: [{
|
|
type: Input,
|
|
args: ['pStyleClass']
|
|
}], enterClass: [{
|
|
type: Input
|
|
}], enterActiveClass: [{
|
|
type: Input
|
|
}], enterToClass: [{
|
|
type: Input
|
|
}], leaveClass: [{
|
|
type: Input
|
|
}], leaveActiveClass: [{
|
|
type: Input
|
|
}], leaveToClass: [{
|
|
type: Input
|
|
}], hideOnOutsideClick: [{
|
|
type: Input
|
|
}], toggleClass: [{
|
|
type: Input
|
|
}] } });
|
|
class StyleClassModule {
|
|
}
|
|
StyleClassModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StyleClassModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
StyleClassModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StyleClassModule, declarations: [StyleClass], imports: [CommonModule], exports: [StyleClass] });
|
|
StyleClassModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StyleClassModule, imports: [[CommonModule]] });
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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
|