siam-ui-utils 2.2.25 → 2.2.27

package/dist/index.js

@@ -0,0 +1,33 @@
+import { CustomSelect } from "./select/index.js";
+import { Colxx, Separator } from "./CustomBootstrap.js";
+import { CustomSelectInput } from "./CustomSelectInput.js";
+import { DropzoneUploader } from "./dropzone-uploader/index.js";
+import { DropzoneUploaderDniDigital } from "./dropzone-uploader/dropzone-uploader-dni-digital/index.js";
+import { TomarFoto } from "./tomar-foto/index.js";
+import { CopyLink } from "./copy-link/index.js";
+import { Timer, formatTiempo } from "./timer/index.js";
+import { ViewLayout } from "./view-layout/index.js";
+import { WhereByRoom } from "./where-by-room/index.js";
+import * as IntlMessages from "./IntlMessages.js";
+import { withRouter } from "./bridges/with-router-bridge.js";
+import { CustomInputCheckbox } from "./custom-input/CustomInputCheckbox.js";
+import { CustomInputRadio } from "./custom-input/CustomInputRadio.js";
+export {
+  Colxx,
+  CopyLink,
+  CustomInputCheckbox,
+  CustomInputRadio,
+  CustomSelect,
+  CustomSelectInput,
+  DropzoneUploader,
+  DropzoneUploaderDniDigital,
+  IntlMessages,
+  Separator,
+  Timer,
+  TomarFoto,
+  ViewLayout,
+  WhereByRoom,
+  formatTiempo,
+  withRouter
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/select/constants.js

@@ -0,0 +1,8 @@
+const LABELS = {
+  SIN_DATOS: "SIN DATOS",
+  SELECCIONE: "SELECCIONE..."
+};
+export {
+  LABELS
+};
+//# sourceMappingURL=constants.js.map

package/dist/select/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/select/constants.js"],"sourcesContent":["export const LABELS = {\r\n  SIN_DATOS: \"SIN DATOS\",\r\n  SELECCIONE: \"SELECCIONE...\",\r\n};\r\n"],"names":[],"mappings":"AAAY,MAAC,SAAS;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AACd;"}

package/dist/select/index.js

