@oicl/openbridge-webcomponents 2.0.0-next.127 → 2.0.0-next.129
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 +12376 -11906
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +260 -6
- package/dist/building-blocks/chart-line/chart-line-base.d.ts +10 -2
- package/dist/building-blocks/chart-line/chart-line-base.d.ts.map +1 -1
- package/dist/building-blocks/chart-line/chart-line-base.js +27 -8
- package/dist/building-blocks/chart-line/chart-line-base.js.map +1 -1
- package/dist/building-blocks/readout-block/readout-block.css.js +53 -19
- package/dist/building-blocks/readout-block/readout-block.css.js.map +1 -1
- package/dist/building-blocks/readout-block/readout-block.d.ts +55 -0
- package/dist/building-blocks/readout-block/readout-block.d.ts.map +1 -1
- package/dist/building-blocks/readout-block/readout-block.js +57 -2
- package/dist/building-blocks/readout-block/readout-block.js.map +1 -1
- package/dist/charthelpers/chart-common.css.js +28 -3
- package/dist/charthelpers/chart-common.css.js.map +1 -1
- package/dist/navigation-instruments/readout/readout-shared.d.ts +23 -0
- package/dist/navigation-instruments/readout/readout-shared.d.ts.map +1 -1
- package/dist/navigation-instruments/readout/readout-shared.js +8 -0
- package/dist/navigation-instruments/readout/readout-shared.js.map +1 -1
- package/dist/navigation-instruments/readout/readout.css.js +138 -31
- package/dist/navigation-instruments/readout/readout.css.js.map +1 -1
- package/dist/navigation-instruments/readout/readout.d.ts +63 -3
- package/dist/navigation-instruments/readout/readout.d.ts.map +1 -1
- package/dist/navigation-instruments/readout/readout.js +127 -27
- package/dist/navigation-instruments/readout/readout.js.map +1 -1
- package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js +64 -1
- 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 +77 -2
- 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 +100 -23
- package/dist/navigation-instruments/readout-list-item/readout-list-item.js.map +1 -1
- package/package.json +1 -1
|
@@ -47,7 +47,7 @@ obc-readout-block {
|
|
|
47
47
|
);
|
|
48
48
|
--obc-readout-block-hinted-color: var(
|
|
49
49
|
--obc-readout-hinted-color,
|
|
50
|
-
var(--element-
|
|
50
|
+
var(--element-disabled-color)
|
|
51
51
|
);
|
|
52
52
|
}
|
|
53
53
|
|
|
@@ -269,29 +269,76 @@ obc-readout-block {
|
|
|
269
269
|
);
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
-
/* ---------- Meta zone (label + unit) ----------
|
|
272
|
+
/* ---------- Meta zone (label + unit) ----------
|
|
273
|
+
* \`.meta\` is a row hosting the optional leading icon and \`.meta-labels\`; the
|
|
274
|
+
* inline/stacked arrangement applies to \`.meta-labels\` (the label/unit pair). */
|
|
273
275
|
|
|
274
276
|
.meta {
|
|
275
277
|
display: inline-flex;
|
|
278
|
+
flex-direction: row;
|
|
279
|
+
align-items: center;
|
|
280
|
+
gap: var(--instrument-components-readout-new-general-regular-icon-gap);
|
|
276
281
|
padding-inline: var(--_readout-trim);
|
|
277
282
|
}
|
|
278
283
|
|
|
279
|
-
.meta.
|
|
284
|
+
.meta .leading-icon {
|
|
285
|
+
display: inline-flex;
|
|
286
|
+
align-items: center;
|
|
287
|
+
justify-content: center;
|
|
288
|
+
flex: none;
|
|
289
|
+
color: var(--element-neutral-color);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.meta .leading-icon ::slotted(*) {
|
|
293
|
+
display: block;
|
|
294
|
+
inline-size: 100%;
|
|
295
|
+
block-size: 100%;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.readout.size-small .meta .leading-icon {
|
|
299
|
+
inline-size: var(
|
|
300
|
+
--instrument-components-readout-new-general-regular-icon-size
|
|
301
|
+
);
|
|
302
|
+
block-size: var(
|
|
303
|
+
--instrument-components-readout-new-general-regular-icon-size
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.readout.size-medium .meta .leading-icon {
|
|
308
|
+
inline-size: var(
|
|
309
|
+
--instrument-components-readout-new-general-medium-icon-size
|
|
310
|
+
);
|
|
311
|
+
block-size: var(--instrument-components-readout-new-general-medium-icon-size);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.readout.size-large .meta .leading-icon {
|
|
315
|
+
inline-size: var(--instrument-components-readout-new-general-large-icon-size);
|
|
316
|
+
block-size: var(--instrument-components-readout-new-general-large-icon-size);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.meta-labels {
|
|
320
|
+
display: inline-flex;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.meta-inline .meta-labels {
|
|
280
324
|
flex-direction: row;
|
|
281
|
-
align
|
|
325
|
+
/* Bottom-align so an \`s\` label and its \`xs\` unit share a baseline (the
|
|
326
|
+
Figma title block is items-end); identical to the old flex-start while
|
|
327
|
+
both were \`xs\`. */
|
|
328
|
+
align-items: flex-end;
|
|
282
329
|
gap: var(--global-size-spacing-target-padding);
|
|
283
330
|
}
|
|
284
331
|
|
|
285
|
-
.meta.meta-
|
|
332
|
+
.meta-stacked .meta-labels {
|
|
286
333
|
flex-direction: column;
|
|
287
334
|
align-items: flex-end;
|
|
288
335
|
}
|
|
289
336
|
|
|
290
|
-
.readout.direction-vertical.alignment-left .meta.meta-
|
|
337
|
+
.readout.direction-vertical.alignment-left .meta-stacked .meta-labels {
|
|
291
338
|
align-items: flex-start;
|
|
292
339
|
}
|
|
293
340
|
|
|
294
|
-
.readout.direction-vertical.alignment-center .meta.meta-
|
|
341
|
+
.readout.direction-vertical.alignment-center .meta-stacked .meta-labels {
|
|
295
342
|
align-items: center;
|
|
296
343
|
}
|
|
297
344
|
|
|
@@ -299,10 +346,13 @@ obc-readout-block {
|
|
|
299
346
|
the row so the label reads first. */
|
|
300
347
|
|
|
301
348
|
.readout.direction-horizontal .meta.meta-stacked {
|
|
302
|
-
align-items: flex-start;
|
|
303
349
|
align-self: center;
|
|
304
350
|
}
|
|
305
351
|
|
|
352
|
+
:is(.readout.direction-horizontal .meta.meta-stacked) .meta-labels {
|
|
353
|
+
align-items: flex-start;
|
|
354
|
+
}
|
|
355
|
+
|
|
306
356
|
.label-only:is(.readout.direction-horizontal .meta.meta-stacked) {
|
|
307
357
|
align-self: flex-start;
|
|
308
358
|
}
|
|
@@ -311,6 +361,21 @@ obc-readout-block {
|
|
|
311
361
|
align-self: flex-end;
|
|
312
362
|
}
|
|
313
363
|
|
|
364
|
+
/* Cap alignment beside the value (Figma 6.1 review): the label's cap TOP and
|
|
365
|
+
the unit's cap BOTTOM line up with the value's cap edges. The stack is
|
|
366
|
+
pinned to the value's container height with space-between — every textbox
|
|
367
|
+
carries a fixed 4px pad above/below its cap, exactly like the value box, so
|
|
368
|
+
pinning the boxes to the container edges aligns the caps for any label/unit
|
|
369
|
+
size. Only when both lines exist: a single line keeps its edge alignment
|
|
370
|
+
from the rules above. */
|
|
371
|
+
|
|
372
|
+
.readout.direction-horizontal
|
|
373
|
+
.meta.meta-stacked:not(.label-only):not(.unit-only)
|
|
374
|
+
.meta-labels {
|
|
375
|
+
block-size: var(--_readout-primary-height);
|
|
376
|
+
justify-content: space-between;
|
|
377
|
+
}
|
|
378
|
+
|
|
314
379
|
.label {
|
|
315
380
|
color: var(--obc-readout-label-color, var(--element-neutral-color));
|
|
316
381
|
}
|
|
@@ -348,6 +413,69 @@ obc-readout-block {
|
|
|
348
413
|
outline-color: var(--alert-invalid-border-color);
|
|
349
414
|
}
|
|
350
415
|
|
|
416
|
+
/* ---------- Source state chip & deviation (Figma 6.1 Readout-block-source)
|
|
417
|
+
* \`enhanced\` renders the amplified chip, \`caution\`/\`warning\` the alert chip.
|
|
418
|
+
* Like the data-quality chip these use \`outline\`, so toggling a state never
|
|
419
|
+
* shifts the layout. TODO(designer): Figma pads the chip 4px; a padding here
|
|
420
|
+
* would shift the layout on live state changes, so the chip hugs the text
|
|
421
|
+
* like the data-quality chip does. */
|
|
422
|
+
|
|
423
|
+
.source-block {
|
|
424
|
+
display: inline-flex;
|
|
425
|
+
flex-direction: column;
|
|
426
|
+
align-items: flex-start;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.source-block.source-state-enhanced,
|
|
430
|
+
.source-block.source-state-caution,
|
|
431
|
+
.source-block.source-state-warning {
|
|
432
|
+
outline: 1px solid;
|
|
433
|
+
border-radius: var(--global-border-radius-border-radius-check);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.source-block.source-state-enhanced {
|
|
437
|
+
background: var(--amplified-enabled-background-color);
|
|
438
|
+
outline-color: var(--amplified-enabled-border-color);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.source-block.source-state-enhanced .source,
|
|
442
|
+
.source-block.source-state-enhanced .source-deviation {
|
|
443
|
+
color: var(--on-amplified-active-color);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.source-block.source-state-caution {
|
|
447
|
+
background: var(--alert-caution-color);
|
|
448
|
+
outline-color: var(--alert-caution-outline-color);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.source-block.source-state-caution .source,
|
|
452
|
+
.source-block.source-state-caution .source-deviation {
|
|
453
|
+
color: var(--on-caution-active-color);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.source-block.source-state-warning {
|
|
457
|
+
background: var(--alert-warning-color);
|
|
458
|
+
outline-color: var(--alert-warning-outline-color);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.source-block.source-state-warning .source,
|
|
462
|
+
.source-block.source-state-warning .source-deviation {
|
|
463
|
+
color: var(--on-warning-active-color);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.source-deviation {
|
|
467
|
+
display: inline-flex;
|
|
468
|
+
align-items: center;
|
|
469
|
+
gap: 2px;
|
|
470
|
+
color: var(--element-inactive-color);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.source-deviation obi-delta {
|
|
474
|
+
display: block;
|
|
475
|
+
inline-size: 12px;
|
|
476
|
+
block-size: 12px;
|
|
477
|
+
}
|
|
478
|
+
|
|
351
479
|
/* ---------- Source row & auto divider ---------- */
|
|
352
480
|
|
|
353
481
|
.source-row {
|
|
@@ -361,11 +489,8 @@ obc-readout-block {
|
|
|
361
489
|
background-color: var(--border-divider-color);
|
|
362
490
|
}
|
|
363
491
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
block-size: 1px;
|
|
367
|
-
margin-block: var(--_readout-divider-pad);
|
|
368
|
-
}
|
|
492
|
+
/* Only the horizontal direction draws a source divider (Figma 6.1: vertical
|
|
493
|
+
readouts have no rule above the source). */
|
|
369
494
|
|
|
370
495
|
.divider.divider-vertical {
|
|
371
496
|
inline-size: 1px;
|
|
@@ -523,9 +648,6 @@ obc-readout-block {
|
|
|
523
648
|
--_readout-value-pad-v: var(
|
|
524
649
|
--instrument-components-readout-new-group-vertical-regular-value-container-padding-vertical
|
|
525
650
|
);
|
|
526
|
-
--_readout-divider-pad: var(
|
|
527
|
-
--instrument-components-readout-new-group-vertical-regular-divider-padding
|
|
528
|
-
);
|
|
529
651
|
--_readout-min-height: var(
|
|
530
652
|
--instrument-components-readout-new-group-vertical-regular-container-min-height
|
|
531
653
|
);
|
|
@@ -551,9 +673,6 @@ obc-readout-block {
|
|
|
551
673
|
--_readout-value-pad-v: var(
|
|
552
674
|
--instrument-components-readout-new-group-vertical-medium-value-container-padding-vertical
|
|
553
675
|
);
|
|
554
|
-
--_readout-divider-pad: var(
|
|
555
|
-
--instrument-components-readout-new-group-vertical-medium-divider-padding
|
|
556
|
-
);
|
|
557
676
|
}
|
|
558
677
|
|
|
559
678
|
.readout.direction-vertical.stacking-inline.size-large {
|
|
@@ -572,9 +691,6 @@ obc-readout-block {
|
|
|
572
691
|
--_readout-value-pad-v: var(
|
|
573
692
|
--instrument-components-readout-new-group-vertical-enhanced-vertical-value-container-padding-vertical
|
|
574
693
|
);
|
|
575
|
-
--_readout-divider-pad: var(
|
|
576
|
-
--instrument-components-readout-new-group-vertical-enhanced-divider-padding
|
|
577
|
-
);
|
|
578
694
|
--_readout-min-height: var(
|
|
579
695
|
--instrument-components-readout-new-group-vertical-enhanced-container-min-height
|
|
580
696
|
);
|
|
@@ -598,9 +714,6 @@ obc-readout-block {
|
|
|
598
714
|
--_readout-value-pad-v: var(
|
|
599
715
|
--instrument-components-readout-new-stack-regular-value-container-padding-vertical
|
|
600
716
|
);
|
|
601
|
-
--_readout-divider-pad: var(
|
|
602
|
-
--instrument-components-readout-new-stack-regular-divider-padding
|
|
603
|
-
);
|
|
604
717
|
--_readout-min-height: var(
|
|
605
718
|
--instrument-components-readout-new-stack-regular-container-min-height
|
|
606
719
|
);
|
|
@@ -622,9 +735,6 @@ obc-readout-block {
|
|
|
622
735
|
--_readout-value-pad-v: var(
|
|
623
736
|
--instrument-components-readout-new-stack-medium-value-container-padding-vertical
|
|
624
737
|
);
|
|
625
|
-
--_readout-divider-pad: var(
|
|
626
|
-
--instrument-components-readout-new-stack-medium-divider-padding
|
|
627
|
-
);
|
|
628
738
|
}
|
|
629
739
|
|
|
630
740
|
.readout.direction-vertical.stacking-stacked.size-large {
|
|
@@ -643,9 +753,6 @@ obc-readout-block {
|
|
|
643
753
|
--_readout-value-pad-v: var(
|
|
644
754
|
--instrument-components-readout-new-stack-enhanced-vertical-value-container-padding-vertical
|
|
645
755
|
);
|
|
646
|
-
--_readout-divider-pad: var(
|
|
647
|
-
--instrument-components-readout-new-stack-enhanced-divider-padding
|
|
648
|
-
);
|
|
649
756
|
--_readout-min-height: var(
|
|
650
757
|
--instrument-components-readout-new-stack-enhanced-container-min-height
|
|
651
758
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { ReadoutBlockSize, ReadoutBlockDataQuality } from '../../building-blocks/readout-block/readout-block.js';
|
|
3
|
-
import { ReadoutListItemSetpointInteraction, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions, ReadoutSrcOptions } from '../readout-list-item/readout-list-item.js';
|
|
3
|
+
import { ReadoutListItemSetpointInteraction, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions } from '../readout-list-item/readout-list-item.js';
|
|
4
4
|
import { Priority } from '../types.js';
|
|
5
5
|
import { ReadoutValueType } from './readout-formatters.js';
|
|
6
6
|
import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
|
|
@@ -10,9 +10,12 @@ import '../../components/button/button.js';
|
|
|
10
10
|
import '../../components/context-menu-input/context-menu-input.js';
|
|
11
11
|
import '../../icons/icon-chevron-right-google.js';
|
|
12
12
|
import '../../icons/icon-drop-down-google.js';
|
|
13
|
+
import '../../icons/icon-delta.js';
|
|
13
14
|
export { ObcTextboxFontWeight } from '../../components/textbox/textbox.js';
|
|
14
15
|
export { ReadoutValueType } from './readout-formatters.js';
|
|
15
|
-
export
|
|
16
|
+
export { ReadoutAdviceCategory } from '../../building-blocks/readout-block/readout-block.js';
|
|
17
|
+
export { ReadoutSourceState } from '../readout-list-item/readout-list-item.js';
|
|
18
|
+
export type { ReadoutBlockState, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions, } from '../readout-list-item/readout-list-item.js';
|
|
16
19
|
/**
|
|
17
20
|
* Density/size scale of the readout (an alias of `ReadoutBlockSize`).
|
|
18
21
|
* - `small`: regular value typography (smallest, densest).
|
|
@@ -40,6 +43,9 @@ export type ReadoutDataQuality = ReadoutBlockDataQuality;
|
|
|
40
43
|
* How the setpoint segment behaves relative to the value (an alias of
|
|
41
44
|
* `ReadoutListItemSetpointInteraction`).
|
|
42
45
|
* - `always-visible` (default): the setpoint is always shown.
|
|
46
|
+
* - `equal-size`: value and setpoint are always shown at the same (primary)
|
|
47
|
+
* size (Figma 6.1 "Equal size") — the value does not demote while
|
|
48
|
+
* `touching`, unlike the other modes.
|
|
43
49
|
* - `flip-flop`: value and setpoint swap emphasis (size) as the value reaches
|
|
44
50
|
* the setpoint.
|
|
45
51
|
* - `pop-up`: the setpoint is shown only while the value has not reached it,
|
|
@@ -101,6 +107,11 @@ export declare enum ReadoutSourceInteraction {
|
|
|
101
107
|
/**
|
|
102
108
|
* Per-source options. Extends the shared per-block state (data quality, alert,
|
|
103
109
|
* space reserver) with the readout's source interactivity.
|
|
110
|
+
*
|
|
111
|
+
* `state` and `deviation` apply to the plain (non-interactive) source only —
|
|
112
|
+
* the Figma 6.1 sheets do not define them on the picker / flyout buttons, so
|
|
113
|
+
* those branches render without a state chip or deviation line
|
|
114
|
+
* (TODO(designer): pending a design for interactive source states).
|
|
104
115
|
*/
|
|
105
116
|
export interface ReadoutSourceOptions extends ReadoutSrcOptions {
|
|
106
117
|
/** Interactivity of the source row (default `none`). */
|
|
@@ -154,6 +165,7 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
|
|
|
154
165
|
* ### Slots
|
|
155
166
|
* | Slot Name | Renders When | Purpose |
|
|
156
167
|
* |--------------------|---------------------------------------|--------------------------------------|
|
|
168
|
+
* | leading-icon | `hasLeadingIcon` | Icon before the label/unit meta zone.|
|
|
157
169
|
* | value-icon | `valueOptions.hasIcon` | Icon before the value. |
|
|
158
170
|
* | setpoint-icon | `hasSetpoint` | Overrides the default setpoint icon. |
|
|
159
171
|
* | advice-icon | `hasAdvice` | Overrides the default advice icon. |
|
|
@@ -162,6 +174,7 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
|
|
|
162
174
|
* @fires {CustomEvent<{value: string, label?: string}>} source-change - Fired when a source picker option is selected.
|
|
163
175
|
* @fires {CustomEvent<{src: string}>} source-flyout-click - Fired when the source row is clicked while `srcOptions.interaction == 'flyout'`.
|
|
164
176
|
*
|
|
177
|
+
* @slot leading-icon - Icon before the label/unit meta zone.
|
|
165
178
|
* @slot value-icon - Icon before the value.
|
|
166
179
|
* @slot setpoint-icon - Overrides the default setpoint icon.
|
|
167
180
|
* @slot advice-icon - Overrides the default advice icon.
|
|
@@ -199,6 +212,13 @@ export declare class ObcReadout extends LitElement {
|
|
|
199
212
|
hasAdvice: boolean;
|
|
200
213
|
/** @availableWhen hasAdvice==true */
|
|
201
214
|
advice?: number;
|
|
215
|
+
/**
|
|
216
|
+
* Density tier. Applies to the vertical direction only — the horizontal
|
|
217
|
+
* arrangement exists in the large tier alone (Figma 6.1: it relies on the
|
|
218
|
+
* label+unit stack aligning with the L-size value caps), so `size` is
|
|
219
|
+
* ignored when `direction` is `horizontal`.
|
|
220
|
+
* @availableWhen direction==vertical
|
|
221
|
+
*/
|
|
202
222
|
size?: ReadoutSize;
|
|
203
223
|
priority?: ReadoutPriority;
|
|
204
224
|
direction?: ReadoutDirection;
|
|
@@ -206,9 +226,16 @@ export declare class ObcReadout extends LitElement {
|
|
|
206
226
|
stacking?: ReadoutStacking;
|
|
207
227
|
/** @availableWhen direction==vertical && stacking==stacked */
|
|
208
228
|
alignment?: ReadoutAlignment;
|
|
229
|
+
/**
|
|
230
|
+
* Render the cap-height degree glyph (`°`) after the ACTUAL VALUE only —
|
|
231
|
+
* the setpoint / advice blocks never carry one (Figma 6.1 review: the unit
|
|
232
|
+
* is written once for the readout, and the degree follows the same rule).
|
|
233
|
+
*/
|
|
209
234
|
hasDegree: boolean;
|
|
210
235
|
/** @availableWhen hasDegree==false */
|
|
211
236
|
hasDegreeSpacer: boolean;
|
|
237
|
+
/** Show the `leading-icon` slot before the label/unit meta zone. */
|
|
238
|
+
hasLeadingIcon: boolean;
|
|
212
239
|
/**
|
|
213
240
|
* Also formats the numeric setpoint / advice blocks, which stay numeric
|
|
214
241
|
* even when the value is text. Must be between 0 and 100 — the range
|
|
@@ -238,6 +265,8 @@ export declare class ObcReadout extends LitElement {
|
|
|
238
265
|
setpointOptions?: ReadoutSetpointOptions;
|
|
239
266
|
/** @availableWhen hasAdvice==true */
|
|
240
267
|
adviceOptions?: ReadoutAdviceOptions;
|
|
268
|
+
/** @availableWhen label!='' */
|
|
269
|
+
labelOptions?: ReadoutLabelOptions;
|
|
241
270
|
/** @availableWhen unit!='' */
|
|
242
271
|
unitOptions?: ReadoutReserverOptions;
|
|
243
272
|
/** @availableWhen src!='' */
|
|
@@ -277,6 +306,7 @@ export declare class ObcReadout extends LitElement {
|
|
|
277
306
|
private get isAtSetpoint();
|
|
278
307
|
private get resolvedSetpointInteraction();
|
|
279
308
|
private get isFlipFlop();
|
|
309
|
+
private get isEqualSize();
|
|
280
310
|
private get isPopUp();
|
|
281
311
|
private get setpointTouching();
|
|
282
312
|
/**
|
|
@@ -308,6 +338,22 @@ export declare class ObcReadout extends LitElement {
|
|
|
308
338
|
private get setpointSize();
|
|
309
339
|
/** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */
|
|
310
340
|
private get valueWeight();
|
|
341
|
+
/**
|
|
342
|
+
* Label size. The Figma 6.1 title block defaults large readouts to `s` — a
|
|
343
|
+
* scannable label should not sit at the smallest permitted size — while
|
|
344
|
+
* small/medium tiers stay `xs`; `labelOptions.size` overrides either way
|
|
345
|
+
* (per the design team, for context / density / secondary instruments).
|
|
346
|
+
* The `s` default was confirmed by the design team (2026-08-17).
|
|
347
|
+
* TODO(designer): the medium-tier default is unverified in the new sheets
|
|
348
|
+
* (only XS and S exist on the title's size axis).
|
|
349
|
+
*/
|
|
350
|
+
private get labelSize();
|
|
351
|
+
/**
|
|
352
|
+
* Label weight: SemiBold only for enhanced (in-command) readouts, regular
|
|
353
|
+
* otherwise — the designer reduced the amount of semibold in the interface
|
|
354
|
+
* (Figma 6.1 review).
|
|
355
|
+
*/
|
|
356
|
+
private get labelWeight();
|
|
311
357
|
/** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
|
|
312
358
|
private get setpointWeight();
|
|
313
359
|
private numericFormatOptions;
|
|
@@ -359,7 +405,21 @@ export declare class ObcReadout extends LitElement {
|
|
|
359
405
|
/** The label/unit meta zone; `stacking` picks the inline or stacked arrangement. */
|
|
360
406
|
private renderMetaZone;
|
|
361
407
|
private renderSourceContent;
|
|
362
|
-
/**
|
|
408
|
+
/**
|
|
409
|
+
* The plain (non-interactive) source: the textbox plus its optional state
|
|
410
|
+
* chip and deviation line. The regular no-deviation case renders the bare
|
|
411
|
+
* textbox — the pre-6.1 output; a state or deviation wraps it in the
|
|
412
|
+
* `.source-block` stack. The picker / flyout button variants do not carry
|
|
413
|
+
* state / deviation yet — TODO(designer): undefined in the 6.1 sheets.
|
|
414
|
+
*/
|
|
415
|
+
private renderSourceBlock;
|
|
416
|
+
/**
|
|
417
|
+
* The source row (vertical) / segment (horizontal). Only the horizontal
|
|
418
|
+
* direction draws an auto divider before the source — the Figma 6.1 review
|
|
419
|
+
* (node 95:24490 "remove dividers", 95:26891 "Source-divider are there")
|
|
420
|
+
* keeps the vertical source row divider-free while the horizontal flow
|
|
421
|
+
* separates the source with a vertical rule.
|
|
422
|
+
*/
|
|
363
423
|
private renderSource;
|
|
364
424
|
private getSourcePickerNavigationItems;
|
|
365
425
|
private createSourcePickerOptionIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgD,MAAM,KAAK,CAAC;AAK9E,OAAO,qCAAqC,CAAC;AAK7C,OAAO,sDAAsD,CAAC;AAC9D,OAAO,EAEL,gBAAgB,EAChB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"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"}
|