tab-button.js 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer } from '@angular/core';
  12. import { Config } from '../../config/config';
  13. import { Ion } from '../ion';
  14. /**
  15. * @hidden
  16. */
  17. var TabButton = (function (_super) {
  18. __extends(TabButton, _super);
  19. function TabButton(config, elementRef, renderer) {
  20. var _this = _super.call(this, config, elementRef, renderer) || this;
  21. _this.ionSelect = new EventEmitter();
  22. _this.disHover = (config.get('hoverCSS') === false);
  23. _this.layout = config.get('tabsLayout');
  24. return _this;
  25. }
  26. TabButton.prototype.ngOnInit = function () {
  27. this.tab.btn = this;
  28. this.layout = this.tab.parent.tabsLayout || this.layout;
  29. this.hasTitle = !!this.tab.tabTitle;
  30. this.hasIcon = !!this.tab.tabIcon && this.layout !== 'icon-hide';
  31. this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
  32. this.hasIconOnly = (this.hasIcon && !this.hasTitle);
  33. this.hasBadge = !!this.tab.tabBadge;
  34. };
  35. TabButton.prototype.onClick = function () {
  36. this.ionSelect.emit(this.tab);
  37. return false;
  38. };
  39. TabButton.prototype.updateHref = function (href) {
  40. this.setElementAttribute('href', href);
  41. };
  42. TabButton.decorators = [
  43. { type: Component, args: [{
  44. selector: '.tab-button',
  45. template: '<ion-icon *ngIf="tab.tabIcon" [name]="tab.tabIcon" [isActive]="tab.isSelected" class="tab-button-icon"></ion-icon>' +
  46. '<span *ngIf="tab.tabTitle" class="tab-button-text">{{tab.tabTitle}}</span>' +
  47. '<ion-badge *ngIf="tab.tabBadge" class="tab-badge" [color]="tab.tabBadgeStyle">{{tab.tabBadge}}</ion-badge>' +
  48. '<div class="button-effect"></div>',
  49. host: {
  50. '[attr.id]': 'tab._btnId',
  51. '[attr.aria-controls]': 'tab._tabId',
  52. '[attr.aria-selected]': 'tab.isSelected',
  53. '[class.has-title]': 'hasTitle',
  54. '[class.has-icon]': 'hasIcon',
  55. '[class.has-title-only]': 'hasTitleOnly',
  56. '[class.icon-only]': 'hasIconOnly',
  57. '[class.has-badge]': 'hasBadge',
  58. '[class.disable-hover]': 'disHover',
  59. '[class.tab-disabled]': '!tab.enabled',
  60. '[class.tab-hidden]': '!tab.show',
  61. }
  62. },] },
  63. ];
  64. /** @nocollapse */
  65. TabButton.ctorParameters = function () { return [
  66. { type: Config, },
  67. { type: ElementRef, },
  68. { type: Renderer, },
  69. ]; };
  70. TabButton.propDecorators = {
  71. 'tab': [{ type: Input },],
  72. 'ionSelect': [{ type: Output },],
  73. 'onClick': [{ type: HostListener, args: ['click',] },],
  74. };
  75. return TabButton;
  76. }(Ion));
  77. export { TabButton };
  78. //# sourceMappingURL=tab-button.js.map