@oicl/openbridge-webcomponents-svelte 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.
@@ -1,12 +1,12 @@
1
1
 
2
2
  <script lang="ts">
3
- export type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
3
+ export type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutAdviceCategory, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
4
4
  export type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
5
5
  export type {ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
6
6
  export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
7
7
  import '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
8
8
  import { setProperties } from "../../util.js";
9
- import type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
9
+ import type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutAdviceCategory, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
10
10
  import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
11
11
  import type {ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
12
12
  import type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
@@ -59,6 +59,13 @@ off?: boolean;
59
59
  offText?: string;
60
60
  /** Text alignment of the number within its reserved width. */
61
61
  alignment?: ObcTextboxAlignment;
62
+ /** [object Object],[object Object],[object Object] */
63
+ category?: ReadoutAdviceCategory;
64
+ /** The advice is triggered: the marker swaps to its filled/status icon and
65
+ the number takes the category's triggered styling (SemiBold for
66
+ regular/optimal/eco, active text colour for the alert categories). Only
67
+ meaningful for `variant="advice"`. */
68
+ active?: boolean;
62
69
  /** Per-block measurement quality (outline chip). */
63
70
  dataQuality?: ReadoutBlockDataQuality | undefined;
64
71
  /** Per-block alert frame; nests inside any parent alert frame. */
@@ -1,5 +1,5 @@
1
1
  import '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
2
- import type { ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase } from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
2
+ import type { ReadoutBlockVariant, ReadoutBlockSize, ReadoutAdviceCategory, ReadoutBlockDataQuality, ReadoutBlockHidePhase } from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
3
3
  import type { ReadoutValueType } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
4
4
  import type { ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment } from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
5
5
  import type { AlertFrameConfig } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
@@ -51,6 +51,13 @@ dash, consistent with `fractionDigits`. */
51
51
  offText?: string;
52
52
  /** Text alignment of the number within its reserved width. */
53
53
  alignment?: ObcTextboxAlignment;
54
+ /** [object Object],[object Object],[object Object] */
55
+ category?: ReadoutAdviceCategory;
56
+ /** The advice is triggered: the marker swaps to its filled/status icon and
57
+ the number takes the category's triggered styling (SemiBold for
58
+ regular/optimal/eco, active text colour for the alert categories). Only
59
+ meaningful for `variant="advice"`. */
60
+ active?: boolean;
54
61
  /** Per-block measurement quality (outline chip). */
55
62
  dataQuality?: ReadoutBlockDataQuality | undefined;
56
63
  /** Per-block alert frame; nests inside any parent alert frame. */
@@ -69,6 +76,7 @@ type $$ComponentProps = Props & Events & Slots;
69
76
  declare const ObcReadoutBlock: import("svelte").Component<$$ComponentProps, {
70
77
  ReadoutBlockVariant: typeof ReadoutBlockVariant;
71
78
  ReadoutBlockSize: typeof ReadoutBlockSize;
79
+ ReadoutAdviceCategory: typeof ReadoutAdviceCategory;
72
80
  ReadoutBlockDataQuality: typeof ReadoutBlockDataQuality;
73
81
  ReadoutBlockHidePhase: typeof ReadoutBlockHidePhase;
74
82
  ReadoutValueType: typeof ReadoutValueType;
@@ -5,7 +5,7 @@ export type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-w
5
5
  export type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
6
6
  export type {ReadoutDirection, ReadoutStacking, ReadoutAlignment, ReadoutSourceOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
7
7
  export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
8
- export type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
8
+ export type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
9
9
  import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
10
10
  import { setProperties, forwardEvents } from "../../util.js";
11
11
  import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
@@ -13,7 +13,7 @@ import type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-w
13
13
  import type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
14
14
  import type {ReadoutDirection, ReadoutStacking, ReadoutAlignment, ReadoutSourceOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
15
15
  import type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
16
- import type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
16
+ import type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
17
17
  import type { Snippet } from 'svelte';
18
18
 
19
19
  export interface Props {
@@ -39,13 +39,22 @@ offText?: string;
39
39
  setpoint?: number | undefined;
40
40
  hasAdvice?: boolean;
41
41
  advice?: number | undefined;
42
- size?: ReadoutBlockSize | undefined;
42
+ /** Density tier. Applies to the vertical direction only — the horizontal
43
+ arrangement exists in the large tier alone (Figma 6.1: it relies on the
44
+ label+unit stack aligning with the L-size value caps), so `size` is
45
+ ignored when `direction` is `horizontal`. */
46
+ size?: ReadoutBlockSize | undefined;
43
47
  priority?: Priority | undefined;
44
48
  direction?: ReadoutDirection | undefined;
45
49
  stacking?: ReadoutStacking | undefined;
46
50
  alignment?: ReadoutAlignment | undefined;
47
- hasDegree?: boolean;
51
+ /** Render the cap-height degree glyph (`°`) after the ACTUAL VALUE only —
52
+ the setpoint / advice blocks never carry one (Figma 6.1 review: the unit
53
+ is written once for the readout, and the degree follows the same rule). */
54
+ hasDegree?: boolean;
48
55
  hasDegreeSpacer?: boolean;
56
+ /** Show the `leading-icon` slot before the label/unit meta zone. */
57
+ hasLeadingIcon?: boolean;
49
58
  /** Also formats the numeric setpoint / advice blocks, which stay numeric
50
59
  even when the value is text. Must be between 0 and 100 — the range
51
60
  `Number.prototype.toFixed` accepts; outside it throws a `RangeError`.
@@ -66,6 +75,7 @@ maxDigits?: number;
66
75
  valueOptions?: ReadoutValueOptions | undefined;
67
76
  setpointOptions?: ReadoutSetpointOptions | undefined;
68
77
  adviceOptions?: ReadoutAdviceOptions | undefined;
78
+ labelOptions?: ReadoutLabelOptions | undefined;
69
79
  unitOptions?: ReadoutReserverOptions | undefined;
70
80
  srcOptions?: ReadoutSourceOptions | undefined;
71
81
  /** Development aid: outline the readout building blocks (red), the degree
@@ -78,12 +88,13 @@ showDebugOverlay?: boolean
78
88
  onSourceFlyoutClick?: (event: CustomEvent<{src: string}>) => void
79
89
  }
80
90
  export interface Slots {
91
+ leadingIcon?: Snippet;
81
92
  valueIcon?: Snippet;
82
93
  setpointIcon?: Snippet;
83
94
  adviceIcon?: Snippet;
84
95
  srcPickerContent?: Snippet
85
96
  }
86
- const {onSourceChange, onSourceFlyoutClick, class: className, style, valueIcon, setpointIcon, adviceIcon, srcPickerContent, ...props} = $props<Props & Events & Slots>();
97
+ const {onSourceChange, onSourceFlyoutClick, class: className, style, leadingIcon, valueIcon, setpointIcon, adviceIcon, srcPickerContent, ...props} = $props<Props & Events & Slots>();
87
98
 
88
99
  </script>
89
100
  <obc-readout
@@ -92,6 +103,12 @@ showDebugOverlay?: boolean
92
103
  style={style}
93
104
  use:forwardEvents={{'source-change': onSourceChange, 'source-flyout-click': onSourceFlyoutClick}} >
94
105
 
106
+ {#if leadingIcon}
107
+ <div slot="leading-icon">
108
+ {@render leadingIcon()}
109
+ </div>
110
+ {/if}
111
+
95
112
  {#if valueIcon}
96
113
  <div slot="value-icon">
97
114
  {@render valueIcon()}
@@ -4,7 +4,7 @@ import type { ReadoutBlockSize, ReadoutBlockDataQuality } from '@oicl/openbridge
4
4
  import type { Priority } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
5
5
  import type { ReadoutDirection, ReadoutStacking, ReadoutAlignment, ReadoutSourceOptions } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
6
6
  import type { AlertFrameConfig } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
7
- import type { ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
7
+ import type { ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
8
8
  import type { Snippet } from 'svelte';
9
9
  export interface Props {
10
10
  class?: string;
@@ -29,13 +29,22 @@ value block at full size, so the layout does not shift when data arrives. */
29
29
  setpoint?: number | undefined;
30
30
  hasAdvice?: boolean;
31
31
  advice?: number | undefined;
32
+ /** Density tier. Applies to the vertical direction only — the horizontal
33
+ arrangement exists in the large tier alone (Figma 6.1: it relies on the
34
+ label+unit stack aligning with the L-size value caps), so `size` is
35
+ ignored when `direction` is `horizontal`. */
32
36
  size?: ReadoutBlockSize | undefined;
33
37
  priority?: Priority | undefined;
34
38
  direction?: ReadoutDirection | undefined;
35
39
  stacking?: ReadoutStacking | undefined;
36
40
  alignment?: ReadoutAlignment | undefined;
41
+ /** Render the cap-height degree glyph (`°`) after the ACTUAL VALUE only —
42
+ the setpoint / advice blocks never carry one (Figma 6.1 review: the unit
43
+ is written once for the readout, and the degree follows the same rule). */
37
44
  hasDegree?: boolean;
38
45
  hasDegreeSpacer?: boolean;
46
+ /** Show the `leading-icon` slot before the label/unit meta zone. */
47
+ hasLeadingIcon?: boolean;
39
48
  /** Also formats the numeric setpoint / advice blocks, which stay numeric
40
49
  even when the value is text. Must be between 0 and 100 — the range
41
50
  `Number.prototype.toFixed` accepts; outside it throws a `RangeError`.
@@ -56,6 +65,7 @@ dash, consistent with `fractionDigits`. */
56
65
  valueOptions?: ReadoutValueOptions | undefined;
57
66
  setpointOptions?: ReadoutSetpointOptions | undefined;
58
67
  adviceOptions?: ReadoutAdviceOptions | undefined;
68
+ labelOptions?: ReadoutLabelOptions | undefined;
59
69
  unitOptions?: ReadoutReserverOptions | undefined;
60
70
  srcOptions?: ReadoutSourceOptions | undefined;
61
71
  /** Development aid: outline the readout building blocks (red), the degree
@@ -73,6 +83,7 @@ export interface Events {
73
83
  }>) => void;
74
84
  }
75
85
  export interface Slots {
86
+ leadingIcon?: Snippet;
76
87
  valueIcon?: Snippet;
77
88
  setpointIcon?: Snippet;
78
89
  adviceIcon?: Snippet;
@@ -92,6 +103,7 @@ declare const ObcReadout: import("svelte").Component<$$ComponentProps, {
92
103
  ReadoutValueOptions: typeof ReadoutValueOptions;
93
104
  ReadoutSetpointOptions: typeof ReadoutSetpointOptions;
94
105
  ReadoutAdviceOptions: typeof ReadoutAdviceOptions;
106
+ ReadoutLabelOptions: typeof ReadoutLabelOptions;
95
107
  ReadoutReserverOptions: typeof ReadoutReserverOptions;
96
108
  }, "">;
97
109
  type ObcReadout = ReturnType<typeof ObcReadout>;
@@ -2,13 +2,13 @@
2
2
  <script lang="ts">
3
3
  export type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
4
4
  export type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
5
- export type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions, ReadoutSrcOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
5
+ export type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
6
6
  export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
7
7
  import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
8
8
  import { setProperties, forwardEvents } from "../../util.js";
9
9
  import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
10
10
  import type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
11
- import type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions, ReadoutSrcOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
11
+ import type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
12
12
  import type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
13
13
  import type { Snippet } from 'svelte';
14
14
 
@@ -62,6 +62,7 @@ maxDigits?: number;
62
62
  valueOptions?: ReadoutValueOptions | undefined;
63
63
  setpointOptions?: ReadoutSetpointOptions | undefined;
64
64
  adviceOptions?: ReadoutAdviceOptions | undefined;
65
+ labelOptions?: ReadoutLabelOptions | undefined;
65
66
  unitOptions?: ReadoutReserverOptions | undefined;
66
67
  srcOptions?: ReadoutSrcOptions | undefined;
67
68
  /** Development aid: outline the readout building blocks (red), the degree
@@ -1,7 +1,7 @@
1
1
  import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
2
2
  import type { ReadoutValueType } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
3
3
  import type { ReadoutBlockSize, ReadoutBlockDataQuality } from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
4
- import type { ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions, ReadoutSrcOptions } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
4
+ import type { ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
5
5
  import type { AlertFrameConfig } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
6
6
  import type { Snippet } from 'svelte';
7
7
  export interface Props {
@@ -54,6 +54,7 @@ dash, consistent with `fractionDigits`. */
54
54
  valueOptions?: ReadoutValueOptions | undefined;
55
55
  setpointOptions?: ReadoutSetpointOptions | undefined;
56
56
  adviceOptions?: ReadoutAdviceOptions | undefined;
57
+ labelOptions?: ReadoutLabelOptions | undefined;
57
58
  unitOptions?: ReadoutReserverOptions | undefined;
58
59
  srcOptions?: ReadoutSrcOptions | undefined;
59
60
  /** Development aid: outline the readout building blocks (red), the degree
@@ -81,6 +82,7 @@ declare const ObcReadoutListItem: import("svelte").Component<$$ComponentProps, {
81
82
  ReadoutValueOptions: typeof ReadoutValueOptions;
82
83
  ReadoutSetpointOptions: typeof ReadoutSetpointOptions;
83
84
  ReadoutAdviceOptions: typeof ReadoutAdviceOptions;
85
+ ReadoutLabelOptions: typeof ReadoutLabelOptions;
84
86
  ReadoutReserverOptions: typeof ReadoutReserverOptions;
85
87
  ReadoutSrcOptions: typeof ReadoutSrcOptions;
86
88
  AlertFrameConfig: typeof AlertFrameConfig;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents-svelte",
3
- "version": "2.0.0-next.127",
3
+ "version": "2.0.0-next.129",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run prepack",
@@ -31,7 +31,7 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@oicl/openbridge-webcomponents": "^2.0.0-next.127"
34
+ "@oicl/openbridge-webcomponents": "^2.0.0-next.129"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "svelte": "^5.0.0"