@rubin-epo/epo-widget-lib 2.0.2 → 2.0.4

package/dist/widgets/OrbitalSim/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),i=require("@react-three/fiber"),r=e=>e&&e.__esModule?e:{default:e},t=r(a),l=a.createGlobalStyle`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),r=require("@react-three/fiber"),i=t=>t&&t.__esModule?t:{default:t},e=i(a),o=a.createGlobalStyle`
   :root {
     --white: #ffffff;
     --black: #000000;
@@ -27,22 +27,57 @@
 
     --siteProgressHeight: 26px;
     --siteToolbarHeight: 64px;
-    --siteHeaderHeight: var(--siteProgressHeight) + var(--siteToolbarHeight);
+    --siteHeaderHeight: calc(var(--siteProgressHeight) + var(--siteToolbarHeight));
     --pageNavHeight: 64px;
     --headingWithSpaceHeight: 90px;
-    // --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
+    --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
   }
-`,o=t.default.div`
+`,l=e.default.div`
     position: relative;
-    // height: var(--tallestSquareWidget);
-    height: 750px; // revisit this close to MVP
-    // min-height: var(--break40);
+    height: var(--tallestSquareWidget);
     min-height: 500px;
-    background-color: var(--black);
+    background-color: #000000;
     color-adjust: exact;
-`,s=t.default(i.Canvas)`
-    display: inline;
+`,n=e.default(r.Canvas)`
     position: relative;
-    height: 100%;
     z-index: 1;
-`;exports.CanvasWrapper=s;exports.GlobalStyles=l;exports.OrbitalSimWrapper=o;
+`,d=e.default.div`
+  padding: 2px 4px;
+  margin-top: 4px;
+  font-weight: var(--medium);
+  color: var(--black);
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
+  border-radius: 5px;
+  color-adjust: exact;
+  z-index: 10000;
+  height: fit-content;
+`,s=e.default.aside`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  z-index: 10;
+  background-color: #fff;
+  width: 10%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`,p=e.default.button`
+  width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+  background-color: #F3F3F3;
+  color: #017F80;
+  text-align: center;
+
+  &:hover {
+    background-color: #017F80;
+    color: #fff;
+  }
+
+  &[data-active="true"] {
+    background-color: #017F80;
+    color: #fff;
+  }
+`;exports.CanvasWrapper=n;exports.GlobalStyles=o;exports.OrbitalSimWrapper=l;exports.SunLabel=d;exports.SwappableOrbitButton=p;exports.SwappableOrbitsContainer=s;

package/dist/widgets/OrbitalSim/styles.d.ts

@@ -3,3 +3,6 @@ import { Canvas } from '@react-three/fiber';
 export declare const GlobalStyles: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;
 export declare const OrbitalSimWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CanvasWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@react-three/fiber').CanvasProps, never>> & string & Omit<typeof Canvas, keyof import('react').Component<any, {}, any>>;
+export declare const SunLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SwappableOrbitsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const SwappableOrbitButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/widgets/OrbitalSim/styles.js

@@ -1,7 +1,7 @@
 "use client";
