siam-ui-utils 3.0.31 → 3.0.32

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 { DropzoneUploader } from "../dropzone-uploader/base/index.js";
+import { Colxx } from "../CustomBootstrap.js";
+import imgHacerFoto from "../assets/img/take-photo.jpg.js";
+import { TAKE_PHOTO } from "../constants.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 } from '../dropzone-uploader/base';\r\nimport { Colxx } from '../CustomBootstrap';\r\nimport imgHacerFoto from '../assets/img/take-photo.jpg';\r\nimport { TAKE_PHOTO } from '../constants';\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.css";
+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.css";
+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.css";
+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/view-layout/styles.css

@@ -0,0 +1,127 @@
+.visualizador-container {
+  position: relative;
+}
+
+.visualizador-grid,
+.visualizador-grid-css {
+  width: 100%;
+  height: 100%;
+  min-width: 90vh;
+  min-height: 80vh;
+  background: #ffffff;
+  border-radius: 12px;
+  display: grid;
+  border: solid 2px #900604;
+  position: relative;
+  gap: 1px;
+  box-sizing: content-box;
+}
+
+.visualizador-slot {
+  display: flex;
+  border: 1px solid #900604;
+  border-radius: 7px;
+  background: #fff;
+}
+.visualizador-slot--row, .visualizador-slot-row {
+  flex-direction: row;
+}
+.visualizador-slot--column, .visualizador-slot-column, .visualizador-slot-column-col {
+  flex-direction: column;
+}
+.visualizador-slot-content--small {
+  font-size: 0.85rem;
+}
+.visualizador-slot-content--medium {
+  font-size: 1rem;
+}
+.visualizador-slot-content--large {
+  font-size: 1.5rem;
+}
+.visualizador-slot-align--start {
+  align-items: flex-start;
+}
+.visualizador-slot-align--center {
+  align-items: center;
+}
+.visualizador-slot-align--end {
+  align-items: flex-end;
+}
+.visualizador-slot-align--stretch {
+  align-items: stretch;
+}
+.visualizador-slot-justify--start {
+  justify-content: flex-start;
+}
+.visualizador-slot-justify--center {
+  justify-content: center;
+}
+.visualizador-slot-justify--end {
+  justify-content: flex-end;
+}
+.visualizador-slot-justify--space-between {
+  justify-content: space-between;
+}
+.visualizador-slot-justify--space-around {
+  justify-content: space-around;
+}
+.visualizador-slot-justify--space-evenly {
+  justify-content: space-evenly;
+}
+.visualizador-slot--no-border {
+  border: none !important;
+}
+
+.slot-legend {
+  width: auto;
+  font-size: 0.75rem;
+  margin-bottom: 0px !important;
+  margin-left: -20px !important;
+  font-weight: 700;
+  color: #900604;
+  white-space: nowrap;
+}
+
+.editor-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 20;
+  display: grid;
+}
+
+.editor-layer-cell-coord {
+  font-size: 0.75rem;
+  justify-self: center;
+}
+
+.editor-layer-cell {
+  font-size: 0.7em;
+  color: #797979;
+  align-content: center;
+  padding: 2px;
+  text-align: left;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 1px dashed #bbb;
+}
+
+.visualizador-editor-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 100;
+  padding: 6px 12px;
+  font-size: 1em;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.visualizador-editor-btn--activo {
+  background: #900604;
+}
+.visualizador-editor-btn--inactivo {
+  background: #bbb;
+}

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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "3.0.31",
+  "version": "3.0.32",
   "keywords": [
     "ampf-react",
     "ampf-utils",