Front end of the Slack clone application.

segment-button.js 3.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. export class SegmentButton {
  40. constructor() {
  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. /**
  49. * @input {boolean} If true, the user cannot interact with this element.
  50. */
  51. get disabled() {
  52. return this._disabled;
  53. }
  54. set disabled(val) {
  55. this._disabled = isTrueProperty(val);
  56. }
  57. /**
  58. * @hidden
  59. * On click of a SegmentButton
  60. */
  61. onClick() {
  62. (void 0) /* console.debug */;
  63. this.ionSelect.emit(this);
  64. }
  65. /**
  66. * @hidden
  67. */
  68. ngOnInit() {
  69. if (!isPresent(this.value)) {
  70. console.warn('<ion-segment-button> requires a "value" attribute');
  71. }
  72. }
  73. }
  74. SegmentButton.decorators = [
  75. { type: Component, args: [{
  76. selector: 'ion-segment-button',
  77. template: '<ng-content></ng-content>' +
  78. '<div class="button-effect"></div>',
  79. host: {
  80. 'tappable': '',
  81. 'class': 'segment-button',
  82. 'role': 'button',
  83. '[class.segment-button-disabled]': '_disabled',
  84. '[class.segment-activated]': 'isActive',
  85. '[attr.aria-pressed]': 'isActive'
  86. },
  87. encapsulation: ViewEncapsulation.None,
  88. },] },
  89. ];
  90. /** @nocollapse */
  91. SegmentButton.ctorParameters = () => [];
  92. SegmentButton.propDecorators = {
  93. 'value': [{ type: Input },],
  94. 'ionSelect': [{ type: Output },],
  95. 'disabled': [{ type: Input },],
  96. 'onClick': [{ type: HostListener, args: ['click',] },],
  97. };
  98. //# sourceMappingURL=segment-button.js.map