@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.97
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 +19 -9
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +314 -132
- 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/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",
|
|
@@ -35616,6 +35693,24 @@
|
|
|
35616
35693
|
"kind": "class",
|
|
35617
35694
|
"description": "",
|
|
35618
35695
|
"name": "ObcAlertList",
|
|
35696
|
+
"slots": [
|
|
35697
|
+
{
|
|
35698
|
+
"description": "Default slot for the alert list items.",
|
|
35699
|
+
"name": ""
|
|
35700
|
+
},
|
|
35701
|
+
{
|
|
35702
|
+
"description": "Icon shown when the list is empty.",
|
|
35703
|
+
"name": "empty-icon"
|
|
35704
|
+
},
|
|
35705
|
+
{
|
|
35706
|
+
"description": "Title shown when the list is empty.",
|
|
35707
|
+
"name": "empty-title"
|
|
35708
|
+
},
|
|
35709
|
+
{
|
|
35710
|
+
"description": "Description shown when the list is empty.",
|
|
35711
|
+
"name": "empty-description"
|
|
35712
|
+
}
|
|
35713
|
+
],
|
|
35619
35714
|
"members": [
|
|
35620
35715
|
{
|
|
35621
35716
|
"kind": "field",
|
|
@@ -36384,7 +36479,8 @@
|
|
|
36384
36479
|
"name": "scale-dimensions-changed",
|
|
36385
36480
|
"type": {
|
|
36386
36481
|
"text": "CustomEvent"
|
|
36387
|
-
}
|
|
36482
|
+
},
|
|
36483
|
+
"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
36484
|
}
|
|
36389
36485
|
],
|
|
36390
36486
|
"attributes": [
|
|
@@ -37476,7 +37572,8 @@
|
|
|
37476
37572
|
"name": "scale-dimensions-changed",
|
|
37477
37573
|
"type": {
|
|
37478
37574
|
"text": "CustomEvent"
|
|
37479
|
-
}
|
|
37575
|
+
},
|
|
37576
|
+
"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
37577
|
}
|
|
37481
37578
|
],
|
|
37482
37579
|
"attributes": [
|
|
@@ -40065,17 +40162,13 @@
|
|
|
40065
40162
|
"declarations": [
|
|
40066
40163
|
{
|
|
40067
40164
|
"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 |
|
|
40165
|
+
"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
40166
|
"name": "ObcAdviceFloatingItem",
|
|
40070
40167
|
"slots": [
|
|
40071
40168
|
{
|
|
40072
|
-
"description": "
|
|
40169
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in advice icon is used otherwise).",
|
|
40073
40170
|
"name": "primary-icon"
|
|
40074
40171
|
},
|
|
40075
|
-
{
|
|
40076
|
-
"description": "Additional icon for application-type advice messages.",
|
|
40077
|
-
"name": "secondary-icon"
|
|
40078
|
-
},
|
|
40079
40172
|
{
|
|
40080
40173
|
"description": "Title or heading of the advice message.",
|
|
40081
40174
|
"name": "title"
|
|
@@ -40492,44 +40585,12 @@
|
|
|
40492
40585
|
"declarations": [
|
|
40493
40586
|
{
|
|
40494
40587
|
"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...
|
|
40588
|
+
"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
40589
|
"name": "ObcAdviceMessageItem",
|
|
40497
40590
|
"slots": [
|
|
40498
|
-
{
|
|
40499
|
-
"description": "Main icon representing the advice (always present)",
|
|
40500
|
-
"name": "primary-icon"
|
|
40501
|
-
},
|
|
40502
40591
|
{
|
|
40503
40592
|
"description": "Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)",
|
|
40504
40593
|
"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
40594
|
}
|
|
40534
40595
|
],
|
|
40535
40596
|
"members": [
|
|
@@ -41103,8 +41164,38 @@
|
|
|
41103
41164
|
"declarations": [
|
|
41104
41165
|
{
|
|
41105
41166
|
"kind": "class",
|
|
41106
|
-
"description": "",
|
|
41167
|
+
"description": "`<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.",
|
|
41107
41168
|
"name": "ObcAlertFloatingItem",
|
|
41169
|
+
"slots": [
|
|
41170
|
+
{
|
|
41171
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in alert icon is used otherwise).",
|
|
41172
|
+
"name": "primary-icon"
|
|
41173
|
+
},
|
|
41174
|
+
{
|
|
41175
|
+
"description": "Title or heading of the alert message.",
|
|
41176
|
+
"name": "title"
|
|
41177
|
+
},
|
|
41178
|
+
{
|
|
41179
|
+
"description": "Detailed message text.",
|
|
41180
|
+
"name": "description"
|
|
41181
|
+
},
|
|
41182
|
+
{
|
|
41183
|
+
"description": "Timestamp label (e.g., \"09:12:46\").",
|
|
41184
|
+
"name": "time"
|
|
41185
|
+
},
|
|
41186
|
+
{
|
|
41187
|
+
"description": "Day label (e.g., \"Yesterday\").",
|
|
41188
|
+
"name": "day"
|
|
41189
|
+
},
|
|
41190
|
+
{
|
|
41191
|
+
"description": "Primary action button label/content.",
|
|
41192
|
+
"name": "action"
|
|
41193
|
+
},
|
|
41194
|
+
{
|
|
41195
|
+
"description": "Secondary action button label/content.",
|
|
41196
|
+
"name": "action2"
|
|
41197
|
+
}
|
|
41198
|
+
],
|
|
41108
41199
|
"members": [
|
|
41109
41200
|
{
|
|
41110
41201
|
"kind": "field",
|
|
@@ -41163,19 +41254,22 @@
|
|
|
41163
41254
|
"name": "action-click",
|
|
41164
41255
|
"type": {
|
|
41165
41256
|
"text": "CustomEvent"
|
|
41166
|
-
}
|
|
41257
|
+
},
|
|
41258
|
+
"description": "{CustomEvent} When the primary action button is clicked."
|
|
41167
41259
|
},
|
|
41168
41260
|
{
|
|
41169
41261
|
"name": "action2-click",
|
|
41170
41262
|
"type": {
|
|
41171
41263
|
"text": "CustomEvent"
|
|
41172
|
-
}
|
|
41264
|
+
},
|
|
41265
|
+
"description": "{CustomEvent} When the secondary action button is clicked."
|
|
41173
41266
|
},
|
|
41174
41267
|
{
|
|
41175
41268
|
"name": "dismiss-click",
|
|
41176
41269
|
"type": {
|
|
41177
41270
|
"text": "CustomEvent"
|
|
41178
|
-
}
|
|
41271
|
+
},
|
|
41272
|
+
"description": "{CustomEvent} When the alert message is dismissed."
|
|
41179
41273
|
}
|
|
41180
41274
|
],
|
|
41181
41275
|
"attributes": [
|
|
@@ -41925,13 +42019,21 @@
|
|
|
41925
42019
|
"declarations": [
|
|
41926
42020
|
{
|
|
41927
42021
|
"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```",
|
|
42022
|
+
"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
42023
|
"name": "ObcAlertMenuItem",
|
|
41930
42024
|
"slots": [
|
|
41931
42025
|
{
|
|
41932
42026
|
"description": "The main alert icon representing the alert type.",
|
|
41933
42027
|
"name": "alert-icon"
|
|
41934
42028
|
},
|
|
42029
|
+
{
|
|
42030
|
+
"description": "Title content; falls back to the `title` property when empty.",
|
|
42031
|
+
"name": "title"
|
|
42032
|
+
},
|
|
42033
|
+
{
|
|
42034
|
+
"description": "Description content; falls back to the `description` property when empty.",
|
|
42035
|
+
"name": "description"
|
|
42036
|
+
},
|
|
41935
42037
|
{
|
|
41936
42038
|
"description": "Optional secondary icon (e.g., source/system).",
|
|
41937
42039
|
"name": "icon"
|
|
@@ -42277,7 +42379,7 @@
|
|
|
42277
42379
|
"declarations": [
|
|
42278
42380
|
{
|
|
42279
42381
|
"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
|
|
42382
|
+
"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
42383
|
"name": "ObcAlertMenu",
|
|
42282
42384
|
"slots": [
|
|
42283
42385
|
{
|
|
@@ -42285,40 +42387,16 @@
|
|
|
42285
42387
|
"name": ""
|
|
42286
42388
|
},
|
|
42287
42389
|
{
|
|
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"
|
|
42390
|
+
"description": "Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42391
|
+
"name": "empty-<tab>-title"
|
|
42306
42392
|
},
|
|
42307
42393
|
{
|
|
42308
|
-
"description": "Custom
|
|
42309
|
-
"name": "empty
|
|
42394
|
+
"description": "Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42395
|
+
"name": "empty-<tab>-description"
|
|
42310
42396
|
},
|
|
42311
42397
|
{
|
|
42312
|
-
"description": "Custom
|
|
42313
|
-
"name": "empty
|
|
42314
|
-
},
|
|
42315
|
-
{
|
|
42316
|
-
"description": "Custom description for empty shelved alerts (Shelved tab)",
|
|
42317
|
-
"name": "empty-shelved-description"
|
|
42318
|
-
},
|
|
42319
|
-
{
|
|
42320
|
-
"description": "Custom icon for empty shelved alerts (Shelved tab)",
|
|
42321
|
-
"name": "empty-shelved-icon"
|
|
42398
|
+
"description": "Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)",
|
|
42399
|
+
"name": "empty-<tab>-icon"
|
|
42322
42400
|
}
|
|
42323
42401
|
],
|
|
42324
42402
|
"members": [
|
|
@@ -42422,10 +42500,6 @@
|
|
|
42422
42500
|
"text": "CustomEvent"
|
|
42423
42501
|
},
|
|
42424
42502
|
"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
42503
|
}
|
|
42430
42504
|
],
|
|
42431
42505
|
"attributes": [
|
|
@@ -45286,8 +45360,14 @@
|
|
|
45286
45360
|
"declarations": [
|
|
45287
45361
|
{
|
|
45288
45362
|
"kind": "class",
|
|
45289
|
-
"description": "",
|
|
45363
|
+
"description": "`<obc-chat-message>` – A single chat message bubble with optional name and date header.",
|
|
45290
45364
|
"name": "ObcChatMessage",
|
|
45365
|
+
"slots": [
|
|
45366
|
+
{
|
|
45367
|
+
"description": "The message content (body of the chat bubble).",
|
|
45368
|
+
"name": ""
|
|
45369
|
+
}
|
|
45370
|
+
],
|
|
45291
45371
|
"members": [
|
|
45292
45372
|
{
|
|
45293
45373
|
"kind": "field",
|
|
@@ -48128,18 +48208,8 @@
|
|
|
48128
48208
|
"declarations": [
|
|
48129
48209
|
{
|
|
48130
48210
|
"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\
|
|
48211
|
+
"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
48212
|
"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
48213
|
"members": [
|
|
48144
48214
|
{
|
|
48145
48215
|
"kind": "field",
|
|
@@ -51117,8 +51187,14 @@
|
|
|
51117
51187
|
"declarations": [
|
|
51118
51188
|
{
|
|
51119
51189
|
"kind": "class",
|
|
51120
|
-
"description": "",
|
|
51190
|
+
"description": "`<obc-keyboard-numeric>` – An on-screen numeric keyboard with optional calculation and symbol modes.",
|
|
51121
51191
|
"name": "ObcKeyboardNumeric",
|
|
51192
|
+
"slots": [
|
|
51193
|
+
{
|
|
51194
|
+
"description": "Custom leading icon shown inside the input field (rendered when `hasLeadingIcon` is true).",
|
|
51195
|
+
"name": "leading-icon"
|
|
51196
|
+
}
|
|
51197
|
+
],
|
|
51122
51198
|
"members": [
|
|
51123
51199
|
{
|
|
51124
51200
|
"kind": "field",
|
|
@@ -51371,19 +51447,22 @@
|
|
|
51371
51447
|
"name": "close-click",
|
|
51372
51448
|
"type": {
|
|
51373
51449
|
"text": "CustomEvent"
|
|
51374
|
-
}
|
|
51450
|
+
},
|
|
51451
|
+
"description": "{CustomEvent} Fired when the close button (or Escape) dismisses the keyboard."
|
|
51375
51452
|
},
|
|
51376
51453
|
{
|
|
51377
51454
|
"name": "done-click",
|
|
51378
51455
|
"type": {
|
|
51379
51456
|
"text": "CustomEvent"
|
|
51380
|
-
}
|
|
51457
|
+
},
|
|
51458
|
+
"description": "{CustomEvent<{value: string}>} Fired when the DONE button (or Enter) is pressed."
|
|
51381
51459
|
},
|
|
51382
51460
|
{
|
|
51383
51461
|
"name": "value-change",
|
|
51384
51462
|
"type": {
|
|
51385
51463
|
"text": "CustomEvent"
|
|
51386
|
-
}
|
|
51464
|
+
},
|
|
51465
|
+
"description": "{CustomEvent<{value: string}>} Fired whenever the current value changes."
|
|
51387
51466
|
}
|
|
51388
51467
|
],
|
|
51389
51468
|
"attributes": [
|
|
@@ -53978,17 +54057,13 @@
|
|
|
53978
54057
|
"declarations": [
|
|
53979
54058
|
{
|
|
53980
54059
|
"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 |
|
|
54060
|
+
"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
54061
|
"name": "ObcNotificationFloatingItem",
|
|
53983
54062
|
"slots": [
|
|
53984
54063
|
{
|
|
53985
|
-
"description": "
|
|
54064
|
+
"description": "Custom main icon, projected into the child only when `type=\"application\"` (the built-in notification icon is used otherwise).",
|
|
53986
54065
|
"name": "primary-icon"
|
|
53987
54066
|
},
|
|
53988
|
-
{
|
|
53989
|
-
"description": "Additional icon for application-type notifications.",
|
|
53990
|
-
"name": "secondary-icon"
|
|
53991
|
-
},
|
|
53992
54067
|
{
|
|
53993
54068
|
"description": "Title or heading of the notification.",
|
|
53994
54069
|
"name": "title"
|
|
@@ -57455,6 +57530,40 @@
|
|
|
57455
57530
|
"kind": "class",
|
|
57456
57531
|
"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
57532
|
"name": "ObcSequenceCard",
|
|
57533
|
+
"slots": [
|
|
57534
|
+
{
|
|
57535
|
+
"description": "Icon before the title (shown when `hasLeadingIcon` is true).",
|
|
57536
|
+
"name": "leading-icon"
|
|
57537
|
+
},
|
|
57538
|
+
{
|
|
57539
|
+
"description": "Title text (falls back to `cardTitle`).",
|
|
57540
|
+
"name": "title"
|
|
57541
|
+
},
|
|
57542
|
+
{
|
|
57543
|
+
"description": "Subtitle/description (falls back to `subtitle`).",
|
|
57544
|
+
"name": "subtitle"
|
|
57545
|
+
},
|
|
57546
|
+
{
|
|
57547
|
+
"description": "Header timestamp (falls back to `timeLabel` + `time`).",
|
|
57548
|
+
"name": "time-stamp"
|
|
57549
|
+
},
|
|
57550
|
+
{
|
|
57551
|
+
"description": "Optional header actions (e.g., close button).",
|
|
57552
|
+
"name": "header-actions"
|
|
57553
|
+
},
|
|
57554
|
+
{
|
|
57555
|
+
"description": "Left rail timestamp (falls back to `leftTime`).",
|
|
57556
|
+
"name": "left-time-stamp"
|
|
57557
|
+
},
|
|
57558
|
+
{
|
|
57559
|
+
"description": "Actions row content (shown when `hasActions` is true).",
|
|
57560
|
+
"name": "actions"
|
|
57561
|
+
},
|
|
57562
|
+
{
|
|
57563
|
+
"description": "Main content area (shown when `hasContent` is true).",
|
|
57564
|
+
"name": ""
|
|
57565
|
+
}
|
|
57566
|
+
],
|
|
57458
57567
|
"members": [
|
|
57459
57568
|
{
|
|
57460
57569
|
"kind": "field",
|
|
@@ -58019,6 +58128,24 @@
|
|
|
58019
58128
|
"kind": "class",
|
|
58020
58129
|
"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
58130
|
"name": "ObcSequenceItem",
|
|
58131
|
+
"slots": [
|
|
58132
|
+
{
|
|
58133
|
+
"description": "Title/subtitle block (falls back to the built-in `title`/`subtitle`/inline description).",
|
|
58134
|
+
"name": "title"
|
|
58135
|
+
},
|
|
58136
|
+
{
|
|
58137
|
+
"description": "Description text (rendered when `hasDescription` is true and not inlined).",
|
|
58138
|
+
"name": "description"
|
|
58139
|
+
},
|
|
58140
|
+
{
|
|
58141
|
+
"description": "Meta row with timestamp/distance stamps (rendered when `hasMeta` is true — i.e. `hasStamp` with a timestamp or distance stamp enabled).",
|
|
58142
|
+
"name": "meta"
|
|
58143
|
+
},
|
|
58144
|
+
{
|
|
58145
|
+
"description": "Custom step indicator (falls back to the built-in `<obc-sequence-step>`).",
|
|
58146
|
+
"name": "step"
|
|
58147
|
+
}
|
|
58148
|
+
],
|
|
58022
58149
|
"members": [
|
|
58023
58150
|
{
|
|
58024
58151
|
"kind": "field",
|
|
@@ -58675,6 +58802,16 @@
|
|
|
58675
58802
|
"kind": "class",
|
|
58676
58803
|
"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
58804
|
"name": "ObcSequenceModal",
|
|
58805
|
+
"slots": [
|
|
58806
|
+
{
|
|
58807
|
+
"description": "Actions row content (shown when `hasActions` is true).",
|
|
58808
|
+
"name": "actions"
|
|
58809
|
+
},
|
|
58810
|
+
{
|
|
58811
|
+
"description": "Main content area.",
|
|
58812
|
+
"name": ""
|
|
58813
|
+
}
|
|
58814
|
+
],
|
|
58678
58815
|
"members": [
|
|
58679
58816
|
{
|
|
58680
58817
|
"kind": "field",
|
|
@@ -58776,6 +58913,12 @@
|
|
|
58776
58913
|
"privacy": "private"
|
|
58777
58914
|
}
|
|
58778
58915
|
],
|
|
58916
|
+
"events": [
|
|
58917
|
+
{
|
|
58918
|
+
"description": "Fired when the close icon is clicked.",
|
|
58919
|
+
"name": "close-click"
|
|
58920
|
+
}
|
|
58921
|
+
],
|
|
58779
58922
|
"attributes": [
|
|
58780
58923
|
{
|
|
58781
58924
|
"name": "type",
|
|
@@ -59621,17 +59764,9 @@
|
|
|
59621
59764
|
"declarations": [
|
|
59622
59765
|
{
|
|
59623
59766
|
"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.
|
|
59767
|
+
"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
59768
|
"name": "ObcSliderDouble",
|
|
59626
59769
|
"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
59770
|
{
|
|
59636
59771
|
"description": "Custom content for the left (low) readout label (rendered when `showLeftReadout` is true)",
|
|
59637
59772
|
"name": "left-readout"
|
|
@@ -61546,6 +61681,12 @@
|
|
|
61546
61681
|
"kind": "class",
|
|
61547
61682
|
"description": "",
|
|
61548
61683
|
"name": "ObcStatusIndicator",
|
|
61684
|
+
"slots": [
|
|
61685
|
+
{
|
|
61686
|
+
"description": "Label content shown next to the status indicator.",
|
|
61687
|
+
"name": ""
|
|
61688
|
+
}
|
|
61689
|
+
],
|
|
61549
61690
|
"members": [
|
|
61550
61691
|
{
|
|
61551
61692
|
"kind": "field",
|
|
@@ -62205,6 +62346,12 @@
|
|
|
62205
62346
|
"kind": "class",
|
|
62206
62347
|
"description": "",
|
|
62207
62348
|
"name": "ObcSystemMenu",
|
|
62349
|
+
"slots": [
|
|
62350
|
+
{
|
|
62351
|
+
"description": "Custom battery status text (falls back to the built-in charging/battery label).",
|
|
62352
|
+
"name": "battery-status"
|
|
62353
|
+
}
|
|
62354
|
+
],
|
|
62208
62355
|
"members": [
|
|
62209
62356
|
{
|
|
62210
62357
|
"kind": "field",
|
|
@@ -62716,7 +62863,8 @@
|
|
|
62716
62863
|
"name": "push-to-talk-change",
|
|
62717
62864
|
"type": {
|
|
62718
62865
|
"text": "CustomEvent"
|
|
62719
|
-
}
|
|
62866
|
+
},
|
|
62867
|
+
"description": "When the push-to-talk toggle is changed"
|
|
62720
62868
|
},
|
|
62721
62869
|
{
|
|
62722
62870
|
"name": "battery-saving-mode-change",
|
|
@@ -63820,6 +63968,16 @@
|
|
|
63820
63968
|
"kind": "class",
|
|
63821
63969
|
"description": "",
|
|
63822
63970
|
"name": "ObcTableHeaderItem",
|
|
63971
|
+
"slots": [
|
|
63972
|
+
{
|
|
63973
|
+
"description": "Leading icon (shown when `hasLeadingIcon` is true).",
|
|
63974
|
+
"name": "leading-icon"
|
|
63975
|
+
},
|
|
63976
|
+
{
|
|
63977
|
+
"description": "Header label content (hidden when `type` is `IconOnly`).",
|
|
63978
|
+
"name": ""
|
|
63979
|
+
}
|
|
63980
|
+
],
|
|
63823
63981
|
"members": [
|
|
63824
63982
|
{
|
|
63825
63983
|
"kind": "field",
|
|
@@ -64534,6 +64692,12 @@
|
|
|
64534
64692
|
"kind": "class",
|
|
64535
64693
|
"description": "",
|
|
64536
64694
|
"name": "ObcTag",
|
|
64695
|
+
"slots": [
|
|
64696
|
+
{
|
|
64697
|
+
"description": "Leading icon content (shown when `hasIcon` is true).",
|
|
64698
|
+
"name": ""
|
|
64699
|
+
}
|
|
64700
|
+
],
|
|
64537
64701
|
"members": [
|
|
64538
64702
|
{
|
|
64539
64703
|
"kind": "field",
|
|
@@ -67924,7 +68088,7 @@
|
|
|
67924
68088
|
"declarations": [
|
|
67925
68089
|
{
|
|
67926
68090
|
"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
|
|
68091
|
+
"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
68092
|
"name": "ObcToggletip",
|
|
67929
68093
|
"slots": [
|
|
67930
68094
|
{
|
|
@@ -70107,6 +70271,12 @@
|
|
|
70107
70271
|
"kind": "class",
|
|
70108
70272
|
"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
70273
|
"name": "ObcUserMenu",
|
|
70274
|
+
"slots": [
|
|
70275
|
+
{
|
|
70276
|
+
"description": "Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).",
|
|
70277
|
+
"name": "signed-in-action-icon-<id>"
|
|
70278
|
+
}
|
|
70279
|
+
],
|
|
70110
70280
|
"members": [
|
|
70111
70281
|
{
|
|
70112
70282
|
"kind": "field",
|
|
@@ -70671,6 +70841,12 @@
|
|
|
70671
70841
|
"kind": "class",
|
|
70672
70842
|
"description": "",
|
|
70673
70843
|
"name": "ObcIntegrationAppBar",
|
|
70844
|
+
"slots": [
|
|
70845
|
+
{
|
|
70846
|
+
"description": "Application buttons; slotted elements are normalized to a uniform width",
|
|
70847
|
+
"name": "apps"
|
|
70848
|
+
}
|
|
70849
|
+
],
|
|
70674
70850
|
"members": [
|
|
70675
70851
|
{
|
|
70676
70852
|
"kind": "method",
|
|
@@ -70723,27 +70899,35 @@
|
|
|
70723
70899
|
"name": "ObcIntegrationBarDropdown",
|
|
70724
70900
|
"slots": [
|
|
70725
70901
|
{
|
|
70902
|
+
"description": "Vessel selector content",
|
|
70726
70903
|
"name": "vessel-selector"
|
|
70727
70904
|
},
|
|
70728
70905
|
{
|
|
70906
|
+
"description": "Label for the first status field",
|
|
70729
70907
|
"name": "status-label-1"
|
|
70730
70908
|
},
|
|
70731
70909
|
{
|
|
70910
|
+
"description": "Icon for the first status field",
|
|
70732
70911
|
"name": "status-icon-1"
|
|
70733
70912
|
},
|
|
70734
70913
|
{
|
|
70914
|
+
"description": "Label for the second status field",
|
|
70735
70915
|
"name": "status-label-2"
|
|
70736
70916
|
},
|
|
70737
70917
|
{
|
|
70918
|
+
"description": "Icon for the second status field",
|
|
70738
70919
|
"name": "status-icon-2"
|
|
70739
70920
|
},
|
|
70740
70921
|
{
|
|
70922
|
+
"description": "Label for the third status field",
|
|
70741
70923
|
"name": "status-label-3"
|
|
70742
70924
|
},
|
|
70743
70925
|
{
|
|
70926
|
+
"description": "Icon for the third status field",
|
|
70744
70927
|
"name": "status-icon-3"
|
|
70745
70928
|
},
|
|
70746
70929
|
{
|
|
70930
|
+
"description": "Custom clock content, rendered when `showClock` is true",
|
|
70747
70931
|
"name": "clock"
|
|
70748
70932
|
}
|
|
70749
70933
|
],
|
|
@@ -70893,7 +71077,7 @@
|
|
|
70893
71077
|
"type": {
|
|
70894
71078
|
"text": "CustomEvent"
|
|
70895
71079
|
},
|
|
70896
|
-
"description": "
|
|
71080
|
+
"description": "Fired when the notification button is clicked"
|
|
70897
71081
|
},
|
|
70898
71082
|
{
|
|
70899
71083
|
"name": "system-button-clicked",
|
|
@@ -71078,10 +71262,6 @@
|
|
|
71078
71262
|
{
|
|
71079
71263
|
"description": "Compact vessel integration buttons; slotted integration buttons are forced to hug type",
|
|
71080
71264
|
"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
71265
|
}
|
|
71086
71266
|
],
|
|
71087
71267
|
"members": [
|
|
@@ -72208,6 +72388,12 @@
|
|
|
72208
72388
|
"kind": "class",
|
|
72209
72389
|
"description": "",
|
|
72210
72390
|
"name": "ObcIntegrationFleetButton",
|
|
72391
|
+
"slots": [
|
|
72392
|
+
{
|
|
72393
|
+
"description": "Icon shown alongside the alert topic",
|
|
72394
|
+
"name": "alert-topic-icon"
|
|
72395
|
+
}
|
|
72396
|
+
],
|
|
72211
72397
|
"members": [
|
|
72212
72398
|
{
|
|
72213
72399
|
"kind": "field",
|
|
@@ -72352,6 +72538,12 @@
|
|
|
72352
72538
|
"kind": "class",
|
|
72353
72539
|
"description": "",
|
|
72354
72540
|
"name": "ObcIntegrationTabs",
|
|
72541
|
+
"slots": [
|
|
72542
|
+
{
|
|
72543
|
+
"description": "Tab label content",
|
|
72544
|
+
"name": ""
|
|
72545
|
+
}
|
|
72546
|
+
],
|
|
72355
72547
|
"members": [
|
|
72356
72548
|
{
|
|
72357
72549
|
"kind": "field",
|
|
@@ -74971,11 +75163,6 @@
|
|
|
74971
75163
|
"readonly": true
|
|
74972
75164
|
}
|
|
74973
75165
|
],
|
|
74974
|
-
"events": [
|
|
74975
|
-
{
|
|
74976
|
-
"name": "None"
|
|
74977
|
-
}
|
|
74978
|
-
],
|
|
74979
75166
|
"attributes": [
|
|
74980
75167
|
{
|
|
74981
75168
|
"name": "heading",
|
|
@@ -95001,11 +95188,6 @@
|
|
|
95001
95188
|
"privacy": "private"
|
|
95002
95189
|
}
|
|
95003
95190
|
],
|
|
95004
|
-
"events": [
|
|
95005
|
-
{
|
|
95006
|
-
"name": "None"
|
|
95007
|
-
}
|
|
95008
|
-
],
|
|
95009
95191
|
"attributes": [
|
|
95010
95192
|
{
|
|
95011
95193
|
"name": "forceAngle",
|