UNPKG

ionic-framework

Version:

The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.

231 lines (230 loc) 8.26 kB
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var __param = (this && this.__param) || function (paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); } }; var core_1 = require('angular2/core'); var common_1 = require('angular2/common'); var util_1 = require('../../util/util'); /** * @name SegmentButton * @description * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value. * @property {string} [value] - the value of the segment-button. Required. * @usage * ```html * <ion-segment [(ngModel)]="relationship" primary> * <ion-segment-button value="friends" (select)="selectedFriends()"> * Friends * </ion-segment-button> * <ion-segment-button value="enemies" (select)="selectedEnemies()"> * Enemies * </ion-segment-button> * </ion-segment> *``` * * Or with `FormBuilder` * *```html * <form [ngFormModel]="myForm"> * <ion-segment ngControl="mapStyle" danger> * <ion-segment-button value="standard"> * Standard * </ion-segment-button> * <ion-segment-button value="hybrid"> * Hybrid * </ion-segment-button> * <ion-segment-button value="sat"> * Satellite * </ion-segment-button> * </ion-segment> * </form> * ``` * * @property {Any} [click] - expression to evaluate when a segment button has been clicked * * @demo /docs/v2/demos/segment/ * @see {@link /docs/v2/components#segment Segment Component Docs} * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs} */ var SegmentButton = (function () { function SegmentButton(_renderer, _elementRef) { this._renderer = _renderer; this._elementRef = _elementRef; this.select = new core_1.EventEmitter(); } /** * @private * On click of a SegmentButton */ SegmentButton.prototype.onClick = function (ev) { void 0; this.select.emit(this); }; /** * @private */ SegmentButton.prototype.ngOnInit = function () { if (!util_1.isDefined(this.value)) { void 0; } }; Object.defineProperty(SegmentButton.prototype, "isActive", { /** * @private */ set: function (isActive) { this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive); this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive); }, enumerable: true, configurable: true }); __decorate([ core_1.Input(), __metadata('design:type', String) ], SegmentButton.prototype, "value", void 0); __decorate([ core_1.Output(), __metadata('design:type', core_1.EventEmitter) ], SegmentButton.prototype, "select", void 0); __decorate([ core_1.HostListener('click', ['$event']), __metadata('design:type', Function), __metadata('design:paramtypes', [Object]), __metadata('design:returntype', void 0) ], SegmentButton.prototype, "onClick", null); SegmentButton = __decorate([ core_1.Directive({ selector: 'ion-segment-button', host: { 'tappable': '', 'class': 'segment-button', 'role': 'button' } }), __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef]) ], SegmentButton); return SegmentButton; })(); exports.SegmentButton = SegmentButton; /** * @name Segment * @description * A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. * Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. * You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html) * * * @usage * ```html * <ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger> * <ion-segment-button value="friends"> * Friends * </ion-segment-button> * <ion-segment-button value="enemies"> * Enemies * </ion-segment-button> * </ion-segment> *``` * * Or with `FormBuilder` * *```html * <form [ngFormModel]="myForm"> * <ion-segment ngControl="mapStyle" danger> * <ion-segment-button value="standard"> * Standard * </ion-segment-button> * <ion-segment-button value="hybrid"> * Hybrid * </ion-segment-button> * <ion-segment-button value="sat"> * Satellite * </ion-segment-button> * </ion-segment> * </form> * ``` * * @property {Any} [change] - expression to evaluate when a segment button has been changed * * @demo /docs/v2/demos/segment/ * @see {@link /docs/v2/components#segment Segment Component Docs} * @see [Angular 2 Forms](http://learnangular2.com/forms/) */ var Segment = (function () { function Segment(ngControl) { this.onChange = function (_) { }; this.onTouched = function (_) { }; this.change = new core_1.EventEmitter(); if (ngControl) { ngControl.valueAccessor = this; } } /** * @private * Write a new value to the element. */ Segment.prototype.writeValue = function (value) { this.value = util_1.isDefined(value) ? value : ''; if (this._buttons) { var buttons = this._buttons.toArray(); for (var _i = 0; _i < buttons.length; _i++) { var button = buttons[_i]; button.isActive = (button.value === this.value); } } }; /** * @private */ Segment.prototype.ngAfterViewInit = function () { var _this = this; var buttons = this._buttons.toArray(); for (var _i = 0; _i < buttons.length; _i++) { var button = buttons[_i]; button.select.subscribe(function (selectedButton) { _this.writeValue(selectedButton.value); _this.onChange(selectedButton.value); _this.change.emit(selectedButton); }); if (util_1.isDefined(this.value)) { button.isActive = (button.value === this.value); } } }; /** * @private * Set the function to be called when the control receives a change event. */ Segment.prototype.registerOnChange = function (fn) { this.onChange = fn; }; /** * @private * Set the function to be called when the control receives a touch event. */ Segment.prototype.registerOnTouched = function (fn) { this.onTouched = fn; }; __decorate([ core_1.Output(), __metadata('design:type', core_1.EventEmitter) ], Segment.prototype, "change", void 0); __decorate([ core_1.ContentChildren(SegmentButton), __metadata('design:type', core_1.QueryList) ], Segment.prototype, "_buttons", void 0); Segment = __decorate([ core_1.Directive({ selector: 'ion-segment' }), __param(0, core_1.Optional()), __metadata('design:paramtypes', [common_1.NgControl]) ], Segment); return Segment; })(); exports.Segment = Segment;