checkbox.js 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Component, ElementRef, HostListener, Input, Optional, Renderer, ViewEncapsulation } from '@angular/core';
  12. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  13. import { Config } from '../../config/config';
  14. import { isTrueProperty } from '../../util/util';
  15. import { Form } from '../../util/form';
  16. import { BaseInput } from '../../util/base-input';
  17. import { Item } from '../item/item';
  18. /**
  19. * @name Checkbox
  20. * @module ionic
  21. *
  22. * @description
  23. * The Checkbox is a simple component styled based on the mode. It can be
  24. * placed in an `ion-item` or used as a stand-alone checkbox.
  25. *
  26. * See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html)
  27. * for more info on forms and inputs.
  28. *
  29. *
  30. * @usage
  31. * ```html
  32. *
  33. * <ion-list>
  34. *
  35. * <ion-item>
  36. * <ion-label>Pepperoni</ion-label>
  37. * <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
  38. * </ion-item>
  39. *
  40. * <ion-item>
  41. * <ion-label>Sausage</ion-label>
  42. * <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
  43. * </ion-item>
  44. *
  45. * <ion-item>
  46. * <ion-label>Mushrooms</ion-label>
  47. * <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
  48. * </ion-item>
  49. *
  50. * </ion-list>
  51. * ```
  52. *
  53. * @advanced
  54. *
  55. * ```html
  56. *
  57. * <!-- Call function when state changes -->
  58. * <ion-list>
  59. *
  60. * <ion-item>
  61. * <ion-label>Cucumber</ion-label>
  62. * <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
  63. * </ion-item>
  64. *
  65. * </ion-list>
  66. * ```
  67. *
  68. * ```ts
  69. * @Component({
  70. * templateUrl: 'main.html'
  71. * })
  72. * class SaladPage {
  73. * cucumber: boolean;
  74. *
  75. * updateCucumber() {
  76. * console.log('Cucumbers new state:' + this.cucumber);
  77. * }
  78. * }
  79. * ```
  80. *
  81. * @demo /docs/demos/src/checkbox/
  82. * @see {@link /docs/components#checkbox Checkbox Component Docs}
  83. */
  84. var Checkbox = (function (_super) {
  85. __extends(Checkbox, _super);
  86. function Checkbox(config, form, item, elementRef, renderer) {
  87. return _super.call(this, config, elementRef, renderer, 'checkbox', false, form, item, null) || this;
  88. }
  89. Object.defineProperty(Checkbox.prototype, "checked", {
  90. /**
  91. * @input {boolean} If true, the element is selected.
  92. */
  93. get: function () {
  94. return this.value;
  95. },
  96. set: function (val) {
  97. this.value = val;
  98. },
  99. enumerable: true,
  100. configurable: true
  101. });
  102. /**
  103. * @hidden
  104. */
  105. Checkbox.prototype._click = function (ev) {
  106. ev.preventDefault();
  107. ev.stopPropagation();
  108. this.value = !this.value;
  109. this._fireTouched();
  110. };
  111. /**
  112. * @hidden
  113. */
  114. Checkbox.prototype._inputNormalize = function (val) {
  115. return isTrueProperty(val);
  116. };
  117. /**
  118. * @hidden
  119. */
  120. Checkbox.prototype._inputUpdated = function () {
  121. this._item && this._item.setElementClass('item-checkbox-checked', this._value);
  122. };
  123. Checkbox.decorators = [
  124. { type: Component, args: [{
  125. selector: 'ion-checkbox',
  126. template: '<div class="checkbox-icon" [class.checkbox-checked]="_value">' +
  127. '<div class="checkbox-inner"></div>' +
  128. '</div>' +
  129. '<button role="checkbox" ' +
  130. 'type="button" ' +
  131. 'ion-button="item-cover" ' +
  132. '[id]="id" ' +
  133. '[attr.aria-checked]="_value" ' +
  134. '[attr.aria-labelledby]="_labelId" ' +
  135. '[attr.aria-disabled]="_disabled" ' +
  136. 'class="item-cover"> ' +
  137. '</button>',
  138. host: {
  139. '[class.checkbox-disabled]': '_disabled'
  140. },
  141. providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true }],
  142. encapsulation: ViewEncapsulation.None,
  143. },] },
  144. ];
  145. /** @nocollapse */
  146. Checkbox.ctorParameters = function () { return [
  147. { type: Config, },
  148. { type: Form, },
  149. { type: Item, decorators: [{ type: Optional },] },
  150. { type: ElementRef, },
  151. { type: Renderer, },
  152. ]; };
  153. Checkbox.propDecorators = {
  154. 'checked': [{ type: Input },],
  155. '_click': [{ type: HostListener, args: ['click', ['$event'],] },],
  156. };
  157. return Checkbox;
  158. }(BaseInput));
  159. export { Checkbox };
  160. //# sourceMappingURL=checkbox.js.map