source: trip-planner-front/node_modules/primeng/fesm2020/primeng-speeddial.mjs@ 6fe77af

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

adding photos

  • Property mode set to 100644
File size: 21.8 KB
RevLine 
[59329aa]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 {
176 transitionDelay: `${transitionDelay}ms`,
177 ...pointStyle
178 };
179 }
180 isClickableRouterLink(item) {
181 return item.routerLink && !this.disabled && !item.disabled;
182 }
183 isOutsideClicked(event) {
184 return this.container && !(this.container.nativeElement.isSameNode(event.target) || this.container.nativeElement.contains(event.target) || this.isItemClicked);
185 }
186 bindDocumentClickListener() {
187 if (!this.documentClickListener && this.hideOnClickOutside) {
188 this.documentClickListener = (event) => {
189 if (this.visible && this.isOutsideClicked(event)) {
190 this.hide();
191 }
192 this.isItemClicked = false;
193 };
194 document.addEventListener('click', this.documentClickListener);
195 }
196 }
197 unbindDocumentClickListener() {
198 if (this.documentClickListener) {
199 document.removeEventListener('click', this.documentClickListener);
200 this.documentClickListener = null;
201 }
202 }
203 ngOnDestroy() {
204 this.unbindDocumentClickListener();
205 }
206}
207SpeedDial.ɵ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 });
208SpeedDial.ɵ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: `
209 <div #container [attr.id]="id" [ngClass]="containerClass()" [class]="className" [ngStyle]="style">
210 <button pRipple pButton [style]="buttonStyle" [icon]="buttonIconClass" [ngClass]="buttonClass()" (click)="onButtonClick($event)">
211 <ng-container *ngIf="buttonTemplate">
212 <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
213 </ng-container>
214 </button>
215 <ul #list class="p-speeddial-list" role="menu">
216 <li *ngFor="let item of model; let i = index" [ngStyle]="getItemStyle(i)" class="p-speeddial-item" pTooltip [tooltipOptions]="item.tooltipOptions">
217 <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)"
218 [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
219 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
220 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
221 </a>
222 <ng-template #elseBlock>
223 <a [attr.href]="item.url||null" class="p-speeddial-action" role="menuitem" pRipple (click)="onItemClick($event, item)" [ngClass]="{'p-disabled':item.disabled}"
224 (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')">
225 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
226 </a>
227 </ng-template>
228 </li>
229 </ul>
230 </div>
231 <div *ngIf="mask && visible" [ngClass]="{'p-speeddial-mask': true, 'p-speeddial-mask-visible': visible}" [class]="maskClassName" [ngStyle]="maskStyle"></div>
232 `, 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 });
233i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDial, decorators: [{
234 type: Component,
235 args: [{ selector: 'p-speedDial', template: `
236 <div #container [attr.id]="id" [ngClass]="containerClass()" [class]="className" [ngStyle]="style">
237 <button pRipple pButton [style]="buttonStyle" [icon]="buttonIconClass" [ngClass]="buttonClass()" (click)="onButtonClick($event)">
238 <ng-container *ngIf="buttonTemplate">
239 <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
240 </ng-container>
241 </button>
242 <ul #list class="p-speeddial-list" role="menu">
243 <li *ngFor="let item of model; let i = index" [ngStyle]="getItemStyle(i)" class="p-speeddial-item" pTooltip [tooltipOptions]="item.tooltipOptions">
244 <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)"
245 [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
246 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
247 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
248 </a>
249 <ng-template #elseBlock>
250 <a [attr.href]="item.url||null" class="p-speeddial-action" role="menuitem" pRipple (click)="onItemClick($event, item)" [ngClass]="{'p-disabled':item.disabled}"
251 (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')">
252 <span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
253 </a>
254 </ng-template>
255 </li>
256 </ul>
257 </div>
258 <div *ngIf="mask && visible" [ngClass]="{'p-speeddial-mask': true, 'p-speeddial-mask-visible': visible}" [class]="maskClassName" [ngStyle]="maskStyle"></div>
259 `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
260 'class': 'p-element'
261 }, 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"] }]
262 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
263 type: Input
264 }], model: [{
265 type: Input
266 }], visible: [{
267 type: Input
268 }], style: [{
269 type: Input
270 }], className: [{
271 type: Input
272 }], direction: [{
273 type: Input
274 }], transitionDelay: [{
275 type: Input
276 }], type: [{
277 type: Input
278 }], radius: [{
279 type: Input
280 }], mask: [{
281 type: Input
282 }], disabled: [{
283 type: Input
284 }], hideOnClickOutside: [{
285 type: Input
286 }], buttonStyle: [{
287 type: Input
288 }], buttonClassName: [{
289 type: Input
290 }], maskStyle: [{
291 type: Input
292 }], maskClassName: [{
293 type: Input
294 }], showIcon: [{
295 type: Input
296 }], hideIcon: [{
297 type: Input
298 }], rotateAnimation: [{
299 type: Input
300 }], onVisibleChange: [{
301 type: Output
302 }], visibleChange: [{
303 type: Output
304 }], onClick: [{
305 type: Output
306 }], onShow: [{
307 type: Output
308 }], onHide: [{
309 type: Output
310 }], container: [{
311 type: ViewChild,
312 args: ['container']
313 }], list: [{
314 type: ViewChild,
315 args: ['list']
316 }], templates: [{
317 type: ContentChildren,
318 args: [PrimeTemplate]
319 }] } });
320class SpeedDialModule {
321}
322SpeedDialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
323SpeedDialModule.ɵ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] });
324SpeedDialModule.ɵ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] });
325i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SpeedDialModule, decorators: [{
326 type: NgModule,
327 args: [{
328 imports: [CommonModule, ButtonModule, RippleModule, TooltipModule, RouterModule],
329 exports: [SpeedDial, SharedModule, ButtonModule, TooltipModule, RouterModule],
330 declarations: [SpeedDial]
331 }]
332 }] });
333
334/**
335 * Generated bundle index. Do not edit.
336 */
337
338export { SpeedDial, SpeedDialModule };
Note: See TracBrowser for help on using the repository browser.