@procaaso/alphinity-ui-components 1.0.12 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +314 -12
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +19 -5
  4. package/dist/index.d.ts +19 -5
  5. package/dist/index.js +314 -12
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -1015,9 +1015,14 @@ function DeviceControlPanel({
1015
1015
  onCustomAction,
1016
1016
  onOpenConfig,
1017
1017
  showConfigButton = true,
1018
- modeSelectionStyle = "buttons"
1018
+ onUndock,
1019
+ undockIcon = "\u21F1",
1020
+ modeSelectionStyle = "buttons",
1021
+ embedded = false
1019
1022
  }) {
1020
1023
  const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
1024
+ const [showModeModal, setShowModeModal] = (0, import_react5.useState)(false);
1025
+ const [pendingMode, setPendingMode] = (0, import_react5.useState)(null);
1021
1026
  const [showToast, setShowToast] = (0, import_react5.useState)(true);
1022
1027
  (0, import_react5.useEffect)(() => {
1023
1028
  if (binding) {
@@ -1054,7 +1059,8 @@ function DeviceControlPanel({
1054
1059
  value: Math.round(13 * fontScale),
1055
1060
  input: Math.round(14 * fontScale),
1056
1061
  button: Math.round(12 * fontScale),
1057
- status: Math.round(10 * fontScale)
1062
+ status: Math.round(10 * fontScale),
1063
+ description: Math.round(13 * fontScale)
1058
1064
  };
1059
1065
  const currentModeObj = binding.modes.find((m) => m.value === currentMode);
1060
1066
  const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
@@ -1090,11 +1096,31 @@ function DeviceControlPanel({
1090
1096
  const handleParameterInput = (parameterId, value) => {
1091
1097
  setLocalParameterValues((prev) => ({ ...prev, [parameterId]: value }));
1092
1098
  };
1093
- const panelStyle = {
1099
+ const panelStyle = embedded ? {
1100
+ // Embedded mode: static positioning for container layouts
1101
+ position: "static",
1102
+ width: "100%",
1103
+ backgroundColor,
1104
+ color: textColor,
1105
+ borderRadius: "8px 8px 0 0",
1106
+ boxShadow: "none",
1107
+ border: `2px solid ${borderColor}`,
1108
+ padding: spacing.padding,
1109
+ maxHeight: maxHeight || "70vh",
1110
+ overflowY: "auto",
1111
+ ...binding.display?.style
1112
+ } : {
1113
+ // Fixed mode: traditional overlay positioning
1094
1114
  position: "fixed",
1095
1115
  ...position === "bottom" ? {
1096
1116
  bottom: 0,
1097
- ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto", maxWidth },
1117
+ ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
1118
+ left: 0,
1119
+ right: 0,
1120
+ marginLeft: "auto",
1121
+ marginRight: "auto",
1122
+ maxWidth
1123
+ },
1098
1124
  animation: "slideUp 0.3s ease-out"
1099
1125
  } : {
1100
1126
  right: 0,
@@ -1140,9 +1166,14 @@ function DeviceControlPanel({
1140
1166
  fontFamily: "Arial, sans-serif",
1141
1167
  letterSpacing: "0.5px",
1142
1168
  textTransform: "uppercase",
1143
- color: textColor
1169
+ color: textColor,
1170
+ overflow: "hidden",
1171
+ textOverflow: "ellipsis",
1172
+ whiteSpace: "nowrap",
1173
+ maxWidth: "200px"
1144
1174
  },
1145
- children: titleText
1175
+ title: titleText.length > 25 ? titleText : void 0,
1176
+ children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
1146
1177
  }
1147
1178
  ),
1148
1179
  binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1180,6 +1211,27 @@ function DeviceControlPanel({
1180
1211
  children: "\u2699"
1181
1212
  }
1182
1213
  ),
1214
+ onUndock && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1215
+ "button",
1216
+ {
1217
+ onClick: onUndock,
1218
+ title: "Undock panel",
1219
+ style: {
1220
+ width: touchSize * 0.7,
1221
+ height: touchSize * 0.7,
1222
+ backgroundColor: surfaceColor,
1223
+ color: textColor,
1224
+ border: `2px solid ${borderColor}`,
1225
+ borderRadius: "2px",
1226
+ fontSize: "16px",
1227
+ cursor: "pointer",
1228
+ fontWeight: 600,
1229
+ fontFamily: "Arial, sans-serif",
1230
+ padding: "0"
1231
+ },
1232
+ children: undockIcon
1233
+ }
1234
+ ),
1183
1235
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1184
1236
  "button",
1185
1237
  {
@@ -1317,7 +1369,206 @@ function DeviceControlPanel({
1317
1369
  },
1318
1370
  children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
1319
1371
  }
1320
- ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1372
+ ) : modeSelectionStyle === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
1373
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1374
+ "div",
1375
+ {
1376
+ onClick: () => setShowModeModal(true),
1377
+ style: {
1378
+ padding: "12px",
1379
+ backgroundColor: surfaceColor,
1380
+ border: `2px solid ${borderColor}`,
1381
+ borderRadius: "6px",
1382
+ fontSize: `${fontSize.label}px`,
1383
+ fontWeight: 600,
1384
+ fontFamily: "Arial, sans-serif",
1385
+ letterSpacing: "0.5px",
1386
+ textTransform: "uppercase",
1387
+ cursor: "pointer",
1388
+ display: "flex",
1389
+ justifyContent: "space-between",
1390
+ alignItems: "center"
1391
+ },
1392
+ children: [
1393
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: binding.modes.find((m) => m.value === currentMode)?.label || currentMode }),
1394
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "20px", marginLeft: "8px" }, children: "\u25BC" })
1395
+ ]
1396
+ }
1397
+ ),
1398
+ showModeModal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1399
+ "div",
1400
+ {
1401
+ style: {
1402
+ position: "fixed",
1403
+ top: 0,
1404
+ left: 0,
1405
+ right: 0,
1406
+ bottom: 0,
1407
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
1408
+ display: "flex",
1409
+ alignItems: "center",
1410
+ justifyContent: "center",
1411
+ zIndex: 2e4
1412
+ },
1413
+ onClick: () => {
1414
+ setShowModeModal(false);
1415
+ setPendingMode(null);
1416
+ },
1417
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1418
+ "div",
1419
+ {
1420
+ onClick: (e) => e.stopPropagation(),
1421
+ style: {
1422
+ backgroundColor,
1423
+ borderRadius: "8px",
1424
+ padding: "24px",
1425
+ minWidth: "300px",
1426
+ maxWidth: "400px",
1427
+ border: `2px solid ${borderColor}`
1428
+ },
1429
+ children: [
1430
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1431
+ "h3",
1432
+ {
1433
+ style: {
1434
+ margin: "0 0 4px 0",
1435
+ fontSize: `${fontSize.title}px`,
1436
+ fontWeight: 600,
1437
+ fontFamily: "Arial, sans-serif",
1438
+ color: textColor
1439
+ },
1440
+ children: "Select Mode"
1441
+ }
1442
+ ),
1443
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1444
+ "div",
1445
+ {
1446
+ style: {
1447
+ marginBottom: "16px",
1448
+ fontSize: `${fontSize.label}px`,
1449
+ fontWeight: 600,
1450
+ fontFamily: "Arial, sans-serif",
1451
+ color: mutedTextColor,
1452
+ textTransform: "uppercase"
1453
+ },
1454
+ children: binding.display?.title || binding.deviceName || binding.tag || binding.nodeId
1455
+ }
1456
+ ),
1457
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1458
+ "select",
1459
+ {
1460
+ value: pendingMode || currentMode,
1461
+ onChange: (e) => setPendingMode(e.target.value),
1462
+ style: {
1463
+ width: "100%",
1464
+ height: `${touchSize}px`,
1465
+ marginBottom: "8px",
1466
+ backgroundColor: surfaceColor,
1467
+ color: textColor,
1468
+ border: `2px solid ${borderColor}`,
1469
+ borderRadius: "6px",
1470
+ fontSize: `${fontSize.label}px`,
1471
+ fontWeight: 600,
1472
+ fontFamily: "Arial, sans-serif",
1473
+ letterSpacing: "0.5px",
1474
+ textTransform: "uppercase",
1475
+ paddingLeft: "12px",
1476
+ paddingRight: "12px",
1477
+ cursor: "pointer"
1478
+ },
1479
+ children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1480
+ "option",
1481
+ {
1482
+ value: mode.value,
1483
+ disabled: mode.enabled === false,
1484
+ children: mode.label
1485
+ },
1486
+ mode.value
1487
+ ))
1488
+ }
1489
+ ),
1490
+ (() => {
1491
+ const selectedMode = binding.modes.find(
1492
+ (m) => m.value === (pendingMode || currentMode)
1493
+ );
1494
+ return selectedMode?.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1495
+ "div",
1496
+ {
1497
+ style: {
1498
+ marginBottom: "16px",
1499
+ padding: "12px",
1500
+ backgroundColor: surfaceColor,
1501
+ border: `1px solid ${borderColor}`,
1502
+ borderRadius: "6px",
1503
+ fontSize: `${fontSize.description}px`,
1504
+ color: mutedTextColor,
1505
+ fontFamily: "Arial, sans-serif",
1506
+ lineHeight: "1.4"
1507
+ },
1508
+ children: selectedMode.description
1509
+ }
1510
+ ) : null;
1511
+ })(),
1512
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
1513
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1514
+ "button",
1515
+ {
1516
+ onClick: () => {
1517
+ const modeToSend = pendingMode || currentMode || binding.modes[0]?.value;
1518
+ if (modeToSend) {
1519
+ handleModeChange(modeToSend);
1520
+ }
1521
+ setShowModeModal(false);
1522
+ setPendingMode(null);
1523
+ },
1524
+ style: {
1525
+ flex: 1,
1526
+ height: `${touchSize}px`,
1527
+ backgroundColor: "#4ade80",
1528
+ color: "#000000",
1529
+ border: "2px solid #22c55e",
1530
+ borderRadius: "6px",
1531
+ fontSize: `${fontSize.button}px`,
1532
+ fontWeight: 600,
1533
+ fontFamily: "Arial, sans-serif",
1534
+ letterSpacing: "0.5px",
1535
+ textTransform: "uppercase",
1536
+ cursor: "pointer"
1537
+ },
1538
+ children: "Confirm"
1539
+ }
1540
+ ),
1541
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1542
+ "button",
1543
+ {
1544
+ onClick: () => {
1545
+ setShowModeModal(false);
1546
+ setPendingMode(null);
1547
+ },
1548
+ style: {
1549
+ flex: 1,
1550
+ height: `${touchSize}px`,
1551
+ backgroundColor: surfaceColor,
1552
+ color: textColor,
1553
+ border: `2px solid ${borderColor}`,
1554
+ borderRadius: "6px",
1555
+ fontSize: `${fontSize.button}px`,
1556
+ fontWeight: 600,
1557
+ fontFamily: "Arial, sans-serif",
1558
+ letterSpacing: "0.5px",
1559
+ textTransform: "uppercase",
1560
+ cursor: "pointer"
1561
+ },
1562
+ children: "Cancel"
1563
+ }
1564
+ )
1565
+ ] })
1566
+ ]
1567
+ }
1568
+ )
1569
+ }
1570
+ )
1571
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1321
1572
  "div",
