@procaaso/alphinity-ui-components 1.0.8 → 1.0.10

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 +44 -21
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +33 -21
  4. package/dist/index.d.ts +33 -21
  5. package/dist/index.js +44 -21
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -246,6 +246,26 @@ interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivEl
246
246
  */
247
247
  declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
248
248
 
249
+ /**
250
+ * Device control capabilities and commands
251
+ */
252
+ interface ControlCapabilities {
253
+ /** Can the device be started? */
254
+ canStart?: boolean;
255
+ /** Can the device be stopped? */
256
+ canStop?: boolean;
257
+ /** Can the device be paused? */
258
+ canPause?: boolean;
259
+ /** Can the device be reset? */
260
+ canReset?: boolean;
261
+ /** Custom actions available */
262
+ customActions?: Array<{
263
+ id: string;
264
+ label: string;
265
+ icon?: string;
266
+ variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
267
+ }>;
268
+ }
249
269
  /**
250
270
  * Device control mode option
251
271
  */
@@ -292,26 +312,8 @@ interface ControlParameter {
292
312
  }>;
293
313
  /** Custom validation function */
294
314
  validate?: (value: any) => boolean | string;
295
- }
296
- /**
297
- * Device control capabilities and commands
298
- */
299
- interface ControlCapabilities {
300
- /** Can the device be started? */
301
- canStart?: boolean;
302
- /** Can the device be stopped? */
303
- canStop?: boolean;
304
- /** Can the device be paused? */
305
- canPause?: boolean;
306
- /** Can the device be reset? */
307
- canReset?: boolean;
308
- /** Custom actions available */
309
- customActions?: Array<{
310
- id: string;
311
- label: string;
312
- icon?: string;
313
- variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
314
- }>;
315
+ /** Modes where this parameter is visible (if empty/undefined, visible in all modes) */
316
+ modes?: string[];
315
317
  }
316
318
  /**
317
319
  * Device control state
@@ -460,8 +462,18 @@ interface DeviceControlPanelProps {
460
462
  onClose: () => void;
461
463
  /** Panel position */
462
464
  position?: 'bottom' | 'side';
465
+ /** Horizontal alignment for bottom position (default: center) */
466
+ align?: 'left' | 'center' | 'right';
463
467
  /** Optimize for touch (larger targets) */
464
468
  touchOptimized?: boolean;
469
+ /** Compact mode - reduces padding and spacing */
470
+ compact?: boolean;
471
+ /** Font size scale (default: 1.0, smaller: 0.8, larger: 1.2) */
472
+ fontScale?: number;
473
+ /** Maximum height for bottom position (default: 70vh) */
474
+ maxHeight?: string;
475
+ /** Maximum width for bottom position (default: none) */
476
+ maxWidth?: string;
465
477
  /** Called when mode changes */
466
478
  onModeChange?: (mode: string) => void;
467
479
  /** Called when parameter changes */
@@ -473,7 +485,7 @@ interface DeviceControlPanelProps {
473
485
  /** Called when custom action clicked */
474
486
  onCustomAction?: (actionId: string) => void;
475
487
  }
476
- declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
488
+ declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
477
489
 
478
490
  type DisplayMode = 'standard' | 'dashboard';
479
491
  interface FullscreenContainerProps {
package/dist/index.d.ts CHANGED
@@ -246,6 +246,26 @@ interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivEl
246
246
  */
247
247
  declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
248
248
 
249
+ /**
250
+ * Device control capabilities and commands
251
+ */
252
+ interface ControlCapabilities {
253
+ /** Can the device be started? */
254
+ canStart?: boolean;
255
+ /** Can the device be stopped? */
256
+ canStop?: boolean;
257
+ /** Can the device be paused? */
258
+ canPause?: boolean;
259
+ /** Can the device be reset? */
260
+ canReset?: boolean;
261
+ /** Custom actions available */
262
+ customActions?: Array<{
263
+ id: string;
264
+ label: string;
265
+ icon?: string;
266
+ variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
267
+ }>;
268
+ }
249
269
  /**
250
270
  * Device control mode option
251
271
  */
@@ -292,26 +312,8 @@ interface ControlParameter {
292
312
  }>;
293
313
  /** Custom validation function */
294
314
  validate?: (value: any) => boolean | string;
295
- }
296
- /**
297
- * Device control capabilities and commands
298
- */
299
- interface ControlCapabilities {
300
- /** Can the device be started? */
301
- canStart?: boolean;
302
- /** Can the device be stopped? */
303
- canStop?: boolean;
304
- /** Can the device be paused? */
305
- canPause?: boolean;
306
- /** Can the device be reset? */
307
- canReset?: boolean;
308
- /** Custom actions available */
309
- customActions?: Array<{
310
- id: string;
311
- label: string;
312
- icon?: string;
313
- variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
314
- }>;
315
+ /** Modes where this parameter is visible (if empty/undefined, visible in all modes) */
316
+ modes?: string[];
315
317
  }
