1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 | import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
|
7 |
|
8 | const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
|
9 |
|
10 | const backdropMdCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
|
11 |
|
12 | const Backdrop = proxyCustomElement(class extends HTMLElement {
|
13 | constructor() {
|
14 | super();
|
15 | this.__registerHost();
|
16 | this.__attachShadow();
|
17 | this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
|
18 | this.blocker = GESTURE_CONTROLLER.createBlocker({
|
19 | disableScroll: true
|
20 | });
|
21 | |
22 |
|
23 |
|
24 | this.visible = true;
|
25 | |
26 |
|
27 |
|
28 | this.tappable = true;
|
29 | |
30 |
|
31 |
|
32 | this.stopPropagation = true;
|
33 | }
|
34 | connectedCallback() {
|
35 | if (this.stopPropagation) {
|
36 | this.blocker.block();
|
37 | }
|
38 | }
|
39 | disconnectedCallback() {
|
40 | this.blocker.unblock();
|
41 | }
|
42 | onMouseDown(ev) {
|
43 | this.emitTap(ev);
|
44 | }
|
45 | emitTap(ev) {
|
46 | if (this.stopPropagation) {
|
47 | ev.preventDefault();
|
48 | ev.stopPropagation();
|
49 | }
|
50 | if (this.tappable) {
|
51 | this.ionBackdropTap.emit();
|
52 | }
|
53 | }
|
54 | render() {
|
55 | const mode = getIonMode(this);
|
56 | return (h(Host, { tabindex: "-1", "aria-hidden": "true", class: {
|
57 | [mode]: true,
|
58 | 'backdrop-hide': !this.visible,
|
59 | 'backdrop-no-tappable': !this.tappable,
|
60 | } }));
|
61 | }
|
62 | static get style() { return {
|
63 | ios: backdropIosCss,
|
64 | md: backdropMdCss
|
65 | }; }
|
66 | }, [33, "ion-backdrop", {
|
67 | "visible": [4],
|
68 | "tappable": [4],
|
69 | "stopPropagation": [4, "stop-propagation"]
|
70 | }, [[2, "click", "onMouseDown"]]]);
|
71 | function defineCustomElement() {
|
72 | if (typeof customElements === "undefined") {
|
73 | return;
|
74 | }
|
75 | const components = ["ion-backdrop"];
|
76 | components.forEach(tagName => { switch (tagName) {
|
77 | case "ion-backdrop":
|
78 | if (!customElements.get(tagName)) {
|
79 | customElements.define(tagName, Backdrop);
|
80 | }
|
81 | break;
|
82 | } });
|
83 | }
|
84 |
|
85 | export { Backdrop as B, defineCustomElement as d };
|