source: trip-planner-front/node_modules/primeng/fesm2015/primeng-tabview.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: 23.4 KB
Line 
1import * as i0 from '@angular/core';
2import { forwardRef, Component, Inject, Input, ContentChildren, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import * as i3 from 'primeng/tooltip';
6import { TooltipModule } from 'primeng/tooltip';
7import * as i2 from 'primeng/ripple';
8import { RippleModule } from 'primeng/ripple';
9import { PrimeTemplate, SharedModule } from 'primeng/api';
10import { DomHandler } from 'primeng/dom';
11
12let idx = 0;
13class TabPanel {
14 constructor(tabView, viewContainer, cd) {
15 this.viewContainer = viewContainer;
16 this.cd = cd;
17 this.cache = true;
18 this.tooltipPosition = 'top';
19 this.tooltipPositionStyle = 'absolute';
20 this.id = `p-tabpanel-${idx++}`;
21 this.tabView = tabView;
22 }
23 ngAfterContentInit() {
24 this.templates.forEach((item) => {
25 switch (item.getType()) {
26 case 'header':
27 this.headerTemplate = item.template;
28 break;
29 case 'content':
30 this.contentTemplate = item.template;
31 break;
32 default:
33 this.contentTemplate = item.template;
34 break;
35 }
36 });
37 }
38 get selected() {
39 return this._selected;
40 }
41 set selected(val) {
42 this._selected = val;
43 if (!this.loaded) {
44 this.cd.detectChanges();
45 }
46 if (val)
47 this.loaded = true;
48 }
49 get disabled() {
50 return this._disabled;
51 }
52 ;
53 set disabled(disabled) {
54 this._disabled = disabled;
55 this.tabView.cd.markForCheck();
56 }
57 get header() {
58 return this._header;
59 }
60 set header(header) {
61 this._header = header;
62 this.tabView.cd.markForCheck();
63 }
64 get leftIcon() {
65 return this._leftIcon;
66 }
67 set leftIcon(leftIcon) {
68 this._leftIcon = leftIcon;
69 this.tabView.cd.markForCheck();
70 }
71 get rightIcon() {
72 return this._rightIcon;
73 }
74 set rightIcon(rightIcon) {
75 this._rightIcon = rightIcon;
76 this.tabView.cd.markForCheck();
77 }
78 ngOnDestroy() {
79 this.view = null;
80 }
81}
82TabPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
83TabPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TabPanel, selector: "p-tabPanel", inputs: { closable: "closable", headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: "cache", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", header: "header", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
84 <div [attr.id]="id" class="p-tabview-panel" [hidden]="!selected"
85 role="tabpanel" [attr.aria-hidden]="!selected" [attr.aria-labelledby]="id + '-label'" *ngIf="!closed">
86 <ng-content></ng-content>
87 <ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
88 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
89 </ng-container>
90 </div>
91 `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
92i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabPanel, decorators: [{
93 type: Component,
94 args: [{
95 selector: 'p-tabPanel',
96 template: `
97 <div [attr.id]="id" class="p-tabview-panel" [hidden]="!selected"
98 role="tabpanel" [attr.aria-hidden]="!selected" [attr.aria-labelledby]="id + '-label'" *ngIf="!closed">
99 <ng-content></ng-content>
100 <ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
101 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
102 </ng-container>
103 </div>
104 `,
105 host: {
106 'class': 'p-element'
107 }
108 }]
109 }], ctorParameters: function () {
110 return [{ type: undefined, decorators: [{
111 type: Inject,
112 args: [forwardRef(() => TabView)]
113 }] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }];
114 }, propDecorators: { closable: [{
115 type: Input
116 }], headerStyle: [{
117 type: Input
118 }], headerStyleClass: [{
119 type: Input
120 }], cache: [{
121 type: Input
122 }], tooltip: [{
123 type: Input
124 }], tooltipPosition: [{
125 type: Input
126 }], tooltipPositionStyle: [{
127 type: Input
128 }], tooltipStyleClass: [{
129 type: Input
130 }], templates: [{
131 type: ContentChildren,
132 args: [PrimeTemplate]
133 }], selected: [{
134 type: Input
135 }], disabled: [{
136 type: Input
137 }], header: [{
138 type: Input
139 }], leftIcon: [{
140 type: Input
141 }], rightIcon: [{
142 type: Input
143 }] } });
144class TabView {
145 constructor(el, cd) {
146 this.el = el;
147 this.cd = cd;
148 this.orientation = 'top';
149 this.onChange = new EventEmitter();
150 this.onClose = new EventEmitter();
151 this.activeIndexChange = new EventEmitter();
152 this.backwardIsDisabled = true;
153 this.forwardIsDisabled = false;
154 }
155 ngAfterContentInit() {
156 this.initTabs();
157 this.tabPanels.changes.subscribe(_ => {
158 this.initTabs();
159 });
160 }
161 ngAfterViewChecked() {
162 if (this.tabChanged) {
163 this.updateInkBar();
164 this.tabChanged = false;
165 }
166 }
167 initTabs() {
168 this.tabs = this.tabPanels.toArray();
169 let selectedTab = this.findSelectedTab();
170 if (!selectedTab && this.tabs.length) {
171 if (this.activeIndex != null && this.tabs.length > this.activeIndex)
172 this.tabs[this.activeIndex].selected = true;
173 else
174 this.tabs[0].selected = true;
175 this.tabChanged = true;
176 }
177 this.cd.markForCheck();
178 }
179 open(event, tab) {
180 if (tab.disabled) {
181 if (event) {
182 event.preventDefault();
183 }
184 return;
185 }
186 if (!tab.selected) {
187 let selectedTab = this.findSelectedTab();
188 if (selectedTab) {
189 selectedTab.selected = false;
190 }
191 this.tabChanged = true;
192 tab.selected = true;
193 let selectedTabIndex = this.findTabIndex(tab);
194 this.preventActiveIndexPropagation = true;
195 this.activeIndexChange.emit(selectedTabIndex);
196 this.onChange.emit({ originalEvent: event, index: selectedTabIndex });
197 this.updateScrollBar(selectedTabIndex);
198 }
199 if (event) {
200 event.preventDefault();
201 }
202 }
203 close(event, tab) {
204 if (this.controlClose) {
205 this.onClose.emit({
206 originalEvent: event,
207 index: this.findTabIndex(tab),
208 close: () => {
209 this.closeTab(tab);
210 }
211 });
212 }
213 else {
214 this.closeTab(tab);
215 this.onClose.emit({
216 originalEvent: event,
217 index: this.findTabIndex(tab)
218 });
219 }
220 event.stopPropagation();
221 }
222 closeTab(tab) {
223 if (tab.disabled) {
224 return;
225 }
226 if (tab.selected) {
227 this.tabChanged = true;
228 tab.selected = false;
229 for (let i = 0; i < this.tabs.length; i++) {
230 let tabPanel = this.tabs[i];
231 if (!tabPanel.closed && !tab.disabled) {
232 tabPanel.selected = true;
233 break;
234 }
235 }
236 }
237 tab.closed = true;
238 }
239 findSelectedTab() {
240 for (let i = 0; i < this.tabs.length; i++) {
241 if (this.tabs[i].selected) {
242 return this.tabs[i];
243 }
244 }
245 return null;
246 }
247 findTabIndex(tab) {
248 let index = -1;
249 for (let i = 0; i < this.tabs.length; i++) {
250 if (this.tabs[i] == tab) {
251 index = i;
252 break;
253 }
254 }
255 return index;
256 }
257 getBlockableElement() {
258 return this.el.nativeElement.children[0];
259 }
260 get activeIndex() {
261 return this._activeIndex;
262 }
263 set activeIndex(val) {
264 this._activeIndex = val;
265 if (this.preventActiveIndexPropagation) {
266 this.preventActiveIndexPropagation = false;
267 return;
268 }
269 if (this.tabs && this.tabs.length && this._activeIndex != null && this.tabs.length > this._activeIndex) {
270 this.findSelectedTab().selected = false;
271 this.tabs[this._activeIndex].selected = true;
272 this.tabChanged = true;
273 this.updateScrollBar(val);
274 }
275 }
276 updateInkBar() {
277 let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
278 this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';
279 this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
280 }
281 updateScrollBar(index) {
282 let tabHeader = this.navbar.nativeElement.children[index];
283 tabHeader.scrollIntoView({ block: 'nearest' });
284 }
285 updateButtonState() {
286 const content = this.content.nativeElement;
287 const { scrollLeft, scrollWidth } = content;
288 const width = DomHandler.getWidth(content);
289 this.backwardIsDisabled = scrollLeft === 0;
290 this.forwardIsDisabled = scrollLeft === scrollWidth - width;
291 }
292 onScroll(event) {
293 this.scrollable && this.updateButtonState();
294 event.preventDefault();
295 }
296 getVisibleButtonWidths() {
297 var _a, _b;
298 return [(_a = this.prevBtn) === null || _a === void 0 ? void 0 : _a.nativeElement, (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.nativeElement].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
299 }
300 navBackward() {
301 const content = this.content.nativeElement;
302 const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
303 const pos = content.scrollLeft - width;
304 content.scrollLeft = pos <= 0 ? 0 : pos;
305 }
306 navForward() {
307 const content = this.content.nativeElement;
308 const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
309 const pos = content.scrollLeft + width;
310 const lastPos = content.scrollWidth - width;
311 content.scrollLeft = pos >= lastPos ? lastPos : pos;
312 }
313}
314TabView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabView, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
315TabView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TabView, selector: "p-tabView", inputs: { orientation: "orientation", style: "style", styleClass: "styleClass", controlClose: "controlClose", scrollable: "scrollable", activeIndex: "activeIndex" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }], ngImport: i0, template: `
316 <div [ngClass]="{'p-tabview p-component': true, 'p-tabview-scrollable': scrollable}" [ngStyle]="style" [class]="styleClass">
317 <div class="p-tabview-nav-container">
318 <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" type="button" pRipple>
319 <span class="pi pi-chevron-left"></span>
320 </button>
321 <div #content class="p-tabview-nav-content" (scroll)="onScroll($event)">
322 <ul #navbar class="p-tabview-nav" role="tablist">
323 <ng-template ngFor let-tab [ngForOf]="tabs">
324 <li role="presentation" [ngClass]="{'p-highlight': tab.selected, 'p-disabled': tab.disabled}" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
325 <a role="tab" class="p-tabview-nav-link" [attr.id]="tab.id + '-label'" [attr.aria-selected]="tab.selected" [attr.aria-controls]="tab.id" [pTooltip]="tab.tooltip" [tooltipPosition]="tab.tooltipPosition"
326 [attr.aria-selected]="tab.selected" [positionStyle]="tab.tooltipPositionStyle" [tooltipStyleClass]="tab.tooltipStyleClass"
327 (click)="open($event,tab)" (keydown.enter)="open($event,tab)" pRipple [attr.tabindex]="tab.disabled ? null : '0'">
328 <ng-container *ngIf="!tab.headerTemplate">
329 <span class="p-tabview-left-icon" [ngClass]="tab.leftIcon" *ngIf="tab.leftIcon"></span>
330 <span class="p-tabview-title">{{tab.header}}</span>
331 <span class="p-tabview-right-icon" [ngClass]="tab.rightIcon" *ngIf="tab.rightIcon"></span>
332 </ng-container>
333 <ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
334 <span *ngIf="tab.closable" class="p-tabview-close pi pi-times" (click)="close($event,tab)"></span>
335 </a>
336 </li>
337 </ng-template>
338 <li #inkbar class="p-tabview-ink-bar"></li>
339 </ul>
340 </div>
341 <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
342 <span class="pi pi-chevron-right"></span>
343 </button>
344 </div>
345 <div class="p-tabview-panels">
346 <ng-content></ng-content>
347 </div>
348 </div>
349 `, isInline: true, styles: [".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}.p-tabview-close{z-index:1}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.Ripple, selector: "[pRipple]" }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
350i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabView, decorators: [{
351 type: Component,
352 args: [{ selector: 'p-tabView', template: `
353 <div [ngClass]="{'p-tabview p-component': true, 'p-tabview-scrollable': scrollable}" [ngStyle]="style" [class]="styleClass">
354 <div class="p-tabview-nav-container">
355 <button *ngIf="scrollable && !backwardIsDisabled" #prevBtn class="p-tabview-nav-prev p-tabview-nav-btn p-link" (click)="navBackward()" type="button" pRipple>
356 <span class="pi pi-chevron-left"></span>
357 </button>
358 <div #content class="p-tabview-nav-content" (scroll)="onScroll($event)">
359 <ul #navbar class="p-tabview-nav" role="tablist">
360 <ng-template ngFor let-tab [ngForOf]="tabs">
361 <li role="presentation" [ngClass]="{'p-highlight': tab.selected, 'p-disabled': tab.disabled}" [ngStyle]="tab.headerStyle" [class]="tab.headerStyleClass" *ngIf="!tab.closed">
362 <a role="tab" class="p-tabview-nav-link" [attr.id]="tab.id + '-label'" [attr.aria-selected]="tab.selected" [attr.aria-controls]="tab.id" [pTooltip]="tab.tooltip" [tooltipPosition]="tab.tooltipPosition"
363 [attr.aria-selected]="tab.selected" [positionStyle]="tab.tooltipPositionStyle" [tooltipStyleClass]="tab.tooltipStyleClass"
364 (click)="open($event,tab)" (keydown.enter)="open($event,tab)" pRipple [attr.tabindex]="tab.disabled ? null : '0'">
365 <ng-container *ngIf="!tab.headerTemplate">
366 <span class="p-tabview-left-icon" [ngClass]="tab.leftIcon" *ngIf="tab.leftIcon"></span>
367 <span class="p-tabview-title">{{tab.header}}</span>
368 <span class="p-tabview-right-icon" [ngClass]="tab.rightIcon" *ngIf="tab.rightIcon"></span>
369 </ng-container>
370 <ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
371 <span *ngIf="tab.closable" class="p-tabview-close pi pi-times" (click)="close($event,tab)"></span>
372 </a>
373 </li>
374 </ng-template>
375 <li #inkbar class="p-tabview-ink-bar"></li>
376 </ul>
377 </div>
378 <button *ngIf="scrollable && !forwardIsDisabled" #nextBtn class="p-tabview-nav-next p-tabview-nav-btn p-link" (click)="navForward()" type="button" pRipple>
379 <span class="pi pi-chevron-right"></span>
380 </button>
381 </div>
382 <div class="p-tabview-panels">
383 <ng-content></ng-content>
384 </div>
385 </div>
386 `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
387 'class': 'p-element'
388 }, styles: [".p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-scroll-chaining:contain auto;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}.p-tabview-close{z-index:1}\n"] }]
389 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { orientation: [{
390 type: Input
391 }], style: [{
392 type: Input
393 }], styleClass: [{
394 type: Input
395 }], controlClose: [{
396 type: Input
397 }], scrollable: [{
398 type: Input
399 }], content: [{
400 type: ViewChild,
401 args: ['content']
402 }], navbar: [{
403 type: ViewChild,
404 args: ['navbar']
405 }], prevBtn: [{
406 type: ViewChild,
407 args: ['prevBtn']
408 }], nextBtn: [{
409 type: ViewChild,
410 args: ['nextBtn']
411 }], inkbar: [{
412 type: ViewChild,
413 args: ['inkbar']
414 }], tabPanels: [{
415 type: ContentChildren,
416 args: [TabPanel]
417 }], onChange: [{
418 type: Output
419 }], onClose: [{
420 type: Output
421 }], activeIndexChange: [{
422 type: Output
423 }], activeIndex: [{
424 type: Input
425 }] } });
426class TabViewModule {
427}
428TabViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
429TabViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule], exports: [TabView, TabPanel, SharedModule] });
430TabViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, imports: [[CommonModule, SharedModule, TooltipModule, RippleModule], SharedModule] });
431i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TabViewModule, decorators: [{
432 type: NgModule,
433 args: [{
434 imports: [CommonModule, SharedModule, TooltipModule, RippleModule],
435 exports: [TabView, TabPanel, SharedModule],
436 declarations: [TabView, TabPanel]
437 }]
438 }] });
439
440/**
441 * Generated bundle index. Do not edit.
442 */
443
444export { TabPanel, TabView, TabViewModule };
Note: See TracBrowser for help on using the repository browser.