316
318
  /**
317
319
  * Device control state
@@ -460,8 +462,18 @@ interface DeviceControlPanelProps {
460
462
  onClose: () => void;
461
463
  /** Panel position */
462
464
  position?: 'bottom' | 'side';
465
+ /** Horizontal alignment for bottom position (default: center) */
466
+ align?: 'left' | 'center' | 'right';
463
467
  /** Optimize for touch (larger targets) */
464
468
  touchOptimized?: boolean;
469
+ /** Compact mode - reduces padding and spacing */
470
+ compact?: boolean;
471
+ /** Font size scale (default: 1.0, smaller: 0.8, larger: 1.2) */
472
+ fontScale?: number;
473
+ /** Maximum height for bottom position (default: 70vh) */
474
+ maxHeight?: string;
475
+ /** Maximum width for bottom position (default: none) */
476
+ maxWidth?: string;
465
477
  /** Called when mode changes */
466
478
  onModeChange?: (mode: string) => void;
467
479
  /** Called when parameter changes */
@@ -473,7 +485,7 @@ interface DeviceControlPanelProps {
473
485
  /** Called when custom action clicked */
474
486
  onCustomAction?: (actionId: string) => void;
475
487
  }
476
- declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
488
+ declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
477
489
 
478
490
  type DisplayMode = 'standard' | 'dashboard';