-import e, { createGlobalStyle as a } from "styled-components";
-import { Canvas as i } from "@react-three/fiber";
-const o = a`
+import e, { createGlobalStyle as t } from "styled-components";
+import { Canvas as a } from "@react-three/fiber";
+const o = t`
   :root {
     --white: #ffffff;
     --black: #000000;
@@ -30,27 +30,65 @@ const o = a`
 
     --siteProgressHeight: 26px;
     --siteToolbarHeight: 64px;
-    --siteHeaderHeight: var(--siteProgressHeight) + var(--siteToolbarHeight);
+    --siteHeaderHeight: calc(var(--siteProgressHeight) + var(--siteToolbarHeight));
     --pageNavHeight: 64px;
     --headingWithSpaceHeight: 90px;
-    // --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
+    --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
   }
 `, l = e.div`
     position: relative;
-    // height: var(--tallestSquareWidget);
-    height: 750px; // revisit this close to MVP
-    // min-height: var(--break40);
+    height: var(--tallestSquareWidget);
     min-height: 500px;
-    background-color: var(--black);
+    background-color: #000000;
     color-adjust: exact;
-`, s = e(i)`
-    display: inline;
+`, n = e(a)`
     position: relative;
-    height: 100%;
     z-index: 1;
+`, d = e.div`
+  padding: 2px 4px;
+  margin-top: 4px;
+  font-weight: var(--medium);
+  color: var(--black);
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
+  border-radius: 5px;
+  color-adjust: exact;
+  z-index: 10000;
+  height: fit-content;
+`, c = e.aside`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  z-index: 10;
+  background-color: #fff;
+  width: 10%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`, p = e.button`
+  width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+  background-color: #F3F3F3;
+  color: #017F80;
+  text-align: center;
+
+  &:hover {
+    background-color: #017F80;
+    color: #fff;
+  }
+
+  &[data-active="true"] {
+    background-color: #017F80;
+    color: #fff;
+  }
 `;
 export {
-  s as CanvasWrapper,
+  n as CanvasWrapper,
   o as GlobalStyles,
-  l as OrbitalSimWrapper
+  l as OrbitalSimWrapper,
+  d as SunLabel,
+  p as SwappableOrbitButton,
+  c as SwappableOrbitsContainer
 };

package/dist/widgets/SortableTable/SortableTable.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),C=require("./styles.cjs"),r="asc",w="desc",j=({tableData:a})=>{const[i]=d.useState(a),o=a?Object.keys(i[0]):null,[s,f]=d.useState(o?o[0]:""),[c,S]=d.useState(r);function p(e){if(s===e){S(n=>n===r?w:r);return}f(e),S(r)}const m=d.useMemo(()=>{if(i)return[...i].sort((n,g)=>{const u=n[s],l=g[s];if(typeof u=="number"&&typeof l=="number")return c===r?u-l:l-u;const b=String(u).toLowerCase(),h=String(l).toLowerCase();return c===r?b.localeCompare(h):h.localeCompare(b)})},[i,s,c]);function x(e){return s!==e?"":c===r?"↑":"↓"}return t.jsx(t.Fragment,{children:a&&t.jsxs(C.Table,{children:[t.jsx("thead",{children:t.jsx("tr",{children:o&&o.map(e=>t.jsx("th",{scope:"col","aria-sort":s===e?c===r?"ascending":"descending":"none",children:t.jsxs("button",{type:"button",onClick:()=>p(e),children:[e," ",x(e)]})},e))})}),t.jsx("tbody",{children:m&&m.map(e=>t.jsx("tr",{children:o&&o.map(n=>t.jsx("td",{children:e[n]},n))}))})]})})};j.displayName="Widgets.SortableTable";exports.default=j;

package/dist/widgets/SortableTable/SortableTable.d.ts

@@ -0,0 +1,19 @@
+type TableDataProps<T extends Record<string, string | number | null>> = {
+    tableData: T[];
+};
+/**
+ * This widget will take an array of uniform (same properties across all elements)
+ * objects and render a table from the values. The table headers will be created
+ * based on the property names. The table can be sorted ascending or descending
+ * by one column at a time. If non-uniform objects are contained in the array,
+ * the widget will only build out the columns specific by the properties on the
+ * first element of the array.
+ *
+ * @param tabledata: an array of objects that will be used to build the table
+ * @returns the sortable table
+ */
+declare const SortableTable: {
+    <T extends Record<string, string | number | null>>({ tableData }: TableDataProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SortableTable;

package/dist/widgets/SortableTable/SortableTable.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as o, Fragment as j, jsxs as h } from "react/jsx-runtime";
+import { useState as u, useMemo as x } from "react";
+import { Table as N } from "./styles.js";
+const r = "asc", T = "desc", y = ({
+  tableData: a
+}) => {
+  const [i] = u(a), e = a ? Object.keys(i[0]) : null, [n, b] = u(e ? e[0] : ""), [c, m] = u(r);
+  function g(t) {
+    if (n === t) {
+      m((s) => s === r ? T : r);
+      return;
+    }
+    b(t), m(r);
+  }
+  const p = x(() => {
+    if (i)
+      return [...i].sort((s, w) => {
+        const l = s[n], d = w[n];
+        if (typeof l == "number" && typeof d == "number")
+          return c === r ? l - d : d - l;
+        const f = String(l).toLowerCase(), S = String(d).toLowerCase();
+        return c === r ? f.localeCompare(S) : S.localeCompare(f);
+      });
+  }, [i, n, c]);
+  function C(t) {
+    return n !== t ? "" : c === r ? "↑" : "↓";
+  }
+  return /* @__PURE__ */ o(j, { children: a && /* @__PURE__ */ h(N, { children: [
+    /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", { children: e && e.map((t) => /* @__PURE__ */ o("th", { scope: "col", "aria-sort": n === t ? c === r ? "ascending" : "descending" : "none", children: /* @__PURE__ */ h("button", { type: "button", onClick: () => g(t), children: [
+      t,
+      " ",
+      C(t)
+    ] }) }, t)) }) }),
+    /* @__PURE__ */ o("tbody", { children: p && p.map((t) => /* @__PURE__ */ o("tr", { children: e && e.map((s) => /* @__PURE__ */ o("td", { children: t[s] }, s)) })) })
+  ] }) });
+};
+y.displayName = "Widgets.SortableTable";
+export {
+  y as default
+};

