1 | import * as i0 from '@angular/core';
|
---|
2 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, Output, NgModule } from '@angular/core';
|
---|
3 | import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
|
---|
4 | import * as i2 from '@angular/common';
|
---|
5 | import { CommonModule } from '@angular/common';
|
---|
6 | import * as i3 from 'primeng/ripple';
|
---|
7 | import { RippleModule } from 'primeng/ripple';
|
---|
8 | import { DomHandler } from 'primeng/dom';
|
---|
9 | import * as i1 from 'primeng/api';
|
---|
10 | import { PrimeTemplate } from 'primeng/api';
|
---|
11 | import { ZIndexUtils } from 'primeng/utils';
|
---|
12 |
|
---|
13 | const showAnimation = animation([
|
---|
14 | style({ transform: '{{transform}}', opacity: 0 }),
|
---|
15 | animate('{{transition}}')
|
---|
16 | ]);
|
---|
17 | const hideAnimation = animation([
|
---|
18 | animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))
|
---|
19 | ]);
|
---|
20 | class Sidebar {
|
---|
21 | constructor(el, renderer, cd, config) {
|
---|
22 | this.el = el;
|
---|
23 | this.renderer = renderer;
|
---|
24 | this.cd = cd;
|
---|
25 | this.config = config;
|
---|
26 | this.blockScroll = false;
|
---|
27 | this.autoZIndex = true;
|
---|
28 | this.baseZIndex = 0;
|
---|
29 | this.modal = true;
|
---|
30 | this.dismissible = true;
|
---|
31 | this.showCloseIcon = true;
|
---|
32 | this.closeOnEscape = true;
|
---|
33 | this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
---|
34 | this.onShow = new EventEmitter();
|
---|
35 | this.onHide = new EventEmitter();
|
---|
36 | this.visibleChange = new EventEmitter();
|
---|
37 | this._position = "left";
|
---|
38 | this._fullScreen = false;
|
---|
39 | this.transformOptions = "translate3d(-100%, 0px, 0px)";
|
---|
40 | }
|
---|
41 | ngAfterViewInit() {
|
---|
42 | this.initialized = true;
|
---|
43 | }
|
---|
44 | ngAfterContentInit() {
|
---|
45 | this.templates.forEach((item) => {
|
---|
46 | switch (item.getType()) {
|
---|
47 | case 'content':
|
---|
48 | this.contentTemplate = item.template;
|
---|
49 | break;
|
---|
50 | default:
|
---|
51 | this.contentTemplate = item.template;
|
---|
52 | break;
|
---|
53 | }
|
---|
54 | });
|
---|
55 | }
|
---|
56 | get visible() {
|
---|
57 | return this._visible;
|
---|
58 | }
|
---|
59 | set visible(val) {
|
---|
60 | this._visible = val;
|
---|
61 | }
|
---|
62 | get position() {
|
---|
63 | return this._position;
|
---|
64 | }
|
---|
65 | ;
|
---|
66 | set position(value) {
|
---|
67 | this._position = value;
|
---|
68 | switch (value) {
|
---|
69 | case 'left':
|
---|
70 | this.transformOptions = "translate3d(-100%, 0px, 0px)";
|
---|
71 | break;
|
---|
72 | case 'right':
|
---|
73 | this.transformOptions = "translate3d(100%, 0px, 0px)";
|
---|
74 | break;
|
---|
75 | case 'bottom':
|
---|
76 | this.transformOptions = "translate3d(0px, 100%, 0px)";
|
---|
77 | break;
|
---|
78 | case 'top':
|
---|
79 | this.transformOptions = "translate3d(0px, -100%, 0px)";
|
---|
80 | break;
|
---|
81 | }
|
---|
82 | }
|
---|
83 | get fullScreen() {
|
---|
84 | return this._fullScreen;
|
---|
85 | }
|
---|
86 | set fullScreen(value) {
|
---|
87 | this._fullScreen = value;
|
---|
88 | if (value)
|
---|
89 | this.transformOptions = "none";
|
---|
90 | }
|
---|
91 | show() {
|
---|
92 | if (this.autoZIndex) {
|
---|
93 | ZIndexUtils.set('modal', this.container, this.baseZIndex || this.config.zIndex.modal);
|
---|
94 | }
|
---|
95 | if (this.modal) {
|
---|
96 | this.enableModality();
|
---|
97 | }
|
---|
98 | this.onShow.emit({});
|
---|
99 | }
|
---|
100 | hide() {
|
---|
101 | this.onHide.emit({});
|
---|
102 | if (this.modal) {
|
---|
103 | this.disableModality();
|
---|
104 | }
|
---|
105 | }
|
---|
106 | close(event) {
|
---|
107 | this.hide();
|
---|
108 | this.visibleChange.emit(false);
|
---|
109 | event.preventDefault();
|
---|
110 | }
|
---|
111 | enableModality() {
|
---|
112 | if (!this.mask) {
|
---|
113 | this.mask = document.createElement('div');
|
---|
114 | this.mask.style.zIndex = String(parseInt(this.container.style.zIndex) - 1);
|
---|
115 | DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-sidebar-mask p-component-overlay p-component-overlay-enter');
|
---|
116 | if (this.dismissible) {
|
---|
117 | this.maskClickListener = this.renderer.listen(this.mask, 'click', (event) => {
|
---|
118 | if (this.dismissible) {
|
---|
119 | this.close(event);
|
---|
120 | }
|
---|
121 | });
|
---|
122 | }
|
---|
123 | document.body.appendChild(this.mask);
|
---|
124 | if (this.blockScroll) {
|
---|
125 | DomHandler.addClass(document.body, 'p-overflow-hidden');
|
---|
126 | }
|
---|
127 | }
|
---|
128 | }
|
---|
129 | disableModality() {
|
---|
130 | if (this.mask) {
|
---|
131 | DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
---|
132 | this.animationEndListener = this.destroyModal.bind(this);
|
---|
133 | this.mask.addEventListener('animationend', this.animationEndListener);
|
---|
134 | }
|
---|
135 | }
|
---|
136 | destroyModal() {
|
---|
137 | this.unbindMaskClickListener();
|
---|
138 | if (this.mask) {
|
---|
139 | document.body.removeChild(this.mask);
|
---|
140 | }
|
---|
141 | if (this.blockScroll) {
|
---|
142 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
---|
143 | }
|
---|
144 | this.unbindAnimationEndListener();
|
---|
145 | this.mask = null;
|
---|
146 | }
|
---|
147 | onAnimationStart(event) {
|
---|
148 | switch (event.toState) {
|
---|
149 | case 'visible':
|
---|
150 | this.container = event.element;
|
---|
151 | this.appendContainer();
|
---|
152 | this.show();
|
---|
153 | if (this.closeOnEscape) {
|
---|
154 | this.bindDocumentEscapeListener();
|
---|
155 | }
|
---|
156 | break;
|
---|
157 | }
|
---|
158 | }
|
---|
159 | onAnimationEnd(event) {
|
---|
160 | switch (event.toState) {
|
---|
161 | case 'void':
|
---|
162 | this.hide();
|
---|
163 | ZIndexUtils.clear(this.container);
|
---|
164 | this.unbindGlobalListeners();
|
---|
165 | break;
|
---|
166 | }
|
---|
167 | }
|
---|
168 | appendContainer() {
|
---|
169 | if (this.appendTo) {
|
---|
170 | if (this.appendTo === 'body')
|
---|
171 | document.body.appendChild(this.container);
|
---|
172 | else
|
---|
173 | DomHandler.appendChild(this.container, this.appendTo);
|
---|
174 | }
|
---|
175 | }
|
---|
176 | bindDocumentEscapeListener() {
|
---|
177 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
---|
178 | this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
|
---|
179 | if (event.which == 27) {
|
---|
180 | if (parseInt(this.container.style.zIndex) === (DomHandler.zindex + this.baseZIndex)) {
|
---|
181 | this.close(event);
|
---|
182 | }
|
---|
183 | }
|
---|
184 | });
|
---|
185 | }
|
---|
186 | unbindDocumentEscapeListener() {
|
---|
187 | if (this.documentEscapeListener) {
|
---|
188 | this.documentEscapeListener();
|
---|
189 | this.documentEscapeListener = null;
|
---|
190 | }
|
---|
191 | }
|
---|
192 | unbindMaskClickListener() {
|
---|
193 | if (this.maskClickListener) {
|
---|
194 | this.maskClickListener();
|
---|
195 | this.maskClickListener = null;
|
---|
196 | }
|
---|
197 | }
|
---|
198 | unbindGlobalListeners() {
|
---|
199 | this.unbindMaskClickListener();
|
---|
200 | this.unbindDocumentEscapeListener();
|
---|
201 | }
|
---|
202 | unbindAnimationEndListener() {
|
---|
203 | if (this.animationEndListener && this.mask) {
|
---|
204 | this.mask.removeEventListener('animationend', this.animationEndListener);
|
---|
205 | this.animationEndListener = null;
|
---|
206 | }
|
---|
207 | }
|
---|
208 | ngOnDestroy() {
|
---|
209 | this.initialized = false;
|
---|
210 | if (this.visible && this.modal) {
|
---|
211 | this.destroyModal();
|
---|
212 | }
|
---|
213 | if (this.appendTo && this.container) {
|
---|
214 | this.el.nativeElement.appendChild(this.container);
|
---|
215 | }
|
---|
216 | if (this.container && this.autoZIndex) {
|
---|
217 | ZIndexUtils.clear(this.container);
|
---|
218 | }
|
---|
219 | this.container = null;
|
---|
220 | this.unbindGlobalListeners();
|
---|
221 | this.unbindAnimationEndListener();
|
---|
222 | }
|
---|
223 | }
|
---|
224 | Sidebar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Sidebar, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
|
---|
225 | Sidebar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Sidebar, selector: "p-sidebar", inputs: { appendTo: "appendTo", blockScroll: "blockScroll", style: "style", styleClass: "styleClass", ariaCloseLabel: "ariaCloseLabel", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", modal: "modal", dismissible: "dismissible", showCloseIcon: "showCloseIcon", closeOnEscape: "closeOnEscape", transitionOptions: "transitionOptions", visible: "visible", position: "position", fullScreen: "fullScreen" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
|
---|
226 | <div #container [ngClass]="{'p-sidebar':true, 'p-sidebar-active': visible,
|
---|
227 | 'p-sidebar-left': (position === 'left' && !fullScreen), 'p-sidebar-right': (position === 'right' && !fullScreen),
|
---|
228 | 'p-sidebar-top': (position === 'top' && !fullScreen), 'p-sidebar-bottom': (position === 'bottom' && !fullScreen),
|
---|
229 | 'p-sidebar-full': fullScreen}" *ngIf="visible" [@panelState]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@panelState.start)="onAnimationStart($event)" (@panelState.done)="onAnimationEnd($event)" [ngStyle]="style" [class]="styleClass" role="complementary" [attr.aria-modal]="modal">
|
---|
230 | <div class="p-sidebar-header">
|
---|
231 | <button type="button" class="p-sidebar-close p-sidebar-icon p-link" (click)="close($event)" (keydown.enter)="close($event)" [attr.aria-label]="ariaCloseLabel" *ngIf="showCloseIcon" pRipple>
|
---|
232 | <span class="p-sidebar-close-icon pi pi-times"></span>
|
---|
233 | </button>
|
---|
234 | </div>
|
---|
235 | <div class="p-sidebar-content">
|
---|
236 | <ng-content></ng-content>
|
---|
237 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
---|
238 | </div>
|
---|
239 | </div>
|
---|
240 | `, isInline: true, styles: [".p-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.p-sidebar-content{position:relative;overflow-y:auto}.p-sidebar-header{display:flex;align-items:center;justify-content:flex-end}.p-sidebar-icon{display:flex;align-items:center;justify-content:center}.p-sidebar-left{top:0;left:0;width:20rem;height:100%}.p-sidebar-right{top:0;right:0;width:20rem;height:100%}.p-sidebar-top{top:0;left:0;width:100%;height:10rem}.p-sidebar-bottom{bottom:0;left:0;width:100%;height:10rem}.p-sidebar-full{width:100%;height:100%;top:0;left:0;transition:none}.p-sidebar-left.p-sidebar-sm,.p-sidebar-right.p-sidebar-sm{width:20rem}.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-md{width:40rem}.p-sidebar-left.p-sidebar-lg,.p-sidebar-right.p-sidebar-lg{width:60rem}.p-sidebar-top.p-sidebar-sm,.p-sidebar-bottom.p-sidebar-sm{height:10rem}.p-sidebar-top.p-sidebar-md,.p-sidebar-bottom.p-sidebar-md{height:20rem}.p-sidebar-top.p-sidebar-lg,.p-sidebar-bottom.p-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.p-sidebar-left.p-sidebar-lg,.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-lg,.p-sidebar-right.p-sidebar-md{width:20rem}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
|
---|
241 | trigger('panelState', [
|
---|
242 | transition('void => visible', [
|
---|
243 | useAnimation(showAnimation)
|
---|
244 | ]),
|
---|
245 | transition('visible => void', [
|
---|
246 | useAnimation(hideAnimation)
|
---|
247 | ])
|
---|
248 | ])
|
---|
249 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
---|
250 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Sidebar, decorators: [{
|
---|
251 | type: Component,
|
---|
252 | args: [{ selector: 'p-sidebar', template: `
|
---|
253 | <div #container [ngClass]="{'p-sidebar':true, 'p-sidebar-active': visible,
|
---|
254 | 'p-sidebar-left': (position === 'left' && !fullScreen), 'p-sidebar-right': (position === 'right' && !fullScreen),
|
---|
255 | 'p-sidebar-top': (position === 'top' && !fullScreen), 'p-sidebar-bottom': (position === 'bottom' && !fullScreen),
|
---|
256 | 'p-sidebar-full': fullScreen}" *ngIf="visible" [@panelState]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@panelState.start)="onAnimationStart($event)" (@panelState.done)="onAnimationEnd($event)" [ngStyle]="style" [class]="styleClass" role="complementary" [attr.aria-modal]="modal">
|
---|
257 | <div class="p-sidebar-header">
|
---|
258 | <button type="button" class="p-sidebar-close p-sidebar-icon p-link" (click)="close($event)" (keydown.enter)="close($event)" [attr.aria-label]="ariaCloseLabel" *ngIf="showCloseIcon" pRipple>
|
---|
259 | <span class="p-sidebar-close-icon pi pi-times"></span>
|
---|
260 | </button>
|
---|
261 | </div>
|
---|
262 | <div class="p-sidebar-content">
|
---|
263 | <ng-content></ng-content>
|
---|
264 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
---|
265 | </div>
|
---|
266 | </div>
|
---|
267 | `, animations: [
|
---|
268 | trigger('panelState', [
|
---|
269 | transition('void => visible', [
|
---|
270 | useAnimation(showAnimation)
|
---|
271 | ]),
|
---|
272 | transition('visible => void', [
|
---|
273 | useAnimation(hideAnimation)
|
---|
274 | ])
|
---|
275 | ])
|
---|
276 | ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
---|
277 | 'class': 'p-element'
|
---|
278 | }, styles: [".p-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.p-sidebar-content{position:relative;overflow-y:auto}.p-sidebar-header{display:flex;align-items:center;justify-content:flex-end}.p-sidebar-icon{display:flex;align-items:center;justify-content:center}.p-sidebar-left{top:0;left:0;width:20rem;height:100%}.p-sidebar-right{top:0;right:0;width:20rem;height:100%}.p-sidebar-top{top:0;left:0;width:100%;height:10rem}.p-sidebar-bottom{bottom:0;left:0;width:100%;height:10rem}.p-sidebar-full{width:100%;height:100%;top:0;left:0;transition:none}.p-sidebar-left.p-sidebar-sm,.p-sidebar-right.p-sidebar-sm{width:20rem}.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-md{width:40rem}.p-sidebar-left.p-sidebar-lg,.p-sidebar-right.p-sidebar-lg{width:60rem}.p-sidebar-top.p-sidebar-sm,.p-sidebar-bottom.p-sidebar-sm{height:10rem}.p-sidebar-top.p-sidebar-md,.p-sidebar-bottom.p-sidebar-md{height:20rem}.p-sidebar-top.p-sidebar-lg,.p-sidebar-bottom.p-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.p-sidebar-left.p-sidebar-lg,.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-lg,.p-sidebar-right.p-sidebar-md{width:20rem}}\n"] }]
|
---|
279 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { appendTo: [{
|
---|
280 | type: Input
|
---|
281 | }], blockScroll: [{
|
---|
282 | type: Input
|
---|
283 | }], style: [{
|
---|
284 | type: Input
|
---|
285 | }], styleClass: [{
|
---|
286 | type: Input
|
---|
287 | }], ariaCloseLabel: [{
|
---|
288 | type: Input
|
---|
289 | }], autoZIndex: [{
|
---|
290 | type: Input
|
---|
291 | }], baseZIndex: [{
|
---|
292 | type: Input
|
---|
293 | }], modal: [{
|
---|
294 | type: Input
|
---|
295 | }], dismissible: [{
|
---|
296 | type: Input
|
---|
297 | }], showCloseIcon: [{
|
---|
298 | type: Input
|
---|
299 | }], closeOnEscape: [{
|
---|
300 | type: Input
|
---|
301 | }], transitionOptions: [{
|
---|
302 | type: Input
|
---|
303 | }], templates: [{
|
---|
304 | type: ContentChildren,
|
---|
305 | args: [PrimeTemplate]
|
---|
306 | }], onShow: [{
|
---|
307 | type: Output
|
---|
308 | }], onHide: [{
|
---|
309 | type: Output
|
---|
310 | }], visibleChange: [{
|
---|
311 | type: Output
|
---|
312 | }], visible: [{
|
---|
313 | type: Input
|
---|
314 | }], position: [{
|
---|
315 | type: Input
|
---|
316 | }], fullScreen: [{
|
---|
317 | type: Input
|
---|
318 | }] } });
|
---|
319 | class SidebarModule {
|
---|
320 | }
|
---|
321 | SidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
322 | SidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SidebarModule, declarations: [Sidebar], imports: [CommonModule, RippleModule], exports: [Sidebar] });
|
---|
323 | SidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SidebarModule, imports: [[CommonModule, RippleModule]] });
|
---|
324 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SidebarModule, decorators: [{
|
---|
325 | type: NgModule,
|
---|
326 | args: [{
|
---|
327 | imports: [CommonModule, RippleModule],
|
---|
328 | exports: [Sidebar],
|
---|
329 | declarations: [Sidebar]
|
---|
330 | }]
|
---|
331 | }] });
|
---|
332 |
|
---|
333 | /**
|
---|
334 | * Generated bundle index. Do not edit.
|
---|
335 | */
|
---|
336 |
|
---|
337 | export { Sidebar, SidebarModule };
|
---|