@@ -0,0 +1,90 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Select from "react-select";
+import { Label } from "reactstrap";
+import { CustomSelectInput } from "../CustomSelectInput.js";
+import { LABELS } from "./constants.js";
+import "react-tagsinput/react-tagsinput.css";
+const { SIN_DATOS, SELECCIONE } = LABELS;
+const CustomSelect = (props) => {
+  const [firstElement] = useState(props.firstElement);
+  const [newItem] = useState(props.newItem);
+  const [selectedIoption, setIoption] = useState({});
+  const [customStylesOption] = useState(props.customStylesOption);
+  const [customStyles, setCustomStyles] = useState({});
+  useEffect(() => {
+    if (newItem) {
+      props.options.push(newItem);
+    }
+  }, [newItem, props.options]);
+  useEffect(() => {
+    const { options = [] } = props;
+    if (firstElement && Number(options?.length) > 1) {
+      const propIOption = options.filter((item) => item === firstElement);
+      if (propIOption?.length === 0) {
+        props.options.unshift(firstElement);
+      }
+    }
+  }, [firstElement, props.options]);
+  useEffect(() => {
+    const { selectedValue } = props;
+    const errorProp = { value: null };
+    if (selectedValue || firstElement && firstElement.value === selectedValue) {
+      const propIOption = props.options.filter(({ value }) => {
+        return JSON.stringify(value) === JSON.stringify(selectedValue);
+      });
+      if (propIOption[0]) {
+        setIoption(propIOption[0]);
+        if (!Object.getOwnPropertyDescriptor(selectedIoption, "label")) {
+          props.onChange(propIOption[0]);
+        }
+      } else {
+        setIoption(errorProp);
+        props.onChange(errorProp);
+      }
+    } else if (props.options.length > 0) {
+      setIoption(errorProp);
+      props.onChange(errorProp);
+    }
+  }, [props.selectedValue, props.options, firstElement]);
+  useEffect(() => {
+    if (customStylesOption) {
+      const stylesOption = {
+        option: (base, { data }) => {
+          return {
+            ...base,
+            color: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "blue !important" : "",
+            fontWeight: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "bold" : ""
+          };
+        }
+      };
+      setCustomStyles(stylesOption);
+    }
+  }, [customStylesOption]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.label && props.label !== "" && /* @__PURE__ */ jsxs(Label, { className: "mb-0", children: [
+      props.label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        ...props,
+        components: { Input: CustomSelectInput },
+        className: "react-select",
+        classNamePrefix: "react-select",
+        name: "form-field-name",
+        value: Object.getOwnPropertyDescriptor(selectedIoption, "label") ? selectedIoption : "",
+        onChange: props.onChange,
+        options: props.options,
+        placeholder: Number(props.options.length) === 0 ? SIN_DATOS : props.placeholder || SELECCIONE,
+        isDisabled: props.disabled,
+        styles: customStyles
+      }
+    )
+  ] });
+};
+export {
+  CustomSelect
+};
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/select/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport Select from 'react-select';\r\nimport { Label } from 'reactstrap';\r\nimport {CustomSelectInput} from '../CustomSelectInput';\r\nimport { LABELS } from './constants';\r\nimport 'react-tagsinput/react-tagsinput.css';\r\n\r\ninterface ICustomStylesOption {\r\n  fieldMatch: string;\r\n  valueMatch: any;\r\n}\r\ninterface IOption {\r\n  label: string;\r\n  value: any;\r\n  fields?: any;\r\n}\r\ninterface IOption {\r\n  label: string;\r\n  value: any;\r\n  fields?: any;\r\n}\r\ninterface Props {\r\n  label: string;\r\n  tabIndex: number;\r\n  options: [IOption];\r\n  onChange: any;\r\n  selectedValue: any;\r\n  firstElement?: IOption; // no ingresar null como VALUE del elemento, setear '' ya que lo toma como que no se selecciono nada\r\n  newItem?: IOption;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  customStylesOption?: ICustomStylesOption;\r\n}\r\n\r\nconst {SIN_DATOS, SELECCIONE}=LABELS\r\n\r\nexport const CustomSelect: React.FC<Props> = (props: Props) => {\r\n  const [firstElement] = useState(props.firstElement);\r\n  const [newItem] = useState(props.newItem);\r\n  const [selectedIoption, setIoption] = useState({});\r\n  const [customStylesOption] = useState(props.customStylesOption);\r\n  const [customStyles, setCustomStyles] = useState({});\r\n\r\n  // agrega items\r\n  useEffect(() => {\r\n    if (newItem) {\r\n      props.options.push(newItem);\r\n    }\r\n  }, [newItem, props.options]);\r\n\r\n  // Seleccion del 1er item.\r\n  useEffect(() => {\r\n    const { options = [] } = props;\r\n    if (firstElement && Number(options?.length) > 1) {\r\n      const propIOption = options.filter((item) => item === firstElement);\r\n\r\n      if (propIOption?.length === 0) {\r\n        props.options.unshift(firstElement);\r\n      }\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [firstElement, props.options]);\r\n\r\n  // selecciona un valor seteado dentro de la coleccion\r\n  useEffect(() => {\r\n    const { selectedValue } = props;\r\n    const errorProp = { value: null };\r\n\r\n    if (\r\n      selectedValue ||\r\n      (firstElement && firstElement.value === selectedValue)\r\n    ) {\r\n      const propIOption = props.options.filter(({ value }) => {\r\n        return JSON.stringify(value) === JSON.stringify(selectedValue);\r\n      });\r\n\r\n      if (propIOption[0]) {\r\n        setIoption(propIOption[0]);\r\n        if (!Object.getOwnPropertyDescriptor(selectedIoption, 'label')) {\r\n          props.onChange(propIOption[0]);\r\n        }\r\n      } else {\r\n        setIoption(errorProp);\r\n        props.onChange(errorProp);\r\n      }\r\n    } else if (props.options.length > 0) {\r\n      setIoption(errorProp);\r\n      props.onChange(errorProp);\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [props.selectedValue, props.options, firstElement]);\r\n\r\n  useEffect(() => {\r\n    if (customStylesOption) {\r\n      const stylesOption = {\r\n        option: (base: any, { data }: any) => {\r\n          return {\r\n            ...base,\r\n            color:\r\n              data.fields &&\r\n              data.fields[customStylesOption.fieldMatch] ===\r\n                customStylesOption.valueMatch\r\n                ? 'blue !important'\r\n                : '',\r\n            fontWeight:\r\n              data.fields &&\r\n              data.fields[customStylesOption.fieldMatch] ===\r\n                customStylesOption.valueMatch\r\n                ? 'bold'\r\n                : '',\r\n          };\r\n        },\r\n      };\r\n      setCustomStyles(stylesOption);\r\n    }\r\n  }, [customStylesOption]);\r\n\r\n  return (\r\n    <>\r\n      {props.label && props.label !== '' && (\r\n        <Label className=\"mb-0\">{props.label}:</Label>\r\n      )}\r\n      <Select\r\n        {...props}\r\n        components={{ Input: CustomSelectInput }}\r\n        className=\"react-select\"\r\n        classNamePrefix=\"react-select\"\r\n        name=\"form-field-name\"\r\n        value={\r\n          Object.getOwnPropertyDescriptor(selectedIoption, 'label')\r\n            ? selectedIoption\r\n            : ''\r\n        }\r\n        onChange={props.onChange}\r\n        options={props.options}\r\n        placeholder={\r\n          Number(props.options.length) === 0\r\n            ? SIN_DATOS\r\n            : props.placeholder || SELECCIONE\r\n        }\r\n        isDisabled={props.disabled}\r\n        styles={customStyles}\r\n      />\r\n    </>\r\n  );\r\n};\r\n\r\n"],"names":[],"mappings":"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"}

package/dist/timer/index.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "./styles.scss";
+const formatTiempo = (ms) => {
+  if (ms == null) return "--:--";
+  const absMs = Math.abs(ms);
+  const totalSec = Math.floor(absMs / 1e3);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  const formatted = `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  return ms < 0 ? `-${formatted}` : formatted;
+};
+const getTimerColorClass = (ms, maxTime) => {
+  if (!maxTime) return "";
+  const percent = ms / maxTime;
+  if (percent > 0.33) return "timer-green";
+  if (percent > 0.15) return "timer-yellow";
+  if (percent > 0) return "timer-red";
+  if (ms === 0) return "timer-out";
+  if (ms < 0) return "timer-over";
+  return "";
+};
+const Timer = ({
+  initialMinutes = 0,
+  icon = true,
+  className = "",
+  active = true,
+  style = {}
+}) => {
+  const initialMs = initialMinutes * 60 * 1e3;
+  const [ms, setMs] = useState(initialMs);
+  const intervalRef = useRef();
+  useEffect(() => {
+    if (!active) return;
+    intervalRef.current = setInterval(() => {
+      setMs((prev) => prev - 1e3);
+    }, 1e3);
+    return () => clearInterval(intervalRef.current);
+  }, [active]);
+  useEffect(() => {
+    setMs(initialMs);
+  }, [initialMs]);
+  const timerColorClass = getTimerColorClass(ms, initialMs);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `av-video-timer timer ${timerColorClass} ${className}`,
+      style,
+      children: [
+        icon && /* @__PURE__ */ jsx("i", { className: "icon-clock timer" }),
+        formatTiempo(ms)
+      ]
+    }
+  );
+};
+export {
+  Timer,
+  formatTiempo
+};
+//# sourceMappingURL=index.js.map

package/dist/timer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/timer/index.jsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\r\nimport './styles.scss';\r\n\r\nexport const formatTiempo = (ms) => {\r\n  if (ms == null) return '--:--';\r\n  const absMs = Math.abs(ms);\r\n  const totalSec = Math.floor(absMs / 1000);\r\n  const min = Math.floor(totalSec / 60);\r\n  const sec = totalSec % 60;\r\n  const formatted = `${min.toString().padStart(2, '0')}:${sec\r\n    .toString()\r\n    .padStart(2, '0')}`;\r\n  return ms < 0 ? `-${formatted}` : formatted;\r\n};\r\n\r\nconst getTimerColorClass = (ms, maxTime) => {\r\n  if (!maxTime) return '';\r\n  const percent = ms / maxTime;\r\n  if (percent > 0.33) return 'timer-green';\r\n  if (percent > 0.15) return 'timer-yellow';\r\n  if (percent > 0) return 'timer-red';\r\n  if (ms === 0) return 'timer-out';\r\n  if (ms < 0) return 'timer-over';\r\n  return '';\r\n};\r\n\r\nconst Timer = ({\r\n  initialMinutes = 0,\r\n  icon = true,\r\n  className = '',\r\n  active = true,\r\n  style = {},\r\n}) => {\r\n  const initialMs = initialMinutes * 60 * 1000;\r\n  const [ms, setMs] = useState(initialMs);\r\n  const intervalRef = useRef();\r\n\r\n  useEffect(() => {\r\n    if (!active) return;\r\n    intervalRef.current = setInterval(() => {\r\n      setMs((prev) => prev - 1000);\r\n    }, 1000);\r\n    return () => clearInterval(intervalRef.current);\r\n  }, [active]);\r\n\r\n  useEffect(() => {\r\n    setMs(initialMs);\r\n  }, [initialMs]);\r\n\r\n  const timerColorClass = getTimerColorClass(ms, initialMs);\r\n\r\n  return (\r\n    <span\r\n      className={`av-video-timer timer ${timerColorClass} ${className}`}\r\n      style={style}\r\n    >\r\n      {icon && <i className=\"icon-clock timer\" />}\r\n      {formatTiempo(ms)}\r\n    </span>\r\n  );\r\n};\r\nexport { Timer };\r\n"],"names":[],"mappings":";;;AAGO,MAAM,eAAe,CAAC,OAAO;AAClC,MAAI,MAAM,KAAM,QAAO;AACvB,QAAM,QAAQ,KAAK,IAAI,EAAE;AACzB,QAAM,WAAW,KAAK,MAAM,QAAQ,GAAI;AACxC,QAAM,MAAM,KAAK,MAAM,WAAW,EAAE;AACpC,QAAM,MAAM,WAAW;AACvB,QAAM,YAAY,GAAG,IAAI,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,IACrD,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AACnB,SAAO,KAAK,IAAI,IAAI,SAAS,KAAK;AACpC;AAEA,MAAM,qBAAqB,CAAC,IAAI,YAAY;AAC1C,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,UAAU,KAAK;AACrB,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,OAAO,EAAG,QAAO;AACrB,MAAI,KAAK,EAAG,QAAO;AACnB,SAAO;AACT;AAEA,MAAM,QAAQ,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ,CAAA;AACV,MAAM;AACJ,QAAM,YAAY,iBAAiB,KAAK;AACxC,QAAM,CAAC,IAAI,KAAK,IAAI,SAAS,SAAS;AACtC,QAAM,cAAc,OAAA;AAEpB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,gBAAY,UAAU,YAAY,MAAM;AACtC,YAAM,CAAC,SAAS,OAAO,GAAI;AAAA,IAC7B,GAAG,GAAI;AACP,WAAO,MAAM,cAAc,YAAY,OAAO;AAAA,EAChD,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,UAAM,SAAS;AAAA,EACjB,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,kBAAkB,mBAAmB,IAAI,SAAS;AAExD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,wBAAwB,eAAe,IAAI,SAAS;AAAA,MAC/D;AAAA,MAEC,UAAA;AAAA,QAAA,QAAQ,oBAAC,KAAA,EAAE,WAAU,mBAAA,CAAmB;AAAA,QACxC,aAAa,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/dist/tomar-foto/index.js

@@ -0,0 +1,62 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Row } from "reactstrap";
+import { TAKE_PHOTO } from "../constants.js";
+import imgHacerFoto from "../assets/img/take-photo.png.js";
+import { Colxx } from "../CustomBootstrap.js";
+import { DropzoneUploader } from "../dropzone-uploader/index.js";
+const TomarFoto = ({
+  onFilesSelectedSelfie = () => {
+  },
+  isMobile = false
+}) => {
+  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);
+  const {
+    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,
+    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,
+    TAKE_PHOTO_MESSAGE
+  } = TAKE_PHOTO;
+  const handleFilesSelectedSelfie = (files) => {
+    setTotalFilesSelectedSelfie(files.length);
+    onFilesSelectedSelfie(files);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Row, { className: "pt-2 ml-4", children: /* @__PURE__ */ jsx(Colxx, { xxs: "11", md: "5", children: LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE }) }),
+    /* @__PURE__ */ jsx(Row, { className: "pt-2 ml-2", children: /* @__PURE__ */ jsx(Colxx, { xxs: "12", md: "9", children: isMobile ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Colxx, { xxs: "12", className: "text-center", children: [
+      filesTotalSelectedSelfie === 0 && /* @__PURE__ */ jsx(
+        "img",
+        {
+          style: { width: "97%" },
+          alt: "hacerFotoDNI",
+          src: imgHacerFoto
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropzoneUploader,
+        {
+          className: "pt-2 ml-2",
+          maxFiles: 1,
+          onChangeFiles: handleFilesSelectedSelfie,
+          totalFiles: filesTotalSelectedSelfie,
+          accept: "image/jpg,image/jpeg",
+          capture: "environment",
+          nameFileLabel: TAKE_PHOTO_MESSAGE
+        }
+      )
+    ] }) }) : /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: "view-icon iconsminds-smartphone-4 ml-2 mr-2",
+        style: {
+          color: "red",
+          margin: "10px 10px 0px 10px"
+        },
+        children: MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE
+      }
+    ) }) })
+  ] });
+};
+export {
+  TomarFoto
+};
+//# sourceMappingURL=index.js.map

package/dist/tomar-foto/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/tomar-foto/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Row } from 'reactstrap';\r\nimport { DropzoneUploader, Colxx } from '../';\r\nimport { TAKE_PHOTO } from '../constants';\r\nimport imgHacerFoto from '../assets/img/take-photo.png';\r\n\r\n \r\nexport const TomarFoto = ({\r\n  onFilesSelectedSelfie = () => {},\r\n  isMobile = false,\r\n}) => {\r\n  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);\r\n  const {\r\n    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,\r\n    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,\r\n    TAKE_PHOTO_MESSAGE,\r\n  } = TAKE_PHOTO;\r\n\r\n  const handleFilesSelectedSelfie = (files) => {\r\n    setTotalFilesSelectedSelfie(files.length);\r\n    onFilesSelectedSelfie(files);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Row className=\"pt-2 ml-4\">\r\n        <Colxx xxs=\"11\" md=\"5\">\r\n          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}\r\n        </Colxx>\r\n      </Row>\r\n      <Row className=\"pt-2 ml-2\">\r\n        <Colxx xxs=\"12\" md=\"9\">\r\n          {isMobile ? (\r\n            <>\r\n              <Colxx xxs=\"12\" className=\"text-center\">\r\n                {filesTotalSelectedSelfie === 0 && (\r\n                  <img\r\n                    style={{ width: '97%' }}\r\n                    alt=\"hacerFotoDNI\"\r\n                    src={imgHacerFoto}\r\n                  />\r\n                )}\r\n                <DropzoneUploader\r\n                  className=\"pt-2 ml-2\"\r\n                  maxFiles={1}\r\n                  onChangeFiles={handleFilesSelectedSelfie}\r\n                  totalFiles={filesTotalSelectedSelfie}\r\n                  accept=\"image/jpg,image/jpeg\"\r\n                  capture=\"environment\"\r\n                  nameFileLabel={TAKE_PHOTO_MESSAGE}\r\n                />\r\n              </Colxx>\r\n            </>\r\n          ) : (\r\n            <h2\r\n              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}\r\n              style={{\r\n                color: 'red',\r\n                margin: '10px 10px 0px 10px',\r\n              }}\r\n            >\r\n              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}\r\n            </h2>\r\n          )}\r\n        </Colxx>\r\n      </Row>\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,YAAY,CAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,CAAC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,4BAA4B,CAAC,UAAU;AAC3C,gCAA4B,MAAM,MAAM;AACxC,0BAAsB,KAAK;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,OAAA,EAAM,KAAI,MAAK,IAAG,KAChB,UAAA,uCAAA,CACH,GACF;AAAA,wBACC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,SAAM,KAAI,MAAK,IAAG,KAChB,qBACC,oBAAA,UAAA,EACE,UAAA,qBAAC,SAAM,KAAI,MAAK,WAAU,eACvB,UAAA;AAAA,MAAA,6BAA6B,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,KAAI;AAAA,UACJ,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,eAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF,GACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA,GAGP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/view-layout/button-editor.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import "./styles.scss";
+const ButtonEditor = ({ activo, onClick }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `visualizador-editor-btn ${activo ? "visualizador-editor-btn--activo" : "visualizador-editor-btn--inactivo"}`,
+    onClick,
+    children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("i", { className: "icon-eye simple-icon-eye" }) })
+  }
+);
+export {
+  ButtonEditor as default
+};
+//# sourceMappingURL=button-editor.js.map

package/dist/view-layout/button-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-editor.js","sources":["../../src/view-layout/button-editor.jsx"],"sourcesContent":["import './styles.scss';\r\n\r\nconst ButtonEditor = ({ activo, onClick }) => (\r\n  <button\r\n    className={`visualizador-editor-btn ${\r\n      activo\r\n        ? 'visualizador-editor-btn--activo'\r\n        : 'visualizador-editor-btn--inactivo'\r\n    }`}\r\n    onClick={onClick}\r\n  >\r\n    <span>\r\n      <i className=\"icon-eye simple-icon-eye\" />\r\n    </span>\r\n  </button>\r\n);\r\n\r\nexport default ButtonEditor;\r\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe,CAAC,EAAE,QAAQ,cAC9B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,2BACT,SACI,oCACA,mCACN;AAAA,IACA;AAAA,IAEA,8BAAC,QAAA,EACC,UAAA,oBAAC,KAAA,EAAE,WAAU,4BAA2B,EAAA,CAC1C;AAAA,EAAA;AACF;"}

package/dist/view-layout/constants.js

@@ -0,0 +1,11 @@
+const GRID_SIZES = {
+  sm: { cols: 18, rows: 18 },
+  md: { cols: 12, rows: 12 },
+  lg: { cols: 6, rows: 6 }
+};
+const LOCALHOST = ["localhost", "127.0.0.1"];
+export {
+  GRID_SIZES,
+  LOCALHOST
+};
+//# sourceMappingURL=constants.js.map

package/dist/view-layout/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/view-layout/constants.js"],"sourcesContent":["export const GRID_SIZES = {\r\n  sm: { cols: 18, rows: 18 },\r\n  md: { cols: 12, rows: 12 },\r\n  lg: { cols: 6, rows: 6 },\r\n};\r\n\r\nexport const LOCALHOST = ['localhost', '127.0.0.1'];\r\n"],"names":[],"mappings":"AAAY,MAAC,aAAa;AAAA,EACxB,IAAI,EAAE,MAAM,IAAI,MAAM,GAAE;AAAA,EACxB,IAAI,EAAE,MAAM,IAAI,MAAM,GAAE;AAAA,EACxB,IAAI,EAAE,MAAM,GAAG,MAAM,EAAC;AACxB;AAEY,MAAC,YAAY,CAAC,aAAa,WAAW;"}

package/dist/view-layout/editor-layer.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./styles.scss";
+const EditorLayer = ({ gridCols, gridRows }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "editor-layer",
+      style: {
+        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+        gridTemplateRows: `repeat(${gridRows}, 1fr)`
+      },
+      children: Array.from({ length: gridRows * gridCols }).map((_, idx) => {
+        const x = idx % gridCols;
+        const y = Math.floor(idx / gridCols);
+        return /* @__PURE__ */ jsx("div", { className: "editor-layer-cell", children: /* @__PURE__ */ jsxs("div", { className: "editor-layer-cell-coord", children: [
+          "x:",
+          x,
+          ";y:",
+          y
+        ] }) }, `cell-${x}-${y}`);
+      })
+    }
+  );
+};
+export {
+  EditorLayer as default
+};
+//# sourceMappingURL=editor-layer.js.map

package/dist/view-layout/editor-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-layer.js","sources":["../../src/view-layout/editor-layer.jsx"],"sourcesContent":["import './styles.scss';\r\n\r\nconst EditorLayer = ({ gridCols, gridRows }) => {\r\n  return (\r\n    <div\r\n      className=\"editor-layer\"\r\n      style={{\r\n        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,\r\n        gridTemplateRows: `repeat(${gridRows}, 1fr)`,\r\n      }}\r\n    >\r\n      {Array.from({ length: gridRows * gridCols }).map((_, idx) => {\r\n        const x = idx % gridCols;\r\n        const y = Math.floor(idx / gridCols);\r\n        return (\r\n          <div key={`cell-${x}-${y}`} className=\"editor-layer-cell\">\r\n            <div className=\"editor-layer-cell-coord\">\r\n              x:{x};y:{y}\r\n            </div>\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default EditorLayer;\r\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc,CAAC,EAAE,UAAU,eAAe;AAC9C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,qBAAqB,UAAU,QAAQ;AAAA,QACvC,kBAAkB,UAAU,QAAQ;AAAA,MAAA;AAAA,MAGrC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,QAAQ;AAC3D,cAAM,IAAI,MAAM;AAChB,cAAM,IAAI,KAAK,MAAM,MAAM,QAAQ;AACnC,mCACG,OAAA,EAA2B,WAAU,qBACpC,UAAA,qBAAC,OAAA,EAAI,WAAU,2BAA0B,UAAA;AAAA,UAAA;AAAA,UACpC;AAAA,UAAE;AAAA,UAAI;AAAA,QAAA,EAAA,CACX,EAAA,GAHQ,QAAQ,CAAC,IAAI,CAAC,EAIxB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/view-layout/index.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, createElement } from "react";
+import SlotWrapper from "./slot-wrapper.js";
+import EditorLayer from "./editor-layer.js";
+import { GRID_SIZES, LOCALHOST } from "./constants.js";
+import ButtonEditor from "./button-editor.js";
+import "./styles.scss";
+const ViewLayout = ({
+  slots = [],
+  size = "md",
+  alto = 80,
+  ancho = 90,
+  server = window?.location?.hostname,
+  ...props
+}) => {
+  const isLocalhost = LOCALHOST.includes(server);
+  const [isEditorActivo, setEditorActivo] = useState(false);
+  const gridCols = GRID_SIZES[size].cols;
+  const gridRows = GRID_SIZES[size].rows;
+  return /* @__PURE__ */ jsxs("div", { className: "visualizador-container", children: [
+    isLocalhost && /* @__PURE__ */ jsx(
+      ButtonEditor,
+      {
+        activo: isEditorActivo,
+        onClick: () => setEditorActivo((prev) => !prev)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "visualizador-grid-css",
+        style: {
+          maxWidth: `${ancho}vw`,
+          height: `${alto}vh`,
+          gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+          gridTemplateRows: `repeat(${gridRows}, 1fr)`
+        },
+        ...props,
+        children: [
+          isEditorActivo && /* @__PURE__ */ jsx(EditorLayer, { gridCols, gridRows }),
+          slots.map((slot) => {
+            const { x, y, w, h, legend } = slot;
+            return /* @__PURE__ */ createElement(SlotWrapper, { ...slot, legend, key: slot.slot });
+          })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ViewLayout
+};
+//# sourceMappingURL=index.js.map

package/dist/view-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/view-layout/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\r\nimport SlotWrapper from './slot-wrapper';\r\nimport { ItemSlot } from './item-slot';\r\nimport EditorLayer from './editor-layer.jsx';\r\nimport { GRID_SIZES, LOCALHOST } from './constants';\r\nimport ButtonEditor from './button-editor.jsx';\r\nimport './styles.scss';\r\n\r\ninterface LayoutProps {\r\n  slots: ItemSlot[];\r\n  alto?: number;\r\n  ancho?: number;\r\n  size?: 'sm' | 'md' | 'lg';\r\n  [key: string]: any;\r\n}\r\n\r\nconst ViewLayout: FC<LayoutProps> = ({\r\n  slots = [],\r\n  size = 'md',\r\n  alto = 80,\r\n  ancho = 90,\r\n  server = window?.location?.hostname,\r\n  ...props\r\n}) => {\r\n  \r\n  const isLocalhost=LOCALHOST.includes(server);\r\n\r\n  const [isEditorActivo, setEditorActivo] = useState(false);\r\n  const gridCols = GRID_SIZES[size].cols;\r\n  const gridRows = GRID_SIZES[size].rows;\r\n  return (\r\n    <div className=\"visualizador-container\">\r\n      {isLocalhost && (\r\n        <ButtonEditor\r\n          activo={isEditorActivo}\r\n          onClick={() => setEditorActivo((prev) => !prev)}\r\n        />\r\n      )}\r\n\r\n      <div\r\n        className=\"visualizador-grid-css\"\r\n        style={{\r\n          maxWidth: `${ancho}vw`,\r\n          height: `${alto}vh`,\r\n          gridTemplateColumns: `repeat(${gridCols}, 1fr)`,\r\n          gridTemplateRows: `repeat(${gridRows}, 1fr)`,\r\n        }}\r\n        {...props}\r\n      >\r\n        {isEditorActivo && (\r\n          <EditorLayer gridCols={gridCols} gridRows={gridRows} />\r\n        )}\r\n        {slots.map((slot) => {\r\n          const { x, y, w, h, legend } = slot;\r\n          return <SlotWrapper {...slot} legend={legend} key={slot.slot} />;\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport { ViewLayout };\r\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,aAA8B,CAAC;AAAA,EACnC,QAAQ,CAAA;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS,QAAQ,UAAU;AAAA,EAC3B,GAAG;AACL,MAAM;AAEJ,QAAM,cAAY,UAAU,SAAS,MAAM;AAE3C,QAAM,CAAC,gBAAgB,eAAe,IAAI,SAAS,KAAK;AACxD,QAAM,WAAW,WAAW,IAAI,EAAE;AAClC,QAAM,WAAW,WAAW,IAAI,EAAE;AAClC,SACE,qBAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,IAAA,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,gBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAIlD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,UAAU,GAAG,KAAK;AAAA,UAClB,QAAQ,GAAG,IAAI;AAAA,UACf,qBAAqB,UAAU,QAAQ;AAAA,UACvC,kBAAkB,UAAU,QAAQ;AAAA,QAAA;AAAA,QAErC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,kBACC,oBAAC,aAAA,EAAY,UAAoB,SAAA,CAAoB;AAAA,UAEtD,MAAM,IAAI,CAAC,SAAS;AACnB,kBAAM,EAAE,GAAG,GAAG,GAAG,GAAG,WAAW;AAC/B,iDAAQ,aAAA,EAAa,GAAG,MAAM,QAAgB,KAAK,KAAK,MAAM;AAAA,UAChE,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/view-layout/slot-wrapper.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const SlotWrapper = ({
+  slot = 1,
+  component = null,
+  x = 0,
+  y = 0,
+  w = 2,
+  h = 2,
+  align = "stretch",
+  contentSize = "medium",
+  direction = "column",
+  justify = "flex-start",
+  legend,
+  showBorder = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: `visualizador-slot visualizador-slot-content--${contentSize} visualizador-slot--${direction} visualizador-slot-align--${align} visualizador-slot-justify--${justify} ` + (!showBorder ? "visualizador-slot--no-border" : ""),
+      style: {
+        position: "relative",
+        gridColumn: `${x + 1} / span ${w}`,
+        gridRow: `${y + 1} / span ${h}`,
+        display: "flex",
+        overflow: "hidden",
+        border: showBorder ? void 0 : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "slot-legend", children: legend }),
+        /* @__PURE__ */ jsx("div", { className: "slot-content", children: component })
+      ]
+    },
+    slot
+  );
+};
+export {
+  SlotWrapper as default
+};
+//# sourceMappingURL=slot-wrapper.js.map

package/dist/view-layout/slot-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-wrapper.js","sources":["../../src/view-layout/slot-wrapper.tsx"],"sourcesContent":["import React, { FC } from 'react';\r\nimport { ItemSlot } from './item-slot';\r\n\r\nconst SlotWrapper: FC<ItemSlot> = ({\r\n  slot = 1,\r\n  component = null,\r\n  x = 0,\r\n  y = 0,\r\n  w = 2,\r\n  h = 2,\r\n  align = 'stretch',\r\n  contentSize = 'medium',\r\n  direction = 'column',\r\n  justify = 'flex-start',\r\n  legend,\r\n  showBorder = false,\r\n}) => {\r\n  return (\r\n    <fieldset\r\n      key={slot}\r\n      className={\r\n        `visualizador-slot ` +\r\n        `visualizador-slot-content--${contentSize} ` +\r\n        `visualizador-slot--${direction} ` +\r\n        `visualizador-slot-align--${align} ` +\r\n        `visualizador-slot-justify--${justify} ` +\r\n        (!showBorder ? 'visualizador-slot--no-border' : '')\r\n      }\r\n      style={{\r\n        position: 'relative',\r\n        gridColumn: `${x + 1} / span ${w}`,\r\n        gridRow: `${y + 1} / span ${h}`,\r\n        display: 'flex',\r\n        overflow: 'hidden',\r\n        border: showBorder ? undefined : 'none',\r\n      }}\r\n    >\r\n      <legend className=\"slot-legend\">{legend}</legend>\r\n      <div className=\"slot-content\">{component}</div>\r\n    </fieldset>\r\n  );\r\n};\r\n\r\nexport default SlotWrapper;\r\n"],"names":[],"mappings":";AAGA,MAAM,cAA4B,CAAC;AAAA,EACjC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AACf,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WACE,gDAC8B,WAAW,uBACnB,SAAS,6BACH,KAAK,+BACH,OAAO,OACpC,CAAC,aAAa,iCAAiC;AAAA,MAElD,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;AAAA,QAChC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,aAAa,SAAY;AAAA,MAAA;AAAA,MAGnC,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,eAAe,UAAA,QAAO;AAAA,QACxC,oBAAC,OAAA,EAAI,WAAU,gBAAgB,UAAA,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAnBpC;AAAA,EAAA;AAsBX;"}

package/dist/where-by-room/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { WherebyProvider } from "@whereby.com/browser-sdk/react";
+import "@whereby.com/browser-sdk/embed";
+import { Room } from "./room.js";
+const WhereByRoom = ({ src, onEvent, onActions, iframeClass }) => {
+  return /* @__PURE__ */ jsx(WherebyProvider, { children: /* @__PURE__ */ jsx(
+    Room,
+    {
+      src,
+      onEvent,
+      onActions,
+      iframeClass
+    }
+  ) });
+};
+export {
+  WhereByRoom,
+  WhereByRoom as default
+};
+//# sourceMappingURL=index.js.map

package/dist/where-by-room/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/where-by-room/index.jsx"],"sourcesContent":["import { WherebyProvider } from '@whereby.com/browser-sdk/react';\r\nimport '@whereby.com/browser-sdk/embed';\r\nimport Room from './room';\r\n\r\nexport const WhereByRoom = ({ src, onEvent, onActions, iframeClass }) => {\r\n  return (\r\n    <WherebyProvider>\r\n      <Room\r\n        src={src}\r\n        onEvent={onEvent}\r\n        onActions={onActions}\r\n        iframeClass={iframeClass}\r\n      />\r\n    </WherebyProvider>\r\n  );\r\n};\r\nexport default WhereByRoom;\r\n"],"names":[],"mappings":";;;;AAIO,MAAM,cAAc,CAAC,EAAE,KAAK,SAAS,WAAW,kBAAkB;AACvE,6BACG,iBAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/where-by-room/room.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import "@whereby.com/browser-sdk/embed";
+const Room = ({ src, onEvent, onActions, iframeClass }) => {
+  const wherebyRef = useRef(null);
+  useEffect(() => {
+    const elm = wherebyRef.current;
+    if (!elm) return;
+    if (onActions) {
+      onActions({
+        endMeeting: () => elm.endMeeting(),
+        knock: () => elm.knock(),
+        cancelKnock: () => elm.cancelKnock(),
+        leaveRoom: () => elm.leaveRoom(),
+        startRecording: () => elm.startRecording(),
+        stopRecording: () => elm.stopRecording(),
+        startStreaming: () => elm.startStreaming(),
+        stopStreaming: () => elm.stopStreaming(),
+        startLiveTranscription: () => elm.startLiveTranscription(),
+        stopLiveTranscription: () => elm.stopLiveTranscription(),
+        toggleCamera: (enabled) => elm.toggleCamera(enabled),
+        toggleMicrophone: (enabled) => elm.toggleMicrophone(enabled),
+        toggleScreenshare: (enabled) => elm.toggleScreenshare(enabled),
+        toggleChat: (enabled) => elm.toggleChat(enabled)
+      });
+    }
+    const events = [
+      "ready",
+      "grant_device_permission",
+      "deny_device_permission",
+      "precall_check_completed",
+      "precall_check_skipped",
+      "knock",
+      "cancel_knock",
+      "join",
+      "leave",
+      "meeting_end",
+      "participantupdate",
+      "participant_join",
+      "participant_leave",
+      "microphone_toggle",
+      "camera_toggle",
+      "screenshare_toggle",
+      "chat_toggle",
+      "people_toggle",
+      "pip_toggle",
+      "streaming_status_change",
+      "recording_status_change",
+      "transcription_status_change",
+      "connection_status_change"
+    ];
+    function handleEvent(e) {
+      if (onEvent) onEvent(e.type, e.detail);
+    }
+    events.forEach((ev) => elm.addEventListener(ev, handleEvent));
+    return () => {
+      events.forEach((ev) => elm.removeEventListener(ev, handleEvent));
+    };
+  }, [onEvent, onActions]);
+  return /* @__PURE__ */ jsx("div", { className: iframeClass, children: /* @__PURE__ */ jsx(
+    "whereby-embed",
+    {
+      ref: wherebyRef,
+      class: iframeClass,
+      room: src,
+      chat: "on",
+      screenshare: "on",
+      audio: "on",
+      video: "on",
+      allow: "camera; microphone; fullscreen"
+    }
+  ) });
+};
+export {
+  Room,
+  Room as default
+};
+//# sourceMappingURL=room.js.map

package/dist/where-by-room/room.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"room.js","sources":["../../src/where-by-room/room.jsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\r\nimport '@whereby.com/browser-sdk/embed';\r\n\r\nexport const Room = ({ src, onEvent, onActions, iframeClass }) => {\r\n  const wherebyRef = useRef(null);\r\n\r\n  useEffect(() => {\r\n    const elm = wherebyRef.current;\r\n    if (!elm) return;\r\n\r\n    if (onActions) {\r\n      onActions({\r\n        endMeeting: () => elm.endMeeting(),\r\n        knock: () => elm.knock(),\r\n        cancelKnock: () => elm.cancelKnock(),\r\n        leaveRoom: () => elm.leaveRoom(),\r\n        startRecording: () => elm.startRecording(),\r\n        stopRecording: () => elm.stopRecording(),\r\n        startStreaming: () => elm.startStreaming(),\r\n        stopStreaming: () => elm.stopStreaming(),\r\n        startLiveTranscription: () => elm.startLiveTranscription(),\r\n        stopLiveTranscription: () => elm.stopLiveTranscription(),\r\n        toggleCamera: (enabled) => elm.toggleCamera(enabled),\r\n        toggleMicrophone: (enabled) => elm.toggleMicrophone(enabled),\r\n        toggleScreenshare: (enabled) => elm.toggleScreenshare(enabled),\r\n        toggleChat: (enabled) => elm.toggleChat(enabled),\r\n      });\r\n    }\r\n\r\n    const events = [\r\n      'ready',\r\n      'grant_device_permission',\r\n      'deny_device_permission',\r\n      'precall_check_completed',\r\n      'precall_check_skipped',\r\n      'knock',\r\n      'cancel_knock',\r\n      'join',\r\n      'leave',\r\n      'meeting_end',\r\n      'participantupdate',\r\n      'participant_join',\r\n      'participant_leave',\r\n      'microphone_toggle',\r\n      'camera_toggle',\r\n      'screenshare_toggle',\r\n      'chat_toggle',\r\n      'people_toggle',\r\n      'pip_toggle',\r\n      'streaming_status_change',\r\n      'recording_status_change',\r\n      'transcription_status_change',\r\n      'connection_status_change',\r\n    ];\r\n    function handleEvent(e) {\r\n      if (onEvent) onEvent(e.type, e.detail);\r\n    }\r\n    events.forEach((ev) => elm.addEventListener(ev, handleEvent));\r\n    return () => {\r\n      events.forEach((ev) => elm.removeEventListener(ev, handleEvent));\r\n    };\r\n  }, [onEvent, onActions]);\r\n\r\n  return (\r\n    <div className={iframeClass}>\r\n      <whereby-embed\r\n        ref={wherebyRef}\r\n        class={iframeClass}\r\n        room={src}\r\n        chat=\"on\"\r\n        screenshare=\"on\"\r\n        audio=\"on\"\r\n        video=\"on\"\r\n        allow=\"camera; microphone; fullscreen\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\nexport default Room;\r\n"],"names":[],"mappings":";;;AAGO,MAAM,OAAO,CAAC,EAAE,KAAK,SAAS,WAAW,kBAAkB;AAChE,QAAM,aAAa,OAAO,IAAI;AAE9B,YAAU,MAAM;AACd,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AAEV,QAAI,WAAW;AACb,gBAAU;AAAA,QACR,YAAY,MAAM,IAAI,WAAA;AAAA,QACtB,OAAO,MAAM,IAAI,MAAA;AAAA,QACjB,aAAa,MAAM,IAAI,YAAA;AAAA,QACvB,WAAW,MAAM,IAAI,UAAA;AAAA,QACrB,gBAAgB,MAAM,IAAI,eAAA;AAAA,QAC1B,eAAe,MAAM,IAAI,cAAA;AAAA,QACzB,gBAAgB,MAAM,IAAI,eAAA;AAAA,QAC1B,eAAe,MAAM,IAAI,cAAA;AAAA,QACzB,wBAAwB,MAAM,IAAI,uBAAA;AAAA,QAClC,uBAAuB,MAAM,IAAI,sBAAA;AAAA,QACjC,cAAc,CAAC,YAAY,IAAI,aAAa,OAAO;AAAA,QACnD,kBAAkB,CAAC,YAAY,IAAI,iBAAiB,OAAO;AAAA,QAC3D,mBAAmB,CAAC,YAAY,IAAI,kBAAkB,OAAO;AAAA,QAC7D,YAAY,CAAC,YAAY,IAAI,WAAW,OAAO;AAAA,MAAA,CAChD;AAAA,IACH;AAEA,UAAM,SAAS;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,aAAS,YAAY,GAAG;AACtB,UAAI,QAAS,SAAQ,EAAE,MAAM,EAAE,MAAM;AAAA,IACvC;AACA,WAAO,QAAQ,CAAC,OAAO,IAAI,iBAAiB,IAAI,WAAW,CAAC;AAC5D,WAAO,MAAM;AACX,aAAO,QAAQ,CAAC,OAAO,IAAI,oBAAoB,IAAI,WAAW,CAAC;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SACE,oBAAC,OAAA,EAAI,WAAW,aACd,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAK;AAAA,MACL,aAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAM;AAAA,MACN,OAAM;AAAA,IAAA;AAAA,EAAA,GAEV;AAEJ;"}