package/dist/widgets/SortableTable/index.d.ts

@@ -0,0 +1 @@
+export { default, default as SortableTable } from './SortableTable';

package/dist/widgets/SortableTable/styles.cjs

@@ -0,0 +1,8 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),l=e=>e&&e.__esModule?e:{default:e},d=l(t),o=d.default.table`
+    border: 1px solid #000000;
+    text-align: center;
+    border-spacing: 0px;
+    & > th, td, thead, thead > tr > th{
+        border: 1px solid #000000;
+    }
+`;exports.Table=o;

package/dist/widgets/SortableTable/styles.d.ts

@@ -0,0 +1 @@
+export declare const Table: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;

package/dist/widgets/SortableTable/styles.js

@@ -0,0 +1,13 @@
+"use client";
+import t from "styled-components";
+const r = t.table`
+    border: 1px solid #000000;
+    text-align: center;
+    border-spacing: 0px;
+    & > th, td, thead, thead > tr > th{
+        border: 1px solid #000000;
+    }
+`;
+export {
+  r as Table
+};

package/dist/widgets/SourceSelector/MovingSourceMap/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("../utils.cjs"),n=require("./styles.cjs"),p=(e,r)=>typeof e=="string"?e.includes("%")?`${100-parseFloat(e)}%`:r-parseFloat(e):r-e,a=({width:e,height:r,movingSources:i,selectedSource:d,currentIndex:c})=>s.jsxs(s.Fragment,{children:["    ",i&&i.map((t,u)=>{let l=t.sources[c];if(d.includes(t.id))return s.jsx(n.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${e} ${r}`,children:s.jsx("g",{role:"list",children:s.jsx(n.Point,{cx:l.x,cy:p(l.y,r),fill:"transparent",stroke:t.color??"#fed828",strokeWidth:3,tabIndex:0,role:"listitem",r:`${o.getRadius(t.type,NaN)*100}%`,id:`${t.id}`},`${t.id}-${u}`)})})})]});a.displayName="Widgets.MovingSourceMap";exports.default=a;

package/dist/widgets/SourceSelector/MovingSourceMap/index.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+import { MovingSources } from '../../../types/astro';
+
+export interface MovingSourceMapProps {
+    width: number;
+    height: number;
+    isPlaying: boolean;
+    movingSources: MovingSources[];
+    selectedSource: string[];
+    currentIndex: number;
+}
+declare const MovingSourceMap: FunctionComponent<MovingSourceMapProps>;
+export default MovingSourceMap;

package/dist/widgets/SourceSelector/MovingSourceMap/index.js

@@ -0,0 +1,42 @@
+import { jsxs as o, Fragment as p, jsx as s } from "react/jsx-runtime";
+import { getRadius as c } from "../utils.js";
+import { SVG as f, Point as x } from "./styles.js";
+const $ = (e, r) => typeof e == "string" ? e.includes("%") ? `${100 - parseFloat(e)}%` : r - parseFloat(e) : r - e, m = ({
+  width: e,
+  height: r,
+  movingSources: i,
+  selectedSource: d,
+  currentIndex: n
+}) => /* @__PURE__ */ o(p, { children: [
+  "    ",
+  i && i.map((t, l) => {
+    let a = t.sources[n];
+    if (d.includes(t.id))
+      return /* @__PURE__ */ s(
+        f,
+        {
+          preserveAspectRatio: "xMidYMid meet",
+          viewBox: `0 0 ${e} ${r}`,
+          children: /* @__PURE__ */ s("g", { role: "list", children: /* @__PURE__ */ s(
+            x,
+            {
+              cx: a.x,
+              cy: $(a.y, r),
+              fill: "transparent",
+              stroke: t.color ?? "#fed828",
+              strokeWidth: 3,
+              tabIndex: 0,
+              role: "listitem",
+              r: `${c(t.type, NaN) * 100}%`,
+              id: `${t.id}`
+            },
+            `${t.id}-${l}`
+          ) })
+        }
+      );
+  })
+] });
+m.displayName = "Widgets.MovingSourceMap";
+export {
+  m as default
+};

package/dist/widgets/SourceSelector/MovingSourceMap/styles.cjs

@@ -0,0 +1,14 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=t=>t&&t.__esModule?t:{default:t},e=n(o),s=e.default.svg`
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+`,r=e.default.circle`
+  cursor: pointer;
+  transition: transform ease var(--DURATION, 0.2s);
+  transform-origin: center;
+
+  &:focus {
+    outline: none;
+  }
+`;exports.Point=r;exports.SVG=s;

package/dist/widgets/SourceSelector/MovingSourceMap/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const SVG: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
+export declare const Point: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGCircleElement>, never>> & string;

package/dist/widgets/SourceSelector/MovingSourceMap/styles.js

@@ -0,0 +1,20 @@
+"use client";
+import o from "styled-components";
+const n = o.svg`
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+`, e = o.circle`
+  cursor: pointer;
+  transition: transform ease var(--DURATION, 0.2s);
+  transform-origin: center;
+
+  &:focus {
+    outline: none;
+  }
+`;
+export {
+  e as Point,
+  n as SVG
+};

package/dist/widgets/SourceSelector/MovingSourceSelector.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("react"),G=require("react-i18next"),J=require("../../layout/AspectRatio/index.cjs"),K=require("../../atomic/Loader/index.cjs"),Q=require("@rubin-epo/epo-react-lib/IconComposer"),U=require("./MovingSourceMap/index.cjs"),k=require("./utils.cjs"),Z=require("./styles.cjs"),O=require("../../hooks/useInterval.cjs"),ee=require("./Message/Message.cjs"),te=require("../../atomic/ElapsedTime/ElapsedTime.cjs"),se=e=>e&&e.__esModule?e:{default:e},ne=se(Q),oe=(e,n)=>{var l;const t={day:0,hour:0},s=e[n];if(!s)return t;const c=(s==null?void 0:s.date)-((l=e[0])==null?void 0:l.date);return c?{day:Math.round(c)||0,hour:Math.round(24/c%24)||0}:t},re=(e,n,t)=>Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2)<=Math.pow(t,2),ce=(e,n,t)=>t?e[n]?[e[n].image]:[]:e.map(({image:s})=>s),j=({width:e=600,height:n=600,selectedSource:t=[],alerts:s=[],activeAlertIndex:c=0,alertChangeCallback:l,selectionCallback:p,blinkConfig:_,isDisplayOnly:d=!1,isLoading:P,className:w,movingSources:i=[]})=>{const[f,q]=u.useState(0),[B,F]=u.useState(!0),[b,L]=u.useState(!0),[R,y]=u.useState(),[T,m]=u.useState(!1),{t:I}=G.useTranslation(),S=!B&&!P,V=(r,g,h)=>{if(i)for(let a of i){const x=a.sources[f];if(re(r,{x:k.toDecimalPercent(x.x)*g,y:k.toDecimalPercent(x.y)*h},k.getRadius(a.type,a.radius)*g))return a.id}},v=()=>{y(I("source_selector.messages.failure")),m(!0)},D=()=>{L(r=>!r)},N=()=>{y(o.jsxs(o.Fragment,{children:[o.jsx(ne.default,{icon:"checkmark"}),I("source_selector.messages.success")]})),m(!0)},W=({clientX:r,clientY:g,target:h})=>{if(!S||d)return;const{tagName:a,clientWidth:x,clientHeight:C}=h;if(a.toLowerCase()!=="img")return;const{left:Y,top:A}=h.getBoundingClientRect(),M=V({x:r-Y,y:C-g+A},x,C);if(M){if(t.includes(M))return;p&&p(t.concat(M)),N()}else v()},$=()=>{m(!1)},{day:z,hour:E}=oe(s,c),H=ce(s,c,d),X=()=>{b&&(f>i[0].sources.length-2?q(0):q(r=>r+1))};return O.default(X,500),o.jsxs(J.default,{ratio:1,className:w,children:[!d&&o.jsx(ee.default,{onMessageChangeCallback:$,isVisible:T,children:R}),i&&o.jsx(Z.BackgroundBlinker,{images:H,activeIndex:f,blinkCallback:l,loadedCallback:()=>F(!1),onClickCallback:W,extraControls:s.length>0&&!d&&o.jsx(te.default,{day:z,hour:E}),interval:400,pauseCallback:D,..._,children:o.jsx(U.default,{width:e,height:n,isPlaying:b,currentIndex:f,movingSources:i,selectedSource:t})}),!S&&o.jsx(K.default,{})]})};j.displayName="Widgets.MovingSourceSelector";exports.default=j;

package/dist/widgets/SourceSelector/MovingSourceSelector.d.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import { Alert, MovingSources } from '../../types/astro';
+
+interface BlinkConfig {
+    autoplay?: boolean;
+    loop?: boolean;
+    duration?: number;
+}
+interface SourceSelectorProps {
+    width?: number;
+    height?: number;
+    alerts: Alert[];
+    selectedSource?: string[];
+    activeAlertIndex?: number;
+    alertChangeCallback?: (index: number) => void;
+    selectionCallback?: (data: string[]) => void;
+    blinkConfig?: BlinkConfig;
+    isDisplayOnly?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    movingSources: MovingSources[];
+}
+declare const MovingSourceSelector: FunctionComponent<SourceSelectorProps>;
+export default MovingSourceSelector;

package/dist/widgets/SourceSelector/MovingSourceSelector.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs as B, jsx as a, Fragment as G } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { useTranslation as J } from "react-i18next";
+import K from "../../layout/AspectRatio/index.js";
+import Q from "../../atomic/Loader/index.js";
+import U from "@rubin-epo/epo-react-lib/IconComposer";
+import Z from "./MovingSourceMap/index.js";
+import { getRadius as $, toDecimalPercent as L } from "./utils.js";
+import { BackgroundBlinker as O } from "./styles.js";
+import ee from "../../hooks/useInterval.js";
+import te from "./Message/Message.js";
+import oe from "../../atomic/ElapsedTime/ElapsedTime.js";
+const ne = (e, n) => {
+  var u;
+  const t = { day: 0, hour: 0 }, o = e[n];
+  if (!o) return t;
+  const r = (o == null ? void 0 : o.date) - ((u = e[0]) == null ? void 0 : u.date);
+  return r ? {
+    day: Math.round(r) || 0,
+    hour: Math.round(24 / r % 24) || 0
+  } : t;
+}, se = (e, n, t) => Math.pow(e.x - n.x, 2) + Math.pow(e.y - n.y, 2) <= Math.pow(t, 2), re = (e, n, t) => t ? e[n] ? [e[n].image] : [] : e.map(({ image: o }) => o), ie = ({
+  width: e = 600,
+  height: n = 600,
+  selectedSource: t = [],
+  alerts: o = [],
+  activeAlertIndex: r = 0,
+  alertChangeCallback: u,
+  selectionCallback: M,
+  blinkConfig: P,
+  isDisplayOnly: d = !1,
+  isLoading: w,
+  className: F,
+  movingSources: c = []
+}) => {
+  const [f, x] = l(0), [R, V] = l(!0), [b, j] = l(!0), [N, y] = l(), [T, p] = l(!1), { t: I } = J(), S = !R && !w, W = (s, m, g) => {
+    if (c)
+      for (let i of c) {
+        const h = i.sources[f];
+        if (se(
+          s,
+          {
+            x: L(h.x) * m,
+            y: L(h.y) * g
+          },
+          $(i.type, i.radius) * m
+        ))
+          return i.id;
+      }
+  }, _ = () => {
+    y(I("source_selector.messages.failure")), p(!0);
+  }, v = () => {
+    j((s) => !s);
+  }, z = () => {
+    y(
+      /* @__PURE__ */ B(G, { children: [
+        /* @__PURE__ */ a(U, { icon: "checkmark" }),
+        I("source_selector.messages.success")
+      ] })
+    ), p(!0);
+  }, A = ({
+    clientX: s,
+    clientY: m,
+    target: g
+  }) => {
+    if (!S || d) return;
+    const {
+      tagName: i,
+      clientWidth: h,
+      clientHeight: k
+    } = g;
+    if (i.toLowerCase() !== "img") return;
+    const { left: q, top: D } = g.getBoundingClientRect(), C = W(
+      { x: s - q, y: k - m + D },
+      h,
+      k
+    );
+    if (C) {
+      if (t.includes(C)) return;
+      M && M(t.concat(C)), z();
+    } else
+      _();
+  }, E = () => {
+    p(!1);
+  }, { day: H, hour: X } = ne(o, r), Y = re(o, r, d);
+  return ee(() => {
+    b && (f > c[0].sources.length - 2 ? x(0) : x((s) => s + 1));
+  }, 500), /* @__PURE__ */ B(K, { ratio: 1, className: F, children: [
+    !d && /* @__PURE__ */ a(
+      te,
+      {
+        onMessageChangeCallback: E,
+        isVisible: T,
+        children: N
+      }
+    ),
+    c && /* @__PURE__ */ a(
+      O,
+      {
+        images: Y,
+        activeIndex: f,
+        blinkCallback: u,
+        loadedCallback: () => V(!1),
+        onClickCallback: A,
+        extraControls: o.length > 0 && !d && /* @__PURE__ */ a(oe, { day: H, hour: X }),
+        interval: 400,
+        pauseCallback: v,
+        ...P,
+        children: /* @__PURE__ */ a(Z, { width: e, height: n, isPlaying: b, currentIndex: f, movingSources: c, selectedSource: t })
+      }
+    ),
+    !S && /* @__PURE__ */ a(Q, {})
+  ] });
+};
+ie.displayName = "Widgets.MovingSourceSelector";
+export {
+  ie as default
+};

package/dist/widgets/SourceSelector/SourceSelector.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),h=require("react"),z=require("react-i18next"),E=require("../../layout/AspectRatio/index.cjs"),H=require("../../atomic/Loader/index.cjs"),X=require("@rubin-epo/epo-react-lib/IconComposer"),Y=require("./SourceMap/index.cjs"),m=require("./utils.cjs"),G=require("./styles.cjs"),J=require("./Message/Message.cjs"),K=require("../../atomic/ElapsedTime/ElapsedTime.cjs"),Q=e=>e&&e.__esModule?e:{default:e},U=Q(X),Z=(e,t)=>{var c;const s={day:0,hour:0},n=e[t];if(!n)return s;const o=(n==null?void 0:n.date)-((c=e[0])==null?void 0:c.date);return o?{day:Math.round(o)||0,hour:Math.round(24/o%24)||0}:s},A=(e,t,s)=>Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2)<=Math.pow(s,2),O=(e,t,s,n)=>{var o;return(o=n.find(({x:c,y:u,radius:i,type:l})=>A(e,{x:m.toDecimalPercent(c)*t,y:m.toDecimalPercent(u)*s},m.getRadius(l,i)*t)))==null?void 0:o.id},ee=(e,t,s)=>s?e[t]?[e[t].image]:[]:e.map(({image:n})=>n),S=({width:e=600,height:t=600,selectedSource:s=[],sources:n,alerts:o=[],activeAlertIndex:c=0,alertChangeCallback:u,selectionCallback:i,blinkConfig:l,isDisplayOnly:a=!1,isLoading:b,className:j})=>{const[p,_]=h.useState(!0),[y,x]=h.useState(),[I,d]=h.useState(!1),{t:C}=z.useTranslation(),M=!p&&!b,w=()=>{x(C("source_selector.messages.failure")),d(!0)},L=()=>{x(r.jsxs(r.Fragment,{children:[r.jsx(U.default,{icon:"checkmark"}),C("source_selector.messages.success")]})),d(!0)},P=({clientX:f,clientY:D,target:k})=>{if(!M||a)return;const{tagName:N,clientWidth:W,clientHeight:q}=k;if(N.toLowerCase()!=="img")return;const{left:$,top:v}=k.getBoundingClientRect(),g=O({x:f-$,y:q-D+v},W,q,n);if(g){if(s.includes(g))return;i&&i(s.concat(g)),L()}else w()},T=()=>{d(!1)},{day:B,hour:F}=Z(o,c),R=ee(o,c,a),V=n.filter(({id:f})=>s.includes(f));return r.jsxs(E.default,{ratio:1,className:j,children:[!a&&r.jsx(J.default,{onMessageChangeCallback:T,isVisible:I,children:y}),r.jsx(G.BackgroundBlinker,{images:R,activeIndex:c,blinkCallback:u,loadedCallback:()=>_(!1),onClickCallback:P,extraControls:o.length>0&&!a&&r.jsx(K.default,{day:B,hour:F}),interval:400,...l,children:r.jsx(Y.default,{sources:V,width:e,height:t})}),!M&&r.jsx(H.default,{})]})};S.displayName="Widgets.SourceSelector";exports.default=S;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),h=require("react"),z=require("react-i18next"),E=require("../../layout/AspectRatio/index.cjs"),H=require("../../atomic/Loader/index.cjs"),X=require("@rubin-epo/epo-react-lib/IconComposer"),Y=require("./SourceMap/index.cjs"),m=require("./utils.cjs"),G=require("./styles.cjs"),J=require("./Message/Message.cjs"),K=require("../../atomic/ElapsedTime/ElapsedTime.cjs"),Q=e=>e&&e.__esModule?e:{default:e},U=Q(X),Z=(e,s)=>{var r;const n={day:0,hour:0},t=e[s];if(!t)return n;const o=(t==null?void 0:t.date)-((r=e[0])==null?void 0:r.date);return o?{day:Math.round(o)||0,hour:Math.round(24/o%24)||0}:n},A=(e,s,n)=>Math.pow(e.x-s.x,2)+Math.pow(e.y-s.y,2)<=Math.pow(n,2),O=(e,s,n,t)=>{var o;if(t)return(o=t.find(({x:r,y:u,radius:c,type:l})=>A(e,{x:m.toDecimalPercent(r)*s,y:m.toDecimalPercent(u)*n},m.getRadius(l,c)*s)))==null?void 0:o.id},ee=(e,s,n)=>n?e[s]?[e[s].image]:[]:e.map(({image:t})=>t),S=({width:e=600,height:s=600,selectedSource:n=[],sources:t,alerts:o=[],activeAlertIndex:r=0,alertChangeCallback:u,selectionCallback:c,blinkConfig:l,isDisplayOnly:a=!1,isLoading:b,className:j})=>{const[p,_]=h.useState(!0),[y,x]=h.useState(),[I,d]=h.useState(!1),{t:C}=z.useTranslation(),M=!p&&!b,w=()=>{x(C("source_selector.messages.failure")),d(!0)},L=()=>{x(i.jsxs(i.Fragment,{children:[i.jsx(U.default,{icon:"checkmark"}),C("source_selector.messages.success")]})),d(!0)},P=({clientX:f,clientY:D,target:k})=>{if(!M||a)return;const{tagName:N,clientWidth:W,clientHeight:q}=k;if(N.toLowerCase()!=="img")return;const{left:$,top:v}=k.getBoundingClientRect(),g=t?O({x:f-$,y:q-D+v},W,q,t):null;if(g){if(n.includes(g))return;c&&c(n.concat(g)),L()}else w()},T=()=>{d(!1)},{day:B,hour:F}=Z(o,r),R=ee(o,r,a),V=t?t.filter(({id:f})=>n.includes(f)):[];return i.jsxs(E.default,{ratio:1,className:j,children:[!a&&i.jsx(J.default,{onMessageChangeCallback:T,isVisible:I,children:y}),i.jsx(G.BackgroundBlinker,{images:R,activeIndex:r,blinkCallback:u,loadedCallback:()=>_(!1),onClickCallback:P,extraControls:o.length>0&&!a&&i.jsx(K.default,{day:B,hour:F}),interval:400,...l,children:i.jsx(Y.default,{sources:V,width:e,height:s})}),!M&&i.jsx(H.default,{})]})};S.displayName="Widgets.SourceSelector";exports.default=S;

package/dist/widgets/SourceSelector/SourceSelector.d.ts

@@ -9,7 +9,7 @@ interface BlinkConfig {
 interface SourceSelectorProps {
     width?: number;
     height?: number;
-    sources: Source[];
+    sources?: Source[] | null;
     alerts: Alert[];
     selectedSource?: string[];
     activeAlertIndex?: number;