1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/tooltip'), require('primeng/api')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/tabview', ['exports', '@angular/core', '@angular/common', 'primeng/tooltip', 'primeng/api'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.tabview = {}), global.ng.core, global.ng.common, global.primeng.tooltip, global.primeng.api));
|
5 | }(this, (function (exports, core, common, tooltip, api) { 'use strict';
|
6 |
|
7 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
8 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
9 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
10 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
11 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
12 | };
|
13 | var idx = 0;
|
14 | var TabViewNav = (function () {
|
15 | function TabViewNav() {
|
16 | this.orientation = 'top';
|
17 | this.onTabClick = new core.EventEmitter();
|
18 | this.onTabCloseClick = new core.EventEmitter();
|
19 | }
|
20 | TabViewNav.prototype.getDefaultHeaderClass = function (tab) {
|
21 | var styleClass = 'ui-state-default ui-corner-' + this.orientation;
|
22 | if (tab.headerStyleClass) {
|
23 | styleClass = styleClass + " " + tab.headerStyleClass;
|
24 | }
|
25 | return styleClass;
|
26 | };
|
27 | TabViewNav.prototype.clickTab = function (event, tab) {
|
28 | this.onTabClick.emit({
|
29 | originalEvent: event,
|
30 | tab: tab
|
31 | });
|
32 | };
|
33 | TabViewNav.prototype.clickClose = function (event, tab) {
|
34 | this.onTabCloseClick.emit({
|
35 | originalEvent: event,
|
36 | tab: tab
|
37 | });
|
38 | };
|
39 | __decorate([
|
40 | core.Input()
|
41 | ], TabViewNav.prototype, "tabs", void 0);
|
42 | __decorate([
|
43 | core.Input()
|
44 | ], TabViewNav.prototype, "orientation", void 0);
|
45 | __decorate([
|
46 | core.Output()
|
47 | ], TabViewNav.prototype, "onTabClick", void 0);
|
48 | __decorate([
|
49 | core.Output()
|
50 | ], TabViewNav.prototype, "onTabCloseClick", void 0);
|
51 | TabViewNav = __decorate([
|
52 | core.Component({
|
53 | selector: '[p-tabViewNav]',
|
54 | host: {
|
55 | '[class.ui-tabview-nav]': 'true',
|
56 | '[class.ui-helper-reset]': 'true',
|
57 | '[class.ui-helper-clearfix]': 'true',
|
58 | '[class.ui-widget-header]': 'true',
|
59 | '[class.ui-corner-all]': 'true'
|
60 | },
|
61 | template: "\n <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n <li [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\" tabindex=\"0\" (keydown.enter)=\"clickTab($event,tab)\">\n <a [attr.id]=\"tab.id + '-label'\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\" [pTooltip]=\"tab.tooltip\" [tooltipPosition]=\"tab.tooltipPosition\"\n [attr.aria-selected]=\"tab.selected\" [positionStyle]=\"tab.tooltipPositionStyle\" [tooltipStyleClass]=\"tab.tooltipStyleClass\">\n <ng-container *ngIf=\"!tab.headerTemplate\" >\n <span class=\"ui-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n <span class=\"ui-tabview-title\">{{tab.header}}</span>\n <span class=\"ui-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n </ng-container>\n <ng-container *ngIf=\"tab.headerTemplate\">\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-container>\n </a>\n <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n </li>\n </ng-template>\n "
|
62 | })
|
63 | ], TabViewNav);
|
64 | return TabViewNav;
|
65 | }());
|
66 | var TabPanel = (function () {
|
67 | function TabPanel(viewContainer, cd) {
|
68 | this.viewContainer = viewContainer;
|
69 | this.cd = cd;
|
70 | this.cache = true;
|
71 | this.tooltipPosition = 'top';
|
72 | this.tooltipPositionStyle = 'absolute';
|
73 | this.id = "ui-tabpanel-" + idx++;
|
74 | }
|
75 | TabPanel.prototype.ngAfterContentInit = function () {
|
76 | var _this = this;
|
77 | this.templates.forEach(function (item) {
|
78 | switch (item.getType()) {
|
79 | case 'header':
|
80 | _this.headerTemplate = item.template;
|
81 | break;
|
82 | case 'content':
|
83 | _this.contentTemplate = item.template;
|
84 | break;
|
85 | default:
|
86 | _this.contentTemplate = item.template;
|
87 | break;
|
88 | }
|
89 | });
|
90 | };
|
91 | Object.defineProperty(TabPanel.prototype, "selected", {
|
92 | get: function () {
|
93 | return this._selected;
|
94 | },
|
95 | set: function (val) {
|
96 | this._selected = val;
|
97 | if (!this.loaded) {
|
98 | this.cd.detectChanges();
|
99 | }
|
100 | this.loaded = true;
|
101 | },
|
102 | enumerable: true,
|
103 | configurable: true
|
104 | });
|
105 | TabPanel.prototype.ngOnDestroy = function () {
|
106 | this.view = null;
|
107 | };
|
108 | TabPanel.ctorParameters = function () { return [
|
109 | { type: core.ViewContainerRef },
|
110 | { type: core.ChangeDetectorRef }
|
111 | ]; };
|
112 | __decorate([
|
113 | core.Input()
|
114 | ], TabPanel.prototype, "header", void 0);
|
115 | __decorate([
|
116 | core.Input()
|
117 | ], TabPanel.prototype, "disabled", void 0);
|
118 | __decorate([
|
119 | core.Input()
|
120 | ], TabPanel.prototype, "closable", void 0);
|
121 | __decorate([
|
122 | core.Input()
|
123 | ], TabPanel.prototype, "headerStyle", void 0);
|
124 | __decorate([
|
125 | core.Input()
|
126 | ], TabPanel.prototype, "headerStyleClass", void 0);
|
127 | __decorate([
|
128 | core.Input()
|
129 | ], TabPanel.prototype, "leftIcon", void 0);
|
130 | __decorate([
|
131 | core.Input()
|
132 | ], TabPanel.prototype, "rightIcon", void 0);
|
133 | __decorate([
|
134 | core.Input()
|
135 | ], TabPanel.prototype, "cache", void 0);
|
136 | __decorate([
|
137 | core.Input()
|
138 | ], TabPanel.prototype, "tooltip", void 0);
|
139 | __decorate([
|
140 | core.Input()
|
141 | ], TabPanel.prototype, "tooltipPosition", void 0);
|
142 | __decorate([
|
143 | core.Input()
|
144 | ], TabPanel.prototype, "tooltipPositionStyle", void 0);
|
145 | __decorate([
|
146 | core.Input()
|
147 | ], TabPanel.prototype, "tooltipStyleClass", void 0);
|
148 | __decorate([
|
149 | core.ContentChildren(api.PrimeTemplate)
|
150 | ], TabPanel.prototype, "templates", void 0);
|
151 | __decorate([
|
152 | core.Input()
|
153 | ], TabPanel.prototype, "selected", null);
|
154 | TabPanel = __decorate([
|
155 | core.Component({
|
156 | selector: 'p-tabPanel',
|
157 | template: "\n <div [attr.id]=\"id\" class=\"ui-tabview-panel ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': !selected}\"\n role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"!closed\">\n <ng-content></ng-content>\n <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n </div>\n ",
|
158 | changeDetection: core.ChangeDetectionStrategy.Default
|
159 | })
|
160 | ], TabPanel);
|
161 | return TabPanel;
|
162 | }());
|
163 | var TabView = (function () {
|
164 | function TabView(el) {
|
165 | this.el = el;
|
166 | this.orientation = 'top';
|
167 | this.onChange = new core.EventEmitter();
|
168 | this.onClose = new core.EventEmitter();
|
169 | this.activeIndexChange = new core.EventEmitter();
|
170 | }
|
171 | TabView.prototype.ngAfterContentInit = function () {
|
172 | var _this = this;
|
173 | this.initTabs();
|
174 | this.tabPanels.changes.subscribe(function (_) {
|
175 | _this.initTabs();
|
176 | });
|
177 | };
|
178 | TabView.prototype.initTabs = function () {
|
179 | this.tabs = this.tabPanels.toArray();
|
180 | var selectedTab = this.findSelectedTab();
|
181 | if (!selectedTab && this.tabs.length) {
|
182 | if (this.activeIndex != null && this.tabs.length > this.activeIndex)
|
183 | this.tabs[this.activeIndex].selected = true;
|
184 | else
|
185 | this.tabs[0].selected = true;
|
186 | }
|
187 | };
|
188 | TabView.prototype.open = function (event, tab) {
|
189 | if (tab.disabled) {
|
190 | if (event) {
|
191 | event.preventDefault();
|
192 | }
|
193 | return;
|
194 | }
|
195 | if (!tab.selected) {
|
196 | var selectedTab = this.findSelectedTab();
|
197 | if (selectedTab) {
|
198 | selectedTab.selected = false;
|
199 | }
|
200 | tab.selected = true;
|
201 | var selectedTabIndex = this.findTabIndex(tab);
|
202 | this.preventActiveIndexPropagation = true;
|
203 | this.activeIndexChange.emit(selectedTabIndex);
|
204 | this.onChange.emit({ originalEvent: event, index: selectedTabIndex });
|
205 | }
|
206 | if (event) {
|
207 | event.preventDefault();
|
208 | }
|
209 | };
|
210 | TabView.prototype.close = function (event, tab) {
|
211 | var _this = this;
|
212 | if (this.controlClose) {
|
213 | this.onClose.emit({
|
214 | originalEvent: event,
|
215 | index: this.findTabIndex(tab),
|
216 | close: function () {
|
217 | _this.closeTab(tab);
|
218 | }
|
219 | });
|
220 | }
|
221 | else {
|
222 | this.closeTab(tab);
|
223 | this.onClose.emit({
|
224 | originalEvent: event,
|
225 | index: this.findTabIndex(tab)
|
226 | });
|
227 | }
|
228 | event.stopPropagation();
|
229 | };
|
230 | TabView.prototype.closeTab = function (tab) {
|
231 | if (tab.disabled) {
|
232 | return;
|
233 | }
|
234 | if (tab.selected) {
|
235 | tab.selected = false;
|
236 | for (var i = 0; i < this.tabs.length; i++) {
|
237 | var tabPanel = this.tabs[i];
|
238 | if (!tabPanel.closed && !tab.disabled) {
|
239 | tabPanel.selected = true;
|
240 | break;
|
241 | }
|
242 | }
|
243 | }
|
244 | tab.closed = true;
|
245 | };
|
246 | TabView.prototype.findSelectedTab = function () {
|
247 | for (var i = 0; i < this.tabs.length; i++) {
|
248 | if (this.tabs[i].selected) {
|
249 | return this.tabs[i];
|
250 | }
|
251 | }
|
252 | return null;
|
253 | };
|
254 | TabView.prototype.findTabIndex = function (tab) {
|
255 | var index = -1;
|
256 | for (var i = 0; i < this.tabs.length; i++) {
|
257 | if (this.tabs[i] == tab) {
|
258 | index = i;
|
259 | break;
|
260 | }
|
261 | }
|
262 | return index;
|
263 | };
|
264 | TabView.prototype.getBlockableElement = function () {
|
265 | return this.el.nativeElement.children[0];
|
266 | };
|
267 | Object.defineProperty(TabView.prototype, "activeIndex", {
|
268 | get: function () {
|
269 | return this._activeIndex;
|
270 | },
|
271 | set: function (val) {
|
272 | this._activeIndex = val;
|
273 | if (this.preventActiveIndexPropagation) {
|
274 | this.preventActiveIndexPropagation = false;
|
275 | return;
|
276 | }
|
277 | if (this.tabs && this.tabs.length && this._activeIndex != null && this.tabs.length > this._activeIndex) {
|
278 | this.findSelectedTab().selected = false;
|
279 | this.tabs[this._activeIndex].selected = true;
|
280 | }
|
281 | },
|
282 | enumerable: true,
|
283 | configurable: true
|
284 | });
|
285 | TabView.ctorParameters = function () { return [
|
286 | { type: core.ElementRef }
|
287 | ]; };
|
288 | __decorate([
|
289 | core.Input()
|
290 | ], TabView.prototype, "orientation", void 0);
|
291 | __decorate([
|
292 | core.Input()
|
293 | ], TabView.prototype, "style", void 0);
|
294 | __decorate([
|
295 | core.Input()
|
296 | ], TabView.prototype, "styleClass", void 0);
|
297 | __decorate([
|
298 | core.Input()
|
299 | ], TabView.prototype, "controlClose", void 0);
|
300 | __decorate([
|
301 | core.ContentChildren(TabPanel)
|
302 | ], TabView.prototype, "tabPanels", void 0);
|
303 | __decorate([
|
304 | core.Output()
|
305 | ], TabView.prototype, "onChange", void 0);
|
306 | __decorate([
|
307 | core.Output()
|
308 | ], TabView.prototype, "onClose", void 0);
|
309 | __decorate([
|
310 | core.Output()
|
311 | ], TabView.prototype, "activeIndexChange", void 0);
|
312 | __decorate([
|
313 | core.Input()
|
314 | ], TabView.prototype, "activeIndex", null);
|
315 | TabView = __decorate([
|
316 | core.Component({
|
317 | selector: 'p-tabView',
|
318 | template: "\n <div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation!='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n <div class=\"ui-tabview-panels\">\n <ng-content></ng-content>\n </div>\n <ul p-tabViewNav role=\"tablist\" *ngIf=\"orientation=='bottom'\" [tabs]=\"tabs\" [orientation]=\"orientation\"\n (onTabClick)=\"open($event.originalEvent, $event.tab)\" (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"></ul>\n </div>\n "
|
319 | })
|
320 | ], TabView);
|
321 | return TabView;
|
322 | }());
|
323 | var TabViewModule = (function () {
|
324 | function TabViewModule() {
|
325 | }
|
326 | TabViewModule = __decorate([
|
327 | core.NgModule({
|
328 | imports: [common.CommonModule, api.SharedModule, tooltip.TooltipModule],
|
329 | exports: [TabView, TabPanel, TabViewNav, api.SharedModule],
|
330 | declarations: [TabView, TabPanel, TabViewNav]
|
331 | })
|
332 | ], TabViewModule);
|
333 | return TabViewModule;
|
334 | }());
|
335 |
|
336 | exports.TabPanel = TabPanel;
|
337 | exports.TabView = TabView;
|
338 | exports.TabViewModule = TabViewModule;
|
339 | exports.TabViewNav = TabViewNav;
|
340 |
|
341 | Object.defineProperty(exports, '__esModule', { value: true });
|
342 |
|
343 | })));
|
344 |
|