1 | import { CommonModule } from '@angular/common';
|
---|
2 | import * as i0 from '@angular/core';
|
---|
3 | import { Directive, Input, NgModule } from '@angular/core';
|
---|
4 | import { DomHandler } from 'primeng/dom';
|
---|
5 |
|
---|
6 | class StyleClass {
|
---|
7 | constructor(el, renderer) {
|
---|
8 | this.el = el;
|
---|
9 | this.renderer = renderer;
|
---|
10 | }
|
---|
11 | ngAfterViewInit() {
|
---|
12 | this.eventListener = this.renderer.listen(this.el.nativeElement, 'click', () => {
|
---|
13 | this.target = this.resolveTarget();
|
---|
14 | if (this.toggleClass) {
|
---|
15 | if (DomHandler.hasClass(this.target, this.toggleClass))
|
---|
16 | DomHandler.removeClass(this.target, this.toggleClass);
|
---|
17 | else
|
---|
18 | DomHandler.addClass(this.target, this.toggleClass);
|
---|
19 | }
|
---|
20 | else {
|
---|
21 | if (this.target.offsetParent === null)
|
---|
22 | this.enter();
|
---|
23 | else
|
---|
24 | this.leave();
|
---|
25 | }
|
---|
26 | });
|
---|
27 | }
|
---|
28 | enter() {
|
---|
29 | if (this.enterActiveClass) {
|
---|
30 | if (!this.animating) {
|
---|
31 | this.animating = true;
|
---|
32 | if (this.enterActiveClass === 'slidedown') {
|
---|
33 | this.target.style.height = '0px';
|
---|
34 | DomHandler.removeClass(this.target, 'hidden');
|
---|
35 | this.target.style.maxHeight = this.target.scrollHeight + 'px';
|
---|
36 | DomHandler.addClass(this.target, 'hidden');
|
---|
37 | this.target.style.height = '';
|
---|
38 | }
|
---|
39 | DomHandler.addClass(this.target, this.enterActiveClass);
|
---|
40 | if (this.enterClass) {
|
---|
41 | DomHandler.removeClass(this.target, this.enterClass);
|
---|
42 | }
|
---|
43 | this.enterListener = this.renderer.listen(this.target, 'animationend', () => {
|
---|
44 | DomHandler.removeClass(this.target, this.enterActiveClass);
|
---|
45 | if (this.enterToClass) {
|
---|
46 | DomHandler.addClass(this.target, this.enterToClass);
|
---|
47 | }
|
---|
48 | this.enterListener();
|
---|
49 | if (this.enterActiveClass === 'slidedown') {
|
---|
50 | this.target.style.maxHeight = '';
|
---|
51 | }
|
---|
52 | this.animating = false;
|
---|
53 | });
|
---|
54 | }
|
---|
55 | }
|
---|
56 | else {
|
---|
57 | if (this.enterClass) {
|
---|
58 | DomHandler.removeClass(this.target, this.enterClass);
|
---|
59 | }
|
---|
60 | if (this.enterToClass) {
|
---|
61 | DomHandler.addClass(this.target, this.enterToClass);
|
---|
62 | }
|
---|
63 | }
|
---|
64 | if (this.hideOnOutsideClick) {
|
---|
65 | this.bindDocumentListener();
|
---|
66 | }
|
---|
67 | }
|
---|
68 | leave() {
|
---|
69 | if (this.leaveActiveClass) {
|
---|
70 | if (!this.animating) {
|
---|
71 | this.animating = true;
|
---|
72 | DomHandler.addClass(this.target, this.leaveActiveClass);
|
---|
73 | if (this.leaveClass) {
|
---|
74 | DomHandler.removeClass(this.target, this.leaveClass);
|
---|
75 | }
|
---|
76 | this.leaveListener = this.renderer.listen(this.target, 'animationend', () => {
|
---|
77 | DomHandler.removeClass(this.target, this.leaveActiveClass);
|
---|
78 | if (this.leaveToClass) {
|
---|
79 | DomHandler.addClass(this.target, this.leaveToClass);
|
---|
80 | }
|
---|
81 | this.leaveListener();
|
---|
82 | this.animating = false;
|
---|
83 | });
|
---|
84 | }
|
---|
85 | }
|
---|
86 | else {
|
---|
87 | if (this.leaveClass) {
|
---|
88 | DomHandler.removeClass(this.target, this.leaveClass);
|
---|
89 | }
|
---|
90 | if (this.leaveToClass) {
|
---|
91 | DomHandler.addClass(this.target, this.leaveToClass);
|
---|
92 | }
|
---|
93 | }
|
---|
94 | if (this.hideOnOutsideClick) {
|
---|
95 | this.unbindDocumentListener();
|
---|
96 | }
|
---|
97 | }
|
---|
98 | resolveTarget() {
|
---|
99 | if (this.target) {
|
---|
100 | return this.target;
|
---|
101 | }
|
---|
102 | switch (this.selector) {
|
---|
103 | case '@next':
|
---|
104 | return this.el.nativeElement.nextElementSibling;
|
---|
105 | case '@prev':
|
---|
106 | return this.el.nativeElement.previousElementSibling;
|
---|
107 | case '@parent':
|
---|
108 | return this.el.nativeElement.parentElement;
|
---|
109 | case '@grandparent':
|
---|
110 | return this.el.nativeElement.parentElement.parentElement;
|
---|
111 | default:
|
---|
112 | return document.querySelector(this.selector);
|
---|
113 | }
|
---|
114 | }
|
---|
115 | bindDocumentListener() {
|
---|
116 | if (!this.documentListener) {
|
---|
117 | this.documentListener = this.renderer.listen(this.el.nativeElement.ownerDocument, 'click', event => {
|
---|
118 | if (getComputedStyle(this.target).getPropertyValue('position') === 'static') {
|
---|
119 | this.unbindDocumentListener();
|
---|
120 | }
|
---|
121 | else if (!this.el.nativeElement.isSameNode(event.target) && !this.el.nativeElement.contains(event.target) && !this.target.contains(event.target)) {
|
---|
122 | this.leave();
|
---|
123 | }
|
---|
124 | });
|
---|
125 | }
|
---|
126 | }
|
---|
127 | unbindDocumentListener() {
|
---|
128 | if (this.documentListener) {
|
---|
129 | this.documentListener();
|
---|
130 | this.documentListener = null;
|
---|
131 | }
|
---|
132 | }
|
---|
133 | ngOnDestroy() {
|
---|
134 | this.target = null;
|
---|
135 | if (this.eventListener) {
|
---|
136 | this.eventListener();
|
---|
137 | }
|
---|
138 | this.unbindDocumentListener();
|
---|
139 | }
|
---|
140 | }
|
---|
141 | StyleClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClass, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
---|
142 | StyleClass.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", 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 });
|
---|
143 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClass, decorators: [{
|
---|
144 | type: Directive,
|
---|
145 | args: [{
|
---|
146 | selector: '[pStyleClass]',
|
---|
147 | host: {
|
---|
148 | 'class': 'p-element'
|
---|
149 | }
|
---|
150 | }]
|
---|
151 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { selector: [{
|
---|
152 | type: Input,
|
---|
153 | args: ['pStyleClass']
|
---|
154 | }], enterClass: [{
|
---|
155 | type: Input
|
---|
156 | }], enterActiveClass: [{
|
---|
157 | type: Input
|
---|
158 | }], enterToClass: [{
|
---|
159 | type: Input
|
---|
160 | }], leaveClass: [{
|
---|
161 | type: Input
|
---|
162 | }], leaveActiveClass: [{
|
---|
163 | type: Input
|
---|
164 | }], leaveToClass: [{
|
---|
165 | type: Input
|
---|
166 | }], hideOnOutsideClick: [{
|
---|
167 | type: Input
|
---|
168 | }], toggleClass: [{
|
---|
169 | type: Input
|
---|
170 | }] } });
|
---|
171 | class StyleClassModule {
|
---|
172 | }
|
---|
173 | StyleClassModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClassModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
174 | StyleClassModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClassModule, declarations: [StyleClass], imports: [CommonModule], exports: [StyleClass] });
|
---|
175 | StyleClassModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClassModule, imports: [[CommonModule]] });
|
---|
176 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: StyleClassModule, decorators: [{
|
---|
177 | type: NgModule,
|
---|
178 | args: [{
|
---|
179 | imports: [CommonModule],
|
---|
180 | exports: [StyleClass],
|
---|
181 | declarations: [StyleClass]
|
---|
182 | }]
|
---|
183 | }] });
|
---|
184 |
|
---|
185 | /**
|
---|
186 | * Generated bundle index. Do not edit.
|
---|
187 | */
|
---|
188 |
|
---|
189 | export { StyleClass, StyleClassModule };
|
---|