@bemit/consent-ui-mui/ConsentUiBoxEmbed/ConsentUiEmbedIframe.js

import React from 'react';
import Box from '@mui/material/Box';
import { ConsentUiBoxEmbed } from '@bemit/consent-ui-mui/ConsentUiBoxEmbed';
import { useEmbedState } from '@bemit/consent-ui-react/useEmbedState';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const ConsentUiEmbedIframe = ({
  service,
  icon,
  title,
  style,
  preview,
  previewAlt,
  blur,
  labels,
  pos,
  px = 2,
  py = 2,
  infoBtnUp,
  infoMaxWidth,
  maskBg = 'rgba(10,10,10,0.6)',
  children,
  ...props
}) => {
  const {
    serviceConsent,
    setServiceConsent,
    serviceInfo
  } = useEmbedState(service);
  return _jsxs(_Fragment, {
    children: [_jsx(Box, {
      px: px,
      py: py,
      style: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        zIndex: 2,
        background: maskBg,
        transition: '0.3s opacity ease-out',
        pointerEvents: serviceConsent ? 'none' : 'all',
        opacity: serviceConsent ? 0 : 1
      },
      children: _jsx(ConsentUiBoxEmbed, {
        labels: labels,
        service: service,
        serviceConsent: serviceConsent,
        setServiceConsent: setServiceConsent,
        icon: icon,
        title: title,
        serviceInfo: serviceInfo,
        infoBtnUp: infoBtnUp,
        infoMaxWidth: infoMaxWidth,
        pos: pos
      })
    }), typeof preview === 'string' ? _jsx(ImagePreview, {
      preview: preview,
      previewAlt: previewAlt,
      blur: blur,
      consent: serviceConsent
    }) : typeof preview === 'function' ? preview(serviceConsent) : preview, serviceConsent ? _jsx(EmbedIframe, {
      consent: serviceConsent,
      ...props,
      style: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        border: 0,
        zIndex: 0,
        ...(style || {})
      }
    }) : null]
  });
};
export const EmbedIframe = ({
  consent,
  src,
  srcOnInit,
  ...props
}) => {
  return _jsx(_Fragment, {
    children: consent ? _jsx("iframe", {
      src: consent === 1 && srcOnInit ? srcOnInit : src,
      ...props
    }) : null
  });
};
export const ImagePreview = ({
  consent,
  preview,
  previewAlt,
  blur = '0px'
}) => {
  return _jsx("img", {
    loading: 'lazy',
    src: preview,
    alt: previewAlt,
    style: {
      position: 'absolute',
      zIndex: 1,
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      border: 0,
      filter: consent ? 'blur(0px)' : 'blur(' + blur + ')',
      opacity: consent ? 0 : 1,
      transition: '0.8s opacity ease-out, 0.8s filter ease-out',
      pointerEvents: 'none'
    }
  });
};