@rubin-epo/epo-widget-lib 0.5.1-alpha.0 → 0.6.0

package/dist/widgets/ColorTool/FilterControls/FilterControls.js

@@ -1,63 +1,65 @@
-import { jsxs as B, Fragment as T, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, Fragment as B, jsx as l } from "react/jsx-runtime";
 import I from "@rubin-epo/epo-react-lib/SelectListbox";
 import { getBrightnessValue as j } from "../utilities.js";
-import { useTranslation as S } from "react-i18next";
-import { FilterToggleButton as W, Slider as $ } from "../styles.js";
-const a = ({
+import { useTranslation as C } from "react-i18next";
+import { FilterLabel as L, HiddenCheckbox as S, FilterToggle as W, Slider as w } from "./styles.js";
+const d = ({
   filter: t,
-  colorOptions: d,
+  colorOptions: c,
   isDisabled: r,
-  onChangeFilterCallback: o,
-  buttonLabelledById: c,
-  selectLabelledById: m,
-  sliderLabelledById: h
+  onChangeFilterCallback: e,
+  buttonLabelledById: m,
+  selectLabelledById: h,
+  sliderLabelledById: p
 }) => {
-  const { t: p } = S(), { label: i, color: n = "", value: g, active: l, min: u, max: x } = t, b = () => o && o({ ...t, active: !l }), v = (e) => e && o && o({ ...t, color: e }), f = (e) => o && o({
+  const { t: b } = C(), { label: n, color: a = "", value: x, active: s, min: g, max: u } = t, y = () => e && e({ ...t, active: !s }), f = (o) => o && e && e({ ...t, color: o }), v = (o) => e && e({
     ...t,
-    brightness: j(u, x, e),
-    value: e
-  }), y = p("colorTool.actions.select_filter");
-  return /* @__PURE__ */ B(T, { children: [
-    /* @__PURE__ */ s(
-      W,
-      {
-        disabled: r,
-        onClick: b,
-        $active: l,
-        "aria-labelledby": c,
-        children: i
-      }
-    ),
-    /* @__PURE__ */ s(
+    brightness: j(g, u, o),
+    value: o
+  }), T = b("colorTool.actions.select_filter");
+  return /* @__PURE__ */ i(B, { children: [
+    /* @__PURE__ */ i(L, { "aria-labelledby": m, children: [
+      /* @__PURE__ */ l(
+        S,
+        {
+          disabled: r,
+          checked: s,
+          type: "checkbox",
+          onChange: y
+        }
+      ),
+      /* @__PURE__ */ l(W, { as: "span", children: n })
+    ] }),
+    /* @__PURE__ */ l(
       I,
       {
         isDisabled: r,
-        placeholder: y,
-        value: n,
-        options: d,
-        onChangeCallback: v,
+        placeholder: T,
+        value: a,
+        options: c,
+        onChangeCallback: f,
         width: "100%",
         maxWidth: "100%",
-        labelledById: m
+        labelledById: h
       }
     ),
-    /* @__PURE__ */ s(
-      $,
+    /* @__PURE__ */ l(
+      w,
       {
         min: 1,
         max: 100,
-        onChangeCallback: f,
-        isDisabled: !l,
-        labelledbyId: h,
-        value: g,
-        label: i,
-        color: n
+        onChangeCallback: v,
+        isDisabled: !s,
+        labelledbyId: p,
+        value: x,
+        label: n,
+        color: a
       }
     )
   ] });
 };
-a.displayName = "Widgets.ColorTool.FilterControls";
-const V = a;
+d.displayName = "Widgets.ColorTool.FilterControls";
+const _ = d;
 export {
-  V as default
+  _ as default
 };

package/dist/widgets/ColorTool/FilterControls/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./FilterControls";

package/dist/widgets/ColorTool/FilterControls/styles.cjs

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),l=require("@rubin-epo/epo-react-lib/HorizontalSlider"),n=require("@rubin-epo/epo-react-lib/Button"),o=e=>e&&e.__esModule?e:{default:e},t=o(i),d=o(l),r=o(n),s=t.default.input`
+  position: absolute;
+  left: -999px;
+  width: 1px;
+  height: 1px;
+  top: auto;
+  overflow: hidden;
+`,u=t.default(r.default)`
+  background-color: var(--filter-toggle-background, #f7f7f7);
+  border: 1px solid;
+  color: var(--filter-toggle-color, #6c6e6e);
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
+  font-size: 22px;
+  text-transform: lowercase;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  user-select: none;
+`,a=t.default.label`
+  overflow: hidden;
+
+  input:not(:disabled) + span {
+    cursor: pointer;
+
+    &:hover {
+      outline: 2px solid #6c6e6e;
+      outline-offset: -2px;
+    }
+  }
+
+  input:not(:disabled):focus + span,
+  input:not(:disabled):focus-visible + span {
+    outline: 2px solid #6c6e6e;
+    outline-offset: -2px;
+  }
+
+  input:not(:disabled):checked + span {
+    --filter-toggle-background: var(--turquoise85, #12726c);
+    --filter-toggle-color: var(--white, #fff);
+
+    &:hover {
+      outline: 1px solid var(--white, #fff);
+      outline-offset: -3px;
+    }
+  }
+
+  input:not(:disabled):checked:focus + span,
+  input:not(:disabled):checked:focus-visible + span {
+    outline: 1px solid var(--white, #fff);
+    outline-offset: -3px;
+  }
+`,f=t.default(d.default)`
+  padding: 0;
+  width: 100%;
+`;exports.FilterLabel=a;exports.FilterToggle=u;exports.HiddenCheckbox=s;exports.Slider=f;