@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.88 → 2.0.0-next.90
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.
- package/bundle/openbridge-webcomponents.bundle.js +17477 -16780
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +742 -43
- package/dist/building-blocks/readout-block/readout-block.css.js +229 -0
- package/dist/building-blocks/readout-block/readout-block.css.js.map +1 -0
- package/dist/building-blocks/readout-block/readout-block.d.ts +146 -0
- package/dist/building-blocks/readout-block/readout-block.d.ts.map +1 -0
- package/dist/building-blocks/readout-block/readout-block.js +273 -0
- package/dist/building-blocks/readout-block/readout-block.js.map +1 -0
- package/dist/navigation-instruments/readout-list/readout-list.css.js +26 -0
- package/dist/navigation-instruments/readout-list/readout-list.css.js.map +1 -0
- package/dist/navigation-instruments/readout-list/readout-list.d.ts +70 -0
- package/dist/navigation-instruments/readout-list/readout-list.d.ts.map +1 -0
- package/dist/navigation-instruments/readout-list/readout-list.js +154 -0
- package/dist/navigation-instruments/readout-list/readout-list.js.map +1 -0
- package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js +139 -124
- package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js.map +1 -1
- package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts +57 -26
- package/dist/navigation-instruments/readout-list-item/readout-list-item.d.ts.map +1 -1
- package/dist/navigation-instruments/readout-list-item/readout-list-item.js +139 -125
- package/dist/navigation-instruments/readout-list-item/readout-list-item.js.map +1 -1
- package/package.json +1 -1
- package/src/building-blocks/readout-block/readout-block.css +192 -0
- package/src/building-blocks/readout-block/readout-block.stories.ts +347 -0
- package/src/building-blocks/readout-block/readout-block.ts +355 -0
- package/src/navigation-instruments/readout-list/readout-list.css +15 -0
- package/src/navigation-instruments/readout-list/readout-list.stories.ts +358 -0
- package/src/navigation-instruments/readout-list/readout-list.ts +216 -0
- package/src/navigation-instruments/readout-list-item/readout-list-item.css +141 -120
- package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts +145 -29
- package/src/navigation-instruments/readout-list-item/readout-list-item.ts +169 -146
|
@@ -12,6 +12,57 @@ const componentStyle = css`* {
|
|
|
12
12
|
width: 100%;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
/* Bridge the list-item's public colour custom properties onto the block's, so
|
|
16
|
+
consumers keep theming the value / setpoint / advice / hinted-zero colours via
|
|
17
|
+
\`--obc-readout-list-item-*\` even though they now render inside obc-readout-block. */
|
|
18
|
+
|
|
19
|
+
obc-readout-block {
|
|
20
|
+
--obc-readout-block-value-color: var(
|
|
21
|
+
--obc-readout-list-item-value-color,
|
|
22
|
+
var(--element-neutral-color)
|
|
23
|
+
);
|
|
24
|
+
--obc-readout-block-value-enhanced-color: var(
|
|
25
|
+
--obc-readout-list-item-value-enhanced-color,
|
|
26
|
+
var(--element-neutral-enhanced-color)
|
|
27
|
+
);
|
|
28
|
+
--obc-readout-block-setpoint-color: var(
|
|
29
|
+
--obc-readout-list-item-setpoint-color,
|
|
30
|
+
var(--element-neutral-color)
|
|
31
|
+
);
|
|
32
|
+
--obc-readout-block-setpoint-enhanced-color: var(
|
|
33
|
+
--obc-readout-list-item-setpoint-enhanced-color,
|
|
34
|
+
var(--instrument-enhanced-secondary-color)
|
|
35
|
+
);
|
|
36
|
+
--obc-readout-block-setpoint-touching-outline-color: var(
|
|
37
|
+
--obc-readout-list-item-setpoint-touching-outline-color,
|
|
38
|
+
var(--element-neutral-enhanced-color)
|
|
39
|
+
);
|
|
40
|
+
--obc-readout-block-setpoint-touching-color: var(
|
|
41
|
+
--obc-readout-list-item-setpoint-touching-color,
|
|
42
|
+
var(--base-blue-100)
|
|
43
|
+
);
|
|
44
|
+
--obc-readout-block-advice-color: var(
|
|
45
|
+
--obc-readout-list-item-advice-color,
|
|
46
|
+
var(--element-neutral-color)
|
|
47
|
+
);
|
|
48
|
+
--obc-readout-block-hinted-color: var(
|
|
49
|
+
--obc-readout-list-item-hinted-color,
|
|
50
|
+
var(--element-inactive-color)
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Size the consumer-provided block icons forwarded into obc-readout-block's
|
|
55
|
+
\`icon\` slot (the block sizes the forwarded slot element; this sizes the
|
|
56
|
+
consumer's icon to fill it). */
|
|
57
|
+
|
|
58
|
+
::slotted([slot="value-icon"]),
|
|
59
|
+
::slotted([slot="setpoint-icon"]),
|
|
60
|
+
::slotted([slot="advice-icon"]) {
|
|
61
|
+
display: block;
|
|
62
|
+
inline-size: 100%;
|
|
63
|
+
block-size: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
15
66
|
/* ---------- Root / surface ----------
|
|
16
67
|
* \`.root\` is the touch target (a <button> when clickable, otherwise a <div>).
|
|
17
68
|
* \`.surface\` is the visible box that carries padding, corner radius, the
|
|
@@ -222,129 +273,90 @@ const componentStyle = css`* {
|
|
|
222
273
|
align-items: flex-end;
|
|
223
274
|
}
|
|
224
275
|
|
|
225
|
-
/* ----------
|
|
276
|
+
/* ---------- Value reading (value + degree + unit) ----------
|
|
277
|
+
* Groups the value block, its degree column and the trailing unit so the value
|
|
278
|
+
* alert frame can wrap all three. Layout-neutral: it adds no gap, so the content
|
|
279
|
+
* sits exactly where it did when these were siblings of \`.value-area\`. */
|
|
226
280
|
|
|
227
|
-
.
|
|
281
|
+
.value-reading {
|
|
282
|
+
position: relative;
|
|
228
283
|
display: inline-flex;
|
|
229
284
|
align-items: flex-end;
|
|
230
285
|
}
|
|
231
286
|
|
|
232
|
-
/*
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
.block
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
.block-icon {
|
|
241
|
-
display: inline-flex;
|
|
242
|
-
align-items: center;
|
|
243
|
-
justify-content: center;
|
|
244
|
-
flex: none;
|
|
245
|
-
color: inherit;
|
|
246
|
-
/* Centre the icon against the block's text rather than bottom-aligning it (the
|
|
247
|
-
block is flex-end). Matters for the value block, whose text is taller than
|
|
248
|
-
the icon, so the value icon lines up with the number like the smaller
|
|
249
|
-
setpoint/advice icons do. */
|
|
250
|
-
align-self: center;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.block-icon obi-input-right,
|
|
254
|
-
.block-icon obi-notification-advice,
|
|
255
|
-
.block-icon ::slotted(*) {
|
|
256
|
-
display: block;
|
|
257
|
-
inline-size: 100%;
|
|
258
|
-
block-size: 100%;
|
|
259
|
-
}
|
|
287
|
+
/* ---------- Value data quality (low-integrity / invalid) ----------
|
|
288
|
+
* The value's per-block data-quality chip, applied to the whole reading (value +
|
|
289
|
+
* degree + unit) rather than hugging the value alone — the same logic as the
|
|
290
|
+
* value alert frame, minus its custom padding. Same look as the block/source
|
|
291
|
+
* chip (1px outline, check radius, alert-quality colours). Uses \`outline\` (not
|
|
292
|
+
* \`border\`) so it never shifts the value's width / cross-row column alignment.
|
|
293
|
+
* Setpoint/advice keep their own in-block chip; the row-level data quality on
|
|
294
|
+
* \`.surface\` is unchanged. */
|
|
260
295
|
|
|
261
|
-
.
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
);
|
|
296
|
+
.value-reading.data-low-integrity,
|
|
297
|
+
.value-reading.data-invalid {
|
|
298
|
+
outline: 1px solid;
|
|
299
|
+
border-radius: var(--global-border-radius-border-radius-check);
|
|
266
300
|
}
|
|
267
301
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
.block-value {
|
|
272
|
-
color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
|
|
302
|
+
.value-reading.data-low-integrity {
|
|
303
|
+
background: var(--alert-low-integrity-background-color);
|
|
304
|
+
outline-color: var(--alert-low-integrity-border-color);
|
|
273
305
|
}
|
|
274
306
|
|
|
275
|
-
.
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
var(--element-neutral-enhanced-color)
|
|
279
|
-
);
|
|
307
|
+
.value-reading.data-invalid {
|
|
308
|
+
background: var(--alert-invalid-background-color);
|
|
309
|
+
outline-color: var(--alert-invalid-border-color);
|
|
280
310
|
}
|
|
281
311
|
|
|
282
|
-
/*
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
312
|
+
/* ---------- Value alert overlay ----------
|
|
313
|
+
* A pure overlay around the value reading: it reserves no space, so toggling the
|
|
314
|
+
* frame never changes the row height or breaks cross-row column alignment. The
|
|
315
|
+
* box is offset outward by (padding − stroke/2) on each axis so the alert-frame's
|
|
316
|
+
* outline (drawn outside its box) lands CENTRED on the 4px/2px padding line
|
|
317
|
+
* (half inside / half outside), matching Figma 58:10120. */
|
|
286
318
|
|
|
287
|
-
.
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
319
|
+
.value-alert-overlay {
|
|
320
|
+
--_obc-readout-value-frame-padding-horizontal: 4px;
|
|
321
|
+
--_obc-readout-value-frame-padding-vertical: 2px;
|
|
322
|
+
/* Must match obc-alert-frame's ACTUAL outline width so the stroke stays centred
|
|
323
|
+
on the 4px/2px line. \`thickness-small\` is hard-coded to 2px in
|
|
324
|
+
alert-frame.css (it does NOT use the themed stroke-width token), so use a
|
|
325
|
+
literal 2px here; \`thickness-large\` is handled below. */
|
|
326
|
+
--_obc-readout-value-frame-stroke: 2px;
|
|
327
|
+
position: absolute;
|
|
328
|
+
inset-inline: calc(
|
|
329
|
+
-1 *
|
|
330
|
+
(
|
|
331
|
+
var(--_obc-readout-value-frame-padding-horizontal) -
|
|
332
|
+
var(--_obc-readout-value-frame-stroke) / 2
|
|
333
|
+
)
|
|
291
334
|
);
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
.block-setpoint.tone-enhanced {
|
|
299
|
-
color: var(
|
|
300
|
-
--obc-readout-list-item-setpoint-enhanced-color,
|
|
301
|
-
var(--instrument-enhanced-secondary-color)
|
|
335
|
+
inset-block: calc(
|
|
336
|
+
-1 *
|
|
337
|
+
(
|
|
338
|
+
var(--_obc-readout-value-frame-padding-vertical) -
|
|
339
|
+
var(--_obc-readout-value-frame-stroke) / 2
|
|
340
|
+
)
|
|
302
341
|
);
|
|
342
|
+
/* Display-only: never intercept clicks on a clickable row. */
|
|
343
|
+
pointer-events: none;
|
|
303
344
|
}
|
|
304
345
|
|
|
305
|
-
/*
|
|
306
|
-
the
|
|
346
|
+
/* thickness=large: obc-alert-frame's large outline uses the alert-frame border
|
|
347
|
+
weight token, so the overlay's outward offset must use the same width to keep
|
|
348
|
+
the stroke centred on the padding line. */
|
|
307
349
|
|
|
308
|
-
.
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
.block-setpoint.is-hidden {
|
|
313
|
-
opacity: 0;
|
|
314
|
-
visibility: hidden;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
/* Touching / focus state: the setpoint triangle takes the marker's focus look — a
|
|
318
|
-
pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
|
|
319
|
-
mirroring \`svghelpers/setpoint.ts\` focus (fill base-blue-100 + 2px stroke).
|
|
320
|
-
The glyph icon is \`fill: currentColor\` and can't take a CSS \`stroke\`, so the
|
|
321
|
-
edge is layered drop-shadows. The setpoint number keeps its normal, readable
|
|
322
|
-
colour. */
|
|
323
|
-
|
|
324
|
-
.block-setpoint.touching {
|
|
325
|
-
--_touching-outline: var(
|
|
326
|
-
--obc-readout-list-item-setpoint-touching-outline-color,
|
|
327
|
-
var(--element-neutral-enhanced-color)
|
|
350
|
+
.value-alert-overlay.thickness-large {
|
|
351
|
+
--_obc-readout-value-frame-stroke: var(
|
|
352
|
+
--global-size-spacing-border-weight-alertframe
|
|
328
353
|
);
|
|
329
354
|
}
|
|
330
355
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
);
|
|
336
|
-
filter: drop-shadow(1px 0 0 var(--_touching-outline))
|
|
337
|
-
drop-shadow(-1px 0 0 var(--_touching-outline))
|
|
338
|
-
drop-shadow(0 1px 0 var(--_touching-outline))
|
|
339
|
-
drop-shadow(0 -1px 0 var(--_touching-outline));
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
.block-advice {
|
|
343
|
-
color: var(
|
|
344
|
-
--obc-readout-list-item-advice-color,
|
|
345
|
-
var(--element-neutral-color)
|
|
346
|
-
);
|
|
347
|
-
}
|
|
356
|
+
/* The readout building blocks (advice / setpoint / value) now render inside
|
|
357
|
+
\`obc-readout-block\`; their layout / colour / hinted-zero / data-quality CSS
|
|
358
|
+
lives there. The list-item only bridges the public colour vars (see top) and
|
|
359
|
+
keeps the surrounding row layout below. */
|
|
348
360
|
|
|
349
361
|
.label {
|
|
350
362
|
color: var(
|
|
@@ -364,26 +376,22 @@ const componentStyle = css`* {
|
|
|
364
376
|
);
|
|
365
377
|
}
|
|
366
378
|
|
|
367
|
-
/* ----------
|
|
379
|
+
/* ---------- Source data quality ----------
|
|
368
380
|
* Independent of (and nests inside) the row-level data-quality frame. Uses
|
|
369
|
-
* \`outline\` (not \`border\`) so the chip never shifts the
|
|
370
|
-
* value
|
|
381
|
+
* \`outline\` (not \`border\`) so the chip never shifts the source's width. (The
|
|
382
|
+
* per-block value/setpoint/advice chips live in \`obc-readout-block\`.) */
|
|
371
383
|
|
|
372
|
-
.block.data-low-integrity,
|
|
373
|
-
.block.data-invalid,
|
|
374
384
|
.source.data-low-integrity,
|
|
375
385
|
.source.data-invalid {
|
|
376
386
|
outline: 1px solid;
|
|
377
387
|
border-radius: var(--global-border-radius-border-radius-check);
|
|
378
388
|
}
|
|
379
389
|
|
|
380
|
-
.block.data-low-integrity,
|
|
381
390
|
.source.data-low-integrity {
|
|
382
391
|
background: var(--alert-low-integrity-background-color);
|
|
383
392
|
outline-color: var(--alert-low-integrity-border-color);
|
|
384
393
|
}
|
|
385
394
|
|
|
386
|
-
.block.data-invalid,
|
|
387
395
|
.source.data-invalid {
|
|
388
396
|
background: var(--alert-invalid-background-color);
|
|
389
397
|
outline-color: var(--alert-invalid-border-color);
|
|
@@ -525,11 +533,6 @@ const componentStyle = css`* {
|
|
|
525
533
|
);
|
|
526
534
|
}
|
|
527
535
|
|
|
528
|
-
.size-small .block {
|
|
529
|
-
gap: var(--instrument-components-readout-new-general-regular-icon-gap);
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
.size-small .block-icon,
|
|
533
536
|
.size-small .leading-icon {
|
|
534
537
|
inline-size: var(
|
|
535
538
|
--instrument-components-readout-new-general-regular-icon-size
|
|
@@ -566,11 +569,6 @@ const componentStyle = css`* {
|
|
|
566
569
|
);
|
|
567
570
|
}
|
|
568
571
|
|
|
569
|
-
.size-medium .block {
|
|
570
|
-
gap: var(--instrument-components-readout-new-general-medium-icon-gap);
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
.size-medium .block-icon,
|
|
574
572
|
.size-medium .leading-icon {
|
|
575
573
|
inline-size: var(
|
|
576
574
|
--instrument-components-readout-new-general-medium-icon-size
|
|
@@ -602,11 +600,6 @@ const componentStyle = css`* {
|
|
|
602
600
|
gap: var(--instrument-components-readout-new-list-item-large-value-gap);
|
|
603
601
|
}
|
|
604
602
|
|
|
605
|
-
.size-large .block {
|
|
606
|
-
gap: var(--instrument-components-readout-new-general-large-icon-gap);
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
.size-large .block-icon,
|
|
610
603
|
.size-large .leading-icon {
|
|
611
604
|
inline-size: var(--instrument-components-readout-new-general-large-icon-size);
|
|
612
605
|
block-size: var(--instrument-components-readout-new-general-large-icon-size);
|
|
@@ -651,6 +644,28 @@ const componentStyle = css`* {
|
|
|
651
644
|
);
|
|
652
645
|
--_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
|
|
653
646
|
}
|
|
647
|
+
|
|
648
|
+
/* ---------- Debug overlay ----------
|
|
649
|
+
* \`showDebugOverlay\` outlines each readout building block (red), the degree
|
|
650
|
+
* columns (blue) and the degree spacer (green) so reserver widths / alignment
|
|
651
|
+
* are visible. A development aid (mirrors the donut chart's \`showDebugOverlay\`);
|
|
652
|
+
* off by default. */
|
|
653
|
+
|
|
654
|
+
:host([showDebugOverlay]) obc-readout-block::part(block) {
|
|
655
|
+
outline: 1px solid rgba(220, 0, 0, 0.7);
|
|
656
|
+
outline-offset: -1px;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
:host([showDebugOverlay]) obc-readout-block::part(degree),
|
|
660
|
+
:host([showDebugOverlay]) .degree-column {
|
|
661
|
+
outline: 1px solid rgba(0, 0, 220, 0.7);
|
|
662
|
+
outline-offset: -1px;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
:host([showDebugOverlay]) .degree-spacer {
|
|
666
|
+
outline: 1px solid rgba(0, 160, 0, 0.8);
|
|
667
|
+
outline-offset: -1px;
|
|
668
|
+
}
|
|
654
669
|
`;
|
|
655
670
|
export {
|
|
656
671
|
componentStyle as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readout-list-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"readout-list-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { ObcTextboxFontWeight } from '../../components/textbox/textbox.js';
|
|
3
|
+
import { ReadoutBlockSize, ReadoutBlockDataQuality } from '../../building-blocks/readout-block/readout-block.js';
|
|
3
4
|
import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
|
|
4
5
|
import '../../components/textbox/textbox.js';
|
|
5
|
-
import '../../
|
|
6
|
-
import '../../icons/icon-notification-advice.js';
|
|
6
|
+
import '../../building-blocks/readout-block/readout-block.js';
|
|
7
7
|
export { ObcTextboxFontWeight } from '../../components/textbox/textbox.js';
|
|
8
8
|
/**
|
|
9
|
-
* Density/size scale of the readout row.
|
|
9
|
+
* Density/size scale of the readout row (an alias of `ReadoutBlockSize`).
|
|
10
10
|
* - `small`: regular value typography (smallest, densest).
|
|
11
11
|
* - `medium`: medium value typography.
|
|
12
12
|
* - `large`: large value typography.
|
|
13
13
|
*/
|
|
14
|
-
export declare
|
|
15
|
-
|
|
16
|
-
medium = "medium",
|
|
17
|
-
large = "large"
|
|
18
|
-
}
|
|
14
|
+
export declare const ReadoutListItemSize: typeof ReadoutBlockSize;
|
|
15
|
+
export type ReadoutListItemSize = ReadoutBlockSize;
|
|
19
16
|
/**
|
|
20
17
|
* Placement of the unit/source relative to the label and value.
|
|
21
18
|
* - `trailing-unit`: unit after the value, source after a trailing divider.
|
|
@@ -37,13 +34,12 @@ export declare enum ReadoutListItemPriority {
|
|
|
37
34
|
enhanced = "enhanced"
|
|
38
35
|
}
|
|
39
36
|
/**
|
|
40
|
-
* Measurement quality of the value
|
|
41
|
-
* – a low-integrity or invalid value can
|
|
37
|
+
* Measurement quality of the value (an alias of `ReadoutBlockDataQuality`).
|
|
38
|
+
* Orthogonal to the row-level `alert` – a low-integrity or invalid value can
|
|
39
|
+
* also sit inside an alert frame.
|
|
42
40
|
*/
|
|
43
|
-
export declare
|
|
44
|
-
|
|
45
|
-
invalid = "invalid"
|
|
46
|
-
}
|
|
41
|
+
export declare const ReadoutListItemDataQuality: typeof ReadoutBlockDataQuality;
|
|
42
|
+
export type ReadoutListItemDataQuality = ReadoutBlockDataQuality;
|
|
47
43
|
/**
|
|
48
44
|
* Corner style of the interactive (clickable) surface.
|
|
49
45
|
* - `squared` (default): no rounding (true rectangle).
|
|
@@ -69,6 +65,14 @@ export interface ReadoutBlockState {
|
|
|
69
65
|
/** Per-block alert frame; nests inside any row-level alert frame. */
|
|
70
66
|
alert?: false | AlertFrameConfig;
|
|
71
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* Per-value options. Unlike setpoint/advice, the value's `alert` frame AND
|
|
70
|
+
* `dataQuality` chip wrap the whole reading — value (+ value-icon) + degree +
|
|
71
|
+
* trailing unit — rather than the value alone. The alert frame is a pure overlay
|
|
72
|
+
* (4px/2px padding, stroke centred on that line); the data-quality chip reuses
|
|
73
|
+
* the block chip's `outline` styling with no extra padding. Neither shifts
|
|
74
|
+
* content or changes the row height / column alignment (Figma 58:10120).
|
|
75
|
+
*/
|
|
72
76
|
export interface ReadoutValueOptions extends ReadoutBlockState {
|
|
73
77
|
/** Render the unfilled leading positions as muted zeroes (requires `maxDigits`). */
|
|
74
78
|
hintedZeros?: boolean;
|
|
@@ -183,8 +187,10 @@ export declare class ObcReadoutListItem extends LitElement {
|
|
|
183
187
|
src?: string;
|
|
184
188
|
hasValue: boolean;
|
|
185
189
|
value: number | null;
|
|
186
|
-
/** Render the value as
|
|
190
|
+
/** Render the value as `offText` (e.g. equipment powered down). Affects the value only. */
|
|
187
191
|
off: boolean;
|
|
192
|
+
/** Text shown in place of the value when `off` is true. @availableWhen off==true */
|
|
193
|
+
offText: string;
|
|
188
194
|
hasSetpoint: boolean;
|
|
189
195
|
/** @availableWhen hasSetpoint==true */
|
|
190
196
|
setpoint?: number;
|
|
@@ -207,6 +213,12 @@ export declare class ObcReadoutListItem extends LitElement {
|
|
|
207
213
|
adviceOptions?: ReadoutAdviceOptions;
|
|
208
214
|
unitOptions?: ReadoutReserverOptions;
|
|
209
215
|
srcOptions?: ReadoutSrcOptions;
|
|
216
|
+
/**
|
|
217
|
+
* Development aid: outline the readout building blocks (red), the degree
|
|
218
|
+
* columns (blue) and the degree spacer (green) so reserver widths / alignment
|
|
219
|
+
* are visible. Off by default.
|
|
220
|
+
*/
|
|
221
|
+
showDebugOverlay: boolean;
|
|
210
222
|
/** Pop-up deferred-hide phase for the setpoint (see {@link updated}). */
|
|
211
223
|
private deferredSetpointHidePhase;
|
|
212
224
|
private deferredSetpointHideTimer?;
|
|
@@ -247,19 +259,14 @@ export declare class ObcReadoutListItem extends LitElement {
|
|
|
247
259
|
/** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
|
|
248
260
|
private get setpointWeight();
|
|
249
261
|
private numericFormatOptions;
|
|
250
|
-
/** Widest possible value string for width reservation (e.g. `"000.0"`). */
|
|
251
|
-
private get reserverText();
|
|
252
|
-
/**
|
|
253
|
-
* Effective width reserver for a numeric block: the wider of the explicit
|
|
254
|
-
* `spaceReserver` and the `maxDigits`/`fractionDigits`-derived reserve, so an
|
|
255
|
-
* explicit reserver can never reserve *less* than the formatted value needs.
|
|
256
|
-
* Under tabular-nums the rendered width is proportional to character count, so
|
|
257
|
-
* "wider" compares string length.
|
|
258
|
-
*/
|
|
259
|
-
private widerReserver;
|
|
260
262
|
/** classMap fragment for a block / source carrying per-block data quality. */
|
|
261
263
|
private dataQualityClasses;
|
|
262
|
-
|
|
264
|
+
/**
|
|
265
|
+
* Forward the matching list-item icon slot into the block's single `icon`
|
|
266
|
+
* slot. The variant's default marker lives in `obc-readout-block` and shows
|
|
267
|
+
* when nothing is assigned here (an empty forwarded slot flattens to nothing).
|
|
268
|
+
*/
|
|
269
|
+
private renderForwardedIcon;
|
|
263
270
|
private renderBlock;
|
|
264
271
|
/**
|
|
265
272
|
* A cap-height `°` column whose width scales with the value size. Used after
|
|
@@ -301,6 +308,30 @@ export declare class ObcReadoutListItem extends LitElement {
|
|
|
301
308
|
private renderDegreeSpacer;
|
|
302
309
|
private renderTextbox;
|
|
303
310
|
private renderValueCluster;
|
|
311
|
+
/**
|
|
312
|
+
* The value reading: the value block, its degree column and the trailing unit
|
|
313
|
+
* grouped in one relatively-positioned wrapper so the value alert frame AND the
|
|
314
|
+
* value data-quality chip can wrap value + degree + unit together (Figma
|
|
315
|
+
* 58:10120).
|
|
316
|
+
*
|
|
317
|
+
* Moving the degree / unit into this wrapper (the new last child of
|
|
318
|
+
* `.value-cluster`) preserves every existing gap, so the underlying content
|
|
319
|
+
* stays column-aligned with or without the frame / chip. Both the value alert
|
|
320
|
+
* (overlay) and the value data-quality chip are applied here — NOT inside
|
|
321
|
+
* `obc-readout-block` — so they extend over the unit; setpoint/advice keep their
|
|
322
|
+
* own block-level frame and chip. The chip uses `outline` (not `border`), so it
|
|
323
|
+
* never shifts the value's width / column alignment.
|
|
324
|
+
*/
|
|
325
|
+
private renderValueReading;
|
|
326
|
+
/**
|
|
327
|
+
* The value alert frame, drawn as a pure overlay around the value reading
|
|
328
|
+
* (value + degree + unit). It reserves no space — the `obc-alert-frame` sits in
|
|
329
|
+
* an absolutely-positioned box offset outward (see `.value-alert-overlay` in
|
|
330
|
+
* the CSS) so its stroke is centred on the 4px/2px padding line and toggling it
|
|
331
|
+
* never shifts content or row height. Renders only when `valueOptions.alert` is
|
|
332
|
+
* a config object.
|
|
333
|
+
*/
|
|
334
|
+
private renderValueAlertOverlay;
|
|
304
335
|
private renderLabelContainer;
|
|
305
336
|
private renderTrailingUnit;
|
|
306
337
|
private renderTrailingSource;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readout-list-item.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout-list-item/readout-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgD,MAAM,KAAK,CAAC;AAK9E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAEL,oBAAoB,EACrB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,
|
|
1
|
+
{"version":3,"file":"readout-list-item.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout-list-item/readout-list-item.ts"],"names":[],"mappings":"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"}
|