@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.98
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 +39 -124
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +343 -142
- package/dist/ar/poi/poi.d.ts +4 -2
- package/dist/ar/poi/poi.d.ts.map +1 -1
- package/dist/ar/poi/poi.js.map +1 -1
- package/dist/ar/poi-layer/poi-layer.d.ts +1 -0
- package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
- package/dist/ar/poi-layer/poi-layer.js.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.d.ts +1 -0
- package/dist/ar/poi-object/poi-object-aton.d.ts.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.js.map +1 -1
- package/dist/automation/automation-badge/automation-badge.d.ts +2 -0
- package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
- package/dist/automation/automation-badge/automation-badge.js.map +1 -1
- package/dist/automation/automation-button/automation-button.d.ts +9 -0
- package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
- package/dist/automation/automation-button/automation-button.js.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts +4 -0
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.js.map +1 -1
- package/dist/automation/automation-tank/automation-tank.css.js +8 -87
- package/dist/automation/automation-tank/automation-tank.css.js.map +1 -1
- package/dist/automation/automation-tank/automation-tank.d.ts +13 -33
- package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
- package/dist/automation/automation-tank/automation-tank.js +12 -28
- package/dist/automation/automation-tank/automation-tank.js.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.d.ts +4 -0
- package/dist/building-blocks/alert-list/alert-list.d.ts.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.js.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts +2 -0
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.js.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts +2 -0
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.js.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.d.ts +2 -4
- package/dist/components/advice-floating-item/advice-floating-item.d.ts.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.js.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.d.ts +6 -19
- package/dist/components/advice-message-item/advice-message-item.d.ts.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.js.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.d.ts +12 -0
- package/dist/components/alert-floating-item/alert-floating-item.d.ts.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.js.map +1 -1
- package/dist/components/alert-menu/alert-menu.d.ts +6 -20
- package/dist/components/alert-menu/alert-menu.d.ts.map +1 -1
- package/dist/components/alert-menu/alert-menu.js.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.d.ts +4 -0
- package/dist/components/alert-menu-item/alert-menu-item.d.ts.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.js.map +1 -1
- package/dist/components/chat-message/chat-message.d.ts +3 -0
- package/dist/components/chat-message/chat-message.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.js.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts +2 -6
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.js.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts +6 -0
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.js.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.d.ts +2 -4
- package/dist/components/notification-floating-item/notification-floating-item.d.ts.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.js.map +1 -1
- package/dist/components/sequence-card/sequence-card.d.ts +9 -0
- package/dist/components/sequence-card/sequence-card.d.ts.map +1 -1
- package/dist/components/sequence-card/sequence-card.js.map +1 -1
- package/dist/components/sequence-item/sequence-item.d.ts +5 -0
- package/dist/components/sequence-item/sequence-item.d.ts.map +1 -1
- package/dist/components/sequence-item/sequence-item.js.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.d.ts +4 -0
- package/dist/components/sequence-modal/sequence-modal.d.ts.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.js.map +1 -1
- package/dist/components/sequence-step/sequence-step.d.ts.map +1 -1
- package/dist/components/sequence-step/sequence-step.js.map +1 -1
- package/dist/components/slider-double/slider-double.d.ts +4 -8
- package/dist/components/slider-double/slider-double.d.ts.map +1 -1
- package/dist/components/slider-double/slider-double.js.map +1 -1
- package/dist/components/status-indicator/status-indicator.d.ts +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts.map +1 -1
- package/dist/components/status-indicator/status-indicator.js.map +1 -1
- package/dist/components/system-menu/system-menu.d.ts +2 -0
- package/dist/components/system-menu/system-menu.d.ts.map +1 -1
- package/dist/components/system-menu/system-menu.js.map +1 -1
- package/dist/components/table-header-item/table-header-item.d.ts +2 -0
- package/dist/components/table-header-item/table-header-item.d.ts.map +1 -1
- package/dist/components/table-header-item/table-header-item.js.map +1 -1
- package/dist/components/tag/tag.d.ts +1 -0
- package/dist/components/tag/tag.d.ts.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/toggletip/toggletip.d.ts +4 -4
- package/dist/components/toggletip/toggletip.js.map +1 -1
- package/dist/components/user-menu/user-menu.d.ts +1 -0
- package/dist/components/user-menu/user-menu.d.ts.map +1 -1
- package/dist/components/user-menu/user-menu.js.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts +1 -0
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts +0 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts +9 -9
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts +1 -0
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts +1 -0
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.js.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts +0 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.js.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.js +17 -7
- package/dist/navigation-instruments/watch/tickmark.js.map +1 -1
- package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/watch.js +2 -2
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts +0 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.js.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.d.ts.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.js.map +1 -1
- package/package.json +3 -2
package/custom-elements.json
CHANGED
|
@@ -6874,7 +6874,8 @@
|
|
|
6874
6874
|
"name": "layer-selection-changed",
|
|
6875
6875
|
"type": {
|
|
6876
6876
|
"text": "Event"
|
|
6877
|
-
}
|
|
6877
|
+
},
|
|
6878
|
+
"description": "{Event} Fired when the layer's `isSelected` state changes. Bubbles."
|
|
6878
6879
|
}
|
|
6879
6880
|
],
|
|
6880
6881
|
"attributes": [
|
|
@@ -6961,6 +6962,12 @@
|
|
|
6961
6962
|
"kind": "class",
|
|
6962
6963
|
"description": "",
|
|
6963
6964
|
"name": "ObcPoiObjectAton",
|
|
6965
|
+
"slots": [
|
|
6966
|
+
{
|
|
6967
|
+
"description": "Icon content rendered inside the POI object.",
|
|
6968
|
+
"name": ""
|
|
6969
|
+
}
|
|
6970
|
+
],
|
|
6964
6971
|
"members": [
|
|
6965
6972
|
{
|
|
6966
6973
|
"kind": "field",
|
|
@@ -11223,7 +11230,7 @@
|
|
|
11223
11230
|
"declarations": [
|
|
11224
11231
|
{
|
|
11225
11232
|
"kind": "class",
|
|
11226
|
-
"description": "`<obc-poi>` - Composite marker component that renders a target button with connector and pointer visuals.\n\n## Overview\nCombines `obc-poi-button`, `obc-poi-line`, and optional pointer visuals to display\ninteractive marker/callout targets in line, offset, point, or outside modes.\nKeywords: marker, callout, pin, label, target, pointer.\n\n## Features/Variants\n\nConfiguration defaults and behavior:\n- `type` (default: `line`):\n - `line`: renders a vertical connector line from button to target.\n - `offset`: renders a bent connector using `targetOffsetX - buttonOffsetX`.\n - `point`: suppresses long connector behavior (line can collapse/skip based on state).\n - `outside`: suppresses connector line; outside arrow is rendered when `hasPointer` is true.\n- `value` (default: `unchecked`):\n - `unchecked`: default visual state.\n - `checked`: selected-like visual and pointer behavior.\n - `activated`: activated button visual state with selected-like pointer behavior.\n - `overlapped`: compact overlap visual state.\n- `overlapOpaque` (default: `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).\n- `state` (default: `enabled`):\n - `enabled`: neutral alert ring and regular line style.\n - `caution`/`warning`/`alarm`: applies alert-specific button/line styling.\n - In `enabled`, pointer type resolution defaults to point.\n- `selected` (default: `false`): enables selected emphasis semantics (for example selected line style when not in alert state).\n- `hasPointer` (default: `false`):\n - For `line`/`offset`/`point`, pointer visuals are shown when `hasPointer` is true.\n - Checked-like values also force inline pointer visuals for non-`outside` types.\n - For `outside`, `hasPointer` controls outside-arrow visibility.\n- `pointerType` (default: `null`, enum `point | button | camera`):\n - Used when not in checked-like state and not `enabled`.\n - Otherwise resolves to `point` for consistent selected/enabled behavior.\n- `pointerState` (default: `null`, enum `regular | selected | active | uncertain`):\n - Checked-like non-`outside` values resolve to `selected`.\n - Otherwise falls back to provided `pointerState` or `regular`.\n\nMotion and layout notes:\n- `animatePosition` (default: `false`): when true, enables short position transition timing for line/pointer movement.\n- `x` (default: `0`): host horizontal position; sets `--obc-poi-x` as `${x}px`.\n- `y` (default: `96`): absolute local target Y; non-finite values fall back to `0` in geometry calculations.\n- `buttonY` (default: `0`): when `fixedTarget=false`, anchors the button at its local Y while the target is derived below it from `y`; when `fixedTarget=true`, preserves the legacy host-anchor behavior.\n- `buttonOffsetX`/`targetOffsetX` (defaults: `0`/`0`): define connector bend delta via `targetOffsetX - buttonOffsetX`.\n- `boxWidth`/`boxHeight` (defaults: `null`/`null`): optional pointer frame size extras; invalid/non-finite values are ignored.\n- `outsideAngle` (default: `315`): controls outside-arrow direction in `outside` mode.\n\n## Usage Guidelines\n\n- Use `type=\"line\"` or `type=\"offset\"` when the button should connect to a remote target.\n- Use `type=\"point\"` for near-target placements where connector emphasis should be minimal.\n- Use `type=\"outside\"` with `hasPointer` for off-screen or directional guidance.\n- Keep `value`, `state`, and `selected` aligned with domain state so visual semantics stay consistent.\n- Provide finite numbers for layout props (`x`, `y`, `buttonY`, offsets) for predictable placement.\n\n## Slots/Content\n\n- Default slot: Main icon/content rendered inside `obc-poi-button`.\n- `
|
|
11233
|
+
"description": "`<obc-poi>` - Composite marker component that renders a target button with connector and pointer visuals.\n\n## Overview\nCombines `obc-poi-button`, `obc-poi-line`, and optional pointer visuals to display\ninteractive marker/callout targets in line, offset, point, or outside modes.\nKeywords: marker, callout, pin, label, target, pointer.\n\n## Features/Variants\n\nConfiguration defaults and behavior:\n- `type` (default: `line`):\n - `line`: renders a vertical connector line from button to target.\n - `offset`: renders a bent connector using `targetOffsetX - buttonOffsetX`.\n - `point`: suppresses long connector behavior (line can collapse/skip based on state).\n - `outside`: suppresses connector line; outside arrow is rendered when `hasPointer` is true.\n- `value` (default: `unchecked`):\n - `unchecked`: default visual state.\n - `checked`: selected-like visual and pointer behavior.\n - `activated`: activated button visual state with selected-like pointer behavior.\n - `overlapped`: compact overlap visual state.\n- `overlapOpaque` (default: `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).\n- `state` (default: `enabled`):\n - `enabled`: neutral alert ring and regular line style.\n - `caution`/`warning`/`alarm`: applies alert-specific button/line styling.\n - In `enabled`, pointer type resolution defaults to point.\n- `selected` (default: `false`): enables selected emphasis semantics (for example selected line style when not in alert state).\n- `hasPointer` (default: `false`):\n - For `line`/`offset`/`point`, pointer visuals are shown when `hasPointer` is true.\n - Checked-like values also force inline pointer visuals for non-`outside` types.\n - For `outside`, `hasPointer` controls outside-arrow visibility.\n- `pointerType` (default: `null`, enum `point | button | camera`):\n - Used when not in checked-like state and not `enabled`.\n - Otherwise resolves to `point` for consistent selected/enabled behavior.\n- `pointerState` (default: `null`, enum `regular | selected | active | uncertain`):\n - Checked-like non-`outside` values resolve to `selected`.\n - Otherwise falls back to provided `pointerState` or `regular`.\n\nMotion and layout notes:\n- `animatePosition` (default: `false`): when true, enables short position transition timing for line/pointer movement.\n- `x` (default: `0`): host horizontal position; sets `--obc-poi-x` as `${x}px`.\n- `y` (default: `96`): absolute local target Y; non-finite values fall back to `0` in geometry calculations.\n- `buttonY` (default: `0`): when `fixedTarget=false`, anchors the button at its local Y while the target is derived below it from `y`; when `fixedTarget=true`, preserves the legacy host-anchor behavior.\n- `buttonOffsetX`/`targetOffsetX` (defaults: `0`/`0`): define connector bend delta via `targetOffsetX - buttonOffsetX`.\n- `boxWidth`/`boxHeight` (defaults: `null`/`null`): optional pointer frame size extras; invalid/non-finite values are ignored.\n- `outsideAngle` (default: `315`): controls outside-arrow direction in `outside` mode.\n\n## Usage Guidelines\n\n- Use `type=\"line\"` or `type=\"offset\"` when the button should connect to a remote target.\n- Use `type=\"point\"` for near-target placements where connector emphasis should be minimal.\n- Use `type=\"outside\"` with `hasPointer` for off-screen or directional guidance.\n- Keep `value`, `state`, and `selected` aligned with domain state so visual semantics stay consistent.\n- Provide finite numbers for layout props (`x`, `y`, `buttonY`, offsets) for predictable placement.\n\n## Slots/Content\n\n- Default slot: Main icon/content rendered inside `obc-poi-button`.\n- `button`: Optional custom button element replacing the default `obc-poi-button`.\n- `header`: Optional header content. Relocated into the inner `obc-poi-button` at runtime by a `MutationObserver` (there is no `<slot name=\"header\">` element).\n\n## Events\n\nThis component does not emit custom events.\n\n## Best Practices\n\n- Pass finite numeric values for layout properties to avoid fallback-to-zero behavior.\n- Enable `animatePosition` only for intentional motion transitions and moving targets.\n- Prefer enum values for `type`, `value`, `state`, `pointerType`, and `pointerState`.\n\n## Example\n\n```html\n<obc-poi type=\"line\" value=\"unchecked\" state=\"enabled\">\n <obi-placeholder></obi-placeholder>\n</obc-poi>\n```",
|
|
11227
11234
|
"name": "ObcPoi",
|
|
11228
11235
|
"slots": [
|
|
11229
11236
|
{
|
|
@@ -11231,7 +11238,11 @@
|
|
|
11231
11238
|
"name": ""
|
|
11232
11239
|
},
|
|
11233
11240
|
{
|
|
11234
|
-
"description": "Optional custom
|
|
11241
|
+
"description": "Optional custom button element replacing the default `obc-poi-button`.",
|
|
11242
|
+
"name": "button"
|
|
11243
|
+
},
|
|
11244
|
+
{
|
|
11245
|
+
"description": "Optional header content, relocated into the inner `obc-poi-button` at runtime.",
|
|
11235
11246
|
"name": "header"
|
|
11236
11247
|
}
|
|
11237
11248
|
],
|
|
@@ -12678,6 +12689,16 @@
|
|
|
12678
12689
|
"kind": "class",
|
|
12679
12690
|
"description": "",
|
|
12680
12691
|
"name": "ObcAutomationBadge",
|
|
12692
|
+
"slots": [
|
|
12693
|
+
{
|
|
12694
|
+
"description": "Custom silhouette/outline icon, rendered behind the default slot content when no built-in badge type matches.",
|
|
12695
|
+
"name": "icon-silhouette"
|
|
12696
|
+
},
|
|
12697
|
+
{
|
|
12698
|
+
"description": "Default slot for custom badge content, rendered when no built-in badge type matches.",
|
|
12699
|
+
"name": ""
|
|
12700
|
+
}
|
|
12701
|
+
],
|
|
12681
12702
|
"members": [
|
|
12682
12703
|
{
|
|
12683
12704
|
"kind": "field",
|
|
@@ -14792,6 +14813,44 @@
|
|
|
14792
14813
|
"kind": "class",
|
|
14793
14814
|
"description": "",
|
|
14794
14815
|
"name": "ObcAutomationButton",
|
|
14816
|
+
"slots": [
|
|
14817
|
+
{
|
|
14818
|
+
"description": "Content projected into the top-right badge position of the button.",
|
|
14819
|
+
"name": "badge-top-right"
|
|
14820
|
+
},
|
|
14821
|
+
{
|
|
14822
|
+
"description": "Content projected into the top-left badge position of the button.",
|
|
14823
|
+
"name": "badge-top-left"
|
|
14824
|
+
},
|
|
14825
|
+
{
|
|
14826
|
+
"description": "Content projected into the bottom-left badge position of the button.",
|
|
14827
|
+
"name": "badge-bottom-left"
|
|
14828
|
+
},
|
|
14829
|
+
{
|
|
14830
|
+
"description": "Content projected into the bottom-right badge position of the button.",
|
|
14831
|
+
"name": "badge-bottom-right"
|
|
14832
|
+
},
|
|
14833
|
+
{
|
|
14834
|
+
"description": "Primary icon shown inside the button (regular, double, flat and square variants).",
|
|
14835
|
+
"name": "icon"
|
|
14836
|
+
},
|
|
14837
|
+
{
|
|
14838
|
+
"description": "Silhouette/outline icon shown behind the primary icon (flat variant only).",
|
|
14839
|
+
"name": "icon-silhouette"
|
|
14840
|
+
},
|
|
14841
|
+
{
|
|
14842
|
+
"description": "Custom icon for the alert frame, shown when alert==true and positioning==\"point\".",
|
|
14843
|
+
"name": "alert-icon"
|
|
14844
|
+
},
|
|
14845
|
+
{
|
|
14846
|
+
"description": "Label for the alert frame, shown when alert==true and positioning==\"point\".",
|
|
14847
|
+
"name": "alert-label"
|
|
14848
|
+
},
|
|
14849
|
+
{
|
|
14850
|
+
"description": "Timer for the alert frame, shown when alert==true and positioning==\"point\".",
|
|
14851
|
+
"name": "alert-timer"
|
|
14852
|
+
}
|
|
14853
|
+
],
|
|
14795
14854
|
"members": [
|
|
14796
14855
|
{
|
|
14797
14856
|
"kind": "field",
|
|
@@ -15265,6 +15324,24 @@
|
|
|
15265
15324
|
"kind": "class",
|
|
15266
15325
|
"description": "",
|
|
15267
15326
|
"name": "ObcAutomationInputModal",
|
|
15327
|
+
"slots": [
|
|
15328
|
+
{
|
|
15329
|
+
"description": "Header content shown at the top of the modal.",
|
|
15330
|
+
"name": "header"
|
|
15331
|
+
},
|
|
15332
|
+
{
|
|
15333
|
+
"description": "Preview content shown in the body of the modal.",
|
|
15334
|
+
"name": "preview"
|
|
15335
|
+
},
|
|
15336
|
+
{
|
|
15337
|
+
"description": "Primary action control shown in the actions row.",
|
|
15338
|
+
"name": "action-primary"
|
|
15339
|
+
},
|
|
15340
|
+
{
|
|
15341
|
+
"description": "Secondary action control shown in the actions row.",
|
|
15342
|
+
"name": "action-secondary"
|
|
15343
|
+
}
|
|
15344
|
+
],
|
|
15268
15345
|
"members": [],
|
|
15269
15346
|
"superclass": {
|
|
15270
15347
|
"name": "LitElement",
|
|
@@ -15458,7 +15535,7 @@
|
|
|
15458
15535
|
"name": "current-value"
|
|
15459
15536
|
},
|
|
15460
15537
|
{
|
|
15461
|
-
"description": "
|
|
15538
|
+
"description": "Detail rows below the main readout, shown in the regular (non-compact, non-static) layout. Slot an `<obc-readout-list>` of `<obc-readout-list-item>` rows — it owns the row typography and cross-row column alignment; the tank renders a divider above it automatically when the slot is filled.",
|
|
15462
15539
|
"name": "rich"
|
|
15463
15540
|
},
|
|
15464
15541
|
{
|
|
@@ -15703,15 +15780,6 @@
|
|
|
15703
15780
|
"description": "Number of fraction digits used to format the percent readout in the\nnon-compact (regular) layout. Defaults to `0` (integer percent). The\ncompact layout always renders integer percent to keep its fixed-width\nfootprint stable. The static layout renders capacity (`max` + `unit`)\nrather than percent, so this property has no effect there — pass a\npre-formatted value through the `max-value` slot if fractional\nprecision is needed (see the `WithFractionDigits` story).",
|
|
15704
15781
|
"attribute": "percentFractionDigits"
|
|
15705
15782
|
},
|
|
15706
|
-
{
|
|
15707
|
-
"kind": "field",
|
|
15708
|
-
"name": "readout",
|
|
15709
|
-
"type": {
|
|
15710
|
-
"text": "TankReadoutItem[]"
|
|
15711
|
-
},
|
|
15712
|
-
"default": "[]",
|
|
15713
|
-
"description": "Rich detail rows shown below the main percent/value block in the regular\n(non-compact, non-static) layout, separated by a divider. When empty (the\ndefault), nothing is rendered — neither the divider nor the list. In\nvertical orientation the chart cell shrinks to make room; in horizontal\norientation the readout column already has reserved whitespace so the\nchart is unaffected.\n\nValues are formatted using `percentFractionDigits`. Consumers that need\nfull control over the markup can replace the entire fallback by slotting\narbitrary content into `slot=\"rich\"` (note: this is a different name from\nthe existing `slot=\"readout\"` which replaces the whole readout block)."
|
|
15714
|
-
},
|
|
15715
15783
|
{
|
|
15716
15784
|
"kind": "field",
|
|
15717
15785
|
"name": "badgeControl",
|
|
@@ -15782,6 +15850,16 @@
|
|
|
15782
15850
|
"privacy": "private",
|
|
15783
15851
|
"default": "false"
|
|
15784
15852
|
},
|
|
15853
|
+
{
|
|
15854
|
+
"kind": "field",
|
|
15855
|
+
"name": "_hasRichSlot",
|
|
15856
|
+
"type": {
|
|
15857
|
+
"text": "boolean"
|
|
15858
|
+
},
|
|
15859
|
+
"privacy": "private",
|
|
15860
|
+
"default": "false",
|
|
15861
|
+
"description": "Tracks whether the `rich` slot has assigned content, so the regular\n(non-compact) layout only draws the rich divider when a consumer has\nslotted detail rows (canonically an `<obc-readout-list>`). Mirrors\n`_hasBadges` / `_hasTagSlot`."
|
|
15862
|
+
},
|
|
15785
15863
|
{
|
|
15786
15864
|
"kind": "field",
|
|
15787
15865
|
"name": "_chartResizeObserver",
|
|
@@ -15892,6 +15970,24 @@
|
|
|
15892
15970
|
}
|
|
15893
15971
|
]
|
|
15894
15972
|
},
|
|
15973
|
+
{
|
|
15974
|
+
"kind": "method",
|
|
15975
|
+
"name": "_onRichSlotChange",
|
|
15976
|
+
"privacy": "private",
|
|
15977
|
+
"return": {
|
|
15978
|
+
"type": {
|
|
15979
|
+
"text": "void"
|
|
15980
|
+
}
|
|
15981
|
+
},
|
|
15982
|
+
"parameters": [
|
|
15983
|
+
{
|
|
15984
|
+
"name": "e",
|
|
15985
|
+
"type": {
|
|
15986
|
+
"text": "Event"
|
|
15987
|
+
}
|
|
15988
|
+
}
|
|
15989
|
+
]
|
|
15990
|
+
},
|
|
15895
15991
|
{
|
|
15896
15992
|
"kind": "method",
|
|
15897
15993
|
"name": "_syncChartResizeObserver",
|
|
@@ -35616,6 +35712,24 @@
|
|
|
35616
35712
|
"kind": "class",
|
|
35617
35713
|
"description": "",
|
|
35618
35714
|
"name": "ObcAlertList",
|
|
35715
|
+
"slots": [
|
|
35716
|
+
{
|
|
35717
|
+
"description": "Default slot for the alert list items.",
|
|
35718
|
+
"name": ""
|
|
35719
|
+
},
|
|
35720
|
+
{
|
|
35721
|
+
"description": "Icon shown when the list is empty.",
|
|
35722
|
+
"name": "empty-icon"
|
|
35723
|
+
},
|
|
35724
|
+
{
|
|
35725
|
+
"description": "Title shown when the list is empty.",
|
|
35726
|
+
"name": "empty-title"
|
|
35727
|
+
},
|
|
35728
|
+
{
|
|
35729
|
+
"description": "Description shown when the list is empty.",
|
|
35730
|
+
"name": "empty-description"
|
|
35731
|
+
}
|
|
35732
|
+
],
|
|
35619
35733
|
"members": [
|
|
35620
35734
|
{
|
|
35621
35735
|
"kind": "field",
|
|
@@ -36384,7 +36498,8 @@
|
|
|
36384
36498
|
"name": "scale-dimensions-changed",
|
|
36385
36499
|
"type": {
|
|
36386
36500
|
"text": "CustomEvent"
|
|
36387
|
-
}
|
|
36501
|
+
},
|
|
36502
|
+
"description": "{CustomEvent} Fired when the scale's computed layout thickness changes; a parent chart listens for this to reserve space for the scale. Bubbles and is composed."
|
|
36388
36503
|
}
|
|
36389
36504
|
],
|
|
36390
36505
|
"attributes": [
|
|
@@ -37476,7 +37591,8 @@
|
|
|
37476
37591
|
"name": "scale-dimensions-changed",
|
|
37477
37592
|
"type": {
|
|
37478
37593
|
"text": "CustomEvent"
|
|
37479
|
-
}
|
|
37594
|
+
},
|
|
37595
|
+
"description": "{CustomEvent} Fired when the scale's computed layout thickness changes; a parent chart listens for this to reserve space for the scale. Bubbles and is composed."
|
|
37480
37596
|
}
|
|
37481
37597
|
],
|
|
37482
37598
|
"attributes": [
|
|
@@ -40065,17 +40181,13 @@
|
|
|
40065
40181
|
"declarations": [
|
|
40066
40182
|
{
|
|
40067
40183
|
"kind": "class",
|
|
40068
|
-
"description": "`<obc-advice-floating-item>` – A floating advice notification component for transient, context-sensitive messages.\n\nDisplays a brief advice or informational message that overlays the interface, typically used to provide non-blocking feedback, guidance, or status updates. This component is a specialized variant of a floating message (toast/snackbar) with a visual emphasis on advice or recommendations.\n\nAppears temporarily above the UI and can include icons, timestamps, actions, and multi-line content. Designed for scenarios where users need timely, non-intrusive advice or suggestions without interrupting their workflow.\n\n## Features\n- **Advice Notification Style:** Uses a distinct advice icon and color to visually differentiate advice messages from other notifications.\n- **Variants (type):**\n - `regular` (default): Standard advice message with a single advice icon.\n - `application`: Enhanced advice message supporting an additional icon (e.g., to indicate application context or source).\n- **Layout Directions:** Supports `horizontal` (side-by-side) or `vertical` (stacked) layouts to adapt to available space.\n- **Line Type:** Choose between `singleLine` (compact, one-line message) or `multiLine` (for longer advice or descriptions).\n- **Timestamp and Day Labels:** Optionally display a time and/or day label for context.\n- **Action Buttons:** Supports up to two action buttons (primary and secondary) for user response or quick actions.\n- **Slot-based Content:** Flexible content insertion for icons, title, description, time, day, and actions.\n- **Automatic Icon Handling:** Advice icon is rendered automatically; developers can override or supplement with their own icons via slots.\n\n## Usage Guidelines\nUse `<obc-advice-floating-item>` to present brief, non-blocking advice, tips, or contextual guidance to users. Ideal for situations where you want to draw attention to a recommended action, best practice, or informational update without requiring immediate user intervention.\n\n- Suitable for transient feedback, inline help, or system-generated suggestions.\n- Not intended for critical alerts or persistent warnings—use a dialog or alert banner for those cases.\n- For advice that requires user action, enable one or both action buttons.\n- If the advice is related to a specific time or event, use the timestamp and day labels for clarity.\n\n**TODO(designer):** Confirm if there are recommended durations for auto-dismiss, or if all advice messages require manual dismissal.\n\n## Slots\n| Slot Name | Renders When... | Purpose |\n| -------------- | ------------------------------------ | ------------------------------------------------------------ |\n| primary-icon |
|
|
40184
|
+
"description": "`<obc-advice-floating-item>` – A floating advice notification component for transient, context-sensitive messages.\n\nDisplays a brief advice or informational message that overlays the interface, typically used to provide non-blocking feedback, guidance, or status updates. This component is a specialized variant of a floating message (toast/snackbar) with a visual emphasis on advice or recommendations.\n\nAppears temporarily above the UI and can include icons, timestamps, actions, and multi-line content. Designed for scenarios where users need timely, non-intrusive advice or suggestions without interrupting their workflow.\n\n## Features\n- **Advice Notification Style:** Uses a distinct advice icon and color to visually differentiate advice messages from other notifications.\n- **Variants (type):**\n - `regular` (default): Standard advice message with a single advice icon.\n - `application`: Enhanced advice message supporting an additional icon (e.g., to indicate application context or source).\n- **Layout Directions:** Supports `horizontal` (side-by-side) or `vertical` (stacked) layouts to adapt to available space.\n- **Line Type:** Choose between `singleLine` (compact, one-line message) or `multiLine` (for longer advice or descriptions).\n- **Timestamp and Day Labels:** Optionally display a time and/or day label for context.\n- **Action Buttons:** Supports up to two action buttons (primary and secondary) for user response or quick actions.\n- **Slot-based Content:** Flexible content insertion for icons, title, description, time, day, and actions.\n- **Automatic Icon Handling:** Advice icon is rendered automatically; developers can override or supplement with their own icons via slots.\n\n## Usage Guidelines\nUse `<obc-advice-floating-item>` to present brief, non-blocking advice, tips, or contextual guidance to users. Ideal for situations where you want to draw attention to a recommended action, best practice, or informational update without requiring immediate user intervention.\n\n- Suitable for transient feedback, inline help, or system-generated suggestions.\n- Not intended for critical alerts or persistent warnings—use a dialog or alert banner for those cases.\n- For advice that requires user action, enable one or both action buttons.\n- If the advice is related to a specific time or event, use the timestamp and day labels for clarity.\n\n**TODO(designer):** Confirm if there are recommended durations for auto-dismiss, or if all advice messages require manual dismissal.\n\n## Slots\n| Slot Name | Renders When... | Purpose |\n| -------------- | ------------------------------------ | ------------------------------------------------------------ |\n| primary-icon | Only when `type=\"application\"` | Custom main icon (the built-in advice icon is used otherwise). |\n| title | Always | Title or heading of the advice message. |\n| description | Always | Detailed advice or message text. |\n| time | If `hasTimestamp` is true | Timestamp label (e.g., \"09:12:46\"). |\n| day | If `hasTimestamp` and `hasDay` | Day label (e.g., \"Yesterday\"). |\n| action | If `action` is true | Primary action button label/content. |\n| action2 | If `action2` is true | Secondary action button label/content. |\n\n## Events\n- `action-click` – Fired when the primary action button is clicked.\n- `action2-click` – Fired when the secondary action button is clicked.\n- `dismiss-click` – Fired when the advice message is dismissed (e.g., close icon or auto-hide).\n\n## Best Practices\n- Use concise, actionable advice text to maximize clarity.\n- Limit to one or two actions to avoid overwhelming the user.\n- For longer advice, use the `multiLine` line type to improve readability.\n- Only use the secondary action for supplementary or \"undo\" actions.\n- Ensure advice messages do not overlap or stack excessively; only one should be visible at a time if possible.\n\n## Example:\n```html\n<obc-advice-floating-item type=\"application\" direction=\"vertical\" hasTimestamp action>\n <div slot=\"primary-icon\"><obi-placeholder></obi-placeholder></div>\n <span slot=\"title\">Advice title</span>\n <span slot=\"description\">An advice message with meaningful content for the user.</span>\n <span slot=\"time\">09:12:46</span>\n <span slot=\"action\">Close</span>\n</obc-advice-floating-item>\n```",
|
|
40069
40185
|
"name": "ObcAdviceFloatingItem",
|
|
40070
40186
|
"slots": [
|
|
40071
40187
|
{
|
|
40072
|
-
"description": "
|
|
40188
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in advice icon is used otherwise).",
|
|
40073
40189
|
"name": "primary-icon"
|
|
40074
40190
|
},
|
|
40075
|
-
{
|
|
40076
|
-
"description": "Additional icon for application-type advice messages.",
|
|
40077
|
-
"name": "secondary-icon"
|
|
40078
|
-
},
|
|
40079
40191
|
{
|
|
40080
40192
|
"description": "Title or heading of the advice message.",
|
|
40081
40193
|
"name": "title"
|
|
@@ -40492,44 +40604,12 @@
|
|
|
40492
40604
|
"declarations": [
|
|
40493
40605
|
{
|
|
40494
40606
|
"kind": "class",
|
|
40495
|
-
"description": "`<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n\nThis component presents a brief advice or recommendation message, optionally with a title, description, timestamp(s), and action(s). It is designed for use in notification panels, topbars, or summary lists where users need to quickly review and act on advice items. The component supports several display variants, including simple messages, messages with action buttons, and inactive/empty states.\n\n---\n\n### Features\n- **Display Types:**\n - `simple`: Standard advice message with optional title, description, and timestamp.\n - `with-button`: Includes a text action button (label set via `actionLabel`).\n - `with-icon-button`: Shows an icon button for quick actions (e.g., dismiss or close).\n - `inactive`: Indicates an empty or inactive state, typically used when there are no active advice messages.\n- **Size Variants:**\n - `regular`: Default compact layout.\n - `tall`: Provides a larger, more spacious layout for increased content or emphasis.\n- **Content Options:**\n - Title and description can be shown or hidden independently.\n - Supports one or two timestamps (primary and secondary) for time or duration display.\n - Optional secondary icon overlay for additional status or categorization.\n - Customizable empty state text for when no advice is present.\n- **Actions:**\n - Text action button (with customizable label) or icon button, depending on type.\n - Clickable message area for additional interactions.\n- **Accessibility & Responsiveness:**\n - Truncates long titles/descriptions with ellipsis for readability.\n - Layout adapts to size variant and content presence.\n\n---\n\n### Usage Guidelines\nUse `<obc-advice-message-item>` to present actionable advice, recommendations, or notifications that require user attention or review. Ideal for notification panels, summary lists, or topbars where users may need to quickly scan and act on advice items. Choose the `with-button` or `with-icon-button` types when an immediate action (such as \"View\", \"Acknowledge\", or \"Dismiss\") is needed. Use the `inactive` type (or set `empty` to true) to indicate that there are currently no active advice messages.\n\n- For persistent or critical alerts, consider using a dedicated alert/banner component.\n- For simple, informational messages without actions, use the `simple` type.\n- Use the `tall` size for layouts where more space is available or when emphasizing the advice.\n- The secondary icon slot can be used to indicate priority, category, or additional status.\n\n**TODO(designer):** Confirm if there are recommended icon choices or color conventions for different advice types, and if there are character limits for title/description.\n\n---\n\n### Slots\n| Slot Name | Renders When...
|
|
40607
|
+
"description": "`<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n\nThis component presents a brief advice or recommendation message, optionally with a title, description, timestamp(s), and action(s). It is designed for use in notification panels, topbars, or summary lists where users need to quickly review and act on advice items. The component supports several display variants, including simple messages, messages with action buttons, and inactive/empty states.\n\n---\n\n### Features\n- **Display Types:**\n - `simple`: Standard advice message with optional title, description, and timestamp.\n - `with-button`: Includes a text action button (label set via `actionLabel`).\n - `with-icon-button`: Shows an icon button for quick actions (e.g., dismiss or close).\n - `inactive`: Indicates an empty or inactive state, typically used when there are no active advice messages.\n- **Size Variants:**\n - `regular`: Default compact layout.\n - `tall`: Provides a larger, more spacious layout for increased content or emphasis.\n- **Content Options:**\n - Title and description can be shown or hidden independently.\n - Supports one or two timestamps (primary and secondary) for time or duration display.\n - Optional secondary icon overlay for additional status or categorization.\n - Customizable empty state text for when no advice is present.\n- **Actions:**\n - Text action button (with customizable label) or icon button, depending on type.\n - Clickable message area for additional interactions.\n- **Accessibility & Responsiveness:**\n - Truncates long titles/descriptions with ellipsis for readability.\n - Layout adapts to size variant and content presence.\n\n---\n\n### Usage Guidelines\nUse `<obc-advice-message-item>` to present actionable advice, recommendations, or notifications that require user attention or review. Ideal for notification panels, summary lists, or topbars where users may need to quickly scan and act on advice items. Choose the `with-button` or `with-icon-button` types when an immediate action (such as \"View\", \"Acknowledge\", or \"Dismiss\") is needed. Use the `inactive` type (or set `empty` to true) to indicate that there are currently no active advice messages.\n\n- For persistent or critical alerts, consider using a dedicated alert/banner component.\n- For simple, informational messages without actions, use the `simple` type.\n- Use the `tall` size for layouts where more space is available or when emphasizing the advice.\n- The secondary icon slot can be used to indicate priority, category, or additional status.\n\n**TODO(designer):** Confirm if there are recommended icon choices or color conventions for different advice types, and if there are character limits for title/description.\n\n---\n\n### Slots\n| Slot Name | Renders When... | Purpose |\n|-------------------|----------------------------|----------------------------------------------------------|\n| `secondary-icon` | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |\n\nAll other content (title, description, timestamps, action label/icon, empty-state\ntext) is driven by properties and rendered internally; it is not exposed as slots.\n\n---\n\n### Events\n- `message-click` – Fired when the main message area is clicked.\n- `action-click` – Fired when the action button (text or icon) is clicked.\n\n---\n\n### Best Practices & Constraints\n- Only one action (text or icon) is shown at a time, depending on the `type`.\n- Use concise titles and descriptions for optimal readability; long content will be truncated.\n- The `large` and `empty` properties are deprecated; use `size=\"tall\"` and `type=\"inactive\"` instead.\n- For accessibility, ensure action labels are descriptive and icons have appropriate meaning.\n\n---\n\n**Example:**\n```html\n<obc-advice-message-item\n title=\"System Recommendation\"\n description=\"Your system performance can be improved\"\n time=\"10:30:15\"\n type=\"with-button\"\n actionLabel=\"View\"\n>\n</obc-advice-message-item>\n```\n\nIn this example, the advice message displays a title, description, timestamp, and a \"View\" action button.",
|
|
40496
40608
|
"name": "ObcAdviceMessageItem",
|
|
40497
40609
|
"slots": [
|
|
40498
|
-
{
|
|
40499
|
-
"description": "Main icon representing the advice (always present)",
|
|
40500
|
-
"name": "primary-icon"
|
|
40501
|
-
},
|
|
40502
40610
|
{
|
|
40503
40611
|
"description": "Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)",
|
|
40504
40612
|
"name": "secondary-icon"
|
|
40505
|
-
},
|
|
40506
|
-
{
|
|
40507
|
-
"description": "Title or heading of the advice (shown when `hasTitle` is true)",
|
|
40508
|
-
"name": "title"
|
|
40509
|
-
},
|
|
40510
|
-
{
|
|
40511
|
-
"description": "Detailed message text (shown when `hasDescription` is true)",
|
|
40512
|
-
"name": "description"
|
|
40513
|
-
},
|
|
40514
|
-
{
|
|
40515
|
-
"description": "Primary timestamp (shown when `hasTimestamp` is true)",
|
|
40516
|
-
"name": "time"
|
|
40517
|
-
},
|
|
40518
|
-
{
|
|
40519
|
-
"description": "Secondary timestamp (shown when `hasTimestamp2` is true)",
|
|
40520
|
-
"name": "time-secondary"
|
|
40521
|
-
},
|
|
40522
|
-
{
|
|
40523
|
-
"description": "Label for the action button (when `type=\"with-button\"`)",
|
|
40524
|
-
"name": "action-text"
|
|
40525
|
-
},
|
|
40526
|
-
{
|
|
40527
|
-
"description": "Icon for the action button (when `type=\"with-icon-button\"`)",
|
|
40528
|
-
"name": "action-icon"
|
|
40529
|
-
},
|
|
40530
|
-
{
|
|
40531
|
-
"description": "Text to display in the empty/inactive state (when `type=\"inactive\"` or `empty` is true)",
|
|
40532
|
-
"name": "empty"
|
|
40533
40613
|
}
|
|
40534
40614
|
],
|
|
40535
40615
|
"members": [
|
|
@@ -41103,8 +41183,38 @@
|
|
|
41103
41183
|
"declarations": [
|
|
41104
41184
|
{
|
|
41105
41185
|
"kind": "class",
|
|
41106
|
-
"description": "",
|
|
41186
|
+
"description": "`<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.",
|
|
41107
41187
|
"name": "ObcAlertFloatingItem",
|
|
41188
|
+
"slots": [
|
|
41189
|
+
{
|
|
41190
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in alert icon is used otherwise).",
|
|
41191
|
+
"name": "primary-icon"
|
|
41192
|
+
},
|
|
41193
|
+
{
|
|
41194
|
+
"description": "Title or heading of the alert message.",
|
|
41195
|
+
"name": "title"
|
|
41196
|
+
},
|
|
41197
|
+
{
|
|
41198
|
+
"description": "Detailed message text.",
|
|
41199
|
+
"name": "description"
|
|
41200
|
+
},
|
|
41201
|
+
{
|
|
41202
|
+
"description": "Timestamp label (e.g., \"09:12:46\").",
|
|
41203
|
+
"name": "time"
|
|
41204
|
+
},
|
|
41205
|
+
{
|
|
41206
|
+
"description": "Day label (e.g., \"Yesterday\").",
|
|
41207
|
+
"name": "day"
|
|
41208
|
+
},
|
|
41209
|
+
{
|
|
41210
|
+
"description": "Primary action button label/content.",
|
|
41211
|
+
"name": "action"
|
|
41212
|
+
},
|
|
41213
|
+
{
|
|
41214
|
+
"description": "Secondary action button label/content.",
|
|
41215
|
+
"name": "action2"
|
|
41216
|
+
}
|
|
41217
|
+
],
|
|
41108
41218
|
"members": [
|
|
41109
41219
|
{
|
|
41110
41220
|
"kind": "field",
|
|
@@ -41163,19 +41273,22 @@
|
|
|
41163
41273
|
"name": "action-click",
|
|
41164
41274
|
"type": {
|
|
41165
41275
|
"text": "CustomEvent"
|
|
41166
|
-
}
|
|
41276
|
+
},
|
|
41277
|
+
"description": "{CustomEvent} When the primary action button is clicked."
|
|
41167
41278
|
},
|
|
41168
41279
|
{
|
|
41169
41280
|
"name": "action2-click",
|
|
41170
41281
|
"type": {
|
|
41171
41282
|
"text": "CustomEvent"
|
|
41172
|
-
}
|
|
41283
|
+
},
|
|
41284
|
+
"description": "{CustomEvent} When the secondary action button is clicked."
|
|
41173
41285
|
},
|
|
41174
41286
|
{
|
|
41175
41287
|
"name": "dismiss-click",
|
|
41176
41288
|
"type": {
|
|
41177
41289
|
"text": "CustomEvent"
|
|
41178
|
-
}
|
|
41290
|
+
},
|
|
41291
|
+
"description": "{CustomEvent} When the alert message is dismissed."
|
|
41179
41292
|
}
|
|
41180
41293
|
],
|
|
41181
41294
|
"attributes": [
|
|
@@ -41925,13 +42038,21 @@
|
|
|
41925
42038
|
"declarations": [
|
|
41926
42039
|
{
|
|
41927
42040
|
"kind": "class",
|
|
41928
|
-
"description": "`<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n\nPresents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n\n### Features\n- **Status Variants:** Supports multiple alert states via the `status` property:\n - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n- **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n- **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n- **Expandable:** Can be toggled open/closed for additional details (via click).\n- **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n- **Animated Intro:** Optional animation when the item appears.\n- **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n\n### Usage Guidelines\nUse `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n\n- Use the `status` property to reflect the current state of the alert.\n- Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n- Use the `icon` slot for a source/system icon if needed.\n- Only show the \"ACK\" action for alerts that require acknowledgment.\n- Provide `secondaryActionLabel` to add a second action alongside ACK.\n- Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n- Use the `shelved` property to indicate alerts that are temporarily deferred.\n\n### Slots\n| Slot Name | Renders When... | Purpose |\n|---------------|-------------------------------|------------------------------------------------------|\n| alert-icon | Always | Main alert icon representing the alert type. |\n| icon | If `hasIcon` is true | Secondary icon (e.g., system/source of alert). |\n\n### Events\n- **ack-click** – Fired when the ACK action button is clicked.\n- **ack-secondary-click** – Fired when the secondary action button is clicked.\n- **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n\n### Best Practices\n- Only display the ACK action for alerts that require acknowledgment.\n- Use concise titles and descriptions for quick scanning.\n- For grouped alerts, ensure each item has a unique status and icon as appropriate.\n- Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n- Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n\n**Example:**\n```\n<obc-alert-menu-item\n status=\"unacknowledged\"\n title=\"Engine Temperature High\"\n description=\"Port main engine temperature exceeds normal operating range\"\n time=\"14:30\"\n hasIcon\n>\n <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n <obi-engine slot=\"icon\"></obi-engine>\n</obc-alert-menu-item>\n```",
|
|
42041
|
+
"description": "`<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n\nPresents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n\n### Features\n- **Status Variants:** Supports multiple alert states via the `status` property:\n - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n- **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n- **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n- **Expandable:** Can be toggled open/closed for additional details (via click).\n- **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n- **Animated Intro:** Optional animation when the item appears.\n- **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n\n### Usage Guidelines\nUse `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n\n- Use the `status` property to reflect the current state of the alert.\n- Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n- Use the `icon` slot for a source/system icon if needed.\n- Only show the \"ACK\" action for alerts that require acknowledgment.\n- Provide `secondaryActionLabel` to add a second action alongside ACK.\n- Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n- Use the `shelved` property to indicate alerts that are temporarily deferred.\n\n### Slots\n| Slot Name | Renders When... | Purpose |\n|---------------|-------------------------------|------------------------------------------------------|\n| alert-icon | Always | Main alert icon representing the alert type. |\n| title | Always | Title content; falls back to the `title` property. |\n| description | Always | Description content; falls back to the `description` property. |\n| icon | If `hasIcon` is true | Secondary icon (e.g., system/source of alert). |\n\n### Events\n- **ack-click** – Fired when the ACK action button is clicked.\n- **ack-secondary-click** – Fired when the secondary action button is clicked.\n- **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n\n### Best Practices\n- Only display the ACK action for alerts that require acknowledgment.\n- Use concise titles and descriptions for quick scanning.\n- For grouped alerts, ensure each item has a unique status and icon as appropriate.\n- Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n- Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n\n**Example:**\n```\n<obc-alert-menu-item\n status=\"unacknowledged\"\n title=\"Engine Temperature High\"\n description=\"Port main engine temperature exceeds normal operating range\"\n time=\"14:30\"\n hasIcon\n>\n <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n <obi-engine slot=\"icon\"></obi-engine>\n</obc-alert-menu-item>\n```",
|
|
41929
42042
|
"name": "ObcAlertMenuItem",
|
|
41930
42043
|
"slots": [
|
|
41931
42044
|
{
|
|
41932
42045
|
"description": "The main alert icon representing the alert type.",
|
|
41933
42046
|
"name": "alert-icon"
|
|
41934
42047
|
},
|
|
42048
|
+
{
|
|
42049
|
+
"description": "Title content; falls back to the `title` property when empty.",
|
|
42050
|
+
"name": "title"
|
|
42051
|
+
},
|
|
42052
|
+
{
|
|
42053
|
+
"description": "Description content; falls back to the `description` property when empty.",
|
|
42054
|
+
"name": "description"
|
|
42055
|
+
},
|
|
41935
42056
|
{
|
|
41936
42057
|
"description": "Optional secondary icon (e.g., source/system).",
|
|
41937
42058
|
"name": "icon"
|
|
@@ -42277,7 +42398,7 @@
|
|
|
42277
42398
|
"declarations": [
|
|
42278
42399
|
{
|
|
42279
42400
|
"kind": "class",
|
|
42280
|
-
"description": "`<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n\nProvides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n\n### Features\n- **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n- **Alert filtering:** Each tab displays only relevant alerts (e.g., \"Unacked\" shows only unacknowledged, non-shelved items).\n- **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n- **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n- **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n- **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n- **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n\n### Usage Guidelines\nUse `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n\n- Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n- Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n- Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n- Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n\n**TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|----------------------------------|----------------------------------|----------------------------------------------------------------|\n| (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n| empty
|
|
42401
|
+
"description": "`<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n\nProvides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n\n### Features\n- **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n- **Alert filtering:** Each tab displays only relevant alerts (e.g., \"Unacked\" shows only unacknowledged, non-shelved items).\n- **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n- **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n- **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n- **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n- **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n\n### Usage Guidelines\nUse `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n\n- Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n- Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n- Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n- Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n\n**TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|----------------------------------|----------------------------------|----------------------------------------------------------------|\n| (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n| empty-<tab>-title | Selected tab is empty | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n| empty-<tab>-description | Selected tab is empty | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n| empty-<tab>-icon | Selected tab is empty | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n\n### Properties\n- `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n- `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n- `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n- `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n\n### Events\n- **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n- **silence-click** – Fired when the \"Silence\" button is clicked.\n- **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n\n### Best Practices and Constraints\n- Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n- Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n- For accessibility, ensure that all alert items and action buttons are keyboard navigable.\n- Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n\n### Example\n```\n<obc-alert-menu hasShelved canAckAll>\n <obc-alert-menu-item active hasTime>\n <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n <span slot=\"title\">Engine Overheat</span>\n <span slot=\"description\">Main engine temperature exceeds threshold</span>\n <span slot=\"time\">09:12:34</span>\n </obc-alert-menu-item>\n <!-- More alert items... -->\n</obc-alert-menu>\n```",
|
|
42281
42402
|
"name": "ObcAlertMenu",
|
|
42282
42403
|
"slots": [
|
|
42283
42404
|
{
|
|
@@ -42285,40 +42406,16 @@
|
|
|
42285
42406
|
"name": ""
|
|
42286
42407
|
},
|
|
42287
42408
|
{
|
|
42288
|
-
"description": "Custom title for
|
|
42289
|
-
"name": "empty
|
|
42290
|
-
},
|
|
42291
|
-
{
|
|
42292
|
-
"description": "Custom description for empty unacknowledged alerts (Unacked tab)",
|
|
42293
|
-
"name": "empty-unacked-description"
|
|
42294
|
-
},
|
|
42295
|
-
{
|
|
42296
|
-
"description": "Custom icon for empty unacknowledged alerts (Unacked tab)",
|
|
42297
|
-
"name": "empty-unacked-icon"
|
|
42298
|
-
},
|
|
42299
|
-
{
|
|
42300
|
-
"description": "Custom title for empty active alerts (Active tab)",
|
|
42301
|
-
"name": "empty-all-title"
|
|
42302
|
-
},
|
|
42303
|
-
{
|
|
42304
|
-
"description": "Custom description for empty active alerts (Active tab)",
|
|
42305
|
-
"name": "empty-all-description"
|
|
42306
|
-
},
|
|
42307
|
-
{
|
|
42308
|
-
"description": "Custom icon for empty active alerts (Active tab)",
|
|
42309
|
-
"name": "empty-all-icon"
|
|
42310
|
-
},
|
|
42311
|
-
{
|
|
42312
|
-
"description": "Custom title for empty shelved alerts (Shelved tab)",
|
|
42313
|
-
"name": "empty-shelved-title"
|
|
42409
|
+
"description": "Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42410
|
+
"name": "empty-<tab>-title"
|
|
42314
42411
|
},
|
|
42315
42412
|
{
|
|
42316
|
-
"description": "Custom description for
|
|
42317
|
-
"name": "empty
|
|
42413
|
+
"description": "Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42414
|
+
"name": "empty-<tab>-description"
|
|
42318
42415
|
},
|
|
42319
42416
|
{
|
|
42320
|
-
"description": "Custom icon for
|
|
42321
|
-
"name": "empty
|
|
42417
|
+
"description": "Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42418
|
+
"name": "empty-<tab>-icon"
|
|
42322
42419
|
}
|
|
42323
42420
|
],
|
|
42324
42421
|
"members": [
|
|
@@ -42422,10 +42519,6 @@
|
|
|
42422
42519
|
"text": "CustomEvent"
|
|
42423
42520
|
},
|
|
42424
42521
|
"description": "{CustomEvent} - Fired when the go to alert list button is clicked"
|
|
42425
|
-
},
|
|
42426
|
-
{
|
|
42427
|
-
"description": "{CustomEvent} - Fired when the alert list button is clicked",
|
|
42428
|
-
"name": "alert-list-click"
|
|
42429
42522
|
}
|
|
42430
42523
|
],
|
|
42431
42524
|
"attributes": [
|
|
@@ -45286,8 +45379,14 @@
|
|
|
45286
45379
|
"declarations": [
|
|
45287
45380
|
{
|
|
45288
45381
|
"kind": "class",
|
|
45289
|
-
"description": "",
|
|
45382
|
+
"description": "`<obc-chat-message>` – A single chat message bubble with optional name and date header.",
|
|
45290
45383
|
"name": "ObcChatMessage",
|
|
45384
|
+
"slots": [
|
|
45385
|
+
{
|
|
45386
|
+
"description": "The message content (body of the chat bubble).",
|
|
45387
|
+
"name": ""
|
|
45388
|
+
}
|
|
45389
|
+
],
|
|
45291
45390
|
"members": [
|
|
45292
45391
|
{
|
|
45293
45392
|
"kind": "field",
|
|
@@ -48128,18 +48227,8 @@
|
|
|
48128
48227
|
"declarations": [
|
|
48129
48228
|
{
|
|
48130
48229
|
"kind": "class",
|
|
48131
|
-
"description": "`<obc-elevated-card-radio>` – A single radio button presented within an elevated card container for visually distinct selection in a group.\n\nThis component combines a radio input with an elevated card layout, making each option in a set more prominent and easier to scan. It is ideal for scenarios where radio choices need to be visually separated or require additional emphasis compared to standard radio groups.\n\n---\n\n### Features\n- **Elevated Card Presentation:** Each radio option is wrapped in an elevated card, improving clarity and touch target size.\n- **Integrated Radio Button:** Uses an underlying `<obc-radio>` for native group behavior and accessibility.\n- **Customizable Appearance:** Supports `position` (layout), `size`, `graphicBorder`, and `border` for visual adjustments.\n- **Label Support:** Displays a label next to the radio for clear identification.\n- **Disabled and Required States:** Can be disabled or marked as required for form validation.\n- **Light DOM Rendering:** Renders in the light DOM to allow native radio grouping via the `name` property.\n\n---\n\n### Usage Guidelines\nUse `obc-elevated-card-radio` when you want to present a set of mutually exclusive options with greater visual separation than standard radio buttons. This is especially useful in forms or settings panels where choices should stand out or be easily tappable.\n\n- Group multiple `obc-elevated-card-radio` components with the same `name` property to create a radio group.\n- Prefer this component over plain radios when you need a more prominent or card-like selection UI.\n- For simple, inline choices, use a standard `<obc-radio>` instead.\n- **TODO(designer):** Confirm if there are recommended use cases or design constraints for when to use the card radio versus other selection controls.\n\n---\n\n### Slots\
|
|
48230
|
+
"description": "`<obc-elevated-card-radio>` – A single radio button presented within an elevated card container for visually distinct selection in a group.\n\nThis component combines a radio input with an elevated card layout, making each option in a set more prominent and easier to scan. It is ideal for scenarios where radio choices need to be visually separated or require additional emphasis compared to standard radio groups.\n\n---\n\n### Features\n- **Elevated Card Presentation:** Each radio option is wrapped in an elevated card, improving clarity and touch target size.\n- **Integrated Radio Button:** Uses an underlying `<obc-radio>` for native group behavior and accessibility.\n- **Customizable Appearance:** Supports `position` (layout), `size`, `graphicBorder`, and `border` for visual adjustments.\n- **Label Support:** Displays a label next to the radio for clear identification.\n- **Disabled and Required States:** Can be disabled or marked as required for form validation.\n- **Light DOM Rendering:** Renders in the light DOM to allow native radio grouping via the `name` property.\n\n---\n\n### Usage Guidelines\nUse `obc-elevated-card-radio` when you want to present a set of mutually exclusive options with greater visual separation than standard radio buttons. This is especially useful in forms or settings panels where choices should stand out or be easily tappable.\n\n- Group multiple `obc-elevated-card-radio` components with the same `name` property to create a radio group.\n- Prefer this component over plain radios when you need a more prominent or card-like selection UI.\n- For simple, inline choices, use a standard `<obc-radio>` instead.\n- **TODO(designer):** Confirm if there are recommended use cases or design constraints for when to use the card radio versus other selection controls.\n\n---\n\n### Slots\nThis component exposes no slots. The radio input and its label are rendered\ninternally from the `label`, `value`, `checked`, and related properties.\n\n---\n\n### Properties and Attributes\n- `position`: Controls the card's layout position (default: Regular).\n- `size`: Sets the card size (default: SingleLine).\n- `graphicBorder`/`border`: Toggles visual borders on the card.\n- `name`: Groups radios for mutual exclusivity (must match across group).\n- `value`: The value submitted when this radio is selected.\n- `label`: Text label shown next to the radio.\n- `checked`: Whether this radio is selected.\n- `disabled`: Disables the radio and card interaction.\n- `required`: Marks the radio as required for form validation.\n\n---\n\n### Best Practices\n- Ensure all radios in a group share the same `name` for correct selection behavior.\n- Only one radio in a group should be `checked` at a time.\n- Use concise, descriptive labels for each option.\n- For accessibility, labels are linked to their radio via the `for` and `inputId` attributes.\n\n---\n\n### Example:\n```html\n<obc-elevated-card-radio\n name=\"choices\"\n value=\"option1\"\n label=\"Option 1\"\n ?checked=${true}\n></obc-elevated-card-radio>\n<obc-elevated-card-radio\n name=\"choices\"\n value=\"option2\"\n label=\"Option 2\"\n></obc-elevated-card-radio>\n```\nIn this example, two card radios form a group; only one can be selected at a time.",
|
|
48132
48231
|
"name": "ObcElevatedCardRadio",
|
|
48133
|
-
"slots": [
|
|
48134
|
-
{
|
|
48135
|
-
"description": "Contains the radio button input.",
|
|
48136
|
-
"name": "leading-icon"
|
|
48137
|
-
},
|
|
48138
|
-
{
|
|
48139
|
-
"description": "Displays the label text for the radio option.",
|
|
48140
|
-
"name": "label"
|
|
48141
|
-
}
|
|
48142
|
-
],
|
|
48143
48232
|
"members": [
|
|
48144
48233
|
{
|
|
48145
48234
|
"kind": "field",
|
|
@@ -51117,8 +51206,14 @@
|
|
|
51117
51206
|
"declarations": [
|
|
51118
51207
|
{
|
|
51119
51208
|
"kind": "class",
|
|
51120
|
-
"description": "",
|
|
51209
|
+
"description": "`<obc-keyboard-numeric>` – An on-screen numeric keyboard with optional calculation and symbol modes.",
|
|
51121
51210
|
"name": "ObcKeyboardNumeric",
|
|
51211
|
+
"slots": [
|
|
51212
|
+
{
|
|
51213
|
+
"description": "Custom leading icon shown inside the input field (rendered when `hasLeadingIcon` is true).",
|
|
51214
|
+
"name": "leading-icon"
|
|
51215
|
+
}
|
|
51216
|
+
],
|
|
51122
51217
|
"members": [
|
|
51123
51218
|
{
|
|
51124
51219
|
"kind": "field",
|
|
@@ -51371,19 +51466,22 @@
|
|
|
51371
51466
|
"name": "close-click",
|
|
51372
51467
|
"type": {
|
|
51373
51468
|
"text": "CustomEvent"
|
|
51374
|
-
}
|
|
51469
|
+
},
|
|
51470
|
+
"description": "{CustomEvent} Fired when the close button (or Escape) dismisses the keyboard."
|
|
51375
51471
|
},
|
|
51376
51472
|
{
|
|
51377
51473
|
"name": "done-click",
|
|
51378
51474
|
"type": {
|
|
51379
51475
|
"text": "CustomEvent"
|
|
51380
|
-
}
|
|
51476
|
+
},
|
|
51477
|
+
"description": "{CustomEvent<{value: string}>} Fired when the DONE button (or Enter) is pressed."
|
|
51381
51478
|
},
|
|
51382
51479
|
{
|
|
51383
51480
|
"name": "value-change",
|
|
51384
51481
|
"type": {
|
|
51385
51482
|
"text": "CustomEvent"
|
|
51386
|
-
}
|
|
51483
|
+
},
|
|
51484
|
+
"description": "{CustomEvent<{value: string}>} Fired whenever the current value changes."
|
|
51387
51485
|
}
|
|
51388
51486
|
],
|
|
51389
51487
|
"attributes": [
|
|
@@ -53978,17 +54076,13 @@
|
|
|
53978
54076
|
"declarations": [
|
|
53979
54077
|
{
|
|
53980
54078
|
"kind": "class",
|
|
53981
|
-
"description": "`<obc-notification-floating-item>` – A floating notification message component for transient feedback, alerts, or status updates.\n\nDisplays a notification as an overlay above the main UI, typically used to inform users of events, actions, or system statuses without interrupting their workflow. This component is a specialized variant of a floating message (toast/snackbar) with notification-specific styling and iconography.\n\n### Features\n- **Variants (type):**\n - `regular` (default): Standard notification appearance for general messages.\n - `application`: Enhanced notification with an additional secondary icon, suitable for application-level or high-visibility messages.\n- **Layout Direction (direction):**\n - `horizontal` (default): Content and actions are arranged side-by-side.\n - `vertical`: Content and actions are stacked for narrow spaces or longer messages.\n- **Line Type (lineType):**\n - `singleLine` (default): Compact, single-line layout for brief messages.\n - `multiLine`: Supports longer, multi-line descriptions.\n- **Timestamp and Day Labels:**\n - `hasTimestamp`: Displays a time label (e.g., \"09:12:46\") when enabled.\n - `hasDay`: Displays a day label (e.g., \"Yesterday\") when enabled (requires `hasTimestamp`).\n- **Actions:**\n - `action`: Shows a primary action button (e.g., \"Close\").\n - `action2`: Shows a secondary action button (e.g., \"Undo\"). Only available if `action` is enabled.\n- **Icon Slots:**\n - Customizable icons via slots, with a default notification icon provided.\n- **Event Handling:**\n - Emits custom events for action and dismiss interactions.\n\n### Usage Guidelines\nUse `<obc-notification-floating-item>` for brief, transient notifications that inform users about non-critical events, confirmations, or status changes. Ideal for scenarios where feedback should be visible but not persistent, such as after completing an action or receiving a system update. Avoid using for critical or blocking alerts—use a dialog or alert banner for those cases.\n\n- Prefer the `application` type for notifications that require extra emphasis or represent application-wide events.\n- Use the `multiLine` layout for longer messages to maintain readability.\n- Only enable both actions if the secondary action is truly necessary (e.g., \"Undo\" alongside \"Close\").\n- For accessibility and clarity, keep notification messages concise.\n- By default, the notification does not auto-dismiss; manual dismissal or action is required.\n **TODO(designer):** Confirm if auto-dismissal is recommended or supported for this component.\n\n**Related keywords:** notification, toast, snackbar, floating message, alert, status update, transient feedback.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------------|------------------------------|--------------------------------------------------------------|\n| primary-icon |
|
|
54079
|
+
"description": "`<obc-notification-floating-item>` – A floating notification message component for transient feedback, alerts, or status updates.\n\nDisplays a notification as an overlay above the main UI, typically used to inform users of events, actions, or system statuses without interrupting their workflow. This component is a specialized variant of a floating message (toast/snackbar) with notification-specific styling and iconography.\n\n### Features\n- **Variants (type):**\n - `regular` (default): Standard notification appearance for general messages.\n - `application`: Enhanced notification with an additional secondary icon, suitable for application-level or high-visibility messages.\n- **Layout Direction (direction):**\n - `horizontal` (default): Content and actions are arranged side-by-side.\n - `vertical`: Content and actions are stacked for narrow spaces or longer messages.\n- **Line Type (lineType):**\n - `singleLine` (default): Compact, single-line layout for brief messages.\n - `multiLine`: Supports longer, multi-line descriptions.\n- **Timestamp and Day Labels:**\n - `hasTimestamp`: Displays a time label (e.g., \"09:12:46\") when enabled.\n - `hasDay`: Displays a day label (e.g., \"Yesterday\") when enabled (requires `hasTimestamp`).\n- **Actions:**\n - `action`: Shows a primary action button (e.g., \"Close\").\n - `action2`: Shows a secondary action button (e.g., \"Undo\"). Only available if `action` is enabled.\n- **Icon Slots:**\n - Customizable icons via slots, with a default notification icon provided.\n- **Event Handling:**\n - Emits custom events for action and dismiss interactions.\n\n### Usage Guidelines\nUse `<obc-notification-floating-item>` for brief, transient notifications that inform users about non-critical events, confirmations, or status changes. Ideal for scenarios where feedback should be visible but not persistent, such as after completing an action or receiving a system update. Avoid using for critical or blocking alerts—use a dialog or alert banner for those cases.\n\n- Prefer the `application` type for notifications that require extra emphasis or represent application-wide events.\n- Use the `multiLine` layout for longer messages to maintain readability.\n- Only enable both actions if the secondary action is truly necessary (e.g., \"Undo\" alongside \"Close\").\n- For accessibility and clarity, keep notification messages concise.\n- By default, the notification does not auto-dismiss; manual dismissal or action is required.\n **TODO(designer):** Confirm if auto-dismissal is recommended or supported for this component.\n\n**Related keywords:** notification, toast, snackbar, floating message, alert, status update, transient feedback.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------------|------------------------------|--------------------------------------------------------------|\n| primary-icon | type=\"application\" only | Custom main icon (the built-in notification icon is used otherwise). |\n| title | Always | Title or heading of the notification. |\n| description | Always | Detailed message text. |\n| time | hasTimestamp is true | Timestamp label (e.g., \"09:12:46\"). |\n| day | hasTimestamp && hasDay | Day label (e.g., \"Yesterday\"). |\n| action | action is true | Label/content for the primary action button. |\n| action2 | action2 is true | Label/content for the secondary action button. |\n\n### Events\n- `action-click` – Fired when the primary action button is clicked.\n- `action2-click` – Fired when the secondary action button is clicked.\n- `dismiss-click` – Fired when the notification is dismissed (e.g., close icon or programmatically).\n\n### Example\n```html\n<obc-notification-floating-item\n type=\"regular\"\n direction=\"horizontal\"\n hasTimestamp\n action\n>\n <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n <span slot=\"title\">Notification title</span>\n <span slot=\"description\">A notification message with meaningful content for the user.</span>\n <span slot=\"time\">09:12:46</span>\n <span slot=\"action\">Close</span>\n</obc-notification-floating-item>\n```",
|
|
53982
54080
|
"name": "ObcNotificationFloatingItem",
|
|
53983
54081
|
"slots": [
|
|
53984
54082
|
{
|
|
53985
|
-
"description": "
|
|
54083
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in notification icon is used otherwise).",
|
|
53986
54084
|
"name": "primary-icon"
|
|
53987
54085
|
},
|
|
53988
|
-
{
|
|
53989
|
-
"description": "Additional icon for application-type notifications.",
|
|
53990
|
-
"name": "secondary-icon"
|
|
53991
|
-
},
|
|
53992
54086
|
{
|
|
53993
54087
|
"description": "Title or heading of the notification.",
|
|
53994
54088
|
"name": "title"
|
|
@@ -57455,6 +57549,40 @@
|
|
|
57455
57549
|
"kind": "class",
|
|
57456
57550
|
"description": "`<obc-sequence-card>` - Timeline-style card with header, content, and progress indicator.\n\nOverview:\n- Combines a step indicator, header metadata, and optional content/actions.\n- Supports vertical and horizontal layouts with centered or left-side progress.\n- Use for timelines, process steps, and time-stamped events.\n\nFeatures and Variants:\n- Sizes: `regular`, `small`.\n- Progress layouts: `centered`, `left-side`.\n- Optional progress connector (`showConnector=false` to hide).\n- States: `active`, `flat`, `enhanced`.\n- Layouts: vertical, horizontal, or both.\n- Optional leading icon, timestamps, content, and actions.\n- Full width/height layout toggles.\n- Horizontal and vertical (default) layouts are supported.\n\nUsage Guidelines:\n- Keep titles short; use `subtitle` for secondary text.\n- Provide custom content via the default slot when `hasContent` is true.\n- Provide actions via the `actions` slot when `hasActions` is true.\n- Disable connectors for modal-style layouts that should not show continuation.\n\nSlots:\n- `leading-icon`: Icon before the title (shown when `hasLeadingIcon` is true).\n- `title`: Title text (fallbacks to `cardTitle`).\n- `subtitle`: Subtitle/description (fallbacks to `subtitle`).\n- `time-stamp`: Header timestamp (fallbacks to `timeLabel` + `time`).\n- `header-actions`: Optional header actions (e.g., close button).\n- `left-time-stamp`: Left rail timestamp (fallbacks to `leftTime`).\n- `actions`: Actions row content (shown when `hasActions` is true).\n- Default slot: Main content area (shown when `hasContent` is true).\n\nNotes:\n- `fullWidth` and `fullHeight` stretch the card to fill its container.\n- `indicatorTypeOverride`/`indicatorStyleOverride` force the step indicator\n size/style when special layouts are needed.\n\nEvents:\n- None. Consumers define actions in slots and handle events on slotted elements.\n\nBest Practices:\n- Pair `left-side` progress with vertical layout for rail-based timelines.\n- Avoid mixing long text with dense action rows; use content slot instead.\n\nExample:\n```html\n<obc-sequence-card\n size=\"regular\"\n progressType=\"left-side\"\n state=\"active\"\n hasActions\n>\n <span slot=\"title\">Title</span>\n <span slot=\"subtitle\">Subtitle</span>\n <div slot=\"actions\">...</div>\n <!-- default slot: your content -->\n</obc-sequence-card>\n```\n\nKeywords: timeline, step, progress, sequence, card, event, status.",
|
|
57457
57551
|
"name": "ObcSequenceCard",
|
|
57552
|
+
"slots": [
|
|
57553
|
+
{
|
|
57554
|
+
"description": "Icon before the title (shown when `hasLeadingIcon` is true).",
|
|
57555
|
+
"name": "leading-icon"
|
|
57556
|
+
},
|
|
57557
|
+
{
|
|
57558
|
+
"description": "Title text (falls back to `cardTitle`).",
|
|
57559
|
+
"name": "title"
|
|
57560
|
+
},
|
|
57561
|
+
{
|
|
57562
|
+
"description": "Subtitle/description (falls back to `subtitle`).",
|
|
57563
|
+
"name": "subtitle"
|
|
57564
|
+
},
|
|
57565
|
+
{
|
|
57566
|
+
"description": "Header timestamp (falls back to `timeLabel` + `time`).",
|
|
57567
|
+
"name": "time-stamp"
|
|
57568
|
+
},
|
|
57569
|
+
{
|
|
57570
|
+
"description": "Optional header actions (e.g., close button).",
|
|
57571
|
+
"name": "header-actions"
|
|
57572
|
+
},
|
|
57573
|
+
{
|
|
57574
|
+
"description": "Left rail timestamp (falls back to `leftTime`).",
|
|
57575
|
+
"name": "left-time-stamp"
|
|
57576
|
+
},
|
|
57577
|
+
{
|
|
57578
|
+
"description": "Actions row content (shown when `hasActions` is true).",
|
|
57579
|
+
"name": "actions"
|
|
57580
|
+
},
|
|
57581
|
+
{
|
|
57582
|
+
"description": "Main content area (shown when `hasContent` is true).",
|
|
57583
|
+
"name": ""
|
|
57584
|
+
}
|
|
57585
|
+
],
|
|
57458
57586
|
"members": [
|
|
57459
57587
|
{
|
|
57460
57588
|
"kind": "field",
|
|
@@ -58019,6 +58147,24 @@
|
|
|
58019
58147
|
"kind": "class",
|
|
58020
58148
|
"description": "`<obc-sequence-item>` renders the textual part of a sequence flow while\ncomposing `<obc-sequence-step>` for the visual indicator. Consumers can either\nconfigure the built-in step via `step*` props or supply a custom step through\nthe `step` slot.",
|
|
58021
58149
|
"name": "ObcSequenceItem",
|
|
58150
|
+
"slots": [
|
|
58151
|
+
{
|
|
58152
|
+
"description": "Title/subtitle block (falls back to the built-in `title`/`subtitle`/inline description).",
|
|
58153
|
+
"name": "title"
|
|
58154
|
+
},
|
|
58155
|
+
{
|
|
58156
|
+
"description": "Description text (rendered when `hasDescription` is true and not inlined).",
|
|
58157
|
+
"name": "description"
|
|
58158
|
+
},
|
|
58159
|
+
{
|
|
58160
|
+
"description": "Meta row with timestamp/distance stamps (rendered when `hasMeta` is true — i.e. `hasStamp` with a timestamp or distance stamp enabled).",
|
|
58161
|
+
"name": "meta"
|
|
58162
|
+
},
|
|
58163
|
+
{
|
|
58164
|
+
"description": "Custom step indicator (falls back to the built-in `<obc-sequence-step>`).",
|
|
58165
|
+
"name": "step"
|
|
58166
|
+
}
|
|
58167
|
+
],
|
|
58022
58168
|
"members": [
|
|
58023
58169
|
{
|
|
58024
58170
|
"kind": "field",
|
|
@@ -58675,6 +58821,16 @@
|
|
|
58675
58821
|
"kind": "class",
|
|
58676
58822
|
"description": "`<obc-sequence-modal>` - Modal card with step indicator, title, content, and actions.\n\nOverview:\n- Presents a sequence step in a modal-style card with header metadata.\n- Supports regular and two-line title layouts.\n- Use for focused step/task dialogs with optional actions.\n\nFeatures and Variants:\n- Types: `regular`, `two-line`.\n- Optional timestamp and actions area.\n\nUsage Guidelines:\n- Use the `actions` slot for custom buttons.\n- Provide content via the default slot (no built-in placeholders).\n\nSlots:\n- `actions`: Actions row content (shown when `hasActions` is true).\n- Default slot: Main content area.\n\nEvents:\n- `close-click`: Fired when the close icon is clicked.\n\nBest Practices:\n- Keep titles short; use `subtitle` for additional context.\n- Prefer a single row of actions for compact layouts.\n\nExample:\n```html\n<obc-sequence-modal type=\"regular\" hasActions>\n <div slot=\"actions\">...</div>\n <!-- default slot: your content -->\n</obc-sequence-modal>\n```\n\nKeywords: modal, sequence, step, dialog, progress, actions.",
|
|
58677
58823
|
"name": "ObcSequenceModal",
|
|
58824
|
+
"slots": [
|
|
58825
|
+
{
|
|
58826
|
+
"description": "Actions row content (shown when `hasActions` is true).",
|
|
58827
|
+
"name": "actions"
|
|
58828
|
+
},
|
|
58829
|
+
{
|
|
58830
|
+
"description": "Main content area.",
|
|
58831
|
+
"name": ""
|
|
58832
|
+
}
|
|
58833
|
+
],
|
|
58678
58834
|
"members": [
|
|
58679
58835
|
{
|
|
58680
58836
|
"kind": "field",
|
|
@@ -58776,6 +58932,12 @@
|
|
|
58776
58932
|
"privacy": "private"
|
|
58777
58933
|
}
|
|
58778
58934
|
],
|
|
58935
|
+
"events": [
|
|
58936
|
+
{
|
|
58937
|
+
"description": "Fired when the close icon is clicked.",
|
|
58938
|
+
"name": "close-click"
|
|
58939
|
+
}
|
|
58940
|
+
],
|
|
58779
58941
|
"attributes": [
|
|
58780
58942
|
{
|
|
58781
58943
|
"name": "type",
|
|
@@ -59621,17 +59783,9 @@
|
|
|
59621
59783
|
"declarations": [
|
|
59622
59784
|
{
|
|
59623
59785
|
"kind": "class",
|
|
59624
|
-
"description": "`<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.\n\nThis component allows users to select a minimum and maximum value by dragging two thumbs along a horizontal track. It is commonly used for filtering or specifying ranges (such as price, speed, or time intervals) in forms and dashboards. The slider supports both interactive and read-only display modes, as well as visual variants for different UI needs.\n\nAppears with two draggable handles (thumbs) and labels showing the current low and high values.
|
|
59786
|
+
"description": "`<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.\n\nThis component allows users to select a minimum and maximum value by dragging two thumbs along a horizontal track. It is commonly used for filtering or specifying ranges (such as price, speed, or time intervals) in forms and dashboards. The slider supports both interactive and read-only display modes, as well as visual variants for different UI needs.\n\nAppears with two draggable handles (thumbs) and labels showing the current low and high values. The low and high readout labels can be customized via slots.\n\n## Features\n- **Dual-thumb range selection:** Users can adjust both the lower and upper bounds of a numeric interval.\n- **Variants:**\n - **Normal:** Standard slider with compact styling.\n - **Enhanced:** Larger track and thumb for increased prominence or touch accessibility.\n - **NoInput:** Read-only mode; disables all user interaction and presents the current range as static.\n- **Configurable range:** Set minimum (`min`), maximum (`max`), and step size (`step`) for precise control.\n- **Step click adjustment:** Use `stepClick` to define increment/decrement amount for keyboard or button-based changes.\n- **Seeking mode:** Enable `allowSeeking` to let users jump to a value by clicking on the track, with smooth animated transitions controlled by `seekingSpeed`.\n- **Custom labels:** Display formatted value labels with unit (`labelUnit`), decimal precision (`labelDecimals`), and adjustable label width (`labelWidth`).\n- **Hug container option:** Remove spacing between slider and container edges with the `hugcontainer` attribute for seamless layout integration.\n- **Custom readouts:** Replace the low/high value labels with custom content using the `left-readout` and `right-readout` slots.\n\n## Usage Guidelines\nUse `obc-slider-double` when you need users to specify a numeric range, such as filtering results by minimum and maximum values. Ideal for scenarios like:\n- Filtering items by price, speed, or other continuous values.\n- Selecting a time interval or threshold range.\n- Any UI where a bounded numeric interval is required.\n\nFor single-value selection, use a standard slider component instead. In read-only or summary views, use the `no-input` variant to display the selected range without allowing changes.\n\n**TODO(designer):** Confirm if there are recommended minimum thumb separation or constraints for usability, and if there are best practices for using the enhanced variant.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n|---------------|-------------------------------|------------------------------------------------------------------------------------------------------------------|\n| left-readout | `showLeftReadout` is true | Custom content for the left (low) readout label. Falls back to the formatted `low` value. |\n| right-readout | `showRightReadout` is true | Custom content for the right (high) readout label. Falls back to the formatted `high` value. |\n\n## Properties and Attributes\n- `low` (number): The current lower bound of the selected range.\n- `high` (number): The current upper bound of the selected range.\n- `min` (number): The minimum allowed value (default: 0).\n- `max` (number): The maximum allowed value (default: 100).\n- `step` (number): The increment for value changes (default: 1).\n- `stepClick` (number): Step size for keyboard or button-based changes (default: 10).\n- `variant` (`normal` | `enhanced` | `no-input`): Visual and interaction style (default: `normal`).\n- `allowSeeking` (boolean): If true, clicking the track animates the thumb to the clicked position.\n- `seekingSpeed` (number): Animation speed for seeking (default: 1/3, i.e., full range in 3 seconds).\n- `labelUnit` (string): Unit label appended to value labels (e.g., `\"%\"`, `\"kn\"`).\n- `labelDecimals` (number): Number of decimal places for value labels.\n- `labelWidth` (string): CSS width for value labels (e.g., `\"5ch\"`, `\"60px\"`).\n- `showLeftReadout` (boolean, property only): Show the left (low) readout label. Default `true`.\n- `showRightReadout` (boolean, property only): Show the right (high) readout label. Default `true`.\n- `hugcontainer` (attribute): If present, removes spacing between slider and container edges.\n\n## Events\n- `value` – Fired continuously whenever the low or high value changes during user interaction. Event detail contains `{low, high}`.\n- `change` – Fired only after user interaction completes (mouse release). Event detail contains `{low, high}`.\n\n## Best Practices and Constraints\n- Ensure `low` is always less than or equal to `high`; the component enforces this automatically.\n- For accessibility, provide clear labels and units so users understand the meaning of the range.\n- Use the `no-input` variant for summary or review screens where editing is not allowed.\n- When using `allowSeeking`, set an appropriate `seekingSpeed` for smooth but responsive thumb movement.\n- Avoid setting `step` too small for large ranges, as this may make precise selection difficult.\n\n## Example\n\n```html\n<obc-slider-double\n min=\"0\"\n max=\"100\"\n low=\"20\"\n high=\"80\"\n step=\"5\"\n label-unit=\"%\"\n label-decimals=\"0\"\n variant=\"enhanced\"\n allowSeeking\n>\n <span slot=\"left-readout\">Min</span>\n <span slot=\"right-readout\">Max</span>\n</obc-slider-double>\n```\n\nIn this example, the slider allows selection of a percentage range from 0 to 100, with 5% increments, enhanced styling, and seeking enabled.",
|
|
59625
59787
|
"name": "ObcSliderDouble",
|
|
59626
59788
|
"slots": [
|
|
59627
|
-
{
|
|
59628
|
-
"description": "Slot for the left icon",
|
|
59629
|
-
"name": "icon-left"
|
|
59630
|
-
},
|
|
59631
|
-
{
|
|
59632
|
-
"description": "Slot for the right icon",
|
|
59633
|
-
"name": "icon-right"
|
|
59634
|
-
},
|
|
59635
59789
|
{
|
|
59636
59790
|
"description": "Custom content for the left (low) readout label (rendered when `showLeftReadout` is true)",
|
|
59637
59791
|
"name": "left-readout"
|
|
@@ -61546,6 +61700,12 @@
|
|
|
61546
61700
|
"kind": "class",
|
|
61547
61701
|
"description": "",
|
|
61548
61702
|
"name": "ObcStatusIndicator",
|
|
61703
|
+
"slots": [
|
|
61704
|
+
{
|
|
61705
|
+
"description": "Label content shown next to the status indicator.",
|
|
61706
|
+
"name": ""
|
|
61707
|
+
}
|
|
61708
|
+
],
|
|
61549
61709
|
"members": [
|
|
61550
61710
|
{
|
|
61551
61711
|
"kind": "field",
|
|
@@ -62205,6 +62365,12 @@
|
|
|
62205
62365
|
"kind": "class",
|
|
62206
62366
|
"description": "",
|
|
62207
62367
|
"name": "ObcSystemMenu",
|
|
62368
|
+
"slots": [
|
|
62369
|
+
{
|
|
62370
|
+
"description": "Custom battery status text (falls back to the built-in charging/battery label).",
|
|
62371
|
+
"name": "battery-status"
|
|
62372
|
+
}
|
|
62373
|
+
],
|
|
62208
62374
|
"members": [
|
|
62209
62375
|
{
|
|
62210
62376
|
"kind": "field",
|
|
@@ -62716,7 +62882,8 @@
|
|
|
62716
62882
|
"name": "push-to-talk-change",
|
|
62717
62883
|
"type": {
|
|
62718
62884
|
"text": "CustomEvent"
|
|
62719
|
-
}
|
|
62885
|
+
},
|
|
62886
|
+
"description": "When the push-to-talk toggle is changed"
|
|
62720
62887
|
},
|
|
62721
62888
|
{
|
|
62722
62889
|
"name": "battery-saving-mode-change",
|
|
@@ -63820,6 +63987,16 @@
|
|
|
63820
63987
|
"kind": "class",
|
|
63821
63988
|
"description": "",
|
|
63822
63989
|
"name": "ObcTableHeaderItem",
|
|
63990
|
+
"slots": [
|
|
63991
|
+
{
|
|
63992
|
+
"description": "Leading icon (shown when `hasLeadingIcon` is true).",
|
|
63993
|
+
"name": "leading-icon"
|
|
63994
|
+
},
|
|
63995
|
+
{
|
|
63996
|
+
"description": "Header label content (hidden when `type` is `IconOnly`).",
|
|
63997
|
+
"name": ""
|
|
63998
|
+
}
|
|
63999
|
+
],
|
|
63823
64000
|
"members": [
|
|
63824
64001
|
{
|
|
63825
64002
|
"kind": "field",
|
|
@@ -64534,6 +64711,12 @@
|
|
|
64534
64711
|
"kind": "class",
|
|
64535
64712
|
"description": "",
|
|
64536
64713
|
"name": "ObcTag",
|
|
64714
|
+
"slots": [
|
|
64715
|
+
{
|
|
64716
|
+
"description": "Leading icon content (shown when `hasIcon` is true).",
|
|
64717
|
+
"name": ""
|
|
64718
|
+
}
|
|
64719
|
+
],
|
|
64537
64720
|
"members": [
|
|
64538
64721
|
{
|
|
64539
64722
|
"kind": "field",
|
|
@@ -67924,7 +68107,7 @@
|
|
|
67924
68107
|
"declarations": [
|
|
67925
68108
|
{
|
|
67926
68109
|
"kind": "class",
|
|
67927
|
-
"description": "`<obc-toggletip>` – A contextual message component for displaying inline notes, feedback, or alerts anchored to a UI element.\n\nThe toggletip provides brief, focused information or actions related to a specific UI context, often appearing as a floating panel with an arrow pointing to its trigger. It supports a range of visual variants for different semantic meanings, from neutral information to critical alerts.\n\nAppears above the interface to deliver context-sensitive guidance, warnings, or actions without disrupting the main workflow. Commonly used for tooltips with rich content, inline help, or actionable notifications.\n\n## Features\n\n- **Variants for semantic meaning:**\n - `normal` (default): Standard informational note.\n - `raised`: Elevated importance with a dark header for emphasis.\n - `enhanced`: For primary or enhanced information requiring user attention.\n - `eco-feedback`: Positive or environmental feedback.\n - `caution`: Indicates caution or minor issues.\n - `warning`: Highlights warnings or potential problems.\n - `alarm`: Signals critical or urgent conditions.\n- **Customizable layout:**\n - Optional header (title container) and description.\n - Optional content area for custom elements or rich content.\n - Optional action buttons (primary and secondary).\n - Leading and trailing icon slots for visual context.\n - Adjustable width via `customWidth` property.\n- **Icon logic:**\n - Leading icon is shown by default and adapts to the variant (e.g., warning, alarm, eco-feedback).\n - Trailing icon slot for additional context or actions.\n- **Responsive and accessible:**\n - Content adapts to available space.\n - All sections (header, description, content, actions) can be toggled independently.\n- **Events:**\n - `primary-action`: Fired when the primary action button is clicked.\n - `secondary-action`: Fired when the secondary action button is clicked.\n\n## Usage Guidelines\n\nUse `obc-toggletip` to provide contextual information, warnings, or actions related to a specific UI element or state. Ideal for:\n- Explaining the purpose or status of a control.\n- Delivering inline feedback or guidance.\n- Presenting warnings, cautions, or critical alerts in context.\n- Offering quick actions related to the message.\n\nAvoid using for persistent or global alerts—use a banner or dialog for those cases. For simple tooltips with only text, a lightweight tooltip component may be more appropriate.\n\n**TODO(designer):** Confirm if there are recommended maximum lengths for title/description, and if both action buttons should always be shown together or if one is preferred as primary.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n| -------------- | --------------------------- | ----------------------------------------------------- |\n| leading-icon | `hasLeadingIcon` is true | Main icon representing the message type or context. |\n| trailing-icon | `hasTrailingIcon` is true | Additional icon for secondary context or actions. |\n| content | `hasContent` is true | Custom content area for rich or interactive elements. |\n\n## Properties and Configuration\n\n- `variant`: Controls the visual style and semantic meaning (see Features above for all options).\n- `title`: Sets the header text
|
|
68110
|
+
"description": "`<obc-toggletip>` – A contextual message component for displaying inline notes, feedback, or alerts anchored to a UI element.\n\nThe toggletip provides brief, focused information or actions related to a specific UI context, often appearing as a floating panel with an arrow pointing to its trigger. It supports a range of visual variants for different semantic meanings, from neutral information to critical alerts.\n\nAppears above the interface to deliver context-sensitive guidance, warnings, or actions without disrupting the main workflow. Commonly used for tooltips with rich content, inline help, or actionable notifications.\n\n## Features\n\n- **Variants for semantic meaning:**\n - `normal` (default): Standard informational note.\n - `raised`: Elevated importance with a dark header for emphasis.\n - `enhanced`: For primary or enhanced information requiring user attention.\n - `eco-feedback`: Positive or environmental feedback.\n - `caution`: Indicates caution or minor issues.\n - `warning`: Highlights warnings or potential problems.\n - `alarm`: Signals critical or urgent conditions.\n- **Customizable layout:**\n - Optional header (title container) and description.\n - Optional content area for custom elements or rich content.\n - Optional action buttons (primary and secondary).\n - Leading and trailing icon slots for visual context.\n - Adjustable width via `customWidth` property.\n- **Icon logic:**\n - Leading icon is shown by default and adapts to the variant (e.g., warning, alarm, eco-feedback).\n - Trailing icon slot for additional context or actions.\n- **Responsive and accessible:**\n - Content adapts to available space.\n - All sections (header, description, content, actions) can be toggled independently.\n- **Events:**\n - `primary-action`: Fired when the primary action button is clicked.\n - `secondary-action`: Fired when the secondary action button is clicked.\n\n## Usage Guidelines\n\nUse `obc-toggletip` to provide contextual information, warnings, or actions related to a specific UI element or state. Ideal for:\n- Explaining the purpose or status of a control.\n- Delivering inline feedback or guidance.\n- Presenting warnings, cautions, or critical alerts in context.\n- Offering quick actions related to the message.\n\nAvoid using for persistent or global alerts—use a banner or dialog for those cases. For simple tooltips with only text, a lightweight tooltip component may be more appropriate.\n\n**TODO(designer):** Confirm if there are recommended maximum lengths for title/description, and if both action buttons should always be shown together or if one is preferred as primary.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n| -------------- | --------------------------- | ----------------------------------------------------- |\n| leading-icon | `hasLeadingIcon` is true | Main icon representing the message type or context. |\n| trailing-icon | `hasTrailingIcon` is true | Additional icon for secondary context or actions. |\n| content | `hasContent` is true | Custom content area for rich or interactive elements. |\n\n## Properties and Configuration\n\n- `variant`: Controls the visual style and semantic meaning (see Features above for all options).\n- `title`: Sets the header text. The header is shown only when `title` is a non-empty string.\n- `description`: Sets the main message text. Shown whenever `description` is defined.\n- `hasContent`, `hasActions`: Toggle visibility of the custom content area and the action buttons.\n- `hasLeadingIcon`, `hasTrailingIcon`: Toggle visibility of icon slots (only effective when a `title` is set).\n- `primaryButtonLabel`, `secondaryButtonLabel`: Set labels for action buttons (shown if `hasActions` is true).\n- `customWidth`: Sets a custom width for the toggletip (in pixels).\n\n## Events\n\n- `primary-action`: Fired when the primary action button is clicked. Event detail contains `{ label: string }`.\n- `secondary-action`: Fired when the secondary action button is clicked. Event detail contains `{ label: string }`.\n\n## Best Practices and Constraints\n\n- Use the variant that best matches the message's intent (e.g., `alarm` for critical, `eco-feedback` for positive).\n- Keep messages concise and focused on the immediate context.\n- Only show both action buttons if both are necessary; otherwise, prefer a single primary action.\n- The toggletip should point to its related UI element and not obscure important content.\n- For accessibility, ensure the toggletip is reachable via keyboard and screen reader.\n\n## Example\n\n```html\n<obc-toggletip\n variant=\"warning\"\n title=\"Unsaved Changes\"\n description=\"You have unsaved edits. Save before leaving.\"\n hasActions\n primaryButtonLabel=\"Save\"\n secondaryButtonLabel=\"Discard\"",
|
|
67928
68111
|
"name": "ObcToggletip",
|
|
67929
68112
|
"slots": [
|
|
67930
68113
|
{
|
|
@@ -70107,6 +70290,12 @@
|
|
|
70107
70290
|
"kind": "class",
|
|
70108
70291
|
"description": "`<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n\nProvides multiple layouts for authentication and account access states, including\nsign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n\n### Features\n- **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n- **Size Options:** Regular and small sizes for compact layouts.\n- **Recent Users:** Optional \"Recently signed in\" section for quick access.\n- **Navigation Actions:** Signed-in state includes navigation items and actions.\n\n### Variants\n- `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n- `size`: `regular`, `small`\n\n### Usage Guidelines\nUse `obc-user-menu` in authentication or account panels where quick access to\nsign-in, profile, or account actions is needed. The `user-sign-in` type is\nbest for fast re-auth flows; `loading-sign-in` is for pending auth states.\n\n### Properties and Configuration\n- `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n- `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n- `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n Defaults to `true`.\n- `username` (`string`): Current username value for sign-in layouts.\n- `password` (`string`): Current password value for sign-in layouts.\n- `usernameError` (`string`): Error message for the username field.\n- `passwordError` (`string`): Error message for the password field.\n- `userInitials` (`string`): Initials for the primary user profile.\n- `userLabel` (`string`): Label for the primary user profile.\n- `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n \"Recently signed in\" section.\n- `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n signed-in navigation list.\n\n### Events\n- `sign-in-click` – Fired when a sign-in button is clicked.\n- `sign-out-click` – Fired when the sign-out button is clicked.\n- `signed-in-action-click` – Fired when a signed-in action is clicked.\n- `recent-user-click` – Fired when a recent user button is clicked.\n\n### Slots\n- `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n `{id}` is the normalized action id.\n\n### Example\n```html\n<obc-user-menu\n type=\"user-sign-in\"\n size=\"small\"\n hasRecentlySignedIn=\"false\"\n userInitials=\"JD\"\n userLabel=\"John Doe\"\n></obc-user-menu>\n```",
|
|
70109
70292
|
"name": "ObcUserMenu",
|
|
70293
|
+
"slots": [
|
|
70294
|
+
{
|
|
70295
|
+
"description": "Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).",
|
|
70296
|
+
"name": "signed-in-action-icon-<id>"
|
|
70297
|
+
}
|
|
70298
|
+
],
|
|
70110
70299
|
"members": [
|
|
70111
70300
|
{
|
|
70112
70301
|
"kind": "field",
|
|
@@ -70671,6 +70860,12 @@
|
|
|
70671
70860
|
"kind": "class",
|
|
70672
70861
|
"description": "",
|
|
70673
70862
|
"name": "ObcIntegrationAppBar",
|
|
70863
|
+
"slots": [
|
|
70864
|
+
{
|
|
70865
|
+
"description": "Application buttons; slotted elements are normalized to a uniform width",
|
|
70866
|
+
"name": "apps"
|
|
70867
|
+
}
|
|
70868
|
+
],
|
|
70674
70869
|
"members": [
|
|
70675
70870
|
{
|
|
70676
70871
|
"kind": "method",
|
|
@@ -70723,27 +70918,35 @@
|
|
|
70723
70918
|
"name": "ObcIntegrationBarDropdown",
|
|
70724
70919
|
"slots": [
|
|
70725
70920
|
{
|
|
70921
|
+
"description": "Vessel selector content",
|
|
70726
70922
|
"name": "vessel-selector"
|
|
70727
70923
|
},
|
|
70728
70924
|
{
|
|
70925
|
+
"description": "Label for the first status field",
|
|
70729
70926
|
"name": "status-label-1"
|
|
70730
70927
|
},
|
|
70731
70928
|
{
|
|
70929
|
+
"description": "Icon for the first status field",
|
|
70732
70930
|
"name": "status-icon-1"
|
|
70733
70931
|
},
|
|
70734
70932
|
{
|
|
70933
|
+
"description": "Label for the second status field",
|
|
70735
70934
|
"name": "status-label-2"
|
|
70736
70935
|
},
|
|
70737
70936
|
{
|
|
70937
|
+
"description": "Icon for the second status field",
|
|
70738
70938
|
"name": "status-icon-2"
|
|
70739
70939
|
},
|
|
70740
70940
|
{
|
|
70941
|
+
"description": "Label for the third status field",
|
|
70741
70942
|
"name": "status-label-3"
|
|
70742
70943
|
},
|
|
70743
70944
|
{
|
|
70945
|
+
"description": "Icon for the third status field",
|
|
70744
70946
|
"name": "status-icon-3"
|
|
70745
70947
|
},
|
|
70746
70948
|
{
|
|
70949
|
+
"description": "Custom clock content, rendered when `showClock` is true",
|
|
70747
70950
|
"name": "clock"
|
|
70748
70951
|
}
|
|
70749
70952
|
],
|
|
@@ -70893,7 +71096,7 @@
|
|
|
70893
71096
|
"type": {
|
|
70894
71097
|
"text": "CustomEvent"
|
|
70895
71098
|
},
|
|
70896
|
-
"description": "
|
|
71099
|
+
"description": "Fired when the notification button is clicked"
|
|
70897
71100
|
},
|
|
70898
71101
|
{
|
|
70899
71102
|
"name": "system-button-clicked",
|
|
@@ -71078,10 +71281,6 @@
|
|
|
71078
71281
|
{
|
|
71079
71282
|
"description": "Compact vessel integration buttons; slotted integration buttons are forced to hug type",
|
|
71080
71283
|
"name": "hug-buttons"
|
|
71081
|
-
},
|
|
71082
|
-
{
|
|
71083
|
-
"description": "Modal that will appear achored below the fleet/vessel button. Typically an obc-integration-vessel-menu",
|
|
71084
|
-
"name": "vessel-integration-menu"
|
|
71085
71284
|
}
|
|
71086
71285
|
],
|
|
71087
71286
|
"members": [
|
|
@@ -72208,6 +72407,12 @@
|
|
|
72208
72407
|
"kind": "class",
|
|
72209
72408
|
"description": "",
|
|
72210
72409
|
"name": "ObcIntegrationFleetButton",
|
|
72410
|
+
"slots": [
|
|
72411
|
+
{
|
|
72412
|
+
"description": "Icon shown alongside the alert topic",
|
|
72413
|
+
"name": "alert-topic-icon"
|
|
72414
|
+
}
|
|
72415
|
+
],
|
|
72211
72416
|
"members": [
|
|
72212
72417
|
{
|
|
72213
72418
|
"kind": "field",
|
|
@@ -72352,6 +72557,12 @@
|
|
|
72352
72557
|
"kind": "class",
|
|
72353
72558
|
"description": "",
|
|
72354
72559
|
"name": "ObcIntegrationTabs",
|
|
72560
|
+
"slots": [
|
|
72561
|
+
{
|
|
72562
|
+
"description": "Tab label content",
|
|
72563
|
+
"name": ""
|
|
72564
|
+
}
|
|
72565
|
+
],
|
|
72355
72566
|
"members": [
|
|
72356
72567
|
{
|
|
72357
72568
|
"kind": "field",
|
|
@@ -74971,11 +75182,6 @@
|
|
|
74971
75182
|
"readonly": true
|
|
74972
75183
|
}
|
|
74973
75184
|
],
|
|
74974
|
-
"events": [
|
|
74975
|
-
{
|
|
74976
|
-
"name": "None"
|
|
74977
|
-
}
|
|
74978
|
-
],
|
|
74979
75185
|
"attributes": [
|
|
74980
75186
|
{
|
|
74981
75187
|
"name": "heading",
|
|
@@ -95001,11 +95207,6 @@
|
|
|
95001
95207
|
"privacy": "private"
|
|
95002
95208
|
}
|
|
95003
95209
|
],
|
|
95004
|
-
"events": [
|
|
95005
|
-
{
|
|
95006
|
-
"name": "None"
|
|
95007
|
-
}
|
|
95008
|
-
],
|
|
95009
95210
|
"attributes": [
|
|
95010
95211
|
{
|
|
95011
95212
|
"name": "forceAngle",
|