source: trip-planner-front/node_modules/primeng/fesm2020/primeng-megamenu.mjs@ 8d391a1

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

adding photos

  • Property mode set to 100644
File size: 25.7 KB
Line 
1import * as i0 from '@angular/core';
2import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { PrimeTemplate } from 'primeng/api';
6import * as i4 from '@angular/router';
7import { RouterModule } from '@angular/router';
8import * as i3 from 'primeng/ripple';
9import { RippleModule } from 'primeng/ripple';
10import * as i2 from 'primeng/tooltip';
11import { TooltipModule } from 'primeng/tooltip';
12
13class MegaMenu {
14 constructor(el, renderer, cd) {
15 this.el = el;
16 this.renderer = renderer;
17 this.cd = cd;
18 this.orientation = 'horizontal';
19 this.autoZIndex = true;
20 this.baseZIndex = 0;
21 }
22 ngAfterContentInit() {
23 this.templates.forEach((item) => {
24 switch (item.getType()) {
25 case 'start':
26 this.startTemplate = item.template;
27 break;
28 case 'end':
29 this.endTemplate = item.template;
30 break;
31 }
32 });
33 }
34 onCategoryMouseEnter(event, menuitem) {
35 if (menuitem.disabled) {
36 event.preventDefault();
37 return;
38 }
39 if (this.activeItem) {
40 this.activeItem = menuitem;
41 }
42 }
43 onCategoryClick(event, item) {
44 if (item.disabled) {
45 event.preventDefault();
46 return;
47 }
48 if (!item.url) {
49 event.preventDefault();
50 }
51 if (item.command) {
52 item.command({
53 originalEvent: event,
54 item: item
55 });
56 }
57 if (item.items) {
58 if (this.activeItem && this.activeItem === item) {
59 this.activeItem = null;
60 this.unbindDocumentClickListener();
61 }
62 else {
63 this.activeItem = item;
64 this.bindDocumentClickListener();
65 }
66 }
67 }
68 itemClick(event, item) {
69 if (item.disabled) {
70 event.preventDefault();
71 return;
72 }
73 if (!item.url) {
74 event.preventDefault();
75 }
76 if (item.command) {
77 item.command({
78 originalEvent: event,
79 item: item
80 });
81 }
82 this.activeItem = null;
83 }
84 getColumnClass(menuitem) {
85 let length = menuitem.items ? menuitem.items.length : 0;
86 let columnClass;
87 switch (length) {
88 case 2:
89 columnClass = 'p-megamenu-col-6';
90 break;
91 case 3:
92 columnClass = 'p-megamenu-col-4';
93 break;
94 case 4:
95 columnClass = 'p-megamenu-col-3';
96 break;
97 case 6:
98 columnClass = 'p-megamenu-col-2';
99 break;
100 default:
101 columnClass = 'p-megamenu-col-12';
102 break;
103 }
104 return columnClass;
105 }
106 bindDocumentClickListener() {
107 if (!this.documentClickListener) {
108 this.documentClickListener = (event) => {
109 if (this.el && !this.el.nativeElement.contains(event.target)) {
110 this.activeItem = null;
111 this.unbindDocumentClickListener();
112 this.cd.markForCheck();
113 }
114 };
115 document.addEventListener('click', this.documentClickListener);
116 }
117 }
118 unbindDocumentClickListener() {
119 if (this.documentClickListener) {
120 document.removeEventListener('click', this.documentClickListener);
121 this.documentClickListener = null;
122 }
123 }
124}
125MegaMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenu, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
126MegaMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: MegaMenu, selector: "p-megaMenu", inputs: { model: "model", style: "style", styleClass: "styleClass", orientation: "orientation", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
127 <div [class]="styleClass" [ngStyle]="style"
128 [ngClass]="{'p-megamenu p-component':true,'p-megamenu-horizontal': orientation == 'horizontal','p-megamenu-vertical': orientation == 'vertical'}">
129 <div class="p-megamenu-start" *ngIf="startTemplate">
130 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
131 </div>
132 <ul class="p-megamenu-root-list" role="menubar">
133 <ng-template ngFor let-category [ngForOf]="model">
134 <li *ngIf="category.separator" class="p-menu-separator" [ngClass]="{'p-hidden': category.visible === false}">
135 <li *ngIf="!category.separator" [ngClass]="{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}" pTooltip [tooltipOptions]="category.tooltipOptions"
136 (mouseenter)="onCategoryMouseEnter($event, category)">
137 <a *ngIf="!category.routerLink" [href]="category.url||'#'" [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id" (click)="onCategoryClick($event, category)" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
138 [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass" pRipple>
139 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
140 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlLabel">{{category.label}}</span>
141 <ng-template #categoryHtmlLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
142 <span *ngIf="category.items" class="p-submenu-icon pi" [ngClass]="{'pi-angle-down':orientation=='horizontal','pi-angle-right':orientation=='vertical'}"></span>
143 </a>
144 <a *ngIf="category.routerLink" [routerLink]="category.routerLink" [queryParams]="category.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="category.routerLinkActiveOptions||{exact:false}" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
145 [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id"
146 (click)="onCategoryClick($event, category)" [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass"
147 [fragment]="category.fragment" [queryParamsHandling]="category.queryParamsHandling" [preserveFragment]="category.preserveFragment" [skipLocationChange]="category.skipLocationChange" [replaceUrl]="category.replaceUrl" [state]="category.state" pRipple>
148 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
149 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlRouteLabel">{{category.label}}</span>
150 <ng-template #categoryHtmlRouteLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
151 </a>
152 <div class="p-megamenu-panel" *ngIf="category.items">
153 <div class="p-megamenu-grid">
154 <ng-template ngFor let-column [ngForOf]="category.items">
155 <div [class]="getColumnClass(category)">
156 <ng-template ngFor let-submenu [ngForOf]="column">
157 <ul class="p-megamenu-submenu" role="menu">
158 <li class="p-megamenu-submenu-header">
159 <span *ngIf="submenu.escape !== false; else submenuHtmlLabel">{{submenu.label}}</span>
160 <ng-template #submenuHtmlLabel><span [innerHTML]="submenu.label"></span></ng-template>
161 </li>
162 <ng-template ngFor let-item [ngForOf]="submenu.items">
163 <li *ngIf="item.separator" class="p-menu-separator" [ngClass]="{'p-hidden': item.visible === false}" role="separator">
164 <li *ngIf="!item.separator" class="p-menuitem" [ngClass]="{'p-hidden': item.visible === false}" role="none" pTooltip [tooltipOptions]="item.tooltipOptions">
165 <a *ngIf="!item.routerLink" role="menuitem" [href]="item.url||'#'" class="p-menuitem-link" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
166 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)" pRipple>
167 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
168 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
169 <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
170 </a>
171 <a *ngIf="item.routerLink" role="menuitem" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
172 [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
173 [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
174 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)"
175 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
176 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
177 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
178 <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
179 </a>
180 </li>
181 </ng-template>
182 </ul>
183 </ng-template>
184 </div>
185 </ng-template>
186 </div>
187 </div>
188 </li>
189 </ng-template>
190 <div class="p-megamenu-end" *ngIf="endTemplate; else legacy">
191 <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
192 </div>
193 <ng-template #legacy>
194 <div class="p-megamenu-end">
195 <ng-content></ng-content>
196 </div>
197 </ng-template>
198 </ul>
199 </div>
200 `, isInline: true, styles: [".p-megamenu-root-list{margin:0;padding:0;list-style:none}.p-megamenu-root-list>.p-menuitem{position:relative}.p-megamenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-megamenu .p-menuitem-text{line-height:1}.p-megamenu-panel{display:none;position:absolute;width:auto;z-index:1}.p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{display:block}.p-megamenu-submenu{margin:0;padding:0;list-style:none}.p-megamenu-horizontal .p-megamenu-root-list{display:flex;align-items:center;flex-wrap:wrap}.p-megamenu-vertical .p-megamenu-root-list{flex-direction:column}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{left:100%;top:0}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-submenu-icon{margin-left:auto}.p-megamenu-grid{display:flex}.p-megamenu-col-2,.p-megamenu-col-3,.p-megamenu-col-4,.p-megamenu-col-6,.p-megamenu-col-12{flex:0 0 auto;padding:.5rem}.p-megamenu-col-2{width:16.6667%}.p-megamenu-col-3{width:25%}.p-megamenu-col-4{width:33.3333%}.p-megamenu-col-6{width:50%}.p-megamenu-col-12{width:100%}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
201i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenu, decorators: [{
202 type: Component,
203 args: [{ selector: 'p-megaMenu', template: `
204 <div [class]="styleClass" [ngStyle]="style"
205 [ngClass]="{'p-megamenu p-component':true,'p-megamenu-horizontal': orientation == 'horizontal','p-megamenu-vertical': orientation == 'vertical'}">
206 <div class="p-megamenu-start" *ngIf="startTemplate">
207 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
208 </div>
209 <ul class="p-megamenu-root-list" role="menubar">
210 <ng-template ngFor let-category [ngForOf]="model">
211 <li *ngIf="category.separator" class="p-menu-separator" [ngClass]="{'p-hidden': category.visible === false}">
212 <li *ngIf="!category.separator" [ngClass]="{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}" pTooltip [tooltipOptions]="category.tooltipOptions"
213 (mouseenter)="onCategoryMouseEnter($event, category)">
214 <a *ngIf="!category.routerLink" [href]="category.url||'#'" [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id" (click)="onCategoryClick($event, category)" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
215 [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass" pRipple>
216 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
217 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlLabel">{{category.label}}</span>
218 <ng-template #categoryHtmlLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
219 <span *ngIf="category.items" class="p-submenu-icon pi" [ngClass]="{'pi-angle-down':orientation=='horizontal','pi-angle-right':orientation=='vertical'}"></span>
220 </a>
221 <a *ngIf="category.routerLink" [routerLink]="category.routerLink" [queryParams]="category.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="category.routerLinkActiveOptions||{exact:false}" [attr.tabindex]="category.tabindex ? category.tabindex : '0'"
222 [attr.target]="category.target" [attr.title]="category.title" [attr.id]="category.id"
223 (click)="onCategoryClick($event, category)" [ngClass]="{'p-menuitem-link':true,'p-disabled':category.disabled}" [ngStyle]="category.style" [class]="category.styleClass"
224 [fragment]="category.fragment" [queryParamsHandling]="category.queryParamsHandling" [preserveFragment]="category.preserveFragment" [skipLocationChange]="category.skipLocationChange" [replaceUrl]="category.replaceUrl" [state]="category.state" pRipple>
225 <span class="p-menuitem-icon" *ngIf="category.icon" [ngClass]="category.icon"></span>
226 <span class="p-menuitem-text" *ngIf="category.escape !== false; else categoryHtmlRouteLabel">{{category.label}}</span>
227 <ng-template #categoryHtmlRouteLabel><span class="p-menuitem-text" [innerHTML]="category.label"></span></ng-template>
228 </a>
229 <div class="p-megamenu-panel" *ngIf="category.items">
230 <div class="p-megamenu-grid">
231 <ng-template ngFor let-column [ngForOf]="category.items">
232 <div [class]="getColumnClass(category)">
233 <ng-template ngFor let-submenu [ngForOf]="column">
234 <ul class="p-megamenu-submenu" role="menu">
235 <li class="p-megamenu-submenu-header">
236 <span *ngIf="submenu.escape !== false; else submenuHtmlLabel">{{submenu.label}}</span>
237 <ng-template #submenuHtmlLabel><span [innerHTML]="submenu.label"></span></ng-template>
238 </li>
239 <ng-template ngFor let-item [ngForOf]="submenu.items">
240 <li *ngIf="item.separator" class="p-menu-separator" [ngClass]="{'p-hidden': item.visible === false}" role="separator">
241 <li *ngIf="!item.separator" class="p-menuitem" [ngClass]="{'p-hidden': item.visible === false}" role="none" pTooltip [tooltipOptions]="item.tooltipOptions">
242 <a *ngIf="!item.routerLink" role="menuitem" [href]="item.url||'#'" class="p-menuitem-link" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
243 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)" pRipple>
244 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
245 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
246 <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
247 </a>
248 <a *ngIf="item.routerLink" role="menuitem" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
249 [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
250 [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
251 [ngClass]="{'p-disabled':item.disabled}" (click)="itemClick($event, item)"
252 [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
253 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
254 <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
255 <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
256 </a>
257 </li>
258 </ng-template>
259 </ul>
260 </ng-template>
261 </div>
262 </ng-template>
263 </div>
264 </div>
265 </li>
266 </ng-template>
267 <div class="p-megamenu-end" *ngIf="endTemplate; else legacy">
268 <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
269 </div>
270 <ng-template #legacy>
271 <div class="p-megamenu-end">
272 <ng-content></ng-content>
273 </div>
274 </ng-template>
275 </ul>
276 </div>
277 `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
278 'class': 'p-element'
279 }, styles: [".p-megamenu-root-list{margin:0;padding:0;list-style:none}.p-megamenu-root-list>.p-menuitem{position:relative}.p-megamenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-megamenu .p-menuitem-text{line-height:1}.p-megamenu-panel{display:none;position:absolute;width:auto;z-index:1}.p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{display:block}.p-megamenu-submenu{margin:0;padding:0;list-style:none}.p-megamenu-horizontal .p-megamenu-root-list{display:flex;align-items:center;flex-wrap:wrap}.p-megamenu-vertical .p-megamenu-root-list{flex-direction:column}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem-active>.p-megamenu-panel{left:100%;top:0}.p-megamenu-vertical .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-submenu-icon{margin-left:auto}.p-megamenu-grid{display:flex}.p-megamenu-col-2,.p-megamenu-col-3,.p-megamenu-col-4,.p-megamenu-col-6,.p-megamenu-col-12{flex:0 0 auto;padding:.5rem}.p-megamenu-col-2{width:16.6667%}.p-megamenu-col-3{width:25%}.p-megamenu-col-4{width:33.3333%}.p-megamenu-col-6{width:50%}.p-megamenu-col-12{width:100%}\n"] }]
280 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
281 type: Input
282 }], style: [{
283 type: Input
284 }], styleClass: [{
285 type: Input
286 }], orientation: [{
287 type: Input
288 }], autoZIndex: [{
289 type: Input
290 }], baseZIndex: [{
291 type: Input
292 }], templates: [{
293 type: ContentChildren,
294 args: [PrimeTemplate]
295 }] } });
296class MegaMenuModule {
297}
298MegaMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
299MegaMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenuModule, declarations: [MegaMenu], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [MegaMenu, RouterModule, TooltipModule] });
300MegaMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenuModule, imports: [[CommonModule, RouterModule, RippleModule, TooltipModule], RouterModule, TooltipModule] });
301i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MegaMenuModule, decorators: [{
302 type: NgModule,
303 args: [{
304 imports: [CommonModule, RouterModule, RippleModule, TooltipModule],
305 exports: [MegaMenu, RouterModule, TooltipModule],
306 declarations: [MegaMenu]
307 }]
308 }] });
309
310/**
311 * Generated bundle index. Do not edit.
312 */
313
314export { MegaMenu, MegaMenuModule };
Note: See TracBrowser for help on using the repository browser.