@rubin-epo/epo-widget-lib 1.1.1 → 1.1.3

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js

@@ -0,0 +1,97 @@
+import { jsxs as g, jsx as r, Fragment as x } from "react/jsx-runtime";
+import { between as w } from "../../../lib/utils.js";
+import { spectrums as e } from "../data.js";
+import k from "./SpectrumLabels/SpectrumLabels.js";
+const l = ({
+  min: n,
+  max: p,
+  range: o,
+  isCondensed: f,
+  activeFilter: s
+}) => /* @__PURE__ */ g(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMinYMin meet",
+    viewBox: `${n} 0 ${o} 260`,
+    "data-testid": "spectrum-display",
+    children: [
+      /* @__PURE__ */ g("defs", { children: [
+        e.map(({ name: h, stops: d }) => /* @__PURE__ */ r("linearGradient", { id: `${h}-gradient`, children: d.map(({ offset: a, stopColor: m, id: t }) => /* @__PURE__ */ r(
+          "stop",
+          {
+            offset: a,
+            stopColor: m,
+            id: t
+          },
+          `${a}-${m}`
+        )) }, h)),
+        /* @__PURE__ */ g("mask", { id: "spectrumMask", children: [
+          /* @__PURE__ */ r("rect", { width: "100%", height: "100", fill: "white", x: n }),
+          s && /* @__PURE__ */ g(x, { children: [
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                x: n,
+                width: s.range[0] - n,
+                height: "100%",
+                fill: "black"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                x: s.range[1],
+                width: p - s.range[1],
+                height: "100%",
+                fill: "black"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("g", { mask: "url(#spectrumMask)", role: "presentation", children: e.map(({ name: h, upper: d, lower: a }) => /* @__PURE__ */ r(
+        "rect",
+        {
+          width: (d || p) - (a || n),
+          height: "50%",
+          fill: `url(#${h}-gradient)`,
+          x: a || n,
+          role: "presentation"
+        },
+        h
+      )) }),
+      /* @__PURE__ */ r("g", { children: e.map(
+        ({ name: h, upper: d }) => d && /* @__PURE__ */ r(
+          "line",
+          {
+            strokeWidth: 2,
+            strokeDasharray: "8 8",
+            stroke: s && !w(d, s.range[0], s.range[1]) ? "#000" : "#fff",
+            x1: d,
+            x2: d,
+            y1: 0,
+            y2: "50%"
+          },
+          h
+        )
+      ) }),
+      /* @__PURE__ */ r(
+        k,
+        {
+          spectrums: e,
+          activeBand: s == null ? void 0 : s.band,
+          min: n,
+          max: p,
+          activeMin: s == null ? void 0 : s.range[0],
+          activeMax: s == null ? void 0 : s.range[1],
+          isCondensed: f
+        }
+      )
+    ]
+  }
+);
+l.displayName = "Widgets.CameraFilter.SpectrumDisplay";
+export {
+  l as default
+};

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumLabels/SpectrumLabels.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),L=require("react-i18next"),S=require("../../styles.cjs"),_=require("../../../../lib/utils.cjs"),h=require("../ColorLabels/ColorLabels.cjs"),d=({spectrums:m,activeBand:e,min:p,max:b,activeMin:i=0,activeMax:a=0,isCondensed:l})=>{const{t:n}=L.useTranslation(),f=n("camera_filter.labels.captured_range",{context:e?"":"no_filter",filter:e});return r.jsx("g",{role:"list","aria-label":f,"aria-live":"polite","data-testid":"spectrum-labels",children:m.map(({name:s,upper:x,lower:g,colors:u},c)=>{const o=x||b,t=g||p,j=e&&_.intersection([t,o],[i,a])===null;return r.jsxs("g",{role:"listitem","aria-hidden":j,children:[r.jsx(S.SpectrumLabel,{x:l&&c===0?t:(o-t)/2+t,y:"50",dominantBaseline:"middle",textAnchor:l&&c===0?"start":"middle",children:n(`camera_filter.labels.${s}`)},s),u&&r.jsx(h.default,{colors:u,isBandSelected:!!e,activeRange:[i,a],isCondensed:l})]},s)})})};d.displayName="Widgets.CameraFilter.SpectrumLabels";exports.default=d;

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumLabels/SpectrumLabels.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+import { SpectrumLabel as S } from "../../styles.js";
+import { intersection as _ } from "../../../../lib/utils.js";
+import j from "../ColorLabels/ColorLabels.js";
+const y = ({
+  spectrums: p,
+  activeBand: e,
+  min: d,
+  max: f,
+  activeMin: i = 0,
+  activeMax: s = 0,
+  isCondensed: t
+}) => {
+  const { t: o } = x(), u = o("camera_filter.labels.captured_range", {
+    context: e ? "" : "no_filter",
+    filter: e
+  });
+  return /* @__PURE__ */ a(
+    "g",
+    {
+      role: "list",
+      "aria-label": u,
+      "aria-live": "polite",
+      "data-testid": "spectrum-labels",
+      children: p.map(({ name: l, upper: b, lower: L, colors: m }, n) => {
+        const c = b || f, r = L || d, g = e && _([r, c], [i, s]) === null;
+        return /* @__PURE__ */ h("g", { role: "listitem", "aria-hidden": g, children: [
+          /* @__PURE__ */ a(
+            S,
+            {
+              x: t && n === 0 ? r : (c - r) / 2 + r,
+              y: "50",
+              dominantBaseline: "middle",
+              textAnchor: t && n === 0 ? "start" : "middle",
+              children: o(`camera_filter.labels.${l}`)
+            },
+            l
+          ),
+          m && /* @__PURE__ */ a(
+            j,
+            {
+              colors: m,
+              isBandSelected: !!e,
+              activeRange: [i, s],
+              isCondensed: t
+            }
+          )
+        ] }, l);
+      })
+    }
+  );
+};
+y.displayName = "Widgets.CameraFilter.SpectrumLabels";
+export {
+  y as default
+};

package/dist/widgets/CameraFilter/data.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=[{band:"u",range:[338,395]},{range:[396,404]},{band:"g",range:[405,552]},{band:"r",range:[553,690]},{band:"i",range:[690,817]},{band:"z",range:[818,920]},{band:"y",range:[920,1010]}],r=[{offset:0,stopColor:"#e0e0e0"},{offset:.262,stopColor:"#dedde0"},{offset:.41,stopColor:"#dbd5e1"},{offset:.53,stopColor:"#d4c7e3"},{offset:.635,stopColor:"#cbb3e6"},{offset:.73,stopColor:"#bf9aeb"},{offset:.818,stopColor:"#b17af0"},{offset:.9,stopColor:"#a055f5"},{offset:.976,stopColor:"#8c2afc"},{offset:1,stopColor:"#861cff"}],l=[{offset:.11,stopColor:"#861cff"},{offset:.25,stopColor:"blue"},{offset:.27,stopColor:"#001ee0"},{offset:.3,stopColor:"#006d91"},{offset:.33,stopColor:"#00ab53"},{offset:.36,stopColor:"#00d826"},{offset:.38,stopColor:"#00f40a"},{offset:.39,stopColor:"lime"},{offset:.41,stopColor:"#05fe00"},{offset:.43,stopColor:"#14fc01"},{offset:.45,stopColor:"#2df803"},{offset:.47,stopColor:"#50f406"},{offset:.49,stopColor:"#7cee0a"},{offset:.51,stopColor:"#b3e70e"},{offset:.54,stopColor:"#f2de14"},{offset:.54,stopColor:"#ffdd15"},{offset:.56,stopColor:"#fccb17"},{offset:.6,stopColor:"#f49f1e"},{offset:.62,stopColor:"#f18922"},{offset:.63,stopColor:"#f08220"},{offset:.66,stopColor:"#f0711c"},{offset:.69,stopColor:"#ef5415"},{offset:.72,stopColor:"#ed2d0b"},{offset:.75,stopColor:"#ec0000"},{offset:.79,stopColor:"#eb0303"},{offset:.82,stopColor:"#e90f0f"},{offset:.86,stopColor:"#e62323"},{offset:.89,stopColor:"#e23e3e"},{offset:.93,stopColor:"#dc6262"},{offset:.96,stopColor:"#d58e8e"},{offset:.99,stopColor:"#cdc0c0"},{offset:1,stopColor:"#ccc"}],n=[{offset:0,stopColor:"#ccc"},{offset:1,stopColor:"#f2f2f2"}],t=[{name:"violet",color:"#861CFF",range:[380,450]},{name:"blue",color:"#0000FF",range:[450,495]},{name:"green",color:"#00FF00",range:[495,570]},{name:"yellow",color:"#FFDD15",range:[570,590]},{name:"orange",color:"#F18922",range:[590,620]},{name:"red",color:"#EC0000",range:[620,750]}],p=[{name:"ultraviolet",upper:400,stops:r},{name:"visible",upper:750,lower:400,stops:l,colors:t},{name:"infrared",lower:750,stops:n}],e=255,f=322,o=1084,a={condensed:{min:f,max:o,range:o-f},default:{min:e,max:o,range:o-e}};exports.colors=t;exports.filters=s;exports.rangeConfig=a;exports.spectrums=p;

package/dist/widgets/CameraFilter/data.js

@@ -0,0 +1,84 @@
+const n = [
+  { band: "u", range: [338, 395] },
+  { range: [396, 404] },
+  { band: "g", range: [405, 552] },
+  { band: "r", range: [553, 690] },
+  { band: "i", range: [690, 817] },
+  { band: "z", range: [818, 920] },
+  { band: "y", range: [920, 1010] }
+], s = [
+  { offset: 0, stopColor: "#e0e0e0" },
+  { offset: 0.262, stopColor: "#dedde0" },
+  { offset: 0.41, stopColor: "#dbd5e1" },
+  { offset: 0.53, stopColor: "#d4c7e3" },
+  { offset: 0.635, stopColor: "#cbb3e6" },
+  { offset: 0.73, stopColor: "#bf9aeb" },
+  { offset: 0.818, stopColor: "#b17af0" },
+  { offset: 0.9, stopColor: "#a055f5" },
+  { offset: 0.976, stopColor: "#8c2afc" },
+  { offset: 1, stopColor: "#861cff" }
+], t = [
+  { offset: 0.11, stopColor: "#861cff" },
+  { offset: 0.25, stopColor: "blue" },
+  { offset: 0.27, stopColor: "#001ee0" },
+  { offset: 0.3, stopColor: "#006d91" },
+  { offset: 0.33, stopColor: "#00ab53" },
+  { offset: 0.36, stopColor: "#00d826" },
+  { offset: 0.38, stopColor: "#00f40a" },
+  { offset: 0.39, stopColor: "lime" },
+  { offset: 0.41, stopColor: "#05fe00" },
+  { offset: 0.43, stopColor: "#14fc01" },
+  { offset: 0.45, stopColor: "#2df803" },
+  { offset: 0.47, stopColor: "#50f406" },
+  { offset: 0.49, stopColor: "#7cee0a" },
+  { offset: 0.51, stopColor: "#b3e70e" },
+  { offset: 0.54, stopColor: "#f2de14" },
+  { offset: 0.54, stopColor: "#ffdd15" },
+  { offset: 0.56, stopColor: "#fccb17" },
+  { offset: 0.6, stopColor: "#f49f1e" },
+  { offset: 0.62, stopColor: "#f18922" },
+  { offset: 0.63, stopColor: "#f08220" },
+  { offset: 0.66, stopColor: "#f0711c" },
+  { offset: 0.69, stopColor: "#ef5415" },
+  { offset: 0.72, stopColor: "#ed2d0b" },
+  { offset: 0.75, stopColor: "#ec0000" },
+  { offset: 0.79, stopColor: "#eb0303" },
+  { offset: 0.82, stopColor: "#e90f0f" },
+  { offset: 0.86, stopColor: "#e62323" },
+  { offset: 0.89, stopColor: "#e23e3e" },
+  { offset: 0.93, stopColor: "#dc6262" },
+  { offset: 0.96, stopColor: "#d58e8e" },
+  { offset: 0.99, stopColor: "#cdc0c0" },
+  { offset: 1, stopColor: "#ccc" }
+], r = [
+  { offset: 0, stopColor: "#ccc" },
+  { offset: 1, stopColor: "#f2f2f2" }
+], l = [
+  { name: "violet", color: "#861CFF", range: [380, 450] },
+  { name: "blue", color: "#0000FF", range: [450, 495] },
+  { name: "green", color: "#00FF00", range: [495, 570] },
+  { name: "yellow", color: "#FFDD15", range: [570, 590] },
+  { name: "orange", color: "#F18922", range: [590, 620] },
+  { name: "red", color: "#EC0000", range: [620, 750] }
+], p = [
+  { name: "ultraviolet", upper: 400, stops: s },
+  { name: "visible", upper: 750, lower: 400, stops: t, colors: l },
+  { name: "infrared", lower: 750, stops: r }
+], e = 255, f = 322, o = 1084, a = {
+  condensed: {
+    min: f,
+    max: o,
+    range: o - f
+  },
+  default: {
+    min: e,
+    max: o,
+    range: o - e
+  }
+};
+export {
+  l as colors,
+  n as filters,
+  a as rangeConfig,
+  p as spectrums
+};

package/dist/widgets/CameraFilter/styles.cjs

@@ -0,0 +1,105 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),o=require("../../layout/AspectRatio/index.cjs"),a=n=>n&&n.__esModule?n:{default:n},e=a(i),l=e.default(o.default)`
+  display: flex;
+  align-items: center;
+`,r=e.default.div`
+  container-type: inline-size;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  text-align: center;
+  width: 100%;
+`,s=e.default.h3`
+  margin: 0;
+`,d=e.default.table`
+  border-collapse: collapse;
+  text-align: center;
+  margin-inline-start: var(--filter-table-margin-inline-start);
+  width: var(--filter-table-width);
+
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
+    margin-block-start: var(--PADDING_SMALL, 20px);
+  }
+`,c=e.default.tbody`
+  display: table-header-group;
+`,f=e.default.thead`
+  display: table-row-group;
+`,m=e.default.td`
+  line-height: 1.2;
+  font-size: 80%;
+`,u=e.default.span`
+  font-size: 80%;
+`,p=e.default.th`
+  font-size: 120%;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+  border: var(--filter-name-border);
+  border-width: 1px;
+
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
+    border-width: 3px;
+  }
+`,g=e.default.div`
+  min-width: 20ch;
+  width: 50%;
+  max-width: 30ch;
+  justify-self: center;
+  text-align: left;
+`,h=e.default.label`
+  font-size: 0.75em;
+`,w=e.default.text`
+  font-size: 2em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`,b=e.default.tspan`
+  font-size: 2em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`,_=e.default.tspan`
+  font-size: 1.5em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.5em;
+  }
+`,A=e.default.tspan`
+  font-size: 1.3em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 0.8em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.4em;
+  }
+`,B=e.default.ul`
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  font-size: 80%;
+  margin: var(--PADDING_SMALL, 20px) 0 0;
+  padding: 0;
+  list-style-type: none;
+`,E=e.default.li`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &:before {
+    content: "\\200B";
+  }
+`;exports.ColorName=b;exports.ColorSpectrum=_;exports.ColorSpectrumUnit=A;exports.CondensedRange=E;exports.CondensedRangeRow=B;exports.FilterContainer=r;exports.FilterName=p;exports.FilterNames=f;exports.FilterRange=m;exports.FilterRanges=c;exports.FilterTable=d;exports.FilterTitle=s;exports.FilterWrapper=l;exports.SelectContainer=g;exports.SelectLabel=h;exports.SpectrumLabel=w;exports.Wavelength=u;