ion-loading.entry.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, c as createEvent, h, e as Host, f as getElement } from './index-527b9e34.js';
  5. import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-9898ed97.js';
  6. import { r as raf } from './helpers-d94bc8ad.js';
  7. import { c as createLockController } from './lock-controller-316928be.js';
  8. import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-d99dcb0a.js';
  9. import { g as getClassMap } from './theme-01f3f29c.js';
  10. import { c as config } from './index-cfd9c1f2.js';
  11. import { b as getIonMode } from './ionic-global-b26f573e.js';
  12. import { c as createAnimation } from './animation-8b25e105.js';
  13. import './index-a5d50daf.js';
  14. import './hardware-back-button-a7eb8233.js';
  15. import './framework-delegate-56b467ad.js';
  16. import './gesture-controller-314a54f6.js';
  17. /**
  18. * iOS Loading Enter Animation
  19. */
  20. const iosEnterAnimation = (baseEl) => {
  21. const baseAnimation = createAnimation();
  22. const backdropAnimation = createAnimation();
  23. const wrapperAnimation = createAnimation();
  24. backdropAnimation
  25. .addElement(baseEl.querySelector('ion-backdrop'))
  26. .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
  27. .beforeStyles({
  28. 'pointer-events': 'none',
  29. })
  30. .afterClearStyles(['pointer-events']);
  31. wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
  32. { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
  33. { offset: 1, opacity: 1, transform: 'scale(1)' },
  34. ]);
  35. return baseAnimation
  36. .addElement(baseEl)
  37. .easing('ease-in-out')
  38. .duration(200)
  39. .addAnimation([backdropAnimation, wrapperAnimation]);
  40. };
  41. /**
  42. * iOS Loading Leave Animation
  43. */
  44. const iosLeaveAnimation = (baseEl) => {
  45. const baseAnimation = createAnimation();
  46. const backdropAnimation = createAnimation();
  47. const wrapperAnimation = createAnimation();
  48. backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
  49. wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
  50. { offset: 0, opacity: 0.99, transform: 'scale(1)' },
  51. { offset: 1, opacity: 0, transform: 'scale(0.9)' },
  52. ]);
  53. return baseAnimation
  54. .addElement(baseEl)
  55. .easing('ease-in-out')
  56. .duration(200)
  57. .addAnimation([backdropAnimation, wrapperAnimation]);
  58. };
  59. /**
  60. * Md Loading Enter Animation
  61. */
  62. const mdEnterAnimation = (baseEl) => {
  63. const baseAnimation = createAnimation();
  64. const backdropAnimation = createAnimation();
  65. const wrapperAnimation = createAnimation();
  66. backdropAnimation
  67. .addElement(baseEl.querySelector('ion-backdrop'))
  68. .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
  69. .beforeStyles({
  70. 'pointer-events': 'none',
  71. })
  72. .afterClearStyles(['pointer-events']);
  73. wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
  74. { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
  75. { offset: 1, opacity: 1, transform: 'scale(1)' },
  76. ]);
  77. return baseAnimation
  78. .addElement(baseEl)
  79. .easing('ease-in-out')
  80. .duration(200)
  81. .addAnimation([backdropAnimation, wrapperAnimation]);
  82. };
  83. /**
  84. * Md Loading Leave Animation
  85. */
  86. const mdLeaveAnimation = (baseEl) => {
  87. const baseAnimation = createAnimation();
  88. const backdropAnimation = createAnimation();
  89. const wrapperAnimation = createAnimation();
  90. backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
  91. wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
  92. { offset: 0, opacity: 0.99, transform: 'scale(1)' },
  93. { offset: 1, opacity: 0, transform: 'scale(0.9)' },
  94. ]);
  95. return baseAnimation
  96. .addElement(baseEl)
  97. .easing('ease-in-out')
  98. .duration(200)
  99. .addAnimation([backdropAnimation, wrapperAnimation]);
  100. };
  101. const loadingIosCss = ".sc-ion-loading-ios-h{--min-width:auto;--width:auto;--min-height:auto;--height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-loading-ios-h{display:none}.loading-wrapper.sc-ion-loading-ios{display:-ms-flexbox;display:flex;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);opacity:0;z-index:10}ion-spinner.sc-ion-loading-ios{color:var(--spinner-color)}.sc-ion-loading-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));--max-width:270px;--max-height:90%;--spinner-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));--backdrop-opacity:var(--ion-backdrop-opacity, 0.3);color:var(--ion-text-color, #000);font-size:0.875rem}.loading-wrapper.sc-ion-loading-ios{border-radius:8px;-webkit-padding-start:34px;padding-inline-start:34px;-webkit-padding-end:34px;padding-inline-end:34px;padding-top:24px;padding-bottom:24px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.loading-translucent.sc-ion-loading-ios-h .loading-wrapper.sc-ion-loading-ios{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.loading-content.sc-ion-loading-ios{font-weight:bold}.loading-spinner.sc-ion-loading-ios+.loading-content.sc-ion-loading-ios{-webkit-margin-start:16px;margin-inline-start:16px}";
  102. const IonLoadingIosStyle0 = loadingIosCss;
  103. const loadingMdCss = ".sc-ion-loading-md-h{--min-width:auto;--width:auto;--min-height:auto;--height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-loading-md-h{display:none}.loading-wrapper.sc-ion-loading-md{display:-ms-flexbox;display:flex;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);opacity:0;z-index:10}ion-spinner.sc-ion-loading-md{color:var(--spinner-color)}.sc-ion-loading-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--max-width:280px;--max-height:90%;--spinner-color:var(--ion-color-primary, #0054e9);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));font-size:0.875rem}.loading-wrapper.sc-ion-loading-md{border-radius:2px;-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:24px;padding-inline-end:24px;padding-top:24px;padding-bottom:24px;-webkit-box-shadow:0 16px 20px rgba(0, 0, 0, 0.4);box-shadow:0 16px 20px rgba(0, 0, 0, 0.4)}.loading-spinner.sc-ion-loading-md+.loading-content.sc-ion-loading-md{-webkit-margin-start:16px;margin-inline-start:16px}";
  104. const IonLoadingMdStyle0 = loadingMdCss;
  105. const Loading = class {
  106. constructor(hostRef) {
  107. registerInstance(this, hostRef);
  108. this.didPresent = createEvent(this, "ionLoadingDidPresent", 7);
  109. this.willPresent = createEvent(this, "ionLoadingWillPresent", 7);
  110. this.willDismiss = createEvent(this, "ionLoadingWillDismiss", 7);
  111. this.didDismiss = createEvent(this, "ionLoadingDidDismiss", 7);
  112. this.didPresentShorthand = createEvent(this, "didPresent", 7);
  113. this.willPresentShorthand = createEvent(this, "willPresent", 7);
  114. this.willDismissShorthand = createEvent(this, "willDismiss", 7);
  115. this.didDismissShorthand = createEvent(this, "didDismiss", 7);
  116. this.delegateController = createDelegateController(this);
  117. this.lockController = createLockController();
  118. this.triggerController = createTriggerController();
  119. this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
  120. this.presented = false;
  121. this.onBackdropTap = () => {
  122. this.dismiss(undefined, BACKDROP);
  123. };
  124. this.overlayIndex = undefined;
  125. this.delegate = undefined;
  126. this.hasController = false;
  127. this.keyboardClose = true;
  128. this.enterAnimation = undefined;
  129. this.leaveAnimation = undefined;
  130. this.message = undefined;
  131. this.cssClass = undefined;
  132. this.duration = 0;
  133. this.backdropDismiss = false;
  134. this.showBackdrop = true;
  135. this.spinner = undefined;
  136. this.translucent = false;
  137. this.animated = true;
  138. this.htmlAttributes = undefined;
  139. this.isOpen = false;
  140. this.trigger = undefined;
  141. }
  142. onIsOpenChange(newValue, oldValue) {
  143. if (newValue === true && oldValue === false) {
  144. this.present();
  145. }
  146. else if (newValue === false && oldValue === true) {
  147. this.dismiss();
  148. }
  149. }
  150. triggerChanged() {
  151. const { trigger, el, triggerController } = this;
  152. if (trigger) {
  153. triggerController.addClickListener(el, trigger);
  154. }
  155. }
  156. connectedCallback() {
  157. prepareOverlay(this.el);
  158. this.triggerChanged();
  159. }
  160. componentWillLoad() {
  161. var _a;
  162. if (this.spinner === undefined) {
  163. const mode = getIonMode(this);
  164. this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
  165. }
  166. if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
  167. setOverlayId(this.el);
  168. }
  169. }
  170. componentDidLoad() {
  171. /**
  172. * If loading indicator was rendered with isOpen="true"
  173. * then we should open loading indicator immediately.
  174. */
  175. if (this.isOpen === true) {
  176. raf(() => this.present());
  177. }
  178. /**
  179. * When binding values in frameworks such as Angular
  180. * it is possible for the value to be set after the Web Component
  181. * initializes but before the value watcher is set up in Stencil.
  182. * As a result, the watcher callback may not be fired.
  183. * We work around this by manually calling the watcher
  184. * callback when the component has loaded and the watcher
  185. * is configured.
  186. */
  187. this.triggerChanged();
  188. }
  189. disconnectedCallback() {
  190. this.triggerController.removeClickListener();
  191. }
  192. /**
  193. * Present the loading overlay after it has been created.
  194. */
  195. async present() {
  196. const unlock = await this.lockController.lock();
  197. await this.delegateController.attachViewToDom();
  198. await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
  199. if (this.duration > 0) {
  200. this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
  201. }
  202. unlock();
  203. }
  204. /**
  205. * Dismiss the loading overlay after it has been presented.
  206. *
  207. * @param data Any data to emit in the dismiss events.
  208. * @param role The role of the element that is dismissing the loading.
  209. * This can be useful in a button handler for determining which button was
  210. * clicked to dismiss the loading.
  211. * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
  212. *
  213. * This is a no-op if the overlay has not been presented yet. If you want
  214. * to remove an overlay from the DOM that was never presented, use the
  215. * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
  216. */
  217. async dismiss(data, role) {
  218. const unlock = await this.lockController.lock();
  219. if (this.durationTimeout) {
  220. clearTimeout(this.durationTimeout);
  221. }
  222. const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
  223. if (dismissed) {
  224. this.delegateController.removeViewFromDom();
  225. }
  226. unlock();
  227. return dismissed;
  228. }
  229. /**
  230. * Returns a promise that resolves when the loading did dismiss.
  231. */
  232. onDidDismiss() {
  233. return eventMethod(this.el, 'ionLoadingDidDismiss');
  234. }
  235. /**
  236. * Returns a promise that resolves when the loading will dismiss.
  237. */
  238. onWillDismiss() {
  239. return eventMethod(this.el, 'ionLoadingWillDismiss');
  240. }
  241. renderLoadingMessage(msgId) {
  242. const { customHTMLEnabled, message } = this;
  243. if (customHTMLEnabled) {
  244. return h("div", { class: "loading-content", id: msgId, innerHTML: sanitizeDOMString(message) });
  245. }
  246. return (h("div", { class: "loading-content", id: msgId }, message));
  247. }
  248. render() {
  249. const { message, spinner, htmlAttributes, overlayIndex } = this;
  250. const mode = getIonMode(this);
  251. const msgId = `loading-${overlayIndex}-msg`;
  252. /**
  253. * If the message is defined, use that as the label.
  254. * Otherwise, don't set aria-labelledby.
  255. */
  256. const ariaLabelledBy = message !== undefined ? msgId : null;
  257. return (h(Host, Object.assign({ key: 'd6066c8b56b1fe4b597a243a7dab191ef0d21286', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
  258. zIndex: `${40000 + this.overlayIndex}`,
  259. }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '2431eda00a2a3f510f5dfc39b7c7d47c056dfa3d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cf210aaf5e754e4eccdb49cf7ead4647b3f9b2d1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fa9375143d391656d70e181d25b952c77c2fc6ec', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '8e4a4ed994f7f62df86b03696ac95162df41f52d', class: "loading-spinner" }, h("ion-spinner", { key: 'e5b323c272d365853ba92bd211e390b4fd4751d2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'cae35ec8c34800477bff3ebcec8010e632158233', tabindex: "0", "aria-hidden": "true" })));
  260. }
  261. get el() { return getElement(this); }
  262. static get watchers() { return {
  263. "isOpen": ["onIsOpenChange"],
  264. "trigger": ["triggerChanged"]
  265. }; }
  266. };
  267. Loading.style = {
  268. ios: IonLoadingIosStyle0,
  269. md: IonLoadingMdStyle0
  270. };
  271. export { Loading as ion_loading };