ion-app.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
  5. import { shouldUseCloseWatcher } from './hardware-back-button.js';
  6. import { c as config, a as printIonWarning } from './index4.js';
  7. import { b as getIonMode, a as isPlatform } from './ionic-global.js';
  8. const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
  9. const IonAppStyle0 = appCss;
  10. const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
  11. constructor() {
  12. super();
  13. this.__registerHost();
  14. }
  15. componentDidLoad() {
  16. if (Build.isBrowser) {
  17. rIC(async () => {
  18. const isHybrid = isPlatform(window, 'hybrid');
  19. if (!config.getBoolean('_testing')) {
  20. import('./index9.js').then((module) => module.startTapClick(config));
  21. }
  22. if (config.getBoolean('statusTap', isHybrid)) {
  23. import('./status-tap.js').then((module) => module.startStatusTap());
  24. }
  25. if (config.getBoolean('inputShims', needInputShims())) {
  26. /**
  27. * needInputShims() ensures that only iOS and Android
  28. * platforms proceed into this block.
  29. */
  30. const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
  31. import('./input-shims.js').then((module) => module.startInputShims(config, platform));
  32. }
  33. const hardwareBackButtonModule = await import('./hardware-back-button.js');
  34. const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
  35. if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
  36. hardwareBackButtonModule.startHardwareBackButton();
  37. }
  38. else {
  39. /**
  40. * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
  41. * then the close watcher will not be used.
  42. */
  43. if (shouldUseCloseWatcher()) {
  44. printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
  45. }
  46. hardwareBackButtonModule.blockHardwareBackButton();
  47. }
  48. if (typeof window !== 'undefined') {
  49. import('./keyboard2.js').then((module) => module.startKeyboardAssist(window));
  50. }
  51. import('./focus-visible.js').then((module) => (this.focusVisible = module.startFocusVisible()));
  52. });
  53. }
  54. }
  55. /**
  56. * Used to set focus on an element that uses `ion-focusable`.
  57. * Do not use this if focusing the element as a result of a keyboard
  58. * event as the focus utility should handle this for us. This method
  59. * should be used when we want to programmatically focus an element as
  60. * a result of another user action. (Ex: We focus the first element
  61. * inside of a popover when the user presents it, but the popover is not always
  62. * presented as a result of keyboard action.)
  63. */
  64. async setFocus(elements) {
  65. if (this.focusVisible) {
  66. this.focusVisible.setFocus(elements);
  67. }
  68. }
  69. render() {
  70. const mode = getIonMode(this);
  71. return (h(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
  72. [mode]: true,
  73. 'ion-page': true,
  74. 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
  75. } }));
  76. }
  77. get el() { return this; }
  78. static get style() { return IonAppStyle0; }
  79. }, [0, "ion-app", {
  80. "setFocus": [64]
  81. }]);
  82. const needInputShims = () => {
  83. /**
  84. * iOS always needs input shims
  85. */
  86. const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
  87. if (needsShimsIOS) {
  88. return true;
  89. }
  90. /**
  91. * Android only needs input shims when running
  92. * in the browser and only if the browser is using the
  93. * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
  94. */
  95. const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
  96. if (isAndroidMobileWeb) {
  97. return true;
  98. }
  99. return false;
  100. };
  101. const rIC = (callback) => {
  102. if ('requestIdleCallback' in window) {
  103. window.requestIdleCallback(callback);
  104. }
  105. else {
  106. setTimeout(callback, 32);
  107. }
  108. };
  109. function defineCustomElement$1() {
  110. if (typeof customElements === "undefined") {
  111. return;
  112. }
  113. const components = ["ion-app"];
  114. components.forEach(tagName => { switch (tagName) {
  115. case "ion-app":
  116. if (!customElements.get(tagName)) {
  117. customElements.define(tagName, App);
  118. }
  119. break;
  120. } });
  121. }
  122. const IonApp = App;
  123. const defineCustomElement = defineCustomElement$1;
  124. export { IonApp, defineCustomElement };