@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
330 lines (329 loc) • 12 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { Host, h } from "@stencil/core";
import { createColorClasses } from "../../../utils/theme";
export class Modal {
constructor() {
// Reference to the user's provided modal content
this.presented = false;
/**
* Node main title
*/
this.mainTitle = '';
/**
* If `true`, a backdrop will be displayed behind the modal.
*/
this.showBackdrop = true;
/**
* If `true`, the modal will be dismissed when the backdrop is clicked.
*/
this.backdropDismiss = true;
}
onBackdropTap() {
if (this.backdropDismiss) {
this.dismiss();
}
}
/**
* Present the modal overlay after it has been created.
*/
async present(video) {
if (this.presented) {
return;
}
// Wait for component to render before querying DOM
await new Promise(resolve => requestAnimationFrame(resolve));
const container = this.el.querySelector(`.lar-modal-components-slot`);
if (!container) {
throw new Error('container is undefined');
}
this.willPresent.emit();
container.appendChild(video);
this.presented = true;
this.didPresent.emit();
}
/**
* Present the modal overlay after it has been created.
*/
async dismiss() {
if (this.presented) {
this.willDismiss.emit();
this.didDismiss.emit();
}
}
render() {
return (h(Host, { key: '4636ebe5db68a9a899d6d3cb03711d5e4ef3d958', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-modal': true }), style: {
'zIndex': String(200 + (this.overlayIndex || 0)),
} }, h("lar-backdrop", { key: '1c5e11aeb656dd2fd88cd2a6db2ae5fa071fb12a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '80c4c42759dc505a64dc0ff6cc04eb2c516b212e', role: "dialog", onClick: () => this.dismiss(), class: "lar-video-modal-wrapper" }, h("div", { key: '129abbd920d0a6a800b24f76a60d1d686c5c0804', class: "lar-video-modal-content" }, h("div", { key: '35e676fa86495e9ec170337eaeda63315bbd3224', class: "lar-modal-components-slot" }), h("h3", { key: '09a39f9d3610d349efc3a05d887ea6dfdd1e1cd1' }, this.mainTitle), h("div", { key: '7b552b239817ce40ea1c76f66fd3b4dbb551931b', class: "tapinfo" }, h("lar-translate", { key: '139fbee9dae3dbd57f17ebe05e5342426d348482', t: 'cam.tap_to_exit_fullscreen' }))))));
}
static get is() { return "lar-video-modal"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["video-modal.scss"]
};
}
static get styleUrls() {
return {
"$": ["video-modal.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The icon color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"mainTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Node main title"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "main-title",
"defaultValue": "''"
},
"overlayIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Modal z-index"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "overlay-index"
},
"showBackdrop": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, a backdrop will be displayed behind the modal."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show-backdrop",
"defaultValue": "true"
},
"backdropDismiss": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the modal will be dismissed when the backdrop is clicked."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "backdrop-dismiss",
"defaultValue": "true"
},
"component": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ComponentRef",
"resolved": "Element | HTMLElement | string",
"references": {
"ComponentRef": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::ComponentRef"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The component to display inside of the modal."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "component"
}
};
}
static get events() {
return [{
"method": "willPresent",
"name": "larmodalwillpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the modal has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didPresent",
"name": "larmodaldidpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "willDismiss",
"name": "larmodalwilldismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didDismiss",
"name": "larmodaldiddismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"present": {
"complexType": {
"signature": "(video: HTMLVideoElement | HTMLCanvasElement) => Promise<void>",
"parameters": [{
"name": "video",
"type": "HTMLCanvasElement | HTMLVideoElement",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLVideoElement": {
"location": "global",
"id": "global::HTMLVideoElement"
},
"HTMLCanvasElement": {
"location": "global",
"id": "global::HTMLCanvasElement"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Present the modal overlay after it has been created.",
"tags": []
}
},
"dismiss": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Present the modal overlay after it has been created.",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "larbackdroptap",
"method": "onBackdropTap",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=video-modal.js.map