[59329aa] | 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 };
|
---|