123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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 { Attribute, Directive, ElementRef, Input, Renderer } from '@angular/core';
  12. import { Config } from '../../config/config';
  13. import { Ion } from '../ion';
  14. /**
  15. * @name Label
  16. * @description
  17. * Labels are placed inside of an `ion-item` element and can be used
  18. * to describe an `ion-input`, `ion-toggle`, `ion-checkbox`, and more.
  19. *
  20. * @property [fixed] - A persistent label that sits next the input.
  21. * @property [floating] - A label that will float above the input if the input is empty or loses focus.
  22. * @property [stacked] - A stacked label will always appear on top of the input.
  23. *
  24. * @usage
  25. * ```html
  26. * <ion-item>
  27. * <ion-label>Username</ion-label>
  28. * <ion-input></ion-input>
  29. * </ion-item>
  30. *
  31. * <ion-item>
  32. * <ion-label fixed>Website</ion-label>
  33. * <ion-input type="url"></ion-input>
  34. * </ion-item>
  35. *
  36. * <ion-item>
  37. * <ion-label floating>Email</ion-label>
  38. * <ion-input type="email"></ion-input>
  39. * </ion-item>
  40. *
  41. * <ion-item>
  42. * <ion-label stacked>Phone</ion-label>
  43. * <ion-input type="tel"></ion-input>
  44. * </ion-item>
  45. *
  46. * <ion-item>
  47. * <ion-label>Toggle</ion-label>
  48. * <ion-toggle></ion-toggle>
  49. * </ion-item>
  50. *
  51. * <ion-item>
  52. * <ion-label>Checkbox</ion-label>
  53. * <ion-checkbox></ion-checkbox>
  54. * </ion-item>
  55. * ```
  56. *
  57. * @demo /docs/demos/src/label/
  58. * @see {@link ../../../../components#inputs Input Component Docs}
  59. * @see {@link ../../input/Input Input API Docs}
  60. *
  61. */
  62. var Label = (function (_super) {
  63. __extends(Label, _super);
  64. function Label(config, elementRef, renderer, isFloating, isStacked, isFixed, isInset) {
  65. var _this = _super.call(this, config, elementRef, renderer, 'label') || this;
  66. _this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
  67. return _this;
  68. }
  69. Object.defineProperty(Label.prototype, "id", {
  70. /**
  71. * @hidden
  72. */
  73. get: function () {
  74. return this._id;
  75. },
  76. set: function (val) {
  77. this._id = val;
  78. if (val) {
  79. this.setElementAttribute('id', val);
  80. }
  81. },
  82. enumerable: true,
  83. configurable: true
  84. });
  85. Object.defineProperty(Label.prototype, "text", {
  86. /**
  87. * @hidden
  88. */
  89. get: function () {
  90. return this.getNativeElement().textContent || '';
  91. },
  92. enumerable: true,
  93. configurable: true
  94. });
  95. Label.decorators = [
  96. { type: Directive, args: [{
  97. selector: 'ion-label'
  98. },] },
  99. ];
  100. /** @nocollapse */
  101. Label.ctorParameters = function () { return [
  102. { type: Config, },
  103. { type: ElementRef, },
  104. { type: Renderer, },
  105. { type: undefined, decorators: [{ type: Attribute, args: ['floating',] },] },
  106. { type: undefined, decorators: [{ type: Attribute, args: ['stacked',] },] },
  107. { type: undefined, decorators: [{ type: Attribute, args: ['fixed',] },] },
  108. { type: undefined, decorators: [{ type: Attribute, args: ['inset',] },] },
  109. ]; };
  110. Label.propDecorators = {
  111. 'id': [{ type: Input },],
  112. };
  113. return Label;
  114. }(Ion));
  115. export { Label };
  116. //# sourceMappingURL=label.js.map