479
491
  interface FullscreenContainerProps {
package/dist/index.js CHANGED
@@ -900,7 +900,12 @@ function DeviceControlPanel({
900
900
  binding,
901
901
  onClose,
902
902
  position = "bottom",
903
+ align = "center",
903
904
  touchOptimized = true,
905
+ compact = false,
906
+ fontScale = 1,
907
+ maxHeight,
908
+ maxWidth,
904
909
  onModeChange,
905
910
  onParameterChange,
906
911
  onStart,
@@ -922,6 +927,20 @@ function DeviceControlPanel({
922
927
  const currentMode = binding.state.currentMode;
923
928
  const currentParams = binding.parameters[currentMode] || [];
924
929
  const touchSize = touchOptimized ? 56 : 40;
930
+ const spacing = {
931
+ padding: compact ? "12px" : "20px",
932
+ gap: compact ? "6px" : "8px",
933
+ marginBottom: compact ? "10px" : "16px",
934
+ itemPadding: compact ? "8px 10px" : "10px 12px"
935
+ };
936
+ const fontSize = {
937
+ title: Math.round(14 * fontScale),
938
+ label: Math.round(11 * fontScale),
939
+ value: Math.round(13 * fontScale),
940
+ input: Math.round(14 * fontScale),
941
+ button: Math.round(12 * fontScale),
942
+ status: Math.round(10 * fontScale)
943
+ };
925
944
  const currentModeObj = binding.modes.find((m) => m.value === currentMode);
926
945
  const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
927
946
  const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
@@ -960,9 +979,9 @@ function DeviceControlPanel({
960
979
  position: "fixed",
961
980
  ...position === "bottom" ? {
962
981
  bottom: 0,
963
- left: 0,
964
- right: 0,
965
- animation: "slideUp 0.3s ease-out"
982
+ ...align === "left" ? { left: 0, right: "auto" } : align === "right" ? { right: 0, left: "auto" } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto" },
983
+ animation: "slideUp 0.3s ease-out",
984
+ maxWidth
966
985
  } : {
967
986
  right: 0,
968
987
  top: 0,
@@ -975,9 +994,9 @@ function DeviceControlPanel({
975
994
  borderRadius: position === "bottom" ? "8px 8px 0 0" : "8px 0 0 8px",
976
995
  boxShadow: "none",
977
996
  border: `2px solid ${borderColor}`,
978
- padding: "20px",
997
+ padding: spacing.padding,
979
998
  zIndex: 9999,
980
- maxHeight: position === "bottom" ? "70vh" : "100vh",
999
+ maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
981
1000
  overflowY: "auto",
982
1001
  ...binding.display?.style
983
1002
  };
@@ -1001,7 +1020,7 @@ function DeviceControlPanel({
1001
1020
  {
1002
1021
  style: {
1003
1022
  margin: 0,
1004
- fontSize: "14px",
1023
+ fontSize: `${fontSize.title}px`,
1005
1024
  fontWeight: 600,
1006
1025
  fontFamily: "Arial, sans-serif",
1007
1026
  letterSpacing: "0.5px",
@@ -1053,11 +1072,11 @@ function DeviceControlPanel({
1053
1072
  display: "flex",
1054
1073
  alignItems: "center",
1055
1074
  gap: "12px",
1056
- padding: "10px 12px",
1075
+ padding: spacing.itemPadding,
1057
1076
  backgroundColor: surfaceColor,
1058
1077
  border: `1px solid ${borderColor}`,
1059
1078
  borderRadius: "6px",
1060
- marginBottom: "16px"
1079
+ marginBottom: spacing.marginBottom
1061
1080
  },
1062
1081
  children: [
1063
1082
  /* @__PURE__ */ jsx8(
@@ -1079,7 +1098,7 @@ function DeviceControlPanel({
1079
1098
  style: {
1080
1099
  fontWeight: 600,
1081
1100
  textTransform: "uppercase",
1082
- fontSize: "11px",
1101
+ fontSize: `${fontSize.label}px`,
1083
1102
  fontFamily: "Arial, sans-serif",
1084
1103
  letterSpacing: "0.5px",
1085
1104
  color: textColor
@@ -1137,7 +1156,7 @@ function DeviceControlPanel({
1137
1156
  children: "Mode"
1138
1157
  }
1139
1158
  ),
1140
- /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: binding.modes.map((mode) => {
1159
+ /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: spacing.gap, flexWrap: "wrap" }, children: binding.modes.map((mode) => {
1141
1160
  const isSelected = mode.value === currentMode;
1142
1161
  const isEnabled = mode.enabled !== false;
1143
1162
  return /* @__PURE__ */ jsx8(
@@ -1153,7 +1172,7 @@ function DeviceControlPanel({
1153
1172
  color: isSelected ? "#000000" : textColor,
1154
1173
  border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
1155
1174
  borderRadius: "6px",
1156
- fontSize: "11px",
1175
+ fontSize: `${fontSize.label}px`,
1157
1176
  fontWeight: 600,
1158
1177
  fontFamily: "Arial, sans-serif",
1159
1178
  letterSpacing: "0.5px",
@@ -1167,14 +1186,14 @@ function DeviceControlPanel({
1167
1186
  );
1168
1187
  }) })
1169
1188
  ] }),
1170
- currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
1189
+ currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
1171
1190
  /* @__PURE__ */ jsx8(
1172
1191
  "label",
1173
1192
  {
1174
1193
  style: {
1175
1194
  display: "block",
1176
- marginBottom: "8px",
1177
- fontSize: "11px",
1195
+ marginBottom: spacing.gap,
1196
+ fontSize: `${fontSize.label}px`,
1178
1197
  fontWeight: 600,
1179
1198
  textTransform: "uppercase",
1180
1199
  letterSpacing: "0.5px",
@@ -1188,8 +1207,8 @@ function DeviceControlPanel({
1188
1207
  "div",
1189
1208
  {
1190
1209
  style: {
1191
- marginBottom: "10px",
1192
- padding: "10px",
1210
+ marginBottom: spacing.gap,
1211
+ padding: spacing.itemPadding,
1193
1212
  backgroundColor: surfaceColor,
1194
1213
  border: `1px solid ${borderColor}`,
1195
1214
  borderRadius: "6px"
@@ -1198,13 +1217,17 @@ function DeviceControlPanel({
1198
1217
  /* @__PURE__ */ jsxs7(
1199
1218
  "div",
1200
1219
  {
1201
- style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" },
1220
+ style: {
1221
+ display: "flex",
1222
+ justifyContent: "space-between",
1223
+ marginBottom: spacing.gap
1224
+ },
1202
1225
  children: [
1203
1226
  /* @__PURE__ */ jsx8(
1204
1227
  "span",
1205
1228
  {
1206
1229
  style: {
1207
- fontSize: "11px",
1230
+ fontSize: `${fontSize.label}px`,
1208
1231
  fontWeight: 600,
1209
1232
  textTransform: "uppercase",
1210
1233
  letterSpacing: "0.5px",
@@ -1218,7 +1241,7 @@ function DeviceControlPanel({
1218
1241
  "span",
1219
1242
  {
1220
1243
  style: {
1221
- fontSize: "13px",
1244
+ fontSize: `${fontSize.value}px`,
1222
1245
  fontWeight: 700,
1223
1246
  fontFamily: "Arial, sans-serif",
1224
1247
  color: textColor
@@ -1303,7 +1326,7 @@ function DeviceControlPanel({
1303
1326
  border: `1px solid ${borderColor}`,
1304
1327
  borderRadius: "6px",
1305
1328
  padding: "0 12px",
1306
- fontSize: "14px",
1329
+ fontSize: `${fontSize.input}px`,
1307
1330
  fontFamily: "Arial, sans-serif",
1308
1331
  fontWeight: 600
1309
1332
  }
@@ -1314,7 +1337,7 @@ function DeviceControlPanel({
1314
1337
  param.id
1315
1338
  ))
1316
1339
  ] }),
1317
- binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
1340
+ binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
1318
1341
  activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
1319
1342
  "button",
1320
1343
  {