a zip code crypto-currency system good for red ONLY

checkbox.js 3.9KB

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