show-when.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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, NgZone } from '@angular/core';
  12. import { DisplayWhen } from './display-when';
  13. import { Platform } from '../../platform/platform';
  14. /**
  15. *
  16. * @name ShowWhen
  17. * @description
  18. * The `showWhen` attribute takes a string that represents a platform or screen orientation.
  19. * The element the attribute is added to will only be shown when that platform or screen orientation is active.
  20. *
  21. * Complements the [hideWhen attribute](../HideWhen). If the `showWhen` attribute is used on an
  22. * element that also has the `hideWhen` attribute, the element will not show if `hideWhen` evaluates
  23. * to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
  24. * will not show if `hidden` evaluates to `true`.
  25. *
  26. * View the [Platform API docs](../../../platform/Platform) for more information on the different
  27. * platforms you can use.
  28. *
  29. * @usage
  30. * ```html
  31. * <div showWhen="android">
  32. * I am visible on Android!
  33. * </div>
  34. *
  35. * <div showWhen="ios">
  36. * I am visible on iOS!
  37. * </div>
  38. *
  39. * <div showWhen="android,ios">
  40. * I am visible on Android and iOS!
  41. * </div>
  42. *
  43. * <div showWhen="portrait">
  44. * I am visible on Portrait!
  45. * </div>
  46. *
  47. * <div showWhen="landscape">
  48. * I am visible on Landscape!
  49. * </div>
  50. * ```
  51. * @demo /docs/demos/src/show-when/
  52. * @see {@link ../HideWhen HideWhen API Docs}
  53. * @see {@link ../../../platform/Platform Platform API Docs}
  54. */
  55. var ShowWhen = (function (_super) {
  56. __extends(ShowWhen, _super);
  57. function ShowWhen(showWhen, plt, zone) {
  58. return _super.call(this, showWhen, plt, zone) || this;
  59. }
  60. // ngOnDestroy is implemented in DisplayWhen
  61. ShowWhen.decorators = [
  62. { type: Directive, args: [{
  63. selector: '[showWhen]',
  64. host: {
  65. '[class.hidden-show-when]': '!isMatch'
  66. }
  67. },] },
  68. ];
  69. /** @nocollapse */
  70. ShowWhen.ctorParameters = function () { return [
  71. { type: undefined, decorators: [{ type: Attribute, args: ['showWhen',] },] },
  72. { type: Platform, },
  73. { type: NgZone, },
  74. ]; };
  75. return ShowWhen;
  76. }(DisplayWhen));
  77. export { ShowWhen };
  78. //# sourceMappingURL=show-when.js.map