@procaaso/alphinity-ui-components 1.0.12 → 1.1.0

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 +313 -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 +313 -12
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
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,205 @@ 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
+ if (pendingMode && pendingMode !== currentMode) {
1518
+ handleModeChange(pendingMode);
1519
+ }
1520
+ setShowModeModal(false);
1521
+ setPendingMode(null);
1522
+ },
1523
+ style: {
1524
+ flex: 1,
1525
+ height: `${touchSize}px`,
1526
+ backgroundColor: "#4ade80",
1527
+ color: "#000000",
1528
+ border: "2px solid #22c55e",
1529
+ borderRadius: "6px",
1530
+ fontSize: `${fontSize.button}px`,
1531
+ fontWeight: 600,
1532
+ fontFamily: "Arial, sans-serif",
1533
+ letterSpacing: "0.5px",
1534
+ textTransform: "uppercase",
1535
+ cursor: "pointer"
1536
+ },
1537
+ children: "Confirm"
1538
+ }
1539
+ ),
1540
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1541
+ "button",
1542
+ {
1543
+ onClick: () => {
1544
+ setShowModeModal(false);
1545
+ setPendingMode(null);
1546
+ },
1547
+ style: {
1548
+ flex: 1,
1549
+ height: `${touchSize}px`,
1550
+ backgroundColor: surfaceColor,
1551
+ color: textColor,
1552
+ border: `2px solid ${borderColor}`,
1553
+ borderRadius: "6px",
1554
+ fontSize: `${fontSize.button}px`,
1555
+ fontWeight: 600,
1556
+ fontFamily: "Arial, sans-serif",
1557
+ letterSpacing: "0.5px",
1558
+ textTransform: "uppercase",
1559
+ cursor: "pointer"
1560
+ },
1561
+ children: "Cancel"
1562
+ }
1563
+ )
1564
+ ] })
1565
+ ]
1566
+ }
1567
+ )
1568
+ }
1569
+ )
1570
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1321
1571
  "div",
1322
1572
  {
1323
1573
  style: {
@@ -7930,6 +8180,8 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
7930
8180
  function DeviceConfigPanel({
7931
8181
  binding,
7932
8182
  onClose,
8183
+ onUndock,
8184
+ undockIcon = "\u21F1",
7933
8185
  position = "bottom",
7934
8186
  align = "center",
7935
8187
  touchOptimized = true,
@@ -7939,7 +8191,8 @@ function DeviceConfigPanel({
7939
8191
  maxWidth,
7940
8192
  toastDuration = 3e3,
7941
8193
  onOpenControls,
7942
- showControlsButton = true
8194
+ showControlsButton = true,
8195
+ embedded = false
7943
8196
  }) {
7944
8197
  const [localValues, setLocalValues] = (0, import_react20.useState)(() => {
7945
8198
  if (binding) {
@@ -8306,11 +8559,33 @@ function DeviceConfigPanel({
8306
8559
  section.id
8307
8560
  );
8308
8561
  };
8309
- const panelStyle = {
8562
+ const panelStyle = embedded ? {
8563
+ // Embedded mode: static positioning for container layouts
8564
+ position: "static",
8565
+ width: "100%",
8566
+ backgroundColor,
8567
+ color: textColor,
8568
+ borderRadius: "8px 8px 0 0",
8569
+ boxShadow: "none",
8570
+ border: `2px solid ${borderColor}`,
8571
+ padding: spacing.padding,
8572
+ maxHeight: maxHeight || "70vh",
8573
+ overflowY: "auto",
8574
+ display: "flex",
8575
+ flexDirection: "column",
8576
+ ...binding.display?.style
8577
+ } : {
8578
+ // Fixed mode: traditional overlay positioning
8310
8579
  position: "fixed",
8311
8580
  ...position === "bottom" ? {
8312
8581
  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 },
8582
+ ...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
8583
+ left: 0,
8584
+ right: 0,
8585
+ marginLeft: "auto",
8586
+ marginRight: "auto",
8587
+ maxWidth
8588
+ },
8314
8589
  animation: "slideUp 0.3s ease-out"
8315
8590
  } : {
8316
8591
  right: 0,
@@ -8362,9 +8637,14 @@ function DeviceConfigPanel({
8362
8637
  fontFamily: "Arial, sans-serif",
8363
8638
  letterSpacing: "0.5px",
8364
8639
  textTransform: "uppercase",
8365
- color: textColor
8640
+ color: textColor,
8641
+ overflow: "hidden",
8642
+ textOverflow: "ellipsis",
8643
+ whiteSpace: "nowrap",
8644
+ maxWidth: "200px"
8366
8645
  },
8367
- children: titleText
8646
+ title: titleText.length > 25 ? titleText : void 0,
8647
+ children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
8368
8648
  }
8369
8649
  ),
8370
8650
  binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -8404,6 +8684,27 @@ function DeviceConfigPanel({
8404
8684
  children: "CTRL"
8405
8685
  }
8406
8686
  ),
8687
+ onUndock && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
8688
+ "button",
8689
+ {
8690
+ onClick: onUndock,
8691
+ title: "Undock panel",
8692
+ style: {
8693
+ width: touchSize * 0.7,
8694
+ height: touchSize * 0.7,
8695
+ backgroundColor: surfaceColor,
8696
+ color: textColor,
8697
+ border: `2px solid ${borderColor}`,
8698
+ borderRadius: "2px",
8699
+ fontSize: "16px",
8700
+ cursor: "pointer",
8701
+ fontWeight: 600,
8702
+ fontFamily: "Arial, sans-serif",
8703
+ padding: "0"
8704
+ },
8705
+ children: undockIcon
8706
+ }
8707
+ ),
8407
8708
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
8408
8709
  "button",
8409
8710
  {