tab.directive.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. /**
  2. * @fileoverview added by tsickle
  3. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4. */
  5. import { Directive, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2 } from '@angular/core';
  6. import { TabsetComponent } from './tabset.component';
  7. export class TabDirective {
  8. /**
  9. * @param {?} tabset
  10. * @param {?} elementRef
  11. * @param {?} renderer
  12. */
  13. constructor(tabset, elementRef, renderer) {
  14. this.elementRef = elementRef;
  15. this.renderer = renderer;
  16. /**
  17. * fired when tab became active, $event:Tab equals to selected instance of Tab component
  18. */
  19. this.selectTab = new EventEmitter();
  20. /**
  21. * fired when tab became inactive, $event:Tab equals to deselected instance of Tab component
  22. */
  23. this.deselect = new EventEmitter();
  24. /**
  25. * fired before tab will be removed, $event:Tab equals to instance of removed tab
  26. */
  27. this.removed = new EventEmitter();
  28. this.addClass = true;
  29. this.tabset = tabset;
  30. this.tabset.addTab(this);
  31. }
  32. /**
  33. * if set, will be added to the tab's class attribute. Multiple classes are supported.
  34. * @return {?}
  35. */
  36. get customClass() {
  37. return this._customClass;
  38. }
  39. /**
  40. * @param {?} customClass
  41. * @return {?}
  42. */
  43. set customClass(customClass) {
  44. if (this.customClass) {
  45. this.customClass.split(' ').forEach((/**
  46. * @param {?} cssClass
  47. * @return {?}
  48. */
  49. (cssClass) => {
  50. this.renderer.removeClass(this.elementRef.nativeElement, cssClass);
  51. }));
  52. }
  53. this._customClass = customClass ? customClass.trim() : null;
  54. if (this.customClass) {
  55. this.customClass.split(' ').forEach((/**
  56. * @param {?} cssClass
  57. * @return {?}
  58. */
  59. (cssClass) => {
  60. this.renderer.addClass(this.elementRef.nativeElement, cssClass);
  61. }));
  62. }
  63. }
  64. /**
  65. * tab active state toggle
  66. * @return {?}
  67. */
  68. get active() {
  69. return this._active;
  70. }
  71. /**
  72. * @param {?} active
  73. * @return {?}
  74. */
  75. set active(active) {
  76. if (this._active === active) {
  77. return;
  78. }
  79. if ((this.disabled && active) || !active) {
  80. if (this._active && !active) {
  81. this.deselect.emit(this);
  82. this._active = active;
  83. }
  84. return;
  85. }
  86. this._active = active;
  87. this.selectTab.emit(this);
  88. this.tabset.tabs.forEach((/**
  89. * @param {?} tab
  90. * @return {?}
  91. */
  92. (tab) => {
  93. if (tab !== this) {
  94. tab.active = false;
  95. }
  96. }));
  97. }
  98. /**
  99. * @return {?}
  100. */
  101. ngOnInit() {
  102. this.removable = this.removable;
  103. }
  104. /**
  105. * @return {?}
  106. */
  107. ngOnDestroy() {
  108. this.tabset.removeTab(this, { reselect: false, emit: false });
  109. }
  110. }
  111. TabDirective.decorators = [
  112. { type: Directive, args: [{ selector: 'tab, [tab]' },] }
  113. ];
  114. /** @nocollapse */
  115. TabDirective.ctorParameters = () => [
  116. { type: TabsetComponent },
  117. { type: ElementRef },
  118. { type: Renderer2 }
  119. ];
  120. TabDirective.propDecorators = {
  121. heading: [{ type: Input }],
  122. id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
  123. disabled: [{ type: Input }],
  124. removable: [{ type: Input }],
  125. customClass: [{ type: Input }],
  126. active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }],
  127. selectTab: [{ type: Output }],
  128. deselect: [{ type: Output }],
  129. removed: [{ type: Output }],
  130. addClass: [{ type: HostBinding, args: ['class.tab-pane',] }]
  131. };
  132. if (false) {
  133. /**
  134. * tab header text
  135. * @type {?}
  136. */
  137. TabDirective.prototype.heading;
  138. /**
  139. * tab id. The same id with suffix '-link' will be added to the corresponding <li> element
  140. * @type {?}
  141. */
  142. TabDirective.prototype.id;
  143. /**
  144. * if true tab can not be activated
  145. * @type {?}
  146. */
  147. TabDirective.prototype.disabled;
  148. /**
  149. * if true tab can be removable, additional button will appear
  150. * @type {?}
  151. */
  152. TabDirective.prototype.removable;
  153. /**
  154. * fired when tab became active, $event:Tab equals to selected instance of Tab component
  155. * @type {?}
  156. */
  157. TabDirective.prototype.selectTab;
  158. /**
  159. * fired when tab became inactive, $event:Tab equals to deselected instance of Tab component
  160. * @type {?}
  161. */
  162. TabDirective.prototype.deselect;
  163. /**
  164. * fired before tab will be removed, $event:Tab equals to instance of removed tab
  165. * @type {?}
  166. */
  167. TabDirective.prototype.removed;
  168. /** @type {?} */
  169. TabDirective.prototype.addClass;
  170. /** @type {?} */
  171. TabDirective.prototype.headingRef;
  172. /** @type {?} */
  173. TabDirective.prototype.tabset;
  174. /**
  175. * @type {?}
  176. * @protected
  177. */
  178. TabDirective.prototype._active;
  179. /**
  180. * @type {?}
  181. * @protected
  182. */
  183. TabDirective.prototype._customClass;
  184. /** @type {?} */
  185. TabDirective.prototype.elementRef;
  186. /** @type {?} */
  187. TabDirective.prototype.renderer;
  188. }
  189. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1ib290c3RyYXAvdGFicy8iLCJzb3VyY2VzIjpbInRhYi5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLFdBQVcsRUFDWCxLQUFLLEVBQ0wsTUFBTSxFQUlOLFVBQVUsRUFDVixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBR3JELE1BQU0sT0FBTyxZQUFZOzs7Ozs7SUE0RXZCLFlBQ0UsTUFBdUIsRUFDaEIsVUFBc0IsRUFDdEIsUUFBbUI7UUFEbkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixhQUFRLEdBQVIsUUFBUSxDQUFXOzs7O1FBakJsQixjQUFTLEdBQStCLElBQUksWUFBWSxFQUFFLENBQUM7Ozs7UUFFM0QsYUFBUSxHQUErQixJQUFJLFlBQVksRUFBRSxDQUFDOzs7O1FBRTFELFlBQU8sR0FBK0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVwQyxhQUFRLEdBQUcsSUFBSSxDQUFDO1FBYTdDLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzNCLENBQUM7Ozs7O0lBeEVELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDOzs7OztJQUVELElBQUksV0FBVyxDQUFDLFdBQW1CO1FBQ2pDLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxPQUFPOzs7O1lBQUMsQ0FBQyxRQUFnQixFQUFFLEVBQUU7Z0JBQ3ZELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLFFBQVEsQ0FBQyxDQUFDO1lBQ3JFLENBQUMsRUFBQyxDQUFDO1NBQ0o7UUFFRCxJQUFJLENBQUMsWUFBWSxHQUFHLFdBQVcsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFFNUQsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLE9BQU87Ozs7WUFBQyxDQUFDLFFBQWdCLEVBQUUsRUFBRTtnQkFDdkQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsUUFBUSxDQUFDLENBQUM7WUFDbEUsQ0FBQyxFQUFDLENBQUM7U0FDSjtJQUNILENBQUM7Ozs7O0lBR0QsSUFFSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7Ozs7O0lBRUQsSUFBSSxNQUFNLENBQUMsTUFBZTtRQUN4QixJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssTUFBTSxFQUFFO1lBQzNCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ3hDLElBQUksSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLE1BQU0sRUFBRTtnQkFDM0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO2FBQ3ZCO1lBRUQsT0FBTztTQUNSO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7UUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTzs7OztRQUFDLENBQUMsR0FBaUIsRUFBRSxFQUFFO1lBQzdDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRTtnQkFDaEIsR0FBRyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7YUFDcEI7UUFDSCxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7SUEwQkQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUNsQyxDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDaEUsQ0FBQzs7O1lBNUZGLFNBQVMsU0FBQyxFQUFFLFFBQVEsRUFBRSxZQUFZLEVBQUU7Ozs7WUFGNUIsZUFBZTtZQUh0QixVQUFVO1lBQ1YsU0FBUzs7O3NCQU9SLEtBQUs7aUJBRUwsV0FBVyxTQUFDLFNBQVMsY0FDckIsS0FBSzt1QkFFTCxLQUFLO3dCQUVMLEtBQUs7MEJBRUwsS0FBSztxQkFzQkwsV0FBVyxTQUFDLGNBQWMsY0FDMUIsS0FBSzt3QkE0QkwsTUFBTTt1QkFFTixNQUFNO3NCQUVOLE1BQU07dUJBRU4sV0FBVyxTQUFDLGdCQUFnQjs7Ozs7OztJQWxFN0IsK0JBQXlCOzs7OztJQUV6QiwwQkFDb0I7Ozs7O0lBRXBCLGdDQUEyQjs7Ozs7SUFFM0IsaUNBQTRCOzs7OztJQXFENUIsaUNBQXFFOzs7OztJQUVyRSxnQ0FBb0U7Ozs7O0lBRXBFLCtCQUFtRTs7SUFFbkUsZ0NBQStDOztJQUcvQyxrQ0FBNkI7O0lBQzdCLDhCQUF3Qjs7Ozs7SUFDeEIsK0JBQTJCOzs7OztJQUMzQixvQ0FBK0I7O0lBSTdCLGtDQUE2Qjs7SUFDN0IsZ0NBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBUZW1wbGF0ZVJlZixcbiAgT25Jbml0LFxuICBPbkRlc3Ryb3ksXG4gIEVsZW1lbnRSZWYsXG4gIFJlbmRlcmVyMlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRhYnNldENvbXBvbmVudCB9IGZyb20gJy4vdGFic2V0LmNvbXBvbmVudCc7XG5cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ3RhYiwgW3RhYl0nIH0pXG5leHBvcnQgY2xhc3MgVGFiRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvKiogdGFiIGhlYWRlciB0ZXh0ICovXG4gIEBJbnB1dCgpIGhlYWRpbmc6IHN0cmluZztcbiAgLyoqIHRhYiBpZC4gVGhlIHNhbWUgaWQgd2l0aCBzdWZmaXggJy1saW5rJyB3aWxsIGJlIGFkZGVkIHRvIHRoZSBjb3JyZXNwb25kaW5nICZsdDtsaSZndDsgZWxlbWVudCAgKi9cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmlkJylcbiAgQElucHV0KCkgaWQ6IHN0cmluZztcbiAgLyoqIGlmIHRydWUgdGFiIGNhbiBub3QgYmUgYWN0aXZhdGVkICovXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuO1xuICAvKiogaWYgdHJ1ZSB0YWIgY2FuIGJlIHJlbW92YWJsZSwgYWRkaXRpb25hbCBidXR0b24gd2lsbCBhcHBlYXIgKi9cbiAgQElucHV0KCkgcmVtb3ZhYmxlOiBib29sZWFuO1xuICAvKiogaWYgc2V0LCB3aWxsIGJlIGFkZGVkIHRvIHRoZSB0YWIncyBjbGFzcyBhdHRyaWJ1dGUuIE11bHRpcGxlIGNsYXNzZXMgYXJlIHN1cHBvcnRlZC4gKi9cbiAgQElucHV0KClcbiAgZ2V0IGN1c3RvbUNsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX2N1c3RvbUNsYXNzO1xuICB9XG5cbiAgc2V0IGN1c3RvbUNsYXNzKGN1c3RvbUNsYXNzOiBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy5jdXN0b21DbGFzcykge1xuICAgICAgdGhpcy5jdXN0b21DbGFzcy5zcGxpdCgnICcpLmZvckVhY2goKGNzc0NsYXNzOiBzdHJpbmcpID0+IHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgY3NzQ2xhc3MpO1xuICAgICAgfSk7XG4gICAgfVxuXG4gICAgdGhpcy5fY3VzdG9tQ2xhc3MgPSBjdXN0b21DbGFzcyA/IGN1c3RvbUNsYXNzLnRyaW0oKSA6IG51bGw7XG5cbiAgICBpZiAodGhpcy5jdXN0b21DbGFzcykge1xuICAgICAgdGhpcy5jdXN0b21DbGFzcy5zcGxpdCgnICcpLmZvckVhY2goKGNzc0NsYXNzOiBzdHJpbmcpID0+IHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgY3NzQ2xhc3MpO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgLyoqIHRhYiBhY3RpdmUgc3RhdGUgdG9nZ2xlICovXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYWN0aXZlJylcbiAgQElucHV0KClcbiAgZ2V0IGFjdGl2ZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fYWN0aXZlO1xuICB9XG5cbiAgc2V0IGFjdGl2ZShhY3RpdmU6IGJvb2xlYW4pIHtcbiAgICBpZiAodGhpcy5fYWN0aXZlID09PSBhY3RpdmUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKCh0aGlzLmRpc2FibGVkICYmIGFjdGl2ZSkgfHwgIWFjdGl2ZSkge1xuICAgICAgaWYgKHRoaXMuX2FjdGl2ZSAmJiAhYWN0aXZlKSB7XG4gICAgICAgIHRoaXMuZGVzZWxlY3QuZW1pdCh0aGlzKTtcbiAgICAgICAgdGhpcy5fYWN0aXZlID0gYWN0aXZlO1xuICAgICAgfVxuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5fYWN0aXZlID0gYWN0aXZlO1xuICAgIHRoaXMuc2VsZWN0VGFiLmVtaXQodGhpcyk7XG4gICAgdGhpcy50YWJzZXQudGFicy5mb3JFYWNoKCh0YWI6IFRhYkRpcmVjdGl2ZSkgPT4ge1xuICAgICAgaWYgKHRhYiAhPT0gdGhpcykge1xuICAgICAgICB0YWIuYWN0aXZlID0gZmFsc2U7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICAvKiogZmlyZWQgd2hlbiB0YWIgYmVjYW1lIGFjdGl2ZSwgJGV2ZW50OlRhYiBlcXVhbHMgdG8gc2VsZWN0ZWQgaW5zdGFuY2Ugb2YgVGFiIGNvbXBvbmVudCAqL1xuICBAT3V0cHV0KCkgc2VsZWN0VGFiOiBFdmVudEVtaXR0ZXI8VGFiRGlyZWN0aXZlPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgLyoqIGZpcmVkIHdoZW4gdGFiIGJlY2FtZSBpbmFjdGl2ZSwgJGV2ZW50OlRhYiBlcXVhbHMgdG8gZGVzZWxlY3RlZCBpbnN0YW5jZSBvZiBUYWIgY29tcG9uZW50ICovXG4gIEBPdXRwdXQoKSBkZXNlbGVjdDogRXZlbnRFbWl0dGVyPFRhYkRpcmVjdGl2ZT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIC8qKiBmaXJlZCBiZWZvcmUgdGFiIHdpbGwgYmUgcmVtb3ZlZCwgJGV2ZW50OlRhYiBlcXVhbHMgdG8gaW5zdGFuY2Ugb2YgcmVtb3ZlZCB0YWIgKi9cbiAgQE91dHB1dCgpIHJlbW92ZWQ6IEV2ZW50RW1pdHRlcjxUYWJEaXJlY3RpdmU+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MudGFiLXBhbmUnKSBhZGRDbGFzcyA9IHRydWU7XG5cbiAgLyogdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOm5vLWFueSAqL1xuICBoZWFkaW5nUmVmOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICB0YWJzZXQ6IFRhYnNldENvbXBvbmVudDtcbiAgcHJvdGVjdGVkIF9hY3RpdmU6IGJvb2xlYW47XG4gIHByb3RlY3RlZCBfY3VzdG9tQ2xhc3M6IHN0cmluZztcblxuICBjb25zdHJ1Y3RvcihcbiAgICB0YWJzZXQ6IFRhYnNldENvbXBvbmVudCxcbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwdWJsaWMgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHtcbiAgICB0aGlzLnRhYnNldCA9IHRhYnNldDtcbiAgICB0aGlzLnRhYnNldC5hZGRUYWIodGhpcyk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnJlbW92YWJsZSA9IHRoaXMucmVtb3ZhYmxlO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy50YWJzZXQucmVtb3ZlVGFiKHRoaXMsIHsgcmVzZWxlY3Q6IGZhbHNlLCBlbWl0OiBmYWxzZSB9KTtcbiAgfVxufVxuIl19