@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
74 lines (70 loc) • 5.46 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C4h1muVj.js';
import { c as createColorClasses } from './theme-B02IfvGX.js';
const videoModalCss = "slot-fb[hidden].sc-lar-video-modal,slot[hidden].sc-lar-video-modal{display:initial !important}.lar-video-modal-wrapper.sc-lar-video-modal,.lar-modal-slot.sc-lar-video-modal,.lar-video-modal-content.sc-lar-video-modal{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);right:0;left:0;top:0;bottom:0;width:100%;height:100%;z-index:10;margin:0 auto;-webkit-overflow-scrolling:touch;-ms-flex-pack:center;justify-content:center;border-radius:var(--lar-node-box-border-radius, 0.5rem);overflow:hidden}.lar-video-modal-content.sc-lar-video-modal::before{content:\"\";position:absolute;inset:0;border-radius:var(--lar-node-box-border-radius, 0.5rem);pointer-events:none;z-index:100}h3.sc-lar-video-modal{position:absolute;top:0.5rem;left:0.5rem;right:auto;bottom:auto;margin:0;z-index:20;padding:0.25rem 0.5rem;font-weight:600;font-size:0.75rem;background:var(--lar-color-dark, #222428);color:var(--lar-color-light, #f4f5f8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:0.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 1rem)}h3.sc-lar-video-modal:empty{display:none !important}div.tapinfo.sc-lar-video-modal{-webkit-animation:fadeOut 1.5s linear forwards;animation:fadeOut 1.5s linear forwards;z-index:20;text-align:center}div.tapinfo.sc-lar-video-modal lar-translate.sc-lar-video-modal{display:inline-block;background:var(--lar-color-dark, #222428);color:var(--lar-color-light, #f4f5f8);display:inline-block !important;padding:0.5rem}video.sc-lar-video-modal,canvas.sc-lar-video-modal{-o-object-fit:contain;object-fit:contain}@-webkit-keyframes fadeOut{0%{opacity:var(--lar-modal-info-opacity, 0.8)}70%{opacity:var(--lar-modal-info-opacity, 0.8)}90%{opacity:var(--lar-modal-info-opacity, 0.8);-webkit-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}}@keyframes fadeOut{0%{opacity:var(--lar-modal-info-opacity, 0.8)}70%{opacity:var(--lar-modal-info-opacity, 0.8)}90%{opacity:var(--lar-modal-info-opacity, 0.8);-webkit-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}}";
const Modal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.willPresent = createEvent(this, "larmodalwillpresent");
this.didPresent = createEvent(this, "larmodaldidpresent");
this.willDismiss = createEvent(this, "larmodalwilldismiss");
this.didDismiss = createEvent(this, "larmodaldiddismiss");
// 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' }))))));
}
get el() { return getElement(this); }
};
Modal.style = videoModalCss;
export { Modal as lar_video_modal };
//# sourceMappingURL=lar-video-modal.entry.js.map