@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +39 -124
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +343 -142
- package/dist/ar/poi/poi.d.ts +4 -2
- package/dist/ar/poi/poi.d.ts.map +1 -1
- package/dist/ar/poi/poi.js.map +1 -1
- package/dist/ar/poi-layer/poi-layer.d.ts +1 -0
- package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
- package/dist/ar/poi-layer/poi-layer.js.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.d.ts +1 -0
- package/dist/ar/poi-object/poi-object-aton.d.ts.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.js.map +1 -1
- package/dist/automation/automation-badge/automation-badge.d.ts +2 -0
- package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
- package/dist/automation/automation-badge/automation-badge.js.map +1 -1
- package/dist/automation/automation-button/automation-button.d.ts +9 -0
- package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
- package/dist/automation/automation-button/automation-button.js.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts +4 -0
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.js.map +1 -1
- package/dist/automation/automation-tank/automation-tank.css.js +8 -87
- package/dist/automation/automation-tank/automation-tank.css.js.map +1 -1
- package/dist/automation/automation-tank/automation-tank.d.ts +13 -33
- package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
- package/dist/automation/automation-tank/automation-tank.js +12 -28
- package/dist/automation/automation-tank/automation-tank.js.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.d.ts +4 -0
- package/dist/building-blocks/alert-list/alert-list.d.ts.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.js.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts +2 -0
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.js.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts +2 -0
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.js.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.d.ts +2 -4
- package/dist/components/advice-floating-item/advice-floating-item.d.ts.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.js.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.d.ts +6 -19
- package/dist/components/advice-message-item/advice-message-item.d.ts.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.js.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.d.ts +12 -0
- package/dist/components/alert-floating-item/alert-floating-item.d.ts.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.js.map +1 -1
- package/dist/components/alert-menu/alert-menu.d.ts +6 -20
- package/dist/components/alert-menu/alert-menu.d.ts.map +1 -1
- package/dist/components/alert-menu/alert-menu.js.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.d.ts +4 -0
- package/dist/components/alert-menu-item/alert-menu-item.d.ts.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.js.map +1 -1
- package/dist/components/chat-message/chat-message.d.ts +3 -0
- package/dist/components/chat-message/chat-message.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.js.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts +2 -6
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.js.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts +6 -0
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.js.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.d.ts +2 -4
- package/dist/components/notification-floating-item/notification-floating-item.d.ts.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.js.map +1 -1
- package/dist/components/sequence-card/sequence-card.d.ts +9 -0
- package/dist/components/sequence-card/sequence-card.d.ts.map +1 -1
- package/dist/components/sequence-card/sequence-card.js.map +1 -1
- package/dist/components/sequence-item/sequence-item.d.ts +5 -0
- package/dist/components/sequence-item/sequence-item.d.ts.map +1 -1
- package/dist/components/sequence-item/sequence-item.js.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.d.ts +4 -0
- package/dist/components/sequence-modal/sequence-modal.d.ts.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.js.map +1 -1
- package/dist/components/sequence-step/sequence-step.d.ts.map +1 -1
- package/dist/components/sequence-step/sequence-step.js.map +1 -1
- package/dist/components/slider-double/slider-double.d.ts +4 -8
- package/dist/components/slider-double/slider-double.d.ts.map +1 -1
- package/dist/components/slider-double/slider-double.js.map +1 -1
- package/dist/components/status-indicator/status-indicator.d.ts +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts.map +1 -1
- package/dist/components/status-indicator/status-indicator.js.map +1 -1
- package/dist/components/system-menu/system-menu.d.ts +2 -0
- package/dist/components/system-menu/system-menu.d.ts.map +1 -1
- package/dist/components/system-menu/system-menu.js.map +1 -1
- package/dist/components/table-header-item/table-header-item.d.ts +2 -0
- package/dist/components/table-header-item/table-header-item.d.ts.map +1 -1
- package/dist/components/table-header-item/table-header-item.js.map +1 -1
- package/dist/components/tag/tag.d.ts +1 -0
- package/dist/components/tag/tag.d.ts.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/toggletip/toggletip.d.ts +4 -4
- package/dist/components/toggletip/toggletip.js.map +1 -1
- package/dist/components/user-menu/user-menu.d.ts +1 -0
- package/dist/components/user-menu/user-menu.d.ts.map +1 -1
- package/dist/components/user-menu/user-menu.js.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts +1 -0
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts +0 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts +9 -9
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts +1 -0
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts +1 -0
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.js.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts +0 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.js.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.js +17 -7
- package/dist/navigation-instruments/watch/tickmark.js.map +1 -1
- package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/watch.js +2 -2
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts +0 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.js.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.d.ts.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.js.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-vertical.js","sources":["../../../src/building-blocks/bar-vertical/bar-vertical.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport type {PropertyValues} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {CHART_DIMENSIONS} from '../../charthelpers/constants.js';\nimport {\n InstrumentState,\n FrameStyle,\n BorderRadiusPosition,\n Priority,\n} from '../../navigation-instruments/types.js';\nimport type {LinearAdvice} from '../instrument-linear/advice.js';\nimport type {\n ExternalScaleAdvice,\n ExternalScaleConfig,\n} from '../external-scale/external-scale.js';\nimport {\n computeExternalScaleViewBox,\n computeFixedAspectRatioScale,\n computeExternalScaleLayout,\n renderExternalScale,\n toExternalScaleLayoutConfig,\n computeScaleDimensionsForReport,\n computeExternalScaleEffectiveBarThickness,\n readExternalScaleBorderRadiusPx,\n startExternalScaleBorderRadiusObserver,\n ScaleType,\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ExternalScaleOrientation,\n ExternalScaleSide,\n} from '../external-scale/external-scale.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\n\n// Re-export shared enums for convenience\nexport {\n ScaleType,\n FillMode,\n AdvicePosition,\n FrameStyle,\n BorderRadiusPosition,\n InstrumentState,\n Priority,\n BarContainerStyle,\n ExternalScaleSide,\n};\n\n/**\n * Vertical SVG bar + external scale.\n *\n * This is a thin web-component wrapper around the pure SVG building-block renderer in `external-scale.ts`.\n *\n * It sets up the outer `<svg>`/`viewBox` for a vertical scale and delegates rendering/layout to:\n * - `computeExternalScaleLayout(...)`\n * - `renderExternalScale(config)`\n *\n * For renderer documentation see: **Building Blocks/External Scale**.\n *\n * Set `priority` to `Priority.enhanced` to use the blue/enhanced color palette\n * for bar fill and setpoint instead of the default gray/regular palette\n * (default: `Priority.regular`).\n * @beta\n */\n@customElement('obc-bar-vertical')\nexport class ObcBarVertical extends SetpointMixin(LitElement, {\n defaultDeadband: 1,\n}) {\n /** Minimum scale value (manual mode) */\n @property({type: Number}) minValue = 0;\n /** Maximum scale value (manual mode) */\n @property({type: Number}) maxValue = 100;\n\n /** Total height in pixels (including padding bands) */\n @property({type: Number}) height = 320;\n\n /** Padding above the drawing area */\n @property({type: Number}) paddingTop: number =\n CHART_DIMENSIONS.CANVAS_PADDING;\n\n /** Padding below the drawing area */\n @property({type: Number}) paddingBottom: number =\n CHART_DIMENSIONS.CANVAS_PADDING;\n\n /** Which side this scale lives on */\n @property({type: String}) side: ExternalScaleSide = ExternalScaleSide.right;\n\n /**\n * When true, freezes all internal calculations and scales the entire component\n * proportionally (like CSS transform:scale), except label font-size remains constant.\n * When false (default), dimensions react to component properties.\n */\n @property({type: Boolean})\n fixedAspectRatio = false;\n\n /**\n * Reference size for proportional scaling when fixedAspectRatio is true.\n * At this height, the scale renders at native 1:1 (matches Figma design).\n * Above this height, the scale grows proportionally; below, it shrinks.\n * @default 384\n * @availableWhen fixedAspectRatio==true\n */\n @property({type: Number})\n scaleReferenceSize = 384;\n\n @state()\n private _scale = 1;\n\n // ResizeController automatically subscribes/unsubscribes based on component lifecycle\n // @ts-expect-error - Controller is used for side effects, not accessed directly\n private _resizeController = new ResizeController(this, {\n callback: (entries) => {\n if (!this.fixedAspectRatio) return;\n\n const entry = entries[0];\n if (!entry) return;\n\n // Use the centralized function that computes scale based on reference size\n // For vertical scales, compare container height to reference size\n const containerMainAxisSize = entry.contentRect.height;\n\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n\n // console.debug(`[bar-vertical] ResizeController:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // containerHeight: containerMainAxisSize,\n // scaleReferenceSize: this.scaleReferenceSize,\n // computedScale: this._scale,\n // height: this.height,\n // });\n\n // Report scaled dimensions to parent chart\n this.reportDimensions();\n },\n });\n\n // Bands (thickness)\n /** Show scale tickmarks */\n @property({type: Boolean, attribute: false}) hasScale = true;\n @property({type: Boolean, attribute: false}) showLabels = true;\n /** Show bar */\n @property({type: Boolean}) hasBar = false;\n /** Show background behind the scale tickmarks. */\n @property({type: Boolean})\n scaleBackground = false;\n /**\n * Bar container background style.\n * When undefined, defaults based on scaleBackground.\n * Set explicitly to override: 'primary' (lighter) or 'secondary' (gray).\n * @availableWhen hasBar==true\n */\n @property({type: String})\n barContainerStyle?: BarContainerStyle = undefined;\n /** Bar/fill thickness in pixels */\n @property({type: Number}) barThickness = 24;\n /** Tickmark band thickness in pixels. */\n @property({type: Number}) tickThickness = 24;\n /** Label band thickness in pixels. */\n @property({type: Number}) labelThickness = 60;\n\n // Tick configuration\n /**\n * Array of values for main tickmarks. When undefined, no main tickmarks shown.\n * When empty array [], defaults to [minValue, 0, maxValue].\n */\n @property({type: Array, attribute: false}) mainTickmarks?: number[] = [];\n /**\n * Interval for primary (longest) tickmarks with labels (minimum 1).\n * When undefined, no primary tickmarks are shown.\n */\n @property({type: Number}) primaryTickmarkInterval?: number = undefined;\n /**\n * Interval for secondary (medium) tickmarks (minimum 1).\n * When undefined, no secondary tickmarks are shown.\n */\n @property({type: Number}) secondaryTickmarkInterval?: number = undefined;\n /**\n * Interval for tertiary (shortest) tickmarks (minimum 1).\n * When undefined, no tertiary tickmarks are shown.\n */\n @property({type: Number}) tertiaryTickmarkInterval?: number = undefined;\n /** Scale display mode: regular or condensed (shorter ticks) */\n @property({type: String}) scaleType: ScaleType = ScaleType.regular;\n /** Frame style: regular (4px gap for all), flat (main tickmarks touch edge), framed, or instrument */\n @property({type: String}) frameStyle: FrameStyle = FrameStyle.regular;\n /**\n * Border radius position based on component layout\n * @availableWhen hasBar==true\n */\n @property({type: String})\n borderRadiusPosition?: BorderRadiusPosition = undefined;\n\n /**\n * When true, the component is used inside an instrument (e.g., gauge-trend).\n * In this mode, only label font size responds to .obc-component-size-* CSS classes.\n * Border radius and bar thickness use explicit values or defaults, not CSS variables.\n * @default false\n */\n @property({type: Boolean})\n instrumentMode = false;\n\n /**\n * Explicit border radius value in pixels.\n * When instrumentMode=true, this value is used directly (defaults to 8px for regular, 4px for condensed).\n * When instrumentMode=false, this is ignored and border radius is read from CSS variable.\n * @availableWhen instrumentMode==true\n */\n @property({type: Number})\n borderRadius?: number = undefined;\n\n @state()\n private _computedBorderRadius?: number;\n\n private _borderRadiusObserver?: MutationObserver;\n\n // @ts-expect-error - Controller is used for side effects, not accessed directly\n private _borderRadiusResizeController = new ResizeController(this, {\n callback: () => {\n // Skip CSS variable reading in instrument mode\n if (!this.instrumentMode) {\n this._refreshBorderRadiusFromCssVar();\n }\n },\n });\n\n // Values\n /** Color priority: enhanced uses blue instrument colors for bar fill and setpoint */\n @property({type: String}) priority: Priority = Priority.regular;\n /**\n * Fill visualization mode: fill or tint\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String}) fillMode: FillMode = FillMode.fill;\n /**\n * Minimum fill value for tint mode (defaults to 0)\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number}) fillMin?: number = undefined;\n /**\n * Maximum fill value for tint mode (defaults to value)\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number}) fillMax?: number = undefined;\n /** Current value (bar fill level) */\n @property({type: Number}) value?: number = undefined;\n\n /** Instrument state (affects colors and some marker behavior) */\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n\n // Advice\n /**\n * Advice overlay positioning: center (in bar), inner (covers minor ticks), outer (no overlap)\n * @availableWhen hasBar==true\n */\n @property({type: String}) advicePosition: AdvicePosition =\n AdvicePosition.inner;\n /**\n * Advice/alert overlays with state and positioning.\n * When undefined or empty, no advice shown.\n */\n @property({type: Array, attribute: false}) advices?: LinearAdvice[] = [];\n\n /**\n * When true, displays a dot indicator at the current value position.\n * The dot is rendered in the scale band, touching its inner edge (towards the chart).\n * This provides an alternative to bar fill for highlighting the current value.\n * @default false\n */\n @property({type: Boolean}) highlightCurrentValue = false;\n\n override render() {\n // When fixedAspectRatio is true, use scaleReferenceSize for the viewBox length.\n // This makes the SVG render at the \"design reference size\" and then scale\n // proportionally to fit the actual container via preserveAspectRatio=\"xMidYMid meet\".\n // The _scale CSS variable counter-scales text labels to maintain constant visual size.\n const effectiveLength = this.fixedAspectRatio\n ? this.scaleReferenceSize\n : this.height;\n\n // The parent chart component (chart-line-base) calculates and passes the correct\n // viewBox padding values when fixedAspectRatioScaling is enabled. The padding is\n // pre-scaled to: basePadding * scaleReferenceSize / referenceHeight\n // This ensures the visual padding matches the chart's Canvas padding at any aspect ratio.\n\n // console.debug(`[bar-vertical] render:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // height: this.height,\n // scaleReferenceSize: this.scaleReferenceSize,\n // effectiveLength,\n // scale: this._scale,\n // paddingTop: this.paddingTop,\n // paddingBottom: this.paddingBottom,\n // });\n\n const config: ExternalScaleConfig = {\n orientation: ExternalScaleOrientation.vertical,\n side: this.side,\n length: effectiveLength,\n paddingStart: this.paddingTop,\n paddingEnd: this.paddingBottom,\n minValue: this.minValue,\n maxValue: this.maxValue,\n hasScale: this.hasScale,\n labels: this.showLabels,\n hasBar: this.hasBar,\n scaleBackground: this.scaleBackground,\n barContainerStyle: this.barContainerStyle,\n barThickness: this.barThickness,\n tickThickness: this.tickThickness,\n labelThickness: this.labelThickness,\n borderRadius: this._getEffectiveBorderRadius(),\n mainTickmarks: this.mainTickmarks,\n primaryTickmarkInterval: this.primaryTickmarkInterval,\n secondaryTickmarkInterval: this.secondaryTickmarkInterval,\n tertiaryTickmarkInterval: this.tertiaryTickmarkInterval,\n scaleType: this.scaleType,\n frameStyle: this.frameStyle,\n borderRadiusPosition: this.borderRadiusPosition,\n priority: this.priority,\n setpointOverride: this.setpointOverride,\n fillMode: this.fillMode,\n fillMin: this.fillMin,\n fillMax: this.fillMax,\n value: this.value,\n setpoint: this.setpoint,\n newSetpoint: this.newSetpoint,\n atSetpoint: this.atSetpoint,\n autoAtSetpoint: this.autoAtSetpoint,\n autoAtSetpointDeadband: this.autoAtSetpointDeadband,\n setpointAtZeroDeadband: this.setpointAtZeroDeadband,\n animateSetpoint: this.animateSetpoint,\n departingNewSetpoint: this.departingNewSetpoint,\n state: this.state,\n touching: this.touching,\n advicePosition: this.advicePosition,\n advices: this.advices as ExternalScaleAdvice[],\n fixedAspectRatio: this.fixedAspectRatio,\n instrumentMode: this.instrumentMode,\n highlightCurrentValue: this.highlightCurrentValue,\n };\n\n const layout = computeExternalScaleLayout(\n toExternalScaleLayoutConfig(config)\n );\n\n const parts = renderExternalScale(config);\n\n const viewBox = computeExternalScaleViewBox(\n {orientation: config.orientation, length: effectiveLength},\n layout\n );\n const preserveAspectRatio = this.fixedAspectRatio\n ? 'xMidYMid meet'\n : 'none';\n\n return html`\n <svg\n width=${this.fixedAspectRatio ? '100%' : `${viewBox.width}px`}\n height=${this.fixedAspectRatio ? '100%' : `${this.height}px`}\n viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\"\n preserveAspectRatio=\"${preserveAspectRatio}\"\n style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\"\n part=\"svg\"\n >\n ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground}\n ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays}\n ${parts.currentValueDot} ${parts.setpoint}\n </svg>\n `;\n }\n\n override updated(changed: PropertyValues) {\n super.updated(changed);\n\n if (changed.has('scaleType')) {\n this._refreshBorderRadiusFromCssVar();\n }\n\n // Update host styles when fixedAspectRatio changes\n if (changed.has('fixedAspectRatio')) {\n if (this.fixedAspectRatio) {\n this._applyFixedAspectRatioStyles();\n // Force initial scale calculation based on current size\n this._updateScaleFromCurrentSize();\n } else {\n this._removeFixedAspectRatioStyles();\n this._scale = 1;\n }\n }\n\n // Also recalculate scale when scaleReferenceSize changes\n if (changed.has('scaleReferenceSize') && this.fixedAspectRatio) {\n this._updateScaleFromCurrentSize();\n }\n\n // Report dimensions to parent chart when layout-affecting properties change.\n // In fixedAspectRatio mode, resize events also trigger reportDimensions() via ResizeController.\n // In regular mode, we report on every update to keep parent chart in sync.\n // Layout-affecting properties change the computed thickness and must notify the parent\n // even in fixedAspectRatio mode to keep chart padding accurate.\n const layoutChanged =\n changed.has('side') ||\n changed.has('showLabels') ||\n changed.has('hasScale') ||\n changed.has('hasBar') ||\n changed.has('barThickness') ||\n changed.has('tickThickness') ||\n changed.has('labelThickness') ||\n changed.has('scaleType') ||\n changed.has('borderRadiusPosition') ||\n changed.has('borderRadius') ||\n changed.has('advices') ||\n changed.has('advicePosition');\n\n if (!this.fixedAspectRatio || layoutChanged) {\n this.reportDimensions();\n }\n }\n\n /**\n * Report scale dimensions to parent chart component.\n * When fixedAspectRatio=true, reports the actual visual (scaled) thickness\n * so the chart can correctly reserve space for the scale.\n * When fixedAspectRatio=false, reports the base/unscaled thickness.\n */\n private reportDimensions() {\n const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({\n hasBar: this.hasBar,\n barThickness: this.barThickness,\n borderRadius: this._getEffectiveBorderRadius(),\n scaleType: this.scaleType,\n });\n\n // Use scaleReferenceSize for layout calculation when in fixedAspectRatio mode\n // This ensures consistent layout dimensions based on the design reference size\n const effectiveLength = this.fixedAspectRatio\n ? this.scaleReferenceSize\n : this.height;\n\n const baseDimensions = computeScaleDimensionsForReport({\n orientation: ExternalScaleOrientation.vertical,\n side: this.side,\n hasBar: this.hasBar,\n hasScale: this.hasScale,\n labels: this.showLabels,\n barThickness: effectiveBarThickness,\n tickThickness: this.tickThickness,\n labelThickness: this.labelThickness,\n length: effectiveLength,\n scaleType: this.scaleType,\n advicePosition: this.advicePosition,\n hasAdvice: !!this.advices && this.advices.length > 0,\n });\n\n // When fixedAspectRatio=true, the SVG scales proportionally via preserveAspectRatio=\"meet\".\n // The visual thickness = baseThickness × scale, where scale = containerSize / scaleReferenceSize.\n // Report the actual visual thickness so the chart can reserve the correct space.\n const dimensions = this.fixedAspectRatio\n ? {\n ...baseDimensions,\n thickness: Math.round(baseDimensions.thickness * this._scale),\n }\n : baseDimensions;\n\n // console.debug(`[bar-vertical] reportDimensions:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // side: dimensions.side,\n // thickness: dimensions.thickness,\n // scale: this._scale,\n // height: this.height,\n // scaleReferenceSize: this.scaleReferenceSize,\n // effectiveLength,\n // hasBar: this.hasBar,\n // hasScale: this.hasScale,\n // showLabels: this.showLabels,\n // barThickness: this.barThickness,\n // tickThickness: this.tickThickness,\n // labelThickness: this.labelThickness,\n // });\n\n this.dispatchEvent(\n new CustomEvent('scale-dimensions-changed', {\n detail: dimensions,\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected override createRenderRoot() {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Only read from CSS variable and observe changes when not in instrument mode\n if (!this.instrumentMode) {\n this._refreshBorderRadiusFromCssVar();\n this._startBorderRadiusObserver();\n }\n\n // Ensure the element fills its container when in fixedAspectRatio mode\n // Custom elements are display:inline by default, which doesn't work for percentage-based sizing\n if (this.fixedAspectRatio) {\n this._applyFixedAspectRatioStyles();\n }\n }\n\n override disconnectedCallback(): void {\n this._borderRadiusObserver?.disconnect();\n this._borderRadiusObserver = undefined;\n super.disconnectedCallback();\n }\n\n private _startBorderRadiusObserver(): void {\n this._borderRadiusObserver?.disconnect();\n\n this._borderRadiusObserver = startExternalScaleBorderRadiusObserver(\n this,\n () => this._refreshBorderRadiusFromCssVar()\n );\n }\n\n /**\n * Apply CSS styles needed for fixedAspectRatio mode.\n * Custom elements are display:inline by default, which doesn't work with percentage-based sizing.\n * We need display:block and height:100% to fill the slot container.\n */\n private _applyFixedAspectRatioStyles(): void {\n this.style.display = 'block';\n this.style.height = '100%';\n this.style.width = 'auto';\n }\n\n /**\n * Remove fixed aspect ratio styles when switching back to pixel mode.\n */\n private _removeFixedAspectRatioStyles(): void {\n this.style.display = '';\n this.style.height = '';\n this.style.width = '';\n }\n\n /**\n * Calculate scale based on current element size.\n * Called when fixedAspectRatio is enabled or scaleReferenceSize changes.\n */\n private _updateScaleFromCurrentSize(): void {\n // Use requestAnimationFrame to ensure layout is complete\n requestAnimationFrame(() => {\n const containerHeight = this.clientHeight;\n if (containerHeight > 0) {\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize: containerHeight,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n this.requestUpdate();\n // Report updated dimensions to parent (matches pattern in ResizeController and _refreshBorderRadiusFromCssVar)\n this.reportDimensions();\n }\n });\n }\n\n private _refreshBorderRadiusFromCssVar(): void {\n // Skip CSS variable reading in instrument mode\n if (this.instrumentMode) return;\n\n const next = readExternalScaleBorderRadiusPx(this, this.scaleType);\n\n if (this._computedBorderRadius !== next) {\n this._computedBorderRadius = next;\n }\n\n // In fixed-aspect-ratio mode, recompute scale when border radius changes\n // (border radius affects effective bar thickness and therefore viewBox)\n if (this.fixedAspectRatio) {\n const rect = this.getBoundingClientRect();\n if (rect.height > 0) {\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize: rect.height,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n // Report updated dimensions\n this.reportDimensions();\n }\n }\n }\n\n /**\n * Get the effective border radius to use.\n * In instrument mode: use explicit borderRadius prop or default based on scaleType.\n * In normal mode: use CSS variable computed value.\n */\n private _getEffectiveBorderRadius(): number {\n if (this.instrumentMode) {\n // In instrument mode, use explicit value or default\n if (this.borderRadius !== undefined) {\n return this.borderRadius;\n }\n // Default: 8px for regular, 4px for condensed\n return this.scaleType === ScaleType.condensed ? 4 : 8;\n }\n // Normal mode: use CSS variable computed value\n return (\n this._computedBorderRadius ??\n (this.scaleType === ScaleType.condensed ? 4 : 8)\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-bar-vertical': ObcBarVertical;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"bar-vertical.js","sources":["../../../src/building-blocks/bar-vertical/bar-vertical.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport type {PropertyValues} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {CHART_DIMENSIONS} from '../../charthelpers/constants.js';\nimport {\n InstrumentState,\n FrameStyle,\n BorderRadiusPosition,\n Priority,\n} from '../../navigation-instruments/types.js';\nimport type {LinearAdvice} from '../instrument-linear/advice.js';\nimport type {\n ExternalScaleAdvice,\n ExternalScaleConfig,\n} from '../external-scale/external-scale.js';\nimport {\n computeExternalScaleViewBox,\n computeFixedAspectRatioScale,\n computeExternalScaleLayout,\n renderExternalScale,\n toExternalScaleLayoutConfig,\n computeScaleDimensionsForReport,\n computeExternalScaleEffectiveBarThickness,\n readExternalScaleBorderRadiusPx,\n startExternalScaleBorderRadiusObserver,\n ScaleType,\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ExternalScaleOrientation,\n ExternalScaleSide,\n} from '../external-scale/external-scale.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\n\n// Re-export shared enums for convenience\nexport {\n ScaleType,\n FillMode,\n AdvicePosition,\n FrameStyle,\n BorderRadiusPosition,\n InstrumentState,\n Priority,\n BarContainerStyle,\n ExternalScaleSide,\n};\n\n/**\n * Vertical SVG bar + external scale.\n *\n * This is a thin web-component wrapper around the pure SVG building-block renderer in `external-scale.ts`.\n *\n * It sets up the outer `<svg>`/`viewBox` for a vertical scale and delegates rendering/layout to:\n * - `computeExternalScaleLayout(...)`\n * - `renderExternalScale(config)`\n *\n * For renderer documentation see: **Building Blocks/External Scale**.\n *\n * Set `priority` to `Priority.enhanced` to use the blue/enhanced color palette\n * for bar fill and setpoint instead of the default gray/regular palette\n * (default: `Priority.regular`).\n *\n * @fires scale-dimensions-changed {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.\n * @beta\n */\n@customElement('obc-bar-vertical')\nexport class ObcBarVertical extends SetpointMixin(LitElement, {\n defaultDeadband: 1,\n}) {\n /** Minimum scale value (manual mode) */\n @property({type: Number}) minValue = 0;\n /** Maximum scale value (manual mode) */\n @property({type: Number}) maxValue = 100;\n\n /** Total height in pixels (including padding bands) */\n @property({type: Number}) height = 320;\n\n /** Padding above the drawing area */\n @property({type: Number}) paddingTop: number =\n CHART_DIMENSIONS.CANVAS_PADDING;\n\n /** Padding below the drawing area */\n @property({type: Number}) paddingBottom: number =\n CHART_DIMENSIONS.CANVAS_PADDING;\n\n /** Which side this scale lives on */\n @property({type: String}) side: ExternalScaleSide = ExternalScaleSide.right;\n\n /**\n * When true, freezes all internal calculations and scales the entire component\n * proportionally (like CSS transform:scale), except label font-size remains constant.\n * When false (default), dimensions react to component properties.\n */\n @property({type: Boolean})\n fixedAspectRatio = false;\n\n /**\n * Reference size for proportional scaling when fixedAspectRatio is true.\n * At this height, the scale renders at native 1:1 (matches Figma design).\n * Above this height, the scale grows proportionally; below, it shrinks.\n * @default 384\n * @availableWhen fixedAspectRatio==true\n */\n @property({type: Number})\n scaleReferenceSize = 384;\n\n @state()\n private _scale = 1;\n\n // ResizeController automatically subscribes/unsubscribes based on component lifecycle\n // @ts-expect-error - Controller is used for side effects, not accessed directly\n private _resizeController = new ResizeController(this, {\n callback: (entries) => {\n if (!this.fixedAspectRatio) return;\n\n const entry = entries[0];\n if (!entry) return;\n\n // Use the centralized function that computes scale based on reference size\n // For vertical scales, compare container height to reference size\n const containerMainAxisSize = entry.contentRect.height;\n\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n\n // console.debug(`[bar-vertical] ResizeController:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // containerHeight: containerMainAxisSize,\n // scaleReferenceSize: this.scaleReferenceSize,\n // computedScale: this._scale,\n // height: this.height,\n // });\n\n // Report scaled dimensions to parent chart\n this.reportDimensions();\n },\n });\n\n // Bands (thickness)\n /** Show scale tickmarks */\n @property({type: Boolean, attribute: false}) hasScale = true;\n @property({type: Boolean, attribute: false}) showLabels = true;\n /** Show bar */\n @property({type: Boolean}) hasBar = false;\n /** Show background behind the scale tickmarks. */\n @property({type: Boolean})\n scaleBackground = false;\n /**\n * Bar container background style.\n * When undefined, defaults based on scaleBackground.\n * Set explicitly to override: 'primary' (lighter) or 'secondary' (gray).\n * @availableWhen hasBar==true\n */\n @property({type: String})\n barContainerStyle?: BarContainerStyle = undefined;\n /** Bar/fill thickness in pixels */\n @property({type: Number}) barThickness = 24;\n /** Tickmark band thickness in pixels. */\n @property({type: Number}) tickThickness = 24;\n /** Label band thickness in pixels. */\n @property({type: Number}) labelThickness = 60;\n\n // Tick configuration\n /**\n * Array of values for main tickmarks. When undefined, no main tickmarks shown.\n * When empty array [], defaults to [minValue, 0, maxValue].\n */\n @property({type: Array, attribute: false}) mainTickmarks?: number[] = [];\n /**\n * Interval for primary (longest) tickmarks with labels (minimum 1).\n * When undefined, no primary tickmarks are shown.\n */\n @property({type: Number}) primaryTickmarkInterval?: number = undefined;\n /**\n * Interval for secondary (medium) tickmarks (minimum 1).\n * When undefined, no secondary tickmarks are shown.\n */\n @property({type: Number}) secondaryTickmarkInterval?: number = undefined;\n /**\n * Interval for tertiary (shortest) tickmarks (minimum 1).\n * When undefined, no tertiary tickmarks are shown.\n */\n @property({type: Number}) tertiaryTickmarkInterval?: number = undefined;\n /** Scale display mode: regular or condensed (shorter ticks) */\n @property({type: String}) scaleType: ScaleType = ScaleType.regular;\n /** Frame style: regular (4px gap for all), flat (main tickmarks touch edge), framed, or instrument */\n @property({type: String}) frameStyle: FrameStyle = FrameStyle.regular;\n /**\n * Border radius position based on component layout\n * @availableWhen hasBar==true\n */\n @property({type: String})\n borderRadiusPosition?: BorderRadiusPosition = undefined;\n\n /**\n * When true, the component is used inside an instrument (e.g., gauge-trend).\n * In this mode, only label font size responds to .obc-component-size-* CSS classes.\n * Border radius and bar thickness use explicit values or defaults, not CSS variables.\n * @default false\n */\n @property({type: Boolean})\n instrumentMode = false;\n\n /**\n * Explicit border radius value in pixels.\n * When instrumentMode=true, this value is used directly (defaults to 8px for regular, 4px for condensed).\n * When instrumentMode=false, this is ignored and border radius is read from CSS variable.\n * @availableWhen instrumentMode==true\n */\n @property({type: Number})\n borderRadius?: number = undefined;\n\n @state()\n private _computedBorderRadius?: number;\n\n private _borderRadiusObserver?: MutationObserver;\n\n // @ts-expect-error - Controller is used for side effects, not accessed directly\n private _borderRadiusResizeController = new ResizeController(this, {\n callback: () => {\n // Skip CSS variable reading in instrument mode\n if (!this.instrumentMode) {\n this._refreshBorderRadiusFromCssVar();\n }\n },\n });\n\n // Values\n /** Color priority: enhanced uses blue instrument colors for bar fill and setpoint */\n @property({type: String}) priority: Priority = Priority.regular;\n /**\n * Fill visualization mode: fill or tint\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String}) fillMode: FillMode = FillMode.fill;\n /**\n * Minimum fill value for tint mode (defaults to 0)\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number}) fillMin?: number = undefined;\n /**\n * Maximum fill value for tint mode (defaults to value)\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number}) fillMax?: number = undefined;\n /** Current value (bar fill level) */\n @property({type: Number}) value?: number = undefined;\n\n /** Instrument state (affects colors and some marker behavior) */\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n\n // Advice\n /**\n * Advice overlay positioning: center (in bar), inner (covers minor ticks), outer (no overlap)\n * @availableWhen hasBar==true\n */\n @property({type: String}) advicePosition: AdvicePosition =\n AdvicePosition.inner;\n /**\n * Advice/alert overlays with state and positioning.\n * When undefined or empty, no advice shown.\n */\n @property({type: Array, attribute: false}) advices?: LinearAdvice[] = [];\n\n /**\n * When true, displays a dot indicator at the current value position.\n * The dot is rendered in the scale band, touching its inner edge (towards the chart).\n * This provides an alternative to bar fill for highlighting the current value.\n * @default false\n */\n @property({type: Boolean}) highlightCurrentValue = false;\n\n override render() {\n // When fixedAspectRatio is true, use scaleReferenceSize for the viewBox length.\n // This makes the SVG render at the \"design reference size\" and then scale\n // proportionally to fit the actual container via preserveAspectRatio=\"xMidYMid meet\".\n // The _scale CSS variable counter-scales text labels to maintain constant visual size.\n const effectiveLength = this.fixedAspectRatio\n ? this.scaleReferenceSize\n : this.height;\n\n // The parent chart component (chart-line-base) calculates and passes the correct\n // viewBox padding values when fixedAspectRatioScaling is enabled. The padding is\n // pre-scaled to: basePadding * scaleReferenceSize / referenceHeight\n // This ensures the visual padding matches the chart's Canvas padding at any aspect ratio.\n\n // console.debug(`[bar-vertical] render:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // height: this.height,\n // scaleReferenceSize: this.scaleReferenceSize,\n // effectiveLength,\n // scale: this._scale,\n // paddingTop: this.paddingTop,\n // paddingBottom: this.paddingBottom,\n // });\n\n const config: ExternalScaleConfig = {\n orientation: ExternalScaleOrientation.vertical,\n side: this.side,\n length: effectiveLength,\n paddingStart: this.paddingTop,\n paddingEnd: this.paddingBottom,\n minValue: this.minValue,\n maxValue: this.maxValue,\n hasScale: this.hasScale,\n labels: this.showLabels,\n hasBar: this.hasBar,\n scaleBackground: this.scaleBackground,\n barContainerStyle: this.barContainerStyle,\n barThickness: this.barThickness,\n tickThickness: this.tickThickness,\n labelThickness: this.labelThickness,\n borderRadius: this._getEffectiveBorderRadius(),\n mainTickmarks: this.mainTickmarks,\n primaryTickmarkInterval: this.primaryTickmarkInterval,\n secondaryTickmarkInterval: this.secondaryTickmarkInterval,\n tertiaryTickmarkInterval: this.tertiaryTickmarkInterval,\n scaleType: this.scaleType,\n frameStyle: this.frameStyle,\n borderRadiusPosition: this.borderRadiusPosition,\n priority: this.priority,\n setpointOverride: this.setpointOverride,\n fillMode: this.fillMode,\n fillMin: this.fillMin,\n fillMax: this.fillMax,\n value: this.value,\n setpoint: this.setpoint,\n newSetpoint: this.newSetpoint,\n atSetpoint: this.atSetpoint,\n autoAtSetpoint: this.autoAtSetpoint,\n autoAtSetpointDeadband: this.autoAtSetpointDeadband,\n setpointAtZeroDeadband: this.setpointAtZeroDeadband,\n animateSetpoint: this.animateSetpoint,\n departingNewSetpoint: this.departingNewSetpoint,\n state: this.state,\n touching: this.touching,\n advicePosition: this.advicePosition,\n advices: this.advices as ExternalScaleAdvice[],\n fixedAspectRatio: this.fixedAspectRatio,\n instrumentMode: this.instrumentMode,\n highlightCurrentValue: this.highlightCurrentValue,\n };\n\n const layout = computeExternalScaleLayout(\n toExternalScaleLayoutConfig(config)\n );\n\n const parts = renderExternalScale(config);\n\n const viewBox = computeExternalScaleViewBox(\n {orientation: config.orientation, length: effectiveLength},\n layout\n );\n const preserveAspectRatio = this.fixedAspectRatio\n ? 'xMidYMid meet'\n : 'none';\n\n return html`\n <svg\n width=${this.fixedAspectRatio ? '100%' : `${viewBox.width}px`}\n height=${this.fixedAspectRatio ? '100%' : `${this.height}px`}\n viewBox=\"${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}\"\n preserveAspectRatio=\"${preserveAspectRatio}\"\n style=\"--scale: ${this.fixedAspectRatio ? this._scale : 1};\"\n part=\"svg\"\n >\n ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground}\n ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays}\n ${parts.currentValueDot} ${parts.setpoint}\n </svg>\n `;\n }\n\n override updated(changed: PropertyValues) {\n super.updated(changed);\n\n if (changed.has('scaleType')) {\n this._refreshBorderRadiusFromCssVar();\n }\n\n // Update host styles when fixedAspectRatio changes\n if (changed.has('fixedAspectRatio')) {\n if (this.fixedAspectRatio) {\n this._applyFixedAspectRatioStyles();\n // Force initial scale calculation based on current size\n this._updateScaleFromCurrentSize();\n } else {\n this._removeFixedAspectRatioStyles();\n this._scale = 1;\n }\n }\n\n // Also recalculate scale when scaleReferenceSize changes\n if (changed.has('scaleReferenceSize') && this.fixedAspectRatio) {\n this._updateScaleFromCurrentSize();\n }\n\n // Report dimensions to parent chart when layout-affecting properties change.\n // In fixedAspectRatio mode, resize events also trigger reportDimensions() via ResizeController.\n // In regular mode, we report on every update to keep parent chart in sync.\n // Layout-affecting properties change the computed thickness and must notify the parent\n // even in fixedAspectRatio mode to keep chart padding accurate.\n const layoutChanged =\n changed.has('side') ||\n changed.has('showLabels') ||\n changed.has('hasScale') ||\n changed.has('hasBar') ||\n changed.has('barThickness') ||\n changed.has('tickThickness') ||\n changed.has('labelThickness') ||\n changed.has('scaleType') ||\n changed.has('borderRadiusPosition') ||\n changed.has('borderRadius') ||\n changed.has('advices') ||\n changed.has('advicePosition');\n\n if (!this.fixedAspectRatio || layoutChanged) {\n this.reportDimensions();\n }\n }\n\n /**\n * Report scale dimensions to parent chart component.\n * When fixedAspectRatio=true, reports the actual visual (scaled) thickness\n * so the chart can correctly reserve space for the scale.\n * When fixedAspectRatio=false, reports the base/unscaled thickness.\n */\n private reportDimensions() {\n const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({\n hasBar: this.hasBar,\n barThickness: this.barThickness,\n borderRadius: this._getEffectiveBorderRadius(),\n scaleType: this.scaleType,\n });\n\n // Use scaleReferenceSize for layout calculation when in fixedAspectRatio mode\n // This ensures consistent layout dimensions based on the design reference size\n const effectiveLength = this.fixedAspectRatio\n ? this.scaleReferenceSize\n : this.height;\n\n const baseDimensions = computeScaleDimensionsForReport({\n orientation: ExternalScaleOrientation.vertical,\n side: this.side,\n hasBar: this.hasBar,\n hasScale: this.hasScale,\n labels: this.showLabels,\n barThickness: effectiveBarThickness,\n tickThickness: this.tickThickness,\n labelThickness: this.labelThickness,\n length: effectiveLength,\n scaleType: this.scaleType,\n advicePosition: this.advicePosition,\n hasAdvice: !!this.advices && this.advices.length > 0,\n });\n\n // When fixedAspectRatio=true, the SVG scales proportionally via preserveAspectRatio=\"meet\".\n // The visual thickness = baseThickness × scale, where scale = containerSize / scaleReferenceSize.\n // Report the actual visual thickness so the chart can reserve the correct space.\n const dimensions = this.fixedAspectRatio\n ? {\n ...baseDimensions,\n thickness: Math.round(baseDimensions.thickness * this._scale),\n }\n : baseDimensions;\n\n // console.debug(`[bar-vertical] reportDimensions:`, {\n // fixedAspectRatio: this.fixedAspectRatio,\n // side: dimensions.side,\n // thickness: dimensions.thickness,\n // scale: this._scale,\n // height: this.height,\n // scaleReferenceSize: this.scaleReferenceSize,\n // effectiveLength,\n // hasBar: this.hasBar,\n // hasScale: this.hasScale,\n // showLabels: this.showLabels,\n // barThickness: this.barThickness,\n // tickThickness: this.tickThickness,\n // labelThickness: this.labelThickness,\n // });\n\n this.dispatchEvent(\n new CustomEvent('scale-dimensions-changed', {\n detail: dimensions,\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected override createRenderRoot() {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Only read from CSS variable and observe changes when not in instrument mode\n if (!this.instrumentMode) {\n this._refreshBorderRadiusFromCssVar();\n this._startBorderRadiusObserver();\n }\n\n // Ensure the element fills its container when in fixedAspectRatio mode\n // Custom elements are display:inline by default, which doesn't work for percentage-based sizing\n if (this.fixedAspectRatio) {\n this._applyFixedAspectRatioStyles();\n }\n }\n\n override disconnectedCallback(): void {\n this._borderRadiusObserver?.disconnect();\n this._borderRadiusObserver = undefined;\n super.disconnectedCallback();\n }\n\n private _startBorderRadiusObserver(): void {\n this._borderRadiusObserver?.disconnect();\n\n this._borderRadiusObserver = startExternalScaleBorderRadiusObserver(\n this,\n () => this._refreshBorderRadiusFromCssVar()\n );\n }\n\n /**\n * Apply CSS styles needed for fixedAspectRatio mode.\n * Custom elements are display:inline by default, which doesn't work with percentage-based sizing.\n * We need display:block and height:100% to fill the slot container.\n */\n private _applyFixedAspectRatioStyles(): void {\n this.style.display = 'block';\n this.style.height = '100%';\n this.style.width = 'auto';\n }\n\n /**\n * Remove fixed aspect ratio styles when switching back to pixel mode.\n */\n private _removeFixedAspectRatioStyles(): void {\n this.style.display = '';\n this.style.height = '';\n this.style.width = '';\n }\n\n /**\n * Calculate scale based on current element size.\n * Called when fixedAspectRatio is enabled or scaleReferenceSize changes.\n */\n private _updateScaleFromCurrentSize(): void {\n // Use requestAnimationFrame to ensure layout is complete\n requestAnimationFrame(() => {\n const containerHeight = this.clientHeight;\n if (containerHeight > 0) {\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize: containerHeight,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n this.requestUpdate();\n // Report updated dimensions to parent (matches pattern in ResizeController and _refreshBorderRadiusFromCssVar)\n this.reportDimensions();\n }\n });\n }\n\n private _refreshBorderRadiusFromCssVar(): void {\n // Skip CSS variable reading in instrument mode\n if (this.instrumentMode) return;\n\n const next = readExternalScaleBorderRadiusPx(this, this.scaleType);\n\n if (this._computedBorderRadius !== next) {\n this._computedBorderRadius = next;\n }\n\n // In fixed-aspect-ratio mode, recompute scale when border radius changes\n // (border radius affects effective bar thickness and therefore viewBox)\n if (this.fixedAspectRatio) {\n const rect = this.getBoundingClientRect();\n if (rect.height > 0) {\n this._scale = computeFixedAspectRatioScale({\n orientation: ExternalScaleOrientation.vertical,\n containerMainAxisSize: rect.height,\n scaleReferenceSize: this.scaleReferenceSize,\n });\n // Report updated dimensions\n this.reportDimensions();\n }\n }\n }\n\n /**\n * Get the effective border radius to use.\n * In instrument mode: use explicit borderRadius prop or default based on scaleType.\n * In normal mode: use CSS variable computed value.\n */\n private _getEffectiveBorderRadius(): number {\n if (this.instrumentMode) {\n // In instrument mode, use explicit value or default\n if (this.borderRadius !== undefined) {\n return this.borderRadius;\n }\n // Default: 8px for regular, 4px for condensed\n return this.scaleType === ScaleType.condensed ? 4 : 8;\n }\n // Normal mode: use CSS variable computed value\n return (\n this._computedBorderRadius ??\n (this.scaleType === ScaleType.condensed ? 4 : 8)\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-bar-vertical': ObcBarVertical;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -34,8 +34,7 @@ import '../../icons/icon-notification-advice-active.js';
|
|
|
34
34
|
* ## Slots
|
|
35
35
|
* | Slot Name | Renders When... | Purpose |
|
|
36
36
|
* | -------------- | ------------------------------------ | ------------------------------------------------------------ |
|
|
37
|
-
* | primary-icon |
|
|
38
|
-
* | secondary-icon | Only when `type="application"` | Additional icon for application-type advice messages. |
|
|
37
|
+
* | primary-icon | Only when `type="application"` | Custom main icon (the built-in advice icon is used otherwise). |
|
|
39
38
|
* | title | Always | Title or heading of the advice message. |
|
|
40
39
|
* | description | Always | Detailed advice or message text. |
|
|
41
40
|
* | time | If `hasTimestamp` is true | Timestamp label (e.g., "09:12:46"). |
|
|
@@ -66,8 +65,7 @@ import '../../icons/icon-notification-advice-active.js';
|
|
|
66
65
|
* </obc-advice-floating-item>
|
|
67
66
|
* ```
|
|
68
67
|
*
|
|
69
|
-
* @slot primary-icon -
|
|
70
|
-
* @slot secondary-icon - Additional icon for application-type advice messages.
|
|
68
|
+
* @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in advice icon is used otherwise).
|
|
71
69
|
* @slot title - Title or heading of the advice message.
|
|
72
70
|
* @slot description - Detailed advice or message text.
|
|
73
71
|
* @slot time - Timestamp label (e.g., "09:12:46").
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/advice-floating-item/advice-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,gDAAgD,CAAC;AACxD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C
|
|
1
|
+
{"version":3,"file":"advice-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/advice-floating-item/advice-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,gDAAgD,CAAC;AACxD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD;;;;;OAKG;IACuB,IAAI,sBAA+B;IAE7D;;;;;OAKG;IACuB,SAAS,2BAAuC;IAE1E;;;OAGG;IACwB,YAAY,UAAS;IAEhD;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;;OAKG;IACuB,QAAQ,0BAAsC;cAErD,MAAM;IAiDzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice-floating-item.js","sources":["../../../src/components/advice-floating-item/advice-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-advice-floating-item>` – A floating advice notification component for transient, context-sensitive messages.\n *\n * Displays 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 *\n * Appears 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\n * Use `<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 | Always (unless overridden) | Main advice icon (default: `<obi-notification-advice-active>`) or custom icon. |\n * | secondary-icon | Only when `type=\"application\"` | Additional icon for application-type advice messages. |\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 * ```\n *\n * @slot primary-icon - Main advice icon (default: `<obi-notification-advice-active>`), or custom icon.\n * @slot secondary-icon - Additional icon for application-type advice messages.\n * @slot title - Title or heading of the advice message.\n * @slot description - Detailed advice or message text.\n * @slot time - Timestamp label (e.g., \"09:12:46\").\n * @slot day - Day label (e.g., \"Yesterday\").\n * @slot action - Primary action button label/content.\n * @slot action2 - Secondary action button label/content.\n * @fires action-click {CustomEvent<void>} When the primary action button is clicked.\n * @fires action2-click {CustomEvent<void>} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent<void>} When the advice message is dismissed.\n * @beta\n */\n@customElement('obc-advice-floating-item')\nexport class ObcAdviceFloatingItem extends LitElement {\n /**\n * Defines the visual and behavioral variant of the advice message.\n * - `regular`: Standard advice message with a single advice icon.\n * - `application`: Application-type advice message with an additional icon.\n * Default: `regular`.\n */\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n /**\n * Sets the layout direction of the advice message.\n * - `horizontal`: Content and icons are arranged side-by-side.\n * - `vertical`: Content and icons are stacked vertically.\n * Default: `horizontal`.\n */\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n /**\n * If true, displays a timestamp label (e.g., \"09:12:46\") in the advice message.\n * Default: false.\n */\n @property({type: Boolean}) hasTimestamp = false;\n\n /**\n * If true (and `hasTimestamp` is also true), displays a day label (e.g., \"Yesterday\") in addition to the timestamp.\n * Default: false.\n */\n @property({type: Boolean}) hasDay = false;\n\n /**\n * If true, renders a primary action button in the advice message.\n * Default: false.\n */\n @property({type: Boolean}) action = false;\n\n /**\n * If true, renders a secondary action button in the advice message.\n * Note: The secondary action is only shown if the primary action (`action`) is also enabled.\n * Default: false.\n */\n @property({type: Boolean}) action2 = false;\n\n /**\n * Sets the content line type for the advice message.\n * - `singleLine`: Compact, one-line message.\n * - `multiLine`: Allows for longer, multi-line advice text.\n * Default: `singleLine`.\n */\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-notification-advice-active\n slot=\"secondary-icon\"\n style=\"color: var(--instrument-starboard-primary-color)\"\n ></obi-notification-advice-active>\n `\n : html`\n <obi-notification-advice-active\n slot=\"primary-icon\"\n style=\"color: var(--instrument-starboard-primary-color)\"\n ></obi-notification-advice-active>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-advice-floating-item': ObcAdviceFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2FO,IAAM,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,OAAO,oBAAoB;AAQ3B,SAAA,YAAY,yBAAyB;AAMpC,SAAA,eAAe;AAMf,SAAA,SAAS;AAMT,SAAA,SAAS;AAOT,SAAA,UAAU;AAQX,SAAA,WAAW,wBAAwB;AAAA,EAAA;AAAA,EAE1C,SAAS;AAC1B,UAAM,gBAAgB,KAAK,SAAS,oBAAoB;AAExD,WAAO;AAAA;AAAA,gBAEK,KAAK,IAAI;AAAA,qBACJ,KAAK,SAAS;AAAA,wBACX,KAAK,YAAY;AAAA,kBACvB,KAAK,MAAM;AAAA,kBACX,KAAK,MAAM;AAAA,mBACV,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,wBACT,CAAC,MACf,KAAK;AAAA,MACH,IAAI,YAAY,gBAAgB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACnD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA;AAAA,UAED,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASX;AAGF;AApGa,sBAmGK,SAAS,UAAU,cAAc;AA5FvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,sBAOe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,sBAee,WAAA,aAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,sBAqBgB,WAAA,gBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Bd,sBA2BgB,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,sBAiCgB,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxCd,sBAwCgB,WAAA,WAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhDb,sBAgDe,WAAA,YAAA,CAAA;AAhDf,wBAAN,gBAAA;AAAA,EADN,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}
|
|
1
|
+
{"version":3,"file":"advice-floating-item.js","sources":["../../../src/components/advice-floating-item/advice-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-advice-floating-item>` – A floating advice notification component for transient, context-sensitive messages.\n *\n * Displays 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 *\n * Appears 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\n * Use `<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 * ```\n *\n * @slot primary-icon - Custom main icon, projected into the child only when `type=\"application\"` (the built-in advice icon is used otherwise).\n * @slot title - Title or heading of the advice message.\n * @slot description - Detailed advice or message text.\n * @slot time - Timestamp label (e.g., \"09:12:46\").\n * @slot day - Day label (e.g., \"Yesterday\").\n * @slot action - Primary action button label/content.\n * @slot action2 - Secondary action button label/content.\n * @fires action-click {CustomEvent<void>} When the primary action button is clicked.\n * @fires action2-click {CustomEvent<void>} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent<void>} When the advice message is dismissed.\n * @beta\n */\n@customElement('obc-advice-floating-item')\nexport class ObcAdviceFloatingItem extends LitElement {\n /**\n * Defines the visual and behavioral variant of the advice message.\n * - `regular`: Standard advice message with a single advice icon.\n * - `application`: Application-type advice message with an additional icon.\n * Default: `regular`.\n */\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n /**\n * Sets the layout direction of the advice message.\n * - `horizontal`: Content and icons are arranged side-by-side.\n * - `vertical`: Content and icons are stacked vertically.\n * Default: `horizontal`.\n */\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n /**\n * If true, displays a timestamp label (e.g., \"09:12:46\") in the advice message.\n * Default: false.\n */\n @property({type: Boolean}) hasTimestamp = false;\n\n /**\n * If true (and `hasTimestamp` is also true), displays a day label (e.g., \"Yesterday\") in addition to the timestamp.\n * Default: false.\n */\n @property({type: Boolean}) hasDay = false;\n\n /**\n * If true, renders a primary action button in the advice message.\n * Default: false.\n */\n @property({type: Boolean}) action = false;\n\n /**\n * If true, renders a secondary action button in the advice message.\n * Note: The secondary action is only shown if the primary action (`action`) is also enabled.\n * Default: false.\n */\n @property({type: Boolean}) action2 = false;\n\n /**\n * Sets the content line type for the advice message.\n * - `singleLine`: Compact, one-line message.\n * - `multiLine`: Allows for longer, multi-line advice text.\n * Default: `singleLine`.\n */\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-notification-advice-active\n slot=\"secondary-icon\"\n style=\"color: var(--instrument-starboard-primary-color)\"\n ></obi-notification-advice-active>\n `\n : html`\n <obi-notification-advice-active\n slot=\"primary-icon\"\n style=\"color: var(--instrument-starboard-primary-color)\"\n ></obi-notification-advice-active>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-advice-floating-item': ObcAdviceFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyFO,IAAM,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,OAAO,oBAAoB;AAQ3B,SAAA,YAAY,yBAAyB;AAMpC,SAAA,eAAe;AAMf,SAAA,SAAS;AAMT,SAAA,SAAS;AAOT,SAAA,UAAU;AAQX,SAAA,WAAW,wBAAwB;AAAA,EAAA;AAAA,EAE1C,SAAS;AAC1B,UAAM,gBAAgB,KAAK,SAAS,oBAAoB;AAExD,WAAO;AAAA;AAAA,gBAEK,KAAK,IAAI;AAAA,qBACJ,KAAK,SAAS;AAAA,wBACX,KAAK,YAAY;AAAA,kBACvB,KAAK,MAAM;AAAA,kBACX,KAAK,MAAM;AAAA,mBACV,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,wBACT,CAAC,MACf,KAAK;AAAA,MACH,IAAI,YAAY,gBAAgB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACnD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA;AAAA,UAED,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASX;AAGF;AApGa,sBAmGK,SAAS,UAAU,cAAc;AA5FvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,sBAOe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,sBAee,WAAA,aAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,sBAqBgB,WAAA,gBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Bd,sBA2BgB,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,sBAiCgB,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxCd,sBAwCgB,WAAA,WAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhDb,sBAgDe,WAAA,YAAA,CAAA;AAhDf,wBAAN,gBAAA;AAAA,EADN,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}
|
|
@@ -55,17 +55,12 @@ export declare enum ObcAdviceMessageItemSize {
|
|
|
55
55
|
* ---
|
|
56
56
|
*
|
|
57
57
|
* ### Slots
|
|
58
|
-
* | Slot Name | Renders When...
|
|
59
|
-
*
|
|
60
|
-
* | `
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
* | `time` | `hasTimestamp` is true and `time` is set | Primary timestamp (e.g., time of advice). |
|
|
65
|
-
* | `time-secondary` | `hasTimestamp2` is true and `timeSecondary` set| Secondary timestamp (e.g., duration, relative time). |
|
|
66
|
-
* | `action-text` | `type="with-button"` | Label for the primary action button. |
|
|
67
|
-
* | `action-icon` | `type="with-icon-button"` | Icon for the action button (default: close icon). |
|
|
68
|
-
* | `empty` | `type="inactive"` or `empty` is true | Text to display in the empty/inactive state. |
|
|
58
|
+
* | Slot Name | Renders When... | Purpose |
|
|
59
|
+
* |-------------------|----------------------------|----------------------------------------------------------|
|
|
60
|
+
* | `secondary-icon` | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |
|
|
61
|
+
*
|
|
62
|
+
* All other content (title, description, timestamps, action label/icon, empty-state
|
|
63
|
+
* text) is driven by properties and rendered internally; it is not exposed as slots.
|
|
69
64
|
*
|
|
70
65
|
* ---
|
|
71
66
|
*
|
|
@@ -97,15 +92,7 @@ export declare enum ObcAdviceMessageItemSize {
|
|
|
97
92
|
*
|
|
98
93
|
* In this example, the advice message displays a title, description, timestamp, and a "View" action button.
|
|
99
94
|
*
|
|
100
|
-
* @slot primary-icon - Main icon representing the advice (always present)
|
|
101
95
|
* @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)
|
|
102
|
-
* @slot title - Title or heading of the advice (shown when `hasTitle` is true)
|
|
103
|
-
* @slot description - Detailed message text (shown when `hasDescription` is true)
|
|
104
|
-
* @slot time - Primary timestamp (shown when `hasTimestamp` is true)
|
|
105
|
-
* @slot time-secondary - Secondary timestamp (shown when `hasTimestamp2` is true)
|
|
106
|
-
* @slot action-text - Label for the action button (when `type="with-button"`)
|
|
107
|
-
* @slot action-icon - Icon for the action button (when `type="with-icon-button"`)
|
|
108
|
-
* @slot empty - Text to display in the empty/inactive state (when `type="inactive"` or `empty` is true)
|
|
109
96
|
* @fires message-click {CustomEvent<void>} When the main message area is clicked
|
|
110
97
|
* @fires action-click {CustomEvent<void>} When the action button (text or icon) is clicked
|
|
111
98
|
* @beta
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice-message-item.d.ts","sourceRoot":"","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,+CAA+C,CAAC;AAEvD,OAAO,gDAAgD,CAAC;AACxD,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,UAAU,gBAAgB;IAC1B,cAAc,qBAAqB;IACnC,QAAQ,aAAa;CACtB;AAED,oBAAY,wBAAwB;IAClC,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED
|
|
1
|
+
{"version":3,"file":"advice-message-item.d.ts","sourceRoot":"","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,+CAA+C,CAAC;AAEvD,OAAO,gDAAgD,CAAC;AACxD,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,UAAU,gBAAgB;IAC1B,cAAc,qBAAqB;IACnC,QAAQ,aAAa;CACtB;AAED,oBAAY,wBAAwB;IAClC,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD;;;;OAIG;IACgC,KAAK,SAAM;IAE9C;;;;OAIG;IACuB,WAAW,SAAM;IAE3C;;;;OAIG;IACuB,IAAI,SAAM;IAEpC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;OAIG;IACuB,WAAW,SAAU;IAE/C;;;;;;;;OAQG;IACuB,IAAI,EAAE,wBAAwB,CACtB;IAElC;;;;;;OAMG;IACuB,IAAI,EAAE,wBAAwB,CACrB;IAEnC;;;;OAIG;IAC0C,SAAS,EAAE,OAAO,CAAQ;IAEvE;;;;OAIG;IAC0C,eAAe,EAAE,OAAO,CAAQ;IAE7E;;;;OAIG;IAC0C,aAAa,EAAE,OAAO,CAAQ;IAE3E;;;;OAIG;IACwB,aAAa,UAAS;IAEjD;;;;OAIG;IACwB,gBAAgB,UAAS;IAEpD;;;;OAIG;IACuB,SAAS,SAAsB;IAEzD,OAAO,KAAK,UAAU,GAerB;IAED;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAIhB,MAAM;IA2Cf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advice-message-item.js","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {ObcTopbarMessageItemType} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcAdviceMessageItemType {\n Simple = 'simple',\n WithButton = 'with-button',\n WithIconButton = 'with-icon-button',\n Inactive = 'inactive',\n}\n\nexport enum ObcAdviceMessageItemSize {\n Regular = 'regular',\n Tall = 'tall',\n}\n\n/**\n * `<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n *\n * This 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\n * Use `<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 * | `primary-icon` | Always | Main icon representing the advice (default: advice icon). |\n * | `secondary-icon` | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |\n * | `title` | `hasTitle` is true and `title` is set | Title or heading of the advice message. |\n * | `description` | `hasDescription` is true and `description` set | Detailed message text. |\n * | `time` | `hasTimestamp` is true and `time` is set | Primary timestamp (e.g., time of advice). |\n * | `time-secondary` | `hasTimestamp2` is true and `timeSecondary` set| Secondary timestamp (e.g., duration, relative time). |\n * | `action-text` | `type=\"with-button\"` | Label for the primary action button. |\n * | `action-icon` | `type=\"with-icon-button\"` | Icon for the action button (default: close icon). |\n * | `empty` | `type=\"inactive\"` or `empty` is true | Text to display in the empty/inactive state. |\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 *\n * In this example, the advice message displays a title, description, timestamp, and a \"View\" action button.\n *\n * @slot primary-icon - Main icon representing the advice (always present)\n * @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)\n * @slot title - Title or heading of the advice (shown when `hasTitle` is true)\n * @slot description - Detailed message text (shown when `hasDescription` is true)\n * @slot time - Primary timestamp (shown when `hasTimestamp` is true)\n * @slot time-secondary - Secondary timestamp (shown when `hasTimestamp2` is true)\n * @slot action-text - Label for the action button (when `type=\"with-button\"`)\n * @slot action-icon - Icon for the action button (when `type=\"with-icon-button\"`)\n * @slot empty - Text to display in the empty/inactive state (when `type=\"inactive\"` or `empty` is true)\n * @fires message-click {CustomEvent<void>} When the main message area is clicked\n * @fires action-click {CustomEvent<void>} When the action button (text or icon) is clicked\n * @beta\n */\n@customElement('obc-advice-message-item')\nexport class ObcAdviceMessageItem extends LitElement {\n /**\n * Title or heading of the advice message.\n * Shown in the `title` slot if `hasTitle` is true.\n * @availableWhen showTitle==true && type!=Inactive\n */\n @property({type: String}) override title = '';\n\n /**\n * Detailed message text for the advice.\n * Shown in the `description` slot if `hasDescription` is true.\n * @availableWhen showDescription==true && type!=Inactive\n */\n @property({type: String}) description = '';\n\n /**\n * Primary timestamp to display (e.g., time of advice).\n * Shown in the `time` slot if `hasTimestamp` is true.\n * @availableWhen showTimestamp==true && type!=Inactive\n */\n @property({type: String}) time = '';\n\n /**\n * Secondary timestamp (e.g., duration, relative time).\n * Shown in the `time-secondary` slot if `hasTimestamp2` is true.\n * @availableWhen hasTimestamp2==true && type!=Inactive\n */\n @property({type: String}) timeSecondary = '';\n\n /**\n * Label for the action button (when `type` is \"with-button\").\n * Shown in the `action-text` slot.\n * @availableWhen type==WithButton\n */\n @property({type: String}) actionLabel = 'View';\n\n /**\n * Display type of the advice message.\n * - `simple`: Standard message with optional title, description, and timestamp.\n * - `with-button`: Includes a text action button.\n * - `with-icon-button`: Includes an icon action button.\n * - `inactive`: Shows the empty/inactive state.\n *\n * Default: `simple`\n */\n @property({type: String}) type: ObcAdviceMessageItemType =\n ObcAdviceMessageItemType.Simple;\n\n /**\n * Size variant of the advice message.\n * - `regular`: Default compact layout.\n * - `tall`: Larger, more spacious layout.\n *\n * Default: `regular`\n */\n @property({type: String}) size: ObcAdviceMessageItemSize =\n ObcAdviceMessageItemSize.Regular;\n\n /**\n * Whether to show the title.\n * If false, the title is hidden even if set.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n /**\n * Whether to show the description.\n * If false, the description is hidden even if set.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n /**\n * Whether to show the primary timestamp.\n * If false, the `time` slot is not rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n /**\n * Whether to show the secondary timestamp.\n * If true, the `time-secondary` slot is rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean}) hasTimestamp2 = false;\n\n /**\n * Whether to show the secondary icon overlay.\n * If true, the `secondary-icon` slot is rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean}) hasSecondaryIcon = false;\n\n /**\n * Text to display in the empty/inactive state.\n * Shown in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n * @availableWhen type==Inactive\n */\n @property({type: String}) emptyText = 'No active advice';\n\n private get mappedType(): ObcTopbarMessageItemType {\n if (this.type === ObcAdviceMessageItemType.Inactive) {\n return ObcTopbarMessageItemType.Inactive;\n }\n\n switch (this.type) {\n case ObcAdviceMessageItemType.WithButton:\n return ObcTopbarMessageItemType.WithButton;\n case ObcAdviceMessageItemType.WithIconButton:\n return ObcTopbarMessageItemType.WithIconButton;\n case ObcAdviceMessageItemType.Simple:\n return ObcTopbarMessageItemType.Simple;\n default:\n return ObcTopbarMessageItemType.Simple;\n }\n }\n\n /**\n * Fired when the main message area is clicked.\n * @fires message-click {CustomEvent<void>}\n */\n private handleMessageClick() {\n this.dispatchEvent(new CustomEvent('message-click'));\n }\n\n /**\n * Fired when the action button (text or icon) is clicked.\n * @fires action-click {CustomEvent<void>}\n */\n private handleActionClick() {\n this.dispatchEvent(new CustomEvent('action-click'));\n }\n\n override render() {\n return html`\n <obc-topbar-message-item\n .type=${this.mappedType}\n .size=${this.size}\n .showTitle=${this.showTitle}\n .showDescription=${this.showDescription}\n .showTimestamp=${this.showTimestamp}\n .hasTimestamp2=${this.hasTimestamp2}\n .hasSecondaryIcon=${this.hasSecondaryIcon}\n @message-click=${this.handleMessageClick}\n @action-click=${this.handleActionClick}\n >\n <obi-notification-advice-active\n slot=\"primary-icon\"\n ></obi-notification-advice-active>\n\n ${this.hasSecondaryIcon\n ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n : nothing}\n ${this.title && this.showTitle\n ? html`<span slot=\"title\">${this.title}</span>`\n : nothing}\n ${this.description && this.showDescription\n ? html`<span slot=\"description\">${this.description}</span>`\n : nothing}\n ${this.time && this.showTimestamp\n ? html`<span slot=\"time\">${this.time}</span>`\n : nothing}\n ${this.timeSecondary && this.hasTimestamp2\n ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n : nothing}\n ${this.type === ObcAdviceMessageItemType.WithButton\n ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n : this.type === ObcAdviceMessageItemType.WithIconButton\n ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n : nothing}\n\n <span slot=\"empty\">${this.emptyText}</span>\n </obc-topbar-message-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-advice-message-item': ObcAdviceMessageItem;\n }\n}\n"],"names":["ObcAdviceMessageItemType","ObcAdviceMessageItemSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"advice-message-item.js","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {ObcTopbarMessageItemType} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcAdviceMessageItemType {\n Simple = 'simple',\n WithButton = 'with-button',\n WithIconButton = 'with-icon-button',\n Inactive = 'inactive',\n}\n\nexport enum ObcAdviceMessageItemSize {\n Regular = 'regular',\n Tall = 'tall',\n}\n\n/**\n * `<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n *\n * This 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\n * Use `<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 *\n * All other content (title, description, timestamps, action label/icon, empty-state\n * text) 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 *\n * In this example, the advice message displays a title, description, timestamp, and a \"View\" action button.\n *\n * @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)\n * @fires message-click {CustomEvent<void>} When the main message area is clicked\n * @fires action-click {CustomEvent<void>} When the action button (text or icon) is clicked\n * @beta\n */\n@customElement('obc-advice-message-item')\nexport class ObcAdviceMessageItem extends LitElement {\n /**\n * Title or heading of the advice message.\n * Shown in the `title` slot if `hasTitle` is true.\n * @availableWhen showTitle==true && type!=Inactive\n */\n @property({type: String}) override title = '';\n\n /**\n * Detailed message text for the advice.\n * Shown in the `description` slot if `hasDescription` is true.\n * @availableWhen showDescription==true && type!=Inactive\n */\n @property({type: String}) description = '';\n\n /**\n * Primary timestamp to display (e.g., time of advice).\n * Shown in the `time` slot if `hasTimestamp` is true.\n * @availableWhen showTimestamp==true && type!=Inactive\n */\n @property({type: String}) time = '';\n\n /**\n * Secondary timestamp (e.g., duration, relative time).\n * Shown in the `time-secondary` slot if `hasTimestamp2` is true.\n * @availableWhen hasTimestamp2==true && type!=Inactive\n */\n @property({type: String}) timeSecondary = '';\n\n /**\n * Label for the action button (when `type` is \"with-button\").\n * Shown in the `action-text` slot.\n * @availableWhen type==WithButton\n */\n @property({type: String}) actionLabel = 'View';\n\n /**\n * Display type of the advice message.\n * - `simple`: Standard message with optional title, description, and timestamp.\n * - `with-button`: Includes a text action button.\n * - `with-icon-button`: Includes an icon action button.\n * - `inactive`: Shows the empty/inactive state.\n *\n * Default: `simple`\n */\n @property({type: String}) type: ObcAdviceMessageItemType =\n ObcAdviceMessageItemType.Simple;\n\n /**\n * Size variant of the advice message.\n * - `regular`: Default compact layout.\n * - `tall`: Larger, more spacious layout.\n *\n * Default: `regular`\n */\n @property({type: String}) size: ObcAdviceMessageItemSize =\n ObcAdviceMessageItemSize.Regular;\n\n /**\n * Whether to show the title.\n * If false, the title is hidden even if set.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n /**\n * Whether to show the description.\n * If false, the description is hidden even if set.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n /**\n * Whether to show the primary timestamp.\n * If false, the `time` slot is not rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n /**\n * Whether to show the secondary timestamp.\n * If true, the `time-secondary` slot is rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean}) hasTimestamp2 = false;\n\n /**\n * Whether to show the secondary icon overlay.\n * If true, the `secondary-icon` slot is rendered.\n * @availableWhen type!=Inactive\n */\n @property({type: Boolean}) hasSecondaryIcon = false;\n\n /**\n * Text to display in the empty/inactive state.\n * Shown in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n * @availableWhen type==Inactive\n */\n @property({type: String}) emptyText = 'No active advice';\n\n private get mappedType(): ObcTopbarMessageItemType {\n if (this.type === ObcAdviceMessageItemType.Inactive) {\n return ObcTopbarMessageItemType.Inactive;\n }\n\n switch (this.type) {\n case ObcAdviceMessageItemType.WithButton:\n return ObcTopbarMessageItemType.WithButton;\n case ObcAdviceMessageItemType.WithIconButton:\n return ObcTopbarMessageItemType.WithIconButton;\n case ObcAdviceMessageItemType.Simple:\n return ObcTopbarMessageItemType.Simple;\n default:\n return ObcTopbarMessageItemType.Simple;\n }\n }\n\n /**\n * Fired when the main message area is clicked.\n * @fires message-click {CustomEvent<void>}\n */\n private handleMessageClick() {\n this.dispatchEvent(new CustomEvent('message-click'));\n }\n\n /**\n * Fired when the action button (text or icon) is clicked.\n * @fires action-click {CustomEvent<void>}\n */\n private handleActionClick() {\n this.dispatchEvent(new CustomEvent('action-click'));\n }\n\n override render() {\n return html`\n <obc-topbar-message-item\n .type=${this.mappedType}\n .size=${this.size}\n .showTitle=${this.showTitle}\n .showDescription=${this.showDescription}\n .showTimestamp=${this.showTimestamp}\n .hasTimestamp2=${this.hasTimestamp2}\n .hasSecondaryIcon=${this.hasSecondaryIcon}\n @message-click=${this.handleMessageClick}\n @action-click=${this.handleActionClick}\n >\n <obi-notification-advice-active\n slot=\"primary-icon\"\n ></obi-notification-advice-active>\n\n ${this.hasSecondaryIcon\n ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n : nothing}\n ${this.title && this.showTitle\n ? html`<span slot=\"title\">${this.title}</span>`\n : nothing}\n ${this.description && this.showDescription\n ? html`<span slot=\"description\">${this.description}</span>`\n : nothing}\n ${this.time && this.showTimestamp\n ? html`<span slot=\"time\">${this.time}</span>`\n : nothing}\n ${this.timeSecondary && this.hasTimestamp2\n ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n : nothing}\n ${this.type === ObcAdviceMessageItemType.WithButton\n ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n : this.type === ObcAdviceMessageItemType.WithIconButton\n ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n : nothing}\n\n <span slot=\"empty\">${this.emptyText}</span>\n </obc-topbar-message-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-advice-message-item': ObcAdviceMessageItem;\n }\n}\n"],"names":["ObcAdviceMessageItemType","ObcAdviceMessageItemSize"],"mappings":"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"}
|
|
@@ -3,6 +3,18 @@ import { ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType
|
|
|
3
3
|
import '../floating-item/floating-item.js';
|
|
4
4
|
import '../../icons/icon-alarm-unacknowledged-iec.js';
|
|
5
5
|
/**
|
|
6
|
+
* `<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.
|
|
7
|
+
*
|
|
8
|
+
* @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in alert icon is used otherwise).
|
|
9
|
+
* @slot title - Title or heading of the alert message.
|
|
10
|
+
* @slot description - Detailed message text.
|
|
11
|
+
* @slot time - Timestamp label (e.g., "09:12:46").
|
|
12
|
+
* @slot day - Day label (e.g., "Yesterday").
|
|
13
|
+
* @slot action - Primary action button label/content.
|
|
14
|
+
* @slot action2 - Secondary action button label/content.
|
|
15
|
+
* @fires action-click {CustomEvent} When the primary action button is clicked.
|
|
16
|
+
* @fires action2-click {CustomEvent} When the secondary action button is clicked.
|
|
17
|
+
* @fires dismiss-click {CustomEvent} When the alert message is dismissed.
|
|
6
18
|
* @stable
|
|
7
19
|
*/
|
|
8
20
|
export declare class ObcAlertFloatingItem extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,8CAA8C,CAAC;AACtD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C
|
|
1
|
+
{"version":3,"file":"alert-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,8CAA8C,CAAC;AACtD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;GAcG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACxB,IAAI,sBAA+B;IAEnC,SAAS,2BAAuC;IAE/C,YAAY,UAAS;IAErB,MAAM,UAAS;IAEf,MAAM,UAAS;IAEf,OAAO,UAAS;IAEjB,QAAQ,0BAAsC;cAErD,MAAM;IAiDzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-floating-item.js","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './alert-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * @stable\n */\n@customElement('obc-alert-floating-item')\nexport class ObcAlertFloatingItem extends LitElement {\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n @property({type: Boolean}) hasTimestamp = false;\n\n @property({type: Boolean}) hasDay = false;\n\n @property({type: Boolean}) action = false;\n\n @property({type: Boolean}) action2 = false;\n\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-alarm-unacknowledged-iec\n slot=\"secondary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `\n : html`\n <obi-alarm-unacknowledged-iec\n slot=\"primary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-floating-item': ObcAlertFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"alert-floating-item.js","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './alert-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.\n *\n * @slot primary-icon - Custom main icon, projected into the child only when `type=\"application\"` (the built-in alert icon is used otherwise).\n * @slot title - Title or heading of the alert message.\n * @slot description - Detailed message text.\n * @slot time - Timestamp label (e.g., \"09:12:46\").\n * @slot day - Day label (e.g., \"Yesterday\").\n * @slot action - Primary action button label/content.\n * @slot action2 - Secondary action button label/content.\n * @fires action-click {CustomEvent} When the primary action button is clicked.\n * @fires action2-click {CustomEvent} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent} When the alert message is dismissed.\n * @stable\n */\n@customElement('obc-alert-floating-item')\nexport class ObcAlertFloatingItem extends LitElement {\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n @property({type: Boolean}) hasTimestamp = false;\n\n @property({type: Boolean}) hasDay = false;\n\n @property({type: Boolean}) action = false;\n\n @property({type: Boolean}) action2 = false;\n\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-alarm-unacknowledged-iec\n slot=\"secondary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `\n : html`\n <obi-alarm-unacknowledged-iec\n slot=\"primary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-floating-item': ObcAlertFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6BO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAO,oBAAoB;AAE3B,SAAA,YAAY,yBAAyB;AAEpC,SAAA,eAAe;AAEf,SAAA,SAAS;AAET,SAAA,SAAS;AAET,SAAA,UAAU;AAEX,SAAA,WAAW,wBAAwB;AAAA,EAAA;AAAA,EAE1C,SAAS;AAC1B,UAAM,gBAAgB,KAAK,SAAS,oBAAoB;AAExD,WAAO;AAAA;AAAA,gBAEK,KAAK,IAAI;AAAA,qBACJ,KAAK,SAAS;AAAA,wBACX,KAAK,YAAY;AAAA,kBACvB,KAAK,MAAM;AAAA,kBACX,KAAK,MAAM;AAAA,mBACV,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,wBACT,CAAC,MACf,KAAK;AAAA,MACH,IAAI,YAAY,gBAAgB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACnD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA;AAAA,UAED,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASX;AAGF;AAjEa,qBAgEK,SAAS,UAAU,cAAc;AA/DvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,qBACe,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,qBAGe,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GALd,qBAKgB,WAAA,gBAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,qBAOgB,WAAA,UAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GATd,qBASgB,WAAA,UAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAXd,qBAWgB,WAAA,WAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,qBAae,WAAA,YAAA,CAAA;AAbf,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}
|
|
@@ -44,15 +44,9 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
44
44
|
* | Slot Name | Renders When... | Purpose |
|
|
45
45
|
* |----------------------------------|----------------------------------|----------------------------------------------------------------|
|
|
46
46
|
* | (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |
|
|
47
|
-
* | empty
|
|
48
|
-
* | empty
|
|
49
|
-
* | empty
|
|
50
|
-
* | empty-all-title | Active tab, when empty | Custom title for empty active alerts. |
|
|
51
|
-
* | empty-all-description | Active tab, when empty | Custom description for empty active alerts. |
|
|
52
|
-
* | empty-all-icon | Active tab, when empty | Custom icon for empty active alerts. |
|
|
53
|
-
* | empty-shelved-title | Shelved tab, when empty | Custom title for empty shelved alerts. |
|
|
54
|
-
* | empty-shelved-description | Shelved tab, when empty | Custom description for empty shelved alerts. |
|
|
55
|
-
* | empty-shelved-icon | Shelved tab, when empty | Custom icon for empty shelved alerts. |
|
|
47
|
+
* | empty-<tab>-title | Selected tab is empty | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
48
|
+
* | empty-<tab>-description | Selected tab is empty | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
49
|
+
* | empty-<tab>-icon | Selected tab is empty | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
56
50
|
*
|
|
57
51
|
* ### Properties
|
|
58
52
|
* - `hasShelved` (boolean): If true, displays the "Shelved" tab and enables shelving support. Default: false.
|
|
@@ -62,7 +56,6 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
62
56
|
*
|
|
63
57
|
* ### Events
|
|
64
58
|
* - **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.
|
|
65
|
-
* - **alert-list-click** – Fired when the "Alerts" navigation button is clicked.
|
|
66
59
|
* - **silence-click** – Fired when the "Silence" button is clicked.
|
|
67
60
|
* - **go-to-alert-list-click** – Fired when the "Alerts" navigation button is clicked.
|
|
68
61
|
*
|
|
@@ -86,17 +79,10 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
86
79
|
* ```
|
|
87
80
|
*
|
|
88
81
|
* @slot - The alerts items as ObcAlertMenuItem
|
|
89
|
-
* @slot empty
|
|
90
|
-
* @slot empty
|
|
91
|
-
* @slot empty
|
|
92
|
-
* @slot empty-all-title - Custom title for empty active alerts (Active tab)
|
|
93
|
-
* @slot empty-all-description - Custom description for empty active alerts (Active tab)
|
|
94
|
-
* @slot empty-all-icon - Custom icon for empty active alerts (Active tab)
|
|
95
|
-
* @slot empty-shelved-title - Custom title for empty shelved alerts (Shelved tab)
|
|
96
|
-
* @slot empty-shelved-description - Custom description for empty shelved alerts (Shelved tab)
|
|
97
|
-
* @slot empty-shelved-icon - Custom icon for empty shelved alerts (Shelved tab)
|
|
82
|
+
* @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
83
|
+
* @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
84
|
+
* @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
98
85
|
* @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked
|
|
99
|
-
* @fires alert-list-click {CustomEvent} - Fired when the alert list button is clicked
|
|
100
86
|
* @fires silence-click {CustomEvent} - Fired when the silence button is clicked
|
|
101
87
|
* @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked
|
|
102
88
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-menu.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu/alert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0CAA0C,CAAC;AAClD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+BAA+B,CAAC;AAGvC,OAAO,gDAAgD,CAAC;AAKxD,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,eAAe,EAAE;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IACzD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;CACxC,CAAC,CAAC;AAEH
|
|
1
|
+
{"version":3,"file":"alert-menu.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu/alert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0CAA0C,CAAC;AAClD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+BAA+B,CAAC;AAGvC,OAAO,gDAAgD,CAAC;AAKxD,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,eAAe,EAAE;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IACzD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;CACxC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAKa,YAAa,SAAQ,UAAU;IAC1C;;;;;OAKG;IACwB,UAAU,EAAE,OAAO,CAAS;IAEvD;;;;;OAKG;IACwB,SAAS,EAAE,OAAO,CAAS;IAEtD;;;;;OAKG;IAC0C,iBAAiB,EAAE,OAAO,CAChE;IAEP;;;;;OAKG;IAC0C,mBAAmB,EAAE,OAAO,CAClE;IAEE,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,SAAS,CAAgB;IAEjC,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IA+Cb,MAAM;IA+Ef,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-menu.js","sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport {ObcAlertList} from '../../building-blocks/alert-list/alert-list.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n visibleElements: {element: HTMLElement; index: number}[];\n tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides 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\n * Use `<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-unacked-title | Unacked tab, when empty | Custom title for empty unacknowledged alerts. |\n * | empty-unacked-description | Unacked tab, when empty | Custom description for empty unacknowledged alerts. |\n * | empty-unacked-icon | Unacked tab, when empty | Custom icon for empty unacknowledged alerts. |\n * | empty-all-title | Active tab, when empty | Custom title for empty active alerts. |\n * | empty-all-description | Active tab, when empty | Custom description for empty active alerts. |\n * | empty-all-icon | Active tab, when empty | Custom icon for empty active alerts. |\n * | empty-shelved-title | Shelved tab, when empty | Custom title for empty shelved alerts. |\n * | empty-shelved-description | Shelved tab, when empty | Custom description for empty shelved alerts. |\n * | empty-shelved-icon | Shelved tab, when empty | Custom icon for empty shelved alerts. |\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 * - **alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\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 * ```\n *\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-unacked-title - Custom title for empty unacknowledged alerts (Unacked tab)\n * @slot empty-unacked-description - Custom description for empty unacknowledged alerts (Unacked tab)\n * @slot empty-unacked-icon - Custom icon for empty unacknowledged alerts (Unacked tab)\n * @slot empty-all-title - Custom title for empty active alerts (Active tab)\n * @slot empty-all-description - Custom description for empty active alerts (Active tab)\n * @slot empty-all-icon - Custom icon for empty active alerts (Active tab)\n * @slot empty-shelved-title - Custom title for empty shelved alerts (Shelved tab)\n * @slot empty-shelved-description - Custom description for empty shelved alerts (Shelved tab)\n * @slot empty-shelved-icon - Custom icon for empty shelved alerts (Shelved tab)\n * @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked\n * @fires alert-list-click {CustomEvent} - Fired when the alert list button is clicked\n * @fires silence-click {CustomEvent} - Fired when the silence button is clicked\n * @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n /**\n * If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n * Set to false to hide the \"Shelved\" tab and related filtering.\n *\n * Default: false.\n */\n @property({type: Boolean}) hasShelved: boolean = false;\n\n /**\n * If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n * Should be set to true only when there are unacknowledged alerts in view.\n *\n * Default: false.\n */\n @property({type: Boolean}) canAckAll: boolean = false;\n\n /**\n * If true, shows the \"Silence\" button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n true;\n\n /**\n * If true, shows the \"Alerts\" navigation button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n true;\n\n @state() private _selectedTabIndex = 1;\n\n @query('obc-alert-list')\n private alertList!: ObcAlertList;\n\n private handleAckAllVisibleClick() {\n const panel = this.alertList;\n const visibleElements = panel.getVisibleElements();\n this.dispatchEvent(\n new CustomEvent('ack-all-visible-click', {\n detail: {\n visibleElements: visibleElements,\n tabName: this.getSelectedTab().name,\n },\n })\n );\n }\n\n private onTabChange(e: ObcTabbedCardChangeEvent) {\n this._selectedTabIndex = e.detail.tab;\n }\n\n private getSelectedTab() {\n if (this._selectedTabIndex === 0) {\n return {\n name: 'unacked',\n emptyTitle: msg('No unacknowledged alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n class: 'unacked',\n filter: (item: HTMLElement) => {\n return (\n item.getAttribute('status') ===\n ObcAlertMenuItemStatus.Unacknowledged &&\n !item.hasAttribute('shelved')\n );\n },\n };\n } else if (this._selectedTabIndex === 2) {\n return {\n name: 'shelved',\n emptyTitle: msg('No shelved alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n class: 'shelved',\n filter: (item: HTMLElement) => {\n return item.hasAttribute('shelved');\n },\n };\n } else {\n return {\n name: 'all',\n emptyTitle: msg('No active alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n class: 'all',\n filter: (item: HTMLElement) => {\n return !item.hasAttribute('shelved');\n },\n };\n }\n }\n\n override render() {\n const t = this.getSelectedTab();\n\n return html`\n <obc-tabbed-card\n .nTabs=${this.hasShelved ? 3 : 2}\n class=\"wrapper\"\n part=\"wrapper\"\n .selectedTab=${this._selectedTabIndex}\n hasDefaultSlotOnly\n @tab-change=${this.onTabChange}\n >\n <span slot=\"tab-title-0\">${msg('Unacked')}</span>\n <span slot=\"tab-title-1\">${msg('Active')}</span>\n ${this.hasShelved\n ? html`<span slot=\"tab-title-2\">${msg('Shelved')}</span>`\n : nothing}\n <div class=\"container\">\n <obc-alert-list class=\"alert-list ${t.class}\" .filter=${t.filter}>\n <slot></slot>\n <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n >${t.emptyTitle}</slot\n >\n <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n >${t.emptyDescription}</slot\n >\n <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n >${t.emptyIcon}</slot\n >\n </obc-alert-list>\n <div class=\"action\">\n <obc-button\n variant=\"raised\"\n .disabled=${!this.canAckAll}\n fullWidth\n class=\"btn\"\n data-testid=\"ack-all-visible-button\"\n @click=${this.handleAckAllVisibleClick}\n >\n ${msg('ACK visible')}\n </obc-button>\n ${this.showSilenceButton\n ? html`<obc-button\n variant=\"normal\"\n fullWidth\n class=\"btn\"\n showLeadingIcon\n @click=${() =>\n this.dispatchEvent(new CustomEvent('silence-click'))}\n >\n <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n ${msg('Silence')}\n </obc-button>`\n : nothing}\n ${this.showAlertListButton\n ? html`<obc-button\n variant=\"normal\"\n class=\"btn\"\n fullWidth\n showLeadingIcon\n showTrailingIcon\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('go-to-alert-list-click')\n )}\n >\n <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n <obi-chevron-right-google\n slot=\"trailing-icon\"\n ></obi-chevron-right-google>\n ${msg('Alerts')}\n </obc-button>`\n : nothing}\n </div>\n </div>\n </obc-tabbed-card>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-menu': ObcAlertMenu;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-menu.js","sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport {ObcAlertList} from '../../building-blocks/alert-list/alert-list.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n visibleElements: {element: HTMLElement; index: number}[];\n tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides 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\n * Use `<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 * ```\n *\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked\n * @fires silence-click {CustomEvent} - Fired when the silence button is clicked\n * @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n /**\n * If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n * Set to false to hide the \"Shelved\" tab and related filtering.\n *\n * Default: false.\n */\n @property({type: Boolean}) hasShelved: boolean = false;\n\n /**\n * If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n * Should be set to true only when there are unacknowledged alerts in view.\n *\n * Default: false.\n */\n @property({type: Boolean}) canAckAll: boolean = false;\n\n /**\n * If true, shows the \"Silence\" button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n true;\n\n /**\n * If true, shows the \"Alerts\" navigation button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n true;\n\n @state() private _selectedTabIndex = 1;\n\n @query('obc-alert-list')\n private alertList!: ObcAlertList;\n\n private handleAckAllVisibleClick() {\n const panel = this.alertList;\n const visibleElements = panel.getVisibleElements();\n this.dispatchEvent(\n new CustomEvent('ack-all-visible-click', {\n detail: {\n visibleElements: visibleElements,\n tabName: this.getSelectedTab().name,\n },\n })\n );\n }\n\n private onTabChange(e: ObcTabbedCardChangeEvent) {\n this._selectedTabIndex = e.detail.tab;\n }\n\n private getSelectedTab() {\n if (this._selectedTabIndex === 0) {\n return {\n name: 'unacked',\n emptyTitle: msg('No unacknowledged alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n class: 'unacked',\n filter: (item: HTMLElement) => {\n return (\n item.getAttribute('status') ===\n ObcAlertMenuItemStatus.Unacknowledged &&\n !item.hasAttribute('shelved')\n );\n },\n };\n } else if (this._selectedTabIndex === 2) {\n return {\n name: 'shelved',\n emptyTitle: msg('No shelved alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n class: 'shelved',\n filter: (item: HTMLElement) => {\n return item.hasAttribute('shelved');\n },\n };\n } else {\n return {\n name: 'all',\n emptyTitle: msg('No active alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n class: 'all',\n filter: (item: HTMLElement) => {\n return !item.hasAttribute('shelved');\n },\n };\n }\n }\n\n override render() {\n const t = this.getSelectedTab();\n\n return html`\n <obc-tabbed-card\n .nTabs=${this.hasShelved ? 3 : 2}\n class=\"wrapper\"\n part=\"wrapper\"\n .selectedTab=${this._selectedTabIndex}\n hasDefaultSlotOnly\n @tab-change=${this.onTabChange}\n >\n <span slot=\"tab-title-0\">${msg('Unacked')}</span>\n <span slot=\"tab-title-1\">${msg('Active')}</span>\n ${this.hasShelved\n ? html`<span slot=\"tab-title-2\">${msg('Shelved')}</span>`\n : nothing}\n <div class=\"container\">\n <obc-alert-list class=\"alert-list ${t.class}\" .filter=${t.filter}>\n <slot></slot>\n <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n >${t.emptyTitle}</slot\n >\n <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n >${t.emptyDescription}</slot\n >\n <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n >${t.emptyIcon}</slot\n >\n </obc-alert-list>\n <div class=\"action\">\n <obc-button\n variant=\"raised\"\n .disabled=${!this.canAckAll}\n fullWidth\n class=\"btn\"\n data-testid=\"ack-all-visible-button\"\n @click=${this.handleAckAllVisibleClick}\n >\n ${msg('ACK visible')}\n </obc-button>\n ${this.showSilenceButton\n ? html`<obc-button\n variant=\"normal\"\n fullWidth\n class=\"btn\"\n showLeadingIcon\n @click=${() =>\n this.dispatchEvent(new CustomEvent('silence-click'))}\n >\n <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n ${msg('Silence')}\n </obc-button>`\n : nothing}\n ${this.showAlertListButton\n ? html`<obc-button\n variant=\"normal\"\n class=\"btn\"\n fullWidth\n showLeadingIcon\n showTrailingIcon\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('go-to-alert-list-click')\n )}\n >\n <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n <obi-chevron-right-google\n slot=\"trailing-icon\"\n ></obi-chevron-right-google>\n ${msg('Alerts')}\n </obc-button>`\n : nothing}\n </div>\n </div>\n </obc-tabbed-card>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-menu': ObcAlertMenu;\n }\n}\n"],"names":[],"mappings":"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"}
|