source: trip-planner-front/node_modules/primeng/fesm2015/primeng-speeddial.mjs@ 571e0df

Last change on this file since 571e0df was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 21.8 KB
Line 
1import * as i0 from '@angular/core';
2import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { PrimeTemplate, SharedModule } from 'primeng/api';
6import * as i3 from 'primeng/button';
7import { ButtonModule } from 'primeng/button';
8import * as i2 from 'primeng/ripple';
9import { RippleModule } from 'primeng/ripple';
10import * as i4 from 'primeng/tooltip';
11import { TooltipModule } from 'primeng/tooltip';
12import { DomHandler } from 'primeng/dom';
13import * as i5 from '@angular/router';
14import { RouterModule } from '@angular/router';
15
16class SpeedDial {
17 constructor(el, cd) {
18 this.el = el;
19 this.cd = cd;
20 this.model = null;
21 this.direction = 'up';
22 this.transitionDelay = 30;
23 this.type = 'linear';
24 this.radius = 0;
25 this.mask = false;
26 this.disabled = false;
27 this.hideOnClickOutside = true;
28 this.showIcon = 'pi pi-plus';
29 this.rotateAnimation = true;
30 this.onVisibleChange = new EventEmitter();
31 this.visibleChange = new EventEmitter();
32 this.onClick = new EventEmitter();
33 this.onShow = new EventEmitter();
34 this.onHide = new EventEmitter();
35 this.isItemClicked = false;
36 this._visible = false;
37 }
38 get visible() {
39 return this._visible;
40 }
41 set visible(value) {
42 this._visible = value;
43 if (this._visible) {
44 this.bindDocumentClickListener();
45 }
46 else {
47 this.unbindDocumentClickListener();
48 }
49 }
50 ngAfterViewInit() {
51 if (this.type !== 'linear') {
52 const button = DomHandler.findSingle(this.container.nativeElement, '.p-speeddial-button');
53 const firstItem = DomHandler.findSingle(this.list.nativeElement, '.p-speeddial-item');
54 if (button && firstItem) {
55 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
56 const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
57 this.list.nativeElement.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
58 this.list.nativeElement.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
59 }
60 }
61 }
62 ngAfterContentInit() {
63 this.templates.forEach((item) => {
64 switch (item.getType()) {
65 case 'button':
66 this.buttonTemplate = item.template;
67 break;
68 }
69 });
70 }
71 show() {
72 this.onVisibleChange.emit(true);
73 this.visibleChange.emit(true);
74 this._visible = true;
75 this.onShow.emit();
76 this.bindDocumentClickListener();
77 this.cd.markForCheck();
78 }
79 hide() {
80 this.onVisibleChange.emit(false);
81 this.visibleChange.emit(false);
82 this._visible = false;
83 this.onHide.emit();
84 this.unbindDocumentClickListener();
85 this.cd.markForCheck();
86 }
87 onButtonClick(event) {
88 this.visible ? this.hide() : this.show();
89 this.onClick.emit(event);
90 this.isItemClicked = true;
91 }
92 onItemClick(e, item) {
93 if (item.command) {
94 item.command({ originalEvent: e, item });
95 }
96 this.hide();
97 this.isItemClicked = true;
98 }
99 calculatePointStyle(index) {
100 const type = this.type;
101 if (type !== 'linear') {
102 const length = this.model.length;
103 const radius = this.radius || (length * 20);
104 if (type === 'circle') {
105 const step = 2 * Math.PI / length;
106 return {
107 left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
108 top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
109 };
110 }
111 else if (type === 'semi-circle') {
112 const direction = this.direction;
113 const step = Math.PI / (length - 1);
114 const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
115 const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
116 if (direction === 'up') {
117 return { left: x, bottom: y };
118 }
119 else if (direction === 'down') {
120 return { left: x, top: y };
121 }
122 else if (direction === 'left') {
123 return { right: y, top: x };
124 }
125 else if (direction === 'right') {
126 return { left: y, top: x };
127 }
128 }
129 else if (type === 'quarter-circle') {
130 const direction = this.direction;
131 const step = Math.PI / (2 * (length - 1));
132 const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
133 const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
134 if (direction === 'up-left') {
135 return { right: x, bottom: y };
136 }
137 else if (direction === 'up-right') {
138 return { left: x, bottom: y };
139 }
140 else if (direction === 'down-left') {
141 return { right: y, top: x };
142 }
143 else if (direction === 'down-right') {
144 return { left: y, top: x };
145 }
146 }
147 }
148 return {};
149 }
150 calculateTransitionDelay(index) {
151 const length = this.model.length;
152 return (this.visible ? index : length - index - 1) * this.transitionDelay;
153 }
154 containerClass() {
155 return {
156 ['p-speeddial p-component' + ` p-speeddial-${this.type}`]: true,
157 [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
158 'p-speeddial-opened': this.visible,
159 'p-disabled': this.disabled
160 };
161 }
162 buttonClass() {
163 return {
164 'p-speeddial-button p-button-rounded': true,
165 'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon,
166 [this.buttonClassName]: true
167 };
168 }
169 get buttonIconClass() {
170 return ((!this.visible && this.showIcon) || !this.hideIcon) ? this.showIcon : this.hideIcon;
171 }
172 getItemStyle(index) {
173 const transitionDelay = this.calculateTransitionDelay(index);
174 const pointStyle = this.calculatePointStyle(index);
175 return Object.assign({ transitionDelay: `${transitionDelay}ms` }, pointStyle);
176 }
177 isClickableRouterLink(item) {
178 return item.routerLink && !this.disabled && !item.disabled;
179 }
180 isOutsideClicked(event) {
181 return this.container && !(this.container.nativeElement.isSameNode(event.target) || this.container.nativeElement.contains(event.target) || this.isItemClicked);
182 }
183 bindDocumentClickListener() {
184 if (!this.documentClickListener && this.hideOnClickOutside) {
185 this.documentClickListener = (event) => {
186 if (this.visible && this.isOutsideClicked(event)) {
187 this.hide();
188 }
189 this.isItemClicked = false;
190 };
191 document.addEventListener('click', this.documentClickListener);
192 }
193 }
194 unbindDocumentClickListener() {
195 if (this.documentClickListener) {
196 document.removeEventListener('click', this.documentClickListener);
197 this.documentClickListener = null;
198 }
199 }
200 ngOnDestroy() {
201 this.unbindDocumentClickListener();
202 }
203}
204SpeedDial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
205SpeedDial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SpeedDial, selector: "p-speedDial", inputs: { id: "id", model: "model", visible: "visible", style: "style", className: "className", direction: "direction", transitionDelay: "transitionDelay", type: "type", radius: "radius", mask: "mask", disabled: "disabled", hideOnClickOutside: "hideOnClickOutside", buttonStyle: "buttonStyle", buttonClassName: "buttonClassName", maskStyle: "maskStyle", maskClassName: "maskClassName", showIcon: "showIcon", hideIcon: "hideIcon", rotateAnimation: "rotateAnimation" }, outputs: { onVisibleChange: "onVisibleChange", visibleChange: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
206 <div #container [attr.id]="id" [ngClass]="containerClass()" [class]="className" [ngStyle]="style">
207 <button pRipple pButton [style]="buttonStyle" [icon]="buttonIconClass" [ngClass]="buttonClass()" (click)="onButtonClick($event)">
208 <ng-container *ngIf="buttonTemplate">
209 <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
210 </ng-container>
211 </button>
212 <ul #list class="p-speeddial-list" role="menu">
213 <li *ngFor="let item of model; let i = index" [ngStyle]="getItemStyle(i)" class="p-speeddial-item" pTooltip [tooltipOptions]="item.tooltipOptions">
214 <a *ngIf="isClickableRouterLink(item); else elseBlock" pRipple [routerLink]="item.routerLink" [queryParams]="item.queryParams" class="p-speeddial-action" [ngClass]="{'p-disabled':item.disabled}" role="menuitem" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" (click)="onItemClick($event, item)" (keydown.enter)="onItemClick($event, item, i)"
215 [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
216 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
217 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
218 </a>
219 <ng-template #elseBlock>
220 <a [attr.href]="item.url||null" class="p-speeddial-action" role="menuitem" pRipple (click)="onItemClick($event, item)" [ngClass]="{'p-disabled':item.disabled}"
221 (keydown.enter)="onItemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
222 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
223 </a>
224 </ng-template>
225 </li>
226 </ul>
227 </div>
228 <div *ngIf="mask && visible" [ngClass]="{'p-speeddial-mask': true, 'p-speeddial-mask-visible': visible}" [class]="maskClassName" [ngStyle]="maskStyle"></div>
229 `, isInline: true, styles: [".p-speeddial{position:absolute;display:flex;z-index:1}.p-speeddial-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;transition:top 0s linear .2s;pointer-events:none}.p-speeddial-item{transform:scale(0);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms,opacity .8s;will-change:transform}.p-speeddial-action{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;overflow:hidden;cursor:pointer}.p-speeddial-circle .p-speeddial-item,.p-speeddial-semi-circle .p-speeddial-item,.p-speeddial-quarter-circle .p-speeddial-item{position:absolute}.p-speeddial-rotate{transition:transform .25s cubic-bezier(.4,0,.2,1) 0ms;will-change:transform}.p-speeddial-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .25s cubic-bezier(.25,.8,.25,1)}.p-speeddial-mask-visible{pointer-events:none;opacity:1;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.p-speeddial-opened .p-speeddial-list{pointer-events:auto}.p-speeddial-opened .p-speeddial-item{transform:scale(1);opacity:1}.p-speeddial-opened .p-speeddial-rotate{transform:rotate(45deg)}.p-speeddial-direction-up{align-items:center;flex-direction:column-reverse}.p-speeddial-direction-up .p-speeddial-list{flex-direction:column-reverse}.p-speeddial-direction-down{align-items:center;flex-direction:column}.p-speeddial-direction-down .p-speeddial-list{flex-direction:column}.p-speeddial-direction-left{justify-content:center;flex-direction:row-reverse}.p-speeddial-direction-left .p-speeddial-list{flex-direction:row-reverse}.p-speeddial-direction-right{justify-content:center;flex-direction:row}.p-speeddial-direction-right .p-speeddial-list{flex-direction:row}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
230i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDial, decorators: [{
231 type: Component,
232 args: [{ selector: 'p-speedDial', template: `
233 <div #container [attr.id]="id" [ngClass]="containerClass()" [class]="className" [ngStyle]="style">
234 <button pRipple pButton [style]="buttonStyle" [icon]="buttonIconClass" [ngClass]="buttonClass()" (click)="onButtonClick($event)">
235 <ng-container *ngIf="buttonTemplate">
236 <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
237 </ng-container>
238 </button>
239 <ul #list class="p-speeddial-list" role="menu">
240 <li *ngFor="let item of model; let i = index" [ngStyle]="getItemStyle(i)" class="p-speeddial-item" pTooltip [tooltipOptions]="item.tooltipOptions">
241 <a *ngIf="isClickableRouterLink(item); else elseBlock" pRipple [routerLink]="item.routerLink" [queryParams]="item.queryParams" class="p-speeddial-action" [ngClass]="{'p-disabled':item.disabled}" role="menuitem" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" (click)="onItemClick($event, item)" (keydown.enter)="onItemClick($event, item, i)"
242 [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
243 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
244 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
245 </a>
246 <ng-template #elseBlock>
247 <a [attr.href]="item.url||null" class="p-speeddial-action" role="menuitem" pRipple (click)="onItemClick($event, item)" [ngClass]="{'p-disabled':item.disabled}"
248 (keydown.enter)="onItemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
249 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
250 </a>
251 </ng-template>
252 </li>
253 </ul>
254 </div>
255 <div *ngIf="mask && visible" [ngClass]="{'p-speeddial-mask': true, 'p-speeddial-mask-visible': visible}" [class]="maskClassName" [ngStyle]="maskStyle"></div>
256 `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
257 'class': 'p-element'
258 }, styles: [".p-speeddial{position:absolute;display:flex;z-index:1}.p-speeddial-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;transition:top 0s linear .2s;pointer-events:none}.p-speeddial-item{transform:scale(0);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms,opacity .8s;will-change:transform}.p-speeddial-action{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;overflow:hidden;cursor:pointer}.p-speeddial-circle .p-speeddial-item,.p-speeddial-semi-circle .p-speeddial-item,.p-speeddial-quarter-circle .p-speeddial-item{position:absolute}.p-speeddial-rotate{transition:transform .25s cubic-bezier(.4,0,.2,1) 0ms;will-change:transform}.p-speeddial-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .25s cubic-bezier(.25,.8,.25,1)}.p-speeddial-mask-visible{pointer-events:none;opacity:1;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.p-speeddial-opened .p-speeddial-list{pointer-events:auto}.p-speeddial-opened .p-speeddial-item{transform:scale(1);opacity:1}.p-speeddial-opened .p-speeddial-rotate{transform:rotate(45deg)}.p-speeddial-direction-up{align-items:center;flex-direction:column-reverse}.p-speeddial-direction-up .p-speeddial-list{flex-direction:column-reverse}.p-speeddial-direction-down{align-items:center;flex-direction:column}.p-speeddial-direction-down .p-speeddial-list{flex-direction:column}.p-speeddial-direction-left{justify-content:center;flex-direction:row-reverse}.p-speeddial-direction-left .p-speeddial-list{flex-direction:row-reverse}.p-speeddial-direction-right{justify-content:center;flex-direction:row}.p-speeddial-direction-right .p-speeddial-list{flex-direction:row}\n"] }]
259 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
260 type: Input
261 }], model: [{
262 type: Input
263 }], visible: [{
264 type: Input
265 }], style: [{
266 type: Input
267 }], className: [{
268 type: Input
269 }], direction: [{
270 type: Input
271 }], transitionDelay: [{
272 type: Input
273 }], type: [{
274 type: Input
275 }], radius: [{
276 type: Input
277 }], mask: [{
278 type: Input
279 }], disabled: [{
280 type: Input
281 }], hideOnClickOutside: [{
282 type: Input
283 }], buttonStyle: [{
284 type: Input
285 }], buttonClassName: [{
286 type: Input
287 }], maskStyle: [{
288 type: Input
289 }], maskClassName: [{
290 type: Input
291 }], showIcon: [{
292 type: Input
293 }], hideIcon: [{
294 type: Input
295 }], rotateAnimation: [{
296 type: Input
297 }], onVisibleChange: [{
298 type: Output
299 }], visibleChange: [{
300 type: Output
301 }], onClick: [{
302 type: Output
303 }], onShow: [{
304 type: Output
305 }], onHide: [{
306 type: Output
307 }], container: [{
308 type: ViewChild,
309 args: ['container']
310 }], list: [{
311 type: ViewChild,
312 args: ['list']
313 }], templates: [{
314 type: ContentChildren,
315 args: [PrimeTemplate]
316 }] } });
317class SpeedDialModule {
318}
319SpeedDialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
320SpeedDialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, declarations: [SpeedDial], imports: [CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule], exports: [SpeedDial, SharedModule, ButtonModule, TooltipModule, RouterModule] });
321SpeedDialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, imports: [[CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule], SharedModule, ButtonModule, TooltipModule, RouterModule] });
322i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, decorators: [{
323 type: NgModule,
324 args: [{
325 imports: [CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule],
326 exports: [SpeedDial, SharedModule, ButtonModule, TooltipModule, RouterModule],
327 declarations: [SpeedDial]
328 }]
329 }] });
330
331/**
332 * Generated bundle index. Do not edit.
333 */
334
335export { SpeedDial, SpeedDialModule };
Note: See TracBrowser for help on using the repository browser.