@oicl/openbridge-webcomponents-svelte 2.0.0-next.113 → 2.0.0-next.115

package/dist/components/tree-navigation-group/ObcTreeNavigationGroup.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-group/tree-navigation-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import type { Snippet } from 'svelte';
 
@@ -46,7 +46,7 @@ href?: string | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onexpand-toggle={onExpandToggle} >
+    use:forwardEvents={{'expand-toggle': onExpandToggle}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/tree-navigation-item/ObcTreeNavigationItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import type { Snippet } from 'svelte';
 
@@ -53,8 +53,7 @@ href?: string | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onexpand-toggle={onExpandToggle}
-   onclick={onClick} >
+    use:forwardEvents={{'expand-toggle': onExpandToggle, 'click': onClick}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/user-menu/ObcUserMenu.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcUserMenuType, ObcUserMenuSize, ObcUserMenuUser, ObcUserMenuSignedInAction} from '@oicl/openbridge-webcomponents/dist/components/user-menu/user-menu.js';
       import '@oicl/openbridge-webcomponents/dist/components/user-menu/user-menu.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcUserMenuType, ObcUserMenuSize, ObcUserMenuUser, ObcUserMenuSignedInAction} from '@oicl/openbridge-webcomponents/dist/components/user-menu/user-menu.js';
       import type { Snippet } from 'svelte';
 
@@ -48,10 +48,7 @@ signedInActions?: ObcUserMenuSignedInAction[]
     use:setProperties={props}
     class={className}
     style={style}
-    onsign-in-click={onSignInClick}
-   onsign-out-click={onSignOutClick}
-   onsigned-in-action-click={onSignedInActionClick}
-   onrecent-user-click={onRecentUserClick} >
+    use:forwardEvents={{'sign-in-click': onSignInClick, 'sign-out-click': onSignOutClick, 'signed-in-action-click': onSignedInActionClick, 'recent-user-click': onRecentUserClick}} >
       
       {#if signedInActionIcon}
         <div slot="signed-in-action-icon-<id>">

package/dist/integration-systems/integration-bar/ObcIntegrationBar.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-bar/integration-bar.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -72,14 +72,7 @@ fleetButtonLabel?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onfleet-button-click={onFleetButtonClick}
-   onlink-button-clicked={onLinkButtonClicked}
-   onalert-button-clicked={onAlertButtonClicked}
-   onnotification-button-clicked={onNotificationButtonClicked}
-   onscreen-button-clicked={onScreenButtonClicked}
-   onsystem-button-clicked={onSystemButtonClicked}
-   ondimming-button-clicked={onDimmingButtonClicked}
-   onuser-button-clicked={onUserButtonClicked} >
+    use:forwardEvents={{'fleet-button-click': onFleetButtonClick, 'link-button-clicked': onLinkButtonClicked, 'alert-button-clicked': onAlertButtonClicked, 'notification-button-clicked': onNotificationButtonClicked, 'screen-button-clicked': onScreenButtonClicked, 'system-button-clicked': onSystemButtonClicked, 'dimming-button-clicked': onDimmingButtonClicked, 'user-button-clicked': onUserButtonClicked}} >
       
       {#if clock}
         <div slot="clock">

package/dist/integration-systems/integration-bar-dropdown/ObcIntegrationBarDropdown.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -48,11 +48,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onhome-button-clicked={onHomeButtonClicked}
-   ondimming-button-clicked={onDimmingButtonClicked}
-   onnotification-button-clicked={onNotificationButtonClicked}
-   onuser-button-clicked={onUserButtonClicked}
-   onsystem-button-clicked={onSystemButtonClicked} >
+    use:forwardEvents={{'home-button-clicked': onHomeButtonClicked, 'dimming-button-clicked': onDimmingButtonClicked, 'notification-button-clicked': onNotificationButtonClicked, 'user-button-clicked': onUserButtonClicked, 'system-button-clicked': onSystemButtonClicked}} >
       
       {#if vesselSelector}
         <div slot="vessel-selector">

package/dist/integration-systems/integration-button/ObcIntegrationButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {IntegrationButtonReadout, IntegrationButtonVariant, IntegrationButtonType} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {IntegrationButtonReadout, IntegrationButtonVariant, IntegrationButtonType} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
       import type { Snippet } from 'svelte';
 
@@ -54,7 +54,7 @@ type?: IntegrationButtonType
     use:setProperties={props}
     class={className}
     style={style}
-    onclick={onClick} >
+    use:forwardEvents={{'click': onClick}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">

package/dist/integration-systems/integration-dropdown-button/ObcIntegrationDropdownButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcIntegrationDropdownButtonChangeEvent, IntegrationDropdownOption} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcIntegrationDropdownButtonChangeEvent, IntegrationDropdownOption} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
       import type { Snippet } from 'svelte';
 
@@ -41,7 +41,7 @@ openTop?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if fleet}
         <div slot="fleet">

package/dist/navigation-instruments/gauge-horizontal/ObcGaugeHorizontal.svelte

@@ -4,7 +4,7 @@
 export type {BorderRadiusPosition, Priority, InstrumentState} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 export type {LinearAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-linear/advice.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-horizontal/gauge-horizontal.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ExternalScaleSide, FillMode} from '@oicl/openbridge-webcomponents/dist/building-blocks/external-scale/external-scale.js';
 import type {BorderRadiusPosition, Priority, InstrumentState} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type {LinearAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-linear/advice.js';
@@ -85,7 +85,7 @@ highlightCurrentValue?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onscale-dimensions-changed={onScaleDimensionsChanged} >
+    use:forwardEvents={{'scale-dimensions-changed': onScaleDimensionsChanged}} >
       
     {#if children}
       {@render children()}

package/dist/navigation-instruments/gauge-vertical/ObcGaugeVertical.svelte

@@ -4,7 +4,7 @@
 export type {BorderRadiusPosition, Priority, InstrumentState} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 export type {LinearAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-linear/advice.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-vertical/gauge-vertical.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ExternalScaleSide, FillMode} from '@oicl/openbridge-webcomponents/dist/building-blocks/external-scale/external-scale.js';
 import type {BorderRadiusPosition, Priority, InstrumentState} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type {LinearAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-linear/advice.js';
@@ -85,7 +85,7 @@ highlightCurrentValue?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onscale-dimensions-changed={onScaleDimensionsChanged} >
+    use:forwardEvents={{'scale-dimensions-changed': onScaleDimensionsChanged}} >
       
     {#if children}
       {@render children()}

package/dist/navigation-instruments/readout/ObcReadout.svelte

@@ -7,7 +7,7 @@ export type {ReadoutDirection, ReadoutStacking, ReadoutAlignment, ReadoutSourceO
 export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
 export type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
 import type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
 import type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
@@ -81,8 +81,7 @@ showDebugOverlay?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onsource-change={onSourceChange}
-   onsource-flyout-click={onSourceFlyoutClick} >
+    use:forwardEvents={{'source-change': onSourceChange, 'source-flyout-click': onSourceFlyoutClick}} >
       
       {#if valueIcon}
         <div slot="value-icon">

package/dist/pages/alert-list-page-small/ObcAlertListPageSmall.svelte

@@ -3,7 +3,7 @@
     export type {ObcAlertListPageAckAllClickEvent, ObcAckClickEvent, ObcRowClickEvent, AlertListMode} from '@oicl/openbridge-webcomponents/dist/pages/alert-list-page-small/alert-list-page-small.js';
 export type {Alert} from '@oicl/openbridge-webcomponents/dist/types.js';
       import '@oicl/openbridge-webcomponents/dist/pages/alert-list-page-small/alert-list-page-small.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcAlertListPageAckAllClickEvent, ObcAckClickEvent, ObcRowClickEvent, AlertListMode} from '@oicl/openbridge-webcomponents/dist/pages/alert-list-page-small/alert-list-page-small.js';
 import type {Alert} from '@oicl/openbridge-webcomponents/dist/types.js';
       import type { Snippet } from 'svelte';
@@ -33,10 +33,7 @@ import type {Alert} from '@oicl/openbridge-webcomponents/dist/types.js';
     use:setProperties={props}
     class={className}
     style={style}
-    onack-all-visible-click={onAckAllVisibleClick}
-   onack-click={onAckClick}
-   onrow-click={onRowClick}
-   onsilence-click={onSilenceClick} >
+    use:forwardEvents={{'ack-all-visible-click': onAckAllVisibleClick, 'ack-click': onAckClick, 'row-click': onRowClick, 'silence-click': onSilenceClick}} >
       
     {#if children}
       {@render children()}

package/dist/util.d.ts

@@ -1,3 +1,9 @@
 export declare function setProperties(node: HTMLElement, props: Record<string, unknown>): {
     update(props: Record<string, unknown>): void;
 };
+type EventHandlers = Record<string, ((event: Event) => void) | undefined>;
+export declare function forwardEvents(node: HTMLElement, handlers: EventHandlers): {
+    update(handlers: EventHandlers): void;
+    destroy(): void;
+};
+export {};

package/dist/util.js

@@ -20,3 +20,22 @@ export function setProperties(node, props) {
         },
     };
 }
+export function forwardEvents(node, handlers) {
+    let current = handlers;
+    const listeners = new Map();
+    for (const name of Object.keys(handlers)) {
+        const listener = (event) => current[name]?.(event);
+        listeners.set(name, listener);
+        node.addEventListener(name, listener);
+    }
+    return {
+        update(handlers) {
+            current = handlers;
+        },
+        destroy() {
+            for (const [name, listener] of listeners) {
+                node.removeEventListener(name, listener);
+            }
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-svelte",
-  "version": "2.0.0-next.113",
+  "version": "2.0.0-next.115",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "@oicl/openbridge-webcomponents": "^2.0.0-next.112"
+    "@oicl/openbridge-webcomponents": "^2.0.0-next.114"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"