From ed2e76b6071c2ffdeea88a969a28033e8d016bdf Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Thu, 2 Mar 2017 14:58:45 -0600
Subject: [PATCH] refactor(segment): restructure segment component to separate
 modules

restructure segment component to separate modules
---
 src/components/segment/segment-button.ts | 115 ++++++++++++++++++++++
 src/components/segment/segment.ts        | 116 +----------------------
 2 files changed, 117 insertions(+), 114 deletions(-)
 create mode 100644 src/components/segment/segment-button.ts

diff --git a/src/components/segment/segment-button.ts b/src/components/segment/segment-button.ts
new file mode 100644
index 0000000000..59310bf5ac
--- /dev/null
+++ b/src/components/segment/segment-button.ts
@@ -0,0 +1,115 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer, ViewEncapsulation } from '@angular/core';
+
+import { isPresent, isTrueProperty } from '../../util/util';
+
+/**
+ * @name SegmentButton
+ * @description
+ * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-content>
+ *   <!-- Segment buttons with icons -->
+ *   <ion-segment [(ngModel)]="icons" color="secondary">
+ *     <ion-segment-button value="camera">
+ *       <ion-icon name="camera"></ion-icon>
+ *     </ion-segment-button>
+ *     <ion-segment-button value="bookmark">
+ *       <ion-icon name="bookmark"></ion-icon>
+ *     </ion-segment-button>
+ *   </ion-segment>
+ *
+ *   <!-- Segment buttons with text -->
+ *   <ion-segment [(ngModel)]="relationship" color="primary">
+ *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
+ *       Friends
+ *     </ion-segment-button>
+ *     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
+ *       Enemies
+ *     </ion-segment-button>
+ *   </ion-segment>
+ * </ion-content>
+ * ```
+ *
+ *
+ * @demo /docs/v2/demos/src/segment/
+ * @see {@link /docs/v2/components#segment Segment Component Docs}
+ * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
+ */
+@Component({
+  selector: 'ion-segment-button',
+  template:
+    '<ng-content></ng-content>' +
+    '<div class="button-effect"></div>',
+  host: {
+    'tappable': '',
+    'class': 'segment-button',
+    'role': 'button'
+  },
+  encapsulation: ViewEncapsulation.None,
+})
+export class SegmentButton {
+  _disabled: boolean = false;
+
+  /**
+   * @input {string} the value of the segment button. Required.
+   */
+  @Input() value: string;
+
+  /**
+   * @output {SegmentButton} Emitted when a segment button has been clicked.
+   */
+  @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+
+  /**
+   * @input {boolean} If true, the user cannot interact with this element.
+   */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(val: boolean) {
+    this._disabled = isTrueProperty(val);
+    this._setElementClass('segment-button-disabled', this._disabled);
+  }
+
+  /**
+   * @private
+   */
+  _setElementClass(cssClass: string, shouldAdd: boolean) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
+  }
+
+  /**
+   * @private
+   * On click of a SegmentButton
+   */
+  @HostListener('click')
+  onClick() {
+    console.debug('SegmentButton, select', this.value);
+    this.ionSelect.emit(this);
+  }
+
+  /**
+   * @private
+   */
+  ngOnInit() {
+    if (!isPresent(this.value)) {
+      console.warn('<ion-segment-button> requires a "value" attribute');
+    }
+  }
+
+  /**
+   * @private
+   */
+  set isActive(isActive: any) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
+  }
+
+}
diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts
index d2d88c3df7..68606f731d 100644
--- a/src/components/segment/segment.ts
+++ b/src/components/segment/segment.ts
@@ -1,123 +1,11 @@
-import { Component, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
+import { ContentChildren, Directive, ElementRef, EventEmitter, Input, Output, Optional, QueryList, Renderer } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
 import { isPresent, isTrueProperty } from '../../util/util';
 
-
-/**
- * @name SegmentButton
- * @description
- * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
- *
- * @usage
- *
- * ```html
- * <ion-content>
- *   <!-- Segment buttons with icons -->
- *   <ion-segment [(ngModel)]="icons" color="secondary">
- *     <ion-segment-button value="camera">
- *       <ion-icon name="camera"></ion-icon>
- *     </ion-segment-button>
- *     <ion-segment-button value="bookmark">
- *       <ion-icon name="bookmark"></ion-icon>
- *     </ion-segment-button>
- *   </ion-segment>
- *
- *   <!-- Segment buttons with text -->
- *   <ion-segment [(ngModel)]="relationship" color="primary">
- *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
- *       Friends
- *     </ion-segment-button>
- *     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
- *       Enemies
- *     </ion-segment-button>
- *   </ion-segment>
- * </ion-content>
- * ```
- *
- *
- * @demo /docs/v2/demos/src/segment/
- * @see {@link /docs/v2/components#segment Segment Component Docs}
- * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
- */
-@Component({
-  selector: 'ion-segment-button',
-  template:
-    '<ng-content></ng-content>' +
-    '<div class="button-effect"></div>',
-  host: {
-    'tappable': '',
-    'class': 'segment-button',
-    'role': 'button'
-  },
-  encapsulation: ViewEncapsulation.None,
-})
-export class SegmentButton {
-  _disabled: boolean = false;
-
-  /**
-   * @input {string} the value of the segment button. Required.
-   */
-  @Input() value: string;
-
-  /**
-   * @output {SegmentButton} Emitted when a segment button has been clicked.
-   */
-  @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
-
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
-
-  /**
-   * @input {boolean} If true, the user cannot interact with this element.
-   */
-  @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
-  set disabled(val: boolean) {
-    this._disabled = isTrueProperty(val);
-    this._setElementClass('segment-button-disabled', this._disabled);
-  }
-
-  /**
-   * @private
-   */
-  _setElementClass(cssClass: string, shouldAdd: boolean) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
-  }
-
-  /**
-   * @private
-   * On click of a SegmentButton
-   */
-  @HostListener('click')
-  onClick() {
-    console.debug('SegmentButton, select', this.value);
-    this.ionSelect.emit(this);
-  }
-
-  /**
-   * @private
-   */
-  ngOnInit() {
-    if (!isPresent(this.value)) {
-      console.warn('<ion-segment-button> requires a "value" attribute');
-    }
-  }
-
-  /**
-   * @private
-   */
-  set isActive(isActive: any) {
-    this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
-    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
-  }
-
-}
-
+import { SegmentButton } from './segment-button';
 
 /**
  * @name Segment