ionic-framework/ionic/components/form/label.ts

import {Directive, Host, Optional} from 'angular2/angular2';

import {IonicConfig} from '../../config/config';
import * as dom  from '../../util/dom';
import {Input} from './text-input';
import {Checkbox} from '../checkbox/checkbox';
import {RadioButton} from '../radio/radio';
import {Switch} from '../switch/switch';


@Directive({
  selector: 'label',
  host: {
    '[attr.for]': 'labelFor',
    '[class.input-label]': 'inputLabel',
    '(touchstart)': 'pointerStart($event)',
    '(touchend)': 'pointerEnd($event)',
    '(mousedown)': 'pointerStart($event)',
    '(mouseup)': 'pointerEnd($event)'
  }
})
export class Label {
  constructor(
    @Optional() @Host() textContainer: Input,
    @Optional() @Host() checkboxContainer: Checkbox,
    @Optional() @Host() radioContainer: RadioButton,
    @Optional() @Host() switchContainer: Switch,
    config: IonicConfig
  ) {
    this.container = textContainer || checkboxContainer || radioContainer || switchContainer;

    if (this.container) {
      this.container.registerLabel(this);
      this.inputLabel = true;
    }

    this.scrollAssist = config.setting('keyboardScrollAssist');
  }

  pointerStart(ev) {
    if (this.scrollAssist) {
      // remember where the touchstart/mousedown started
      this.startCoord = dom.pointerCoord(ev);
    }
  }

  pointerEnd(ev) {
    if (this.container) {

      // get where the touchend/mouseup ended
      let endCoord = dom.pointerCoord(ev);

      // focus this input if the pointer hasn't moved XX pixels
      if (!dom.hasPointerMoved(20, this.startCoord, endCoord)) {
        ev.preventDefault();
        ev.stopPropagation();

        this.container instanceof Input ? this.container.focus() : this.container.toggle();
      }

      this.startCoord = null;
    }
  }

}