1322
1573
  {
1323
1574
  style: {
@@ -7930,6 +8181,8 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
7930
8181
  function DeviceConfigPanel({
7931
8182
  binding,
7932
8183
  onClose,
8184
+ onUndock,
8185
+ undockIcon = "\u21F1",
7933
8186
  position = "bottom",
7934
8187
  align = "center",
7935
8188
  touchOptimized = true,
@@ -7939,7 +8192,8 @@ function DeviceConfigPanel({
7939
8192
  maxWidth,
7940
8193
  toastDuration = 3e3,
7941
8194
  onOpenControls,
7942
- showControlsButton = true
8195
+ showControlsButton = true,
8196
+ embedded = false
7943
8197
  }) {
7944
8198
  const [localValues, setLocalValues] = (0, import_react20.useState)(() => {
7945
8199
  if (binding) {
@@ -8306,11 +8560,33 @@ function DeviceConfigPanel({
8306
8560
  section.id
8307
8561
  );
8308
8562
  };
8309
- const panelStyle = {
8563
+ const panelStyle = embedded ? {
8564
+ // Embedded mode: static positioning for container layouts
8565
+ position: "static",
8566
+ width: "100%",
8567
+ backgroundColor,
8568
+ color: textColor,
8569
+ borderRadius: "8px 8px 0 0",
8570
+ boxShadow: "none",
8571
+ border: `2px solid ${borderColor}`,
8572
+ padding: spacing.padding,
8573
+ maxHeight: maxHeight || "70vh",
8574
+ overflowY: "auto",
8575
+ display: "flex",
8576
+ flexDirection: "column",
8577
+ ...binding.display?.style
8578
+ } : {
8579
+ // Fixed mode: traditional overlay positioning
8310
8580
  position: "fixed",
8311
8581
  ...position === "bottom" ? {
8312
8582
  bottom: 0,
8313
- ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto", maxWidth },
8583
+ ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
8584
+ left: 0,
8585
+ right: 0,
8586
+ marginLeft: "auto",
8587
+ marginRight: "auto",
8588
+ maxWidth
8589
+ },
8314
8590
  animation: "slideUp 0.3s ease-out"
8315
8591
  } : {
8316
8592
  right: 0,
@@ -8362,9 +8638,14 @@ function DeviceConfigPanel({
8362
8638
  fontFamily: "Arial, sans-serif",
8363
8639
  letterSpacing: "0.5px",
8364
8640
  textTransform: "uppercase",
8365
- color: textColor
8641
+ color: textColor,
8642
+ overflow: "hidden",
8643
+ textOverflow: "ellipsis",
8644
+ whiteSpace: "nowrap",
8645
+ maxWidth: "200px"
8366
8646
  },
8367
- children: titleText
8647
+ title: titleText.length > 25 ? titleText : void 0,
8648
+ children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
8368
8649
  }
8369
8650
  ),
8370
8651
  binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -8404,6 +8685,27 @@ function DeviceConfigPanel({
8404
8685
  children: "CTRL"
8405
8686
  }
8406
8687
  ),
8688
+ onUndock && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
8689
+ "button",
8690
+ {
8691
+ onClick: onUndock,
8692
+ title: "Undock panel",
8693
+ style: {
8694
+ width: touchSize * 0.7,
8695
+ height: touchSize * 0.7,
8696
+ backgroundColor: surfaceColor,
8697
+ color: textColor,
8698
+ border: `2px solid ${borderColor}`,
8699
+ borderRadius: "2px",
8700
+ fontSize: "16px",
8701
+ cursor: "pointer",
8702
+ fontWeight: 600,
8703
+ fontFamily: "Arial, sans-serif",
8704
+ padding: "0"
8705
+ },
8706
+ children: undockIcon
8707
+ }
8708
+ ),
8407
8709
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
8408
8710
  "button",
8409
8711
  {