segment-button.js 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
  2. import { isPresent, isTrueProperty } from '../../util/util';
  3. /**
  4. * @name SegmentButton
  5. * @description
  6. * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
  7. *
  8. * @usage
  9. *
  10. * ```html
  11. * <ion-content>
  12. * <!-- Segment buttons with icons -->
  13. * <ion-segment [(ngModel)]="icons" color="secondary">
  14. * <ion-segment-button value="camera">
  15. * <ion-icon name="camera"></ion-icon>
  16. * </ion-segment-button>
  17. * <ion-segment-button value="bookmark">
  18. * <ion-icon name="bookmark"></ion-icon>
  19. * </ion-segment-button>
  20. * </ion-segment>
  21. *
  22. * <!-- Segment buttons with text -->
  23. * <ion-segment [(ngModel)]="relationship" color="primary">
  24. * <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
  25. * Friends
  26. * </ion-segment-button>
  27. * <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
  28. * Enemies
  29. * </ion-segment-button>
  30. * </ion-segment>
  31. * </ion-content>
  32. * ```
  33. *
  34. *
  35. * @demo /docs/demos/src/segment/
  36. * @see {@link /docs/components#segment Segment Component Docs}
  37. * @see {@link /docs/api/components/segment/Segment/ Segment API Docs}
  38. */
  39. var SegmentButton = (function () {
  40. function SegmentButton() {
  41. this.isActive = false;
  42. this._disabled = false;
  43. /**
  44. * @output {SegmentButton} Emitted when a segment button has been clicked.
  45. */
  46. this.ionSelect = new EventEmitter();
  47. }
  48. Object.defineProperty(SegmentButton.prototype, "disabled", {
  49. /**
  50. * @input {boolean} If true, the user cannot interact with this element.
  51. */
  52. get: function () {
  53. return this._disabled;
  54. },
  55. set: function (val) {
  56. this._disabled = isTrueProperty(val);
  57. },
  58. enumerable: true,
  59. configurable: true
  60. });
  61. /**
  62. * @hidden
  63. * On click of a SegmentButton
  64. */
  65. SegmentButton.prototype.onClick = function () {
  66. (void 0) /* console.debug */;
  67. this.ionSelect.emit(this);
  68. };
  69. /**
  70. * @hidden
  71. */
  72. SegmentButton.prototype.ngOnInit = function () {
  73. if (!isPresent(this.value)) {
  74. console.warn('<ion-segment-button> requires a "value" attribute');
  75. }
  76. };
  77. SegmentButton.decorators = [
  78. { type: Component, args: [{
  79. selector: 'ion-segment-button',
  80. template: '<ng-content></ng-content>' +
  81. '<div class="button-effect"></div>',
  82. host: {
  83. 'tappable': '',
  84. 'class': 'segment-button',
  85. 'role': 'button',
  86. '[class.segment-button-disabled]': '_disabled',
  87. '[class.segment-activated]': 'isActive',
  88. '[attr.aria-pressed]': 'isActive'
  89. },
  90. encapsulation: ViewEncapsulation.None,
  91. },] },
  92. ];
  93. /** @nocollapse */
  94. SegmentButton.ctorParameters = function () { return []; };
  95. SegmentButton.propDecorators = {
  96. 'value': [{ type: Input },],
  97. 'ionSelect': [{ type: Output },],
  98. 'disabled': [{ type: Input },],
  99. 'onClick': [{ type: HostListener, args: ['click',] },],
  100. };
  101. return SegmentButton;
  102. }());
  103. export { SegmentButton };
  104. //# sourceMappingURL=segment-button.js.map