feat: add HVAC specialty-tank components (heat pump, hydraulic separator, heat exchanger)

.gitignore

@@ -27,6 +27,7 @@ packages/openbridge-webcomponents-svelte/*
 **/.junie/
 **/settings.local.json
 packages/openbridge-webcomponents/__vis__/darwin/
+packages/openbridge-webcomponents/__vis__/win32/
 .idea/
 **/.idea/
 CLAUDE.md

packages/openbridge-webcomponents/src/automation/heat-exchanger/heat-exchanger.stories.ts

@@ -0,0 +1,110 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcHeatExchanger} from './heat-exchanger.js';
+import './heat-exchanger.js';
+import {html} from 'lit';
+import {
+  ObcAlertFrameStatus,
+  ObcAlertFrameThickness,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {
+  AutomationButtonBadgeAlert,
+  AutomationButtonBadgeCommandLocked,
+  AutomationButtonBadgeControl,
+  AutomationButtonBadgeInterlock,
+} from '../automation-button/abstract-automation-button.js';
+
+type StoryArgs = ObcHeatExchanger;
+
+const meta: Meta<StoryArgs> = {
+  title: 'Automation/Tanks/Heat Exchanger',
+  tags: ['autodocs', '6.1'],
+  component: 'obc-heat-exchanger',
+  args: {
+    medium: false,
+    showMediumIcons: true,
+    showTag: true,
+    tag: '#0000',
+    badgeControl: AutomationButtonBadgeControl.None,
+    badgeInterlock: AutomationButtonBadgeInterlock.None,
+    badgeCommandLocked: AutomationButtonBadgeCommandLocked.None,
+    badgeAlert: AutomationButtonBadgeAlert.None,
+    alert: false,
+    alertFrameType: ObcAlertFrameType.SmallSideFlip,
+    alertFrameThickness: ObcAlertFrameThickness.Small,
+    alertFrameStatus: ObcAlertFrameStatus.Alarm,
+    showAlertCategoryIcon: true,
+    showAlertIcon: false,
+  },
+  argTypes: {
+    badgeControl: {
+      options: Object.values(AutomationButtonBadgeControl),
+      control: {type: 'select'},
+    },
+    badgeInterlock: {
+      options: Object.values(AutomationButtonBadgeInterlock),
+      control: {type: 'select'},
+    },
+    badgeCommandLocked: {
+      options: Object.values(AutomationButtonBadgeCommandLocked),
+      control: {type: 'select'},
+    },
+    badgeAlert: {
+      options: Object.values(AutomationButtonBadgeAlert),
+      control: {type: 'select'},
+    },
+    alertFrameType: {
+      options: Object.values(ObcAlertFrameType),
+      control: {type: 'select'},
+    },
+    alertFrameThickness: {
+      options: Object.values(ObcAlertFrameThickness),
+      control: {type: 'select'},
+    },
+    alertFrameStatus: {
+      options: Object.values(ObcAlertFrameStatus),
+      control: {type: 'select'},
+    },
+  },
+  render: (args) => html`
+    <obc-heat-exchanger
+      ?medium=${args.medium}
+      .showMediumIcons=${args.showMediumIcons}
+      .showTag=${args.showTag}
+      .tag=${args.tag}
+      .badgeControl=${args.badgeControl}
+      .badgeInterlock=${args.badgeInterlock}
+      .badgeCommandLocked=${args.badgeCommandLocked}
+      .badgeAlert=${args.badgeAlert}
+      ?alert=${args.alert}
+      .alertFrameType=${args.alertFrameType}
+      .alertFrameThickness=${args.alertFrameThickness}
+      .alertFrameStatus=${args.alertFrameStatus}
+      .showAlertCategoryIcon=${args.showAlertCategoryIcon}
+      .showAlertIcon=${args.showAlertIcon}
+    ></obc-heat-exchanger>
+  `,
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {};
+
+export const WithMedium: Story = {
+  args: {medium: true},
+};
+
+export const WithBadges: Story = {
+  args: {
+    medium: true,
+    badgeControl: AutomationButtonBadgeControl.Auto,
+    badgeInterlock: AutomationButtonBadgeInterlock.Interlock,
+    badgeCommandLocked: AutomationButtonBadgeCommandLocked.CommandLocked,
+    badgeAlert: AutomationButtonBadgeAlert.Silence,
+  },
+};
+
+export const WithAlert: Story = {
+  args: {medium: true, alert: true},
+};

packages/openbridge-webcomponents/src/automation/heat-exchanger/heat-exchanger.ts

@@ -0,0 +1,66 @@
+import {TemplateResult, html} from 'lit';
+import '../../icons/icon-heatexhanger.js';
+import {
+  ObcAbstractSpecialtyTank,
+  SpecialtyTankSplitMode,
+} from '../specialty-tank/abstract-specialty-tank.js';
+import {customElement} from '../../decorator.js';
+
+/**
+ * ## Heat Exchanger
+ *
+ * Fixed-footprint instrument tile representing a heat exchanger. Shows a
+ * framed hot/cold medium area split diagonally into two corner-to-corner
+ * triangles (top-left hot, bottom-right cold, no divider), a centered
+ * heat-exchanger icon in a rounded frame, optional flame/snowflake corner
+ * glyphs, an optional badge row, and a tag readout below the frame.
+ *
+ * ### Features / Variants
+ * - `medium` toggles between the empty grey fill and the hot/cold colors.
+ * - `showMediumIcons` toggles the flame (top-left) and snowflake
+ *   (bottom-right) corner glyphs.
+ * - `showTag` / `tag` control the identifier readout below the frame.
+ * - Enum-driven badges (`badgeControl`, `badgeInterlock`,
+ *   `badgeCommandLocked`, `badgeAlert`) render in the top-right badge row;
+ *   the `badges` slot overrides them.
+ * - Alert-frame overlay mirroring `obc-automation-tank` (`alert`,
+ *   `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`,
+ *   `showAlertCategoryIcon`, `showAlertIcon`).
+ *
+ * ### Usage Guidelines
+ * Use for heat exchangers in automation system views. For heat pumps use
+ * `obc-heat-pump` (vertical split) and for hydraulic separators use
+ * `obc-hydraulic-separator` (horizontal split); the three tiles differ only
+ * in center icon and fill geometry.
+ *
+ * @ignition-base-width: 90px
+ * @ignition-base-height: 163px
+ * @ignition-center-horizontal
+ * @beta
+ *
+ * @slot badges - Custom badges, overriding the enum-driven defaults.
+ * @slot tag - Text or element replacing the `tag` property readout.
+ * @slot alert-icon - Custom icon for the alert frame.
+ * @slot alert-label - Label for the alert frame.
+ * @slot alert-timer - Timer for the alert frame.
+ */
+@customElement('obc-heat-exchanger')
+export class ObcHeatExchanger extends ObcAbstractSpecialtyTank {
+  override get equipmentIcon(): TemplateResult {
+    return html`<obi-heatexhanger usecsscolor></obi-heatexhanger>`;
+  }
+
+  override get splitMode(): SpecialtyTankSplitMode {
+    return SpecialtyTankSplitMode.diagonal;
+  }
+
+  protected override get equipmentName(): string {
+    return 'Heat exchanger';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-heat-exchanger': ObcHeatExchanger;
+  }
+}

packages/openbridge-webcomponents/src/automation/heat-pump/heat-pump.stories.ts

@@ -0,0 +1,110 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcHeatPump} from './heat-pump.js';
+import './heat-pump.js';
+import {html} from 'lit';
+import {
+  ObcAlertFrameStatus,
+  ObcAlertFrameThickness,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {
+  AutomationButtonBadgeAlert,
+  AutomationButtonBadgeCommandLocked,
+  AutomationButtonBadgeControl,
+  AutomationButtonBadgeInterlock,
+} from '../automation-button/abstract-automation-button.js';
+
+type StoryArgs = ObcHeatPump;
+
+const meta: Meta<StoryArgs> = {
+  title: 'Automation/Tanks/Heat Pump',
+  tags: ['autodocs', '6.1'],
+  component: 'obc-heat-pump',
+  args: {
+    medium: false,
+    showMediumIcons: true,
+    showTag: true,
+    tag: '#0000',
+    badgeControl: AutomationButtonBadgeControl.None,
+    badgeInterlock: AutomationButtonBadgeInterlock.None,
+    badgeCommandLocked: AutomationButtonBadgeCommandLocked.None,
+    badgeAlert: AutomationButtonBadgeAlert.None,
+    alert: false,
+    alertFrameType: ObcAlertFrameType.SmallSideFlip,
+    alertFrameThickness: ObcAlertFrameThickness.Small,
+    alertFrameStatus: ObcAlertFrameStatus.Alarm,
+    showAlertCategoryIcon: true,
+    showAlertIcon: false,
+  },
+  argTypes: {
+    badgeControl: {
+      options: Object.values(AutomationButtonBadgeControl),
+      control: {type: 'select'},
+    },
+    badgeInterlock: {
+      options: Object.values(AutomationButtonBadgeInterlock),
+      control: {type: 'select'},
+    },
+    badgeCommandLocked: {
+      options: Object.values(AutomationButtonBadgeCommandLocked),
+      control: {type: 'select'},
+    },
+    badgeAlert: {
+      options: Object.values(AutomationButtonBadgeAlert),
+      control: {type: 'select'},
+    },
+    alertFrameType: {
+      options: Object.values(ObcAlertFrameType),
+      control: {type: 'select'},
+    },
+    alertFrameThickness: {
+      options: Object.values(ObcAlertFrameThickness),
+      control: {type: 'select'},
+    },
+    alertFrameStatus: {
+      options: Object.values(ObcAlertFrameStatus),
+      control: {type: 'select'},
+    },
+  },
+  render: (args) => html`
+    <obc-heat-pump
+      ?medium=${args.medium}
+      .showMediumIcons=${args.showMediumIcons}
+      .showTag=${args.showTag}
+      .tag=${args.tag}
+      .badgeControl=${args.badgeControl}
+      .badgeInterlock=${args.badgeInterlock}
+      .badgeCommandLocked=${args.badgeCommandLocked}
+      .badgeAlert=${args.badgeAlert}
+      ?alert=${args.alert}
+      .alertFrameType=${args.alertFrameType}
+      .alertFrameThickness=${args.alertFrameThickness}
+      .alertFrameStatus=${args.alertFrameStatus}
+      .showAlertCategoryIcon=${args.showAlertCategoryIcon}
+      .showAlertIcon=${args.showAlertIcon}
+    ></obc-heat-pump>
+  `,
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {};
+
+export const WithMedium: Story = {
+  args: {medium: true},
+};
+
+export const WithBadges: Story = {
+  args: {
+    medium: true,
+    badgeControl: AutomationButtonBadgeControl.Auto,
+    badgeInterlock: AutomationButtonBadgeInterlock.Interlock,
+    badgeCommandLocked: AutomationButtonBadgeCommandLocked.CommandLocked,
+    badgeAlert: AutomationButtonBadgeAlert.Silence,
+  },
+};
+
+export const WithAlert: Story = {
+  args: {medium: true, alert: true},
+};

packages/openbridge-webcomponents/src/automation/heat-pump/heat-pump.ts

@@ -0,0 +1,66 @@
+import {TemplateResult, html} from 'lit';
+import '../../icons/icon-heatpump.js';
+import {
+  ObcAbstractSpecialtyTank,
+  SpecialtyTankSplitMode,
+} from '../specialty-tank/abstract-specialty-tank.js';
+import {customElement} from '../../decorator.js';
+
+/**
+ * ## Heat Pump
+ *
+ * Fixed-footprint instrument tile representing a heat pump. Shows a framed
+ * hot/cold medium area split vertically (left hot, right cold) with a
+ * centered divider bar, a centered heat-pump icon in a rounded frame,
+ * optional flame/snowflake corner glyphs, an optional badge row, and a tag
+ * readout below the frame.
+ *
+ * ### Features / Variants
+ * - `medium` toggles between the empty grey fill and the hot/cold colors.
+ * - `showMediumIcons` toggles the flame (top-left) and snowflake
+ *   (bottom-right) corner glyphs.
+ * - `showTag` / `tag` control the identifier readout below the frame.
+ * - Enum-driven badges (`badgeControl`, `badgeInterlock`,
+ *   `badgeCommandLocked`, `badgeAlert`) render in the top-right badge row;
+ *   the `badges` slot overrides them.
+ * - Alert-frame overlay mirroring `obc-automation-tank` (`alert`,
+ *   `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`,
+ *   `showAlertCategoryIcon`, `showAlertIcon`).
+ *
+ * ### Usage Guidelines
+ * Use for heat-pump devices in automation system views. For hydraulic
+ * separators use `obc-hydraulic-separator` (horizontal split) and for heat
+ * exchangers use `obc-heat-exchanger` (diagonal split); the three tiles
+ * differ only in center icon and fill geometry.
+ *
+ * @ignition-base-width: 90px
+ * @ignition-base-height: 163px
+ * @ignition-center-horizontal
+ * @beta
+ *
+ * @slot badges - Custom badges, overriding the enum-driven defaults.
+ * @slot tag - Text or element replacing the `tag` property readout.
+ * @slot alert-icon - Custom icon for the alert frame.
+ * @slot alert-label - Label for the alert frame.
+ * @slot alert-timer - Timer for the alert frame.
+ */
+@customElement('obc-heat-pump')
+export class ObcHeatPump extends ObcAbstractSpecialtyTank {
+  override get equipmentIcon(): TemplateResult {
+    return html`<obi-heatpump usecsscolor></obi-heatpump>`;
+  }
+
+  override get splitMode(): SpecialtyTankSplitMode {
+    return SpecialtyTankSplitMode.vertical;
+  }
+
+  protected override get equipmentName(): string {
+    return 'Heat pump';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-heat-pump': ObcHeatPump;
+  }
+}