@imperosoft/cris-webui-components 1.1.2 → 1.1.3-beta.0

package/dist/index.mjs

@@ -1307,10 +1307,250 @@ function CrisCoDebug({
   );
 }
 
-// src/components/CrisCoMatrixListsTie.tsx
+// src/components/CrisCoList.tsx
 import { useCustomObject as useCustomObject2, useCustomObjectSend as useCustomObjectSend2 } from "@imperosoft/cris-webui-ch5-core";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var colors = {
+  itemBg: "#4f5152",
+  itemActiveBg: "#007ca0",
+  text: "#ffffff",
+  headerText: "#6b7280"
+};
+var defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%",
+    padding: "1rem 2rem",
+    minHeight: 0
+  },
+  header: {
+    fontSize: "1.5em",
+    fontWeight: 700,
+    padding: "0.5rem 0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: colors.headerText,
+    flexShrink: 0,
+    textAlign: "center"
+  },
+  scroll: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto",
+    scrollbarWidth: "none",
+    WebkitOverflowScrolling: "touch",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.15rem"
+  },
+  item: {
+    display: "flex",
+    alignItems: "stretch",
+    minHeight: "3.7rem",
+    cursor: "pointer",
+    userSelect: "none",
+    background: colors.itemBg,
+    borderRadius: "0.5rem",
+    transition: "background 0.15s"
+  },
+  itemActive: {
+    background: colors.itemActiveBg
+  },
+  itemBtn: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    alignItems: "stretch",
+    background: "transparent",
+    border: "none",
+    textAlign: "left",
+    color: colors.text,
+    height: "100%",
+    borderRadius: "0.5rem",
+    cursor: "pointer"
+  },
+  itemBtnInner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.4rem",
+    width: "100%",
+    flex: 1,
+    padding: "0.5rem 0.9rem"
+  },
+  idNum: {
+    flexShrink: 0,
+    opacity: 0.6,
+    minWidth: "1.7em",
+    textAlign: "right",
+    fontWeight: 400,
+    marginRight: "0.4em"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: "1.4em",
+    fontWeight: 700,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: colors.text
+  }
+};
+var INJECTED_CSS = `
+.cris-co-list-scroll::-webkit-scrollbar { display: none; }
+.cris-co-list-item > div:first-child > .cris-button { width: 100%; height: 100%; }
+`;
+var styleInjected = false;
+function injectStyle() {
+  if (styleInjected) return;
+  styleInjected = true;
+  const style = document.createElement("style");
+  style.textContent = INJECTED_CSS;
+  document.head.appendChild(style);
+}
+function ListItemRow({
+  item,
+  selected,
+  showIds,
+  settings,
+  onSelect,
+  renderItem,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName
+}) {
+  const isEnabled = item.en !== false;
+  const useDefaults = !itemClassName;
+  const classes = [
+    "cris-co-list-item",
+    itemClassName,
+    selected && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = useDefaults ? {
+    ...defaults.item,
+    ...itemStyleProp,
+    ...selected ? { ...defaults.itemActive, ...itemActiveStyle } : void 0,
+    opacity: isEnabled ? 1 : 0.4
+  } : { ...itemStyleProp };
+  if (renderItem) {
+    return /* @__PURE__ */ jsx8("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected,
+        enabled: isEnabled,
+        onPress: onSelect,
+        showLocalFeedback: false,
+        children: renderItem(item, selected, settings)
+      }
+    ) }) : /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected,
+        enabled: isEnabled,
+        onPress: onSelect,
+        className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
+        classActive: itemActiveClassName,
+        children: renderItem(item, selected, settings)
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx8("div", { className: classes, style: computedStyle, children: useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+    CrisButton,
+    {
+      selected,
+      enabled: isEnabled,
+      onPress: onSelect,
+      showLocalFeedback: false,
+      children: /* @__PURE__ */ jsxs7("div", { style: defaults.itemBtnInner, children: [
+        showIds && /* @__PURE__ */ jsx8("span", { className: "cris-co-list-id", style: defaults.idNum, children: item.id }),
+        /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `Item ${item.id}` })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ jsx8(
+    CrisButton,
+    {
+      selected,
+      enabled: isEnabled,
+      onPress: onSelect,
+      className: `cris-co-list-item-btn ${itemActiveClassName ?? ""}`,
+      classActive: itemActiveClassName,
+      children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
+        showIds && /* @__PURE__ */ jsx8("span", { className: "cris-co-list-id", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+        /* @__PURE__ */ jsx8("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `Item ${item.id}` })
+      ] })
+    }
+  ) });
+}
+function CrisCoList({
+  oid,
+  title,
+  showIds = true,
+  selectAction = "select",
+  renderItem,
+  className,
+  style,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName
+}) {
+  const list = useCustomObject2(oid);
+  const send = useCustomObjectSend2();
+  injectStyle();
+  if (!list) return null;
+  const { st: settings, si, it: items } = list;
+  const visibleItems = items?.filter((item) => item.vs !== false);
+  const handleSelect = (id) => {
+    send(oid, { action: selectAction, id });
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults.container, ...style },
+      children: [
+        title && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: headerClassName,
+            style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { className: "cris-co-list-scroll", style: defaults.scroll, children: visibleItems?.map((item) => /* @__PURE__ */ jsx8(
+          ListItemRow,
+          {
+            item,
+            selected: si === item.id,
+            showIds,
+            settings,
+            onSelect: () => handleSelect(item.id),
+            renderItem,
+            itemClassName,
+            itemStyle,
+            itemActiveClassName,
+            itemActiveStyle,
+            itemDisabledClassName
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/CrisCoMatrixListsTie.tsx
+import { useCustomObject as useCustomObject3, useCustomObjectSend as useCustomObjectSend3 } from "@imperosoft/cris-webui-ch5-core";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var colors2 = {
   itemBg: "#4f5152",
   itemActiveBg: "#007ca0",
   vmActiveBg: "#dc2626",
@@ -1321,7 +1561,7 @@ var colors = {
   sgOn: "#2196f3",
   sgOff: "#666666"
 };
-var defaults = {
+var defaults2 = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -1343,7 +1583,7 @@ var defaults = {
     padding: "0.5rem 0.75rem",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    color: colors.headerText,
+    color: colors2.headerText,
     flexShrink: 0,
     textAlign: "center"
   },
@@ -1365,12 +1605,12 @@ var defaults = {
     minHeight: "3.7rem",
     cursor: "pointer",
     userSelect: "none",
-    background: colors.itemBg,
+    background: colors2.itemBg,
     borderRadius: "0.5rem",
     transition: "background 0.15s"
   },
   itemActive: {
-    background: colors.itemActiveBg
+    background: colors2.itemActiveBg
   },
   itemBtn: {
     flex: 1,
@@ -1380,7 +1620,7 @@ var defaults = {
     background: "transparent",
     border: "none",
     textAlign: "left",
-    color: colors.text,
+    color: colors2.text,
     height: "100%",
     borderRadius: "0.5rem",
     cursor: "pointer"
@@ -1408,7 +1648,7 @@ var defaults = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors.text
+    color: colors2.text
   },
   indicators: {
     display: "flex",
@@ -1426,8 +1666,8 @@ var defaults = {
     alignSelf: "stretch",
     display: "flex",
     alignItems: "center",
-    background: colors.itemBg,
-    color: colors.text,
+    background: colors2.itemBg,
+    color: colors2.text,
     border: "none",
     borderRadius: "0.4rem",
     padding: "0 0.6rem",
@@ -1438,11 +1678,11 @@ var defaults = {
     transition: "background 0.15s"
   },
   vmBtnActive: {
-    background: colors.vmActiveBg,
-    color: colors.text
+    background: colors2.vmActiveBg,
+    color: colors2.text
   }
 };
-var INJECTED_CSS = `
+var INJECTED_CSS2 = `
 .cris-co-matrix-scroll::-webkit-scrollbar { display: none; }
 .cris-co-matrix-item > div:first-child > .cris-button { width: 100%; height: 100%; }
 `;
@@ -1451,28 +1691,28 @@ function injectScrollbarStyle() {
   if (scrollbarStyleInjected) return;
   scrollbarStyleInjected = true;
   const style = document.createElement("style");
-  style.textContent = INJECTED_CSS;
+  style.textContent = INJECTED_CSS2;
   document.head.appendChild(style);
 }
 function DefaultIoIndicator({ on }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       style: {
-        ...defaults.indicator,
-        backgroundColor: on ? colors.ioOn : colors.ioOff
+        ...defaults2.indicator,
+        backgroundColor: on ? colors2.ioOn : colors2.ioOff
       },
       title: on ? "Online" : "Offline"
     }
   );
 }
 function DefaultSignalIndicator({ on }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       style: {
-        ...defaults.indicator,
-        backgroundColor: on ? colors.sgOn : colors.sgOff
+        ...defaults2.indicator,
+        backgroundColor: on ? colors2.sgOn : colors2.sgOff
       },
       title: on ? "Signal detected" : "No signal"
     }
@@ -1506,29 +1746,29 @@ function MatrixItemRow({
     !isEnabled && (itemDisabledClassName || "disabled")
   ].filter(Boolean).join(" ");
   const computedStyle = useDefaults ? {
-    ...defaults.item,
+    ...defaults2.item,
     ...itemStyleProp,
-    ...isActive ? { ...defaults.itemActive, ...itemActiveStyle } : void 0,
+    ...isActive ? { ...defaults2.itemActive, ...itemActiveStyle } : void 0,
     opacity: isEnabled ? 1 : 0.4
   } : { ...itemStyleProp };
-  return /* @__PURE__ */ jsxs7("div", { className: classes, style: computedStyle, children: [
-    useDefaults ? /* @__PURE__ */ jsx8("div", { style: defaults.itemBtn, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className: classes, style: computedStyle, children: [
+    useDefaults ? /* @__PURE__ */ jsx9("div", { style: defaults2.itemBtn, children: /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected: isActive,
         enabled: isEnabled,
         onPress: onSelect,
         showLocalFeedback: false,
-        children: /* @__PURE__ */ jsxs7("div", { style: defaults.itemBtnInner, children: [
-          showChannels && /* @__PURE__ */ jsx8("span", { className: "cris-co-matrix-ch", style: defaults.channelNum, children: item.id }),
-          /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ jsxs8("div", { style: defaults2.itemBtnInner, children: [
+          showChannels && /* @__PURE__ */ jsx9("span", { className: "cris-co-matrix-ch", style: defaults2.channelNum, children: item.id }),
+          /* @__PURE__ */ jsx9("span", { style: defaults2.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ jsxs8("div", { style: defaults2.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx9(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx9(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
-    ) }) : /* @__PURE__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected: isActive,
@@ -1536,22 +1776,22 @@ function MatrixItemRow({
         onPress: onSelect,
         className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
         classActive: itemActiveClassName,
-        children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
-          showChannels && /* @__PURE__ */ jsx8("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
-          /* @__PURE__ */ jsx8("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
-          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
-            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
-            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(DefaultSignalIndicator, { on: item.sg.on }))
+        children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", width: "100%" }, children: [
+          showChannels && /* @__PURE__ */ jsx9("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+          /* @__PURE__ */ jsx9("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ jsxs8("div", { style: defaults2.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx9(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx9(DefaultSignalIndicator, { on: item.sg.on }))
           ] })
         ] })
       }
     ),
-    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ jsx8("div", { style: {
-      ...defaults.vmBtn,
-      ...item.vm.on ? defaults.vmBtnActive : void 0,
+    item.vm.vs && (useDefaults && !vmButtonClassName ? /* @__PURE__ */ jsx9("div", { style: {
+      ...defaults2.vmBtn,
+      ...item.vm.on ? defaults2.vmBtnActive : void 0,
       opacity: item.vm.en ? 1 : 0.4,
       pointerEvents: item.vm.en ? "auto" : "none"
-    }, children: /* @__PURE__ */ jsx8(
+    }, children: /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1560,7 +1800,7 @@ function MatrixItemRow({
         onPress: onToggleVideoMute,
         showLocalFeedback: false
       }
-    ) }) : /* @__PURE__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx9(
       CrisButton,
       {
         selected: item.vm.on,
@@ -1595,8 +1835,8 @@ function CrisCoMatrixListsTie({
   renderIoIndicator,
   renderSignalIndicator
 }) {
-  const matrix = useCustomObject2(oid);
-  const send = useCustomObjectSend2();
+  const matrix = useCustomObject3(oid);
+  const send = useCustomObjectSend3();
   injectScrollbarStyle();
   if (!matrix) return null;
   const { si, ip: inputs, op: outputs } = matrix;
@@ -1609,27 +1849,27 @@ function CrisCoMatrixListsTie({
   const handleToggleVideoMute = (type, id) => {
     send(oid, { action: "toggleVideoMute", type, id });
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className,
-      style: className ? style : { ...defaults.container, ...style },
+      style: className ? style : { ...defaults2.container, ...style },
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
                   children: inputTitle
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx9(
                 MatrixItemRow,
                 {
                   item,
@@ -1654,21 +1894,21 @@ function CrisCoMatrixListsTie({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "div",
           {
             className: listClassName,
-            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            style: listClassName ? listStyle : { ...defaults2.list, ...listStyle },
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: headerClassName,
-                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  style: headerClassName ? headerStyle : { ...defaults2.header, ...headerStyle },
                   children: outputTitle
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "cris-co-matrix-scroll", style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9("div", { className: "cris-co-matrix-scroll", style: defaults2.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx9(
                 MatrixItemRow,
                 {
                   item,
@@ -1700,6 +1940,7 @@ function CrisCoMatrixListsTie({
 export {
   CrisButton,
   CrisCoDebug,
+  CrisCoList,
   CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,