@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.49

package/script/generate-bundle-entry.ts

@@ -0,0 +1,77 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import {globSync} from 'glob';
+
+const BUNDLE_FILE = 'bundle.ts';
+
+function findComponentFiles(
+  directory: string,
+  excludeFiles: string[] = []
+): string[] {
+  const components: string[] = [];
+  const fullPath = path.join(process.cwd(), directory);
+
+  if (!fs.existsSync(fullPath)) {
+    return components;
+  }
+
+  const items = globSync(`${fullPath}/**/*.ts`, {
+    ignore: [
+      '**/*.stories.ts',
+      '**/*.spec.ts',
+      '**/*.test.ts',
+      '**/_test-utils.ts',
+    ],
+  });
+  const rootPath = path.join(process.cwd());
+
+  for (const item of items) {
+    if (
+      item.endsWith('.ts') &&
+      !item.endsWith('.stories.ts') &&
+      !excludeFiles.includes(item)
+    ) {
+      const filename = item.replace('.ts', '');
+      const relativePath = filename.replace(rootPath, '');
+
+      components.push(relativePath);
+    }
+  }
+
+  return components.sort((a, b) => a.localeCompare(b));
+}
+
+function generateBundleFile() {
+  console.log(`Generating ${BUNDLE_FILE}...`);
+
+  let content = `// Bundle entry file - imports all web components for standalone browser usage
+// Auto-generated by script/generate-bundle-entry.ts - do not edit manually
+
+// Types
+export * from './src/types.js';
+
+`;
+  const folders = fs
+    .readdirSync('src')
+    .map((dir) => path.join('src', dir))
+    .filter((dir) => fs.statSync(dir).isDirectory());
+
+  for (const folder of folders) {
+    console.log(`Adding components from ${folder}...`);
+    const components = findComponentFiles(folder);
+
+    if (components.length > 0) {
+      content += `// ${folder}\n`;
+      for (const comp of components) {
+        content += `import '.${comp}.js';\n`;
+      }
+      content += '\n';
+    }
+  }
+
+  fs.writeFileSync(BUNDLE_FILE, content, 'utf-8');
+
+  console.log(`✓ Generated ${BUNDLE_FILE} with all component imports`);
+}
+
+generateBundleFile();

package/script/prepare-full-bundle.ts

@@ -0,0 +1,105 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const scriptPath = path.resolve(process.argv[1]);
+const scriptDirectory = path.dirname(scriptPath);
+
+const packageRoot = path.resolve(scriptDirectory, '..');
+const sourcePackagePath = path.join(packageRoot, 'package.json');
+const fullBundlePackageRoot = path.join(packageRoot, '.full-bundle-publish');
+const sourcePackage = JSON.parse(fs.readFileSync(sourcePackagePath, 'utf-8'));
+const releaseVersion = process.argv[2] ?? sourcePackage.version;
+const {scripts: _scripts, ...sourcePackageWithoutScripts} = sourcePackage;
+
+const nonWorkingScripts = new Set([
+  'wrappers',
+  'build:full',
+  'wrappers:clean',
+  'wrappers:build',
+  'wrappers:generate',
+  'wrappers:post-fix',
+  'test-storybook:docker',
+]);
+
+const scripts = Object.fromEntries(
+  Object.entries(_scripts).filter(([name]) => !nonWorkingScripts.has(name))
+);
+
+const fullBundlePackage = {
+  ...sourcePackageWithoutScripts,
+  name: '@oicl/openbridge-webcomponents-full-bundle',
+  version: releaseVersion,
+  scripts,
+  files: [
+    'dist',
+    '!dist/AR-test-image.png',
+    '!dist/companylogo-day.png',
+    'bundle/openbridge-webcomponents.bundle.js',
+    'bundle/openbridge-webcomponents.bundle.js.map',
+    '.storybook',
+    'script',
+    'xliff',
+    'src',
+    'docs',
+    'custom-elements.json',
+    'tsconfig.json',
+    'eslint.config.mjs',
+    'vite.config.ts',
+    'postcss.config.mjs',
+    'lit-localize.json',
+    'new-component.ts',
+    'fix-imports.mjs',
+    'fix-js-extensions.mjs',
+    'vitest.browser.config.ts',
+    'vitest.config.ts',
+  ],
+};
+
+fs.rmSync(fullBundlePackageRoot, {recursive: true, force: true});
+fs.mkdirSync(fullBundlePackageRoot, {recursive: true});
+
+for (const dirName of [
+  'dist',
+  'bundle',
+  'src',
+  'docs',
+  'xliff',
+  'script',
+  '.storybook',
+]) {
+  fs.cpSync(
+    path.join(packageRoot, dirName),
+    path.join(fullBundlePackageRoot, dirName),
+    {
+      recursive: true,
+    }
+  );
+}
+
+for (const file of [
+  'custom-elements.json',
+  'tsconfig.json',
+  'vite.config.ts',
+  'eslint.config.mjs',
+  'postcss.config.mjs',
+  'lit-localize.json',
+  'new-component.ts',
+  'fix-imports.mjs',
+  'fix-js-extensions.mjs',
+  'vitest.browser.config.ts',
+  'vitest.config.ts',
+]) {
+  fs.copyFileSync(
+    path.join(packageRoot, file),
+    path.join(fullBundlePackageRoot, file)
+  );
+}
+
+fs.writeFileSync(
+  path.join(fullBundlePackageRoot, 'package.json'),
+  JSON.stringify(fullBundlePackage, null, 2) + '\n'
+);
+
+console.log(
+  `✓ Prepared full-bundle publish directory: ${fullBundlePackageRoot}`
+);

package/script/sort-custom-element-manifest.ts

@@ -0,0 +1,67 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface Declaration {
+  kind: string;
+  name?: string;
+  [key: string]: unknown;
+}
+
+interface Module {
+  kind: string;
+  path: string;
+  declarations?: Declaration[];
+  exports?: unknown[];
+  [key: string]: unknown;
+}
+
+interface CustomElementsJson {
+  schemaVersion: string;
+  readme: string;
+  modules: Module[];
+}
+
+const filePath = path.join(process.cwd(), 'custom-elements.json');
+
+const data: CustomElementsJson = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+
+const filteredModules = data.modules
+  .map((module): Module | null => {
+    if (!module.declarations || !Array.isArray(module.declarations)) {
+      return null;
+    }
+
+    const filteredDeclarations = module.declarations.filter(
+      (declaration: Declaration) => {
+        return declaration.name && declaration.name.startsWith('Obc');
+      }
+    );
+
+    if (filteredDeclarations.length === 0) {
+      return null;
+    }
+
+    return {
+      ...module,
+      declarations: filteredDeclarations,
+    };
+  })
+  .filter((module): module is Module => module !== null);
+
+filteredModules.sort((a, b) => {
+  const pathA = a.path || '';
+  const pathB = b.path || '';
+  return pathA.localeCompare(pathB);
+});
+
+const result: CustomElementsJson = {
+  ...data,
+  modules: filteredModules,
+};
+
+fs.writeFileSync(filePath, JSON.stringify(result, null, 2) + '\n', 'utf8');
+
+console.log(
+  `Filtered and sorted ${filteredModules.length} modules with Obc declarations`
+);
+console.log(`Original file had ${data.modules.length} modules`);

package/src/components/badge/badge.css

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   border-style: solid;
-  border-radius: var(--app-components-badge-border-radius);
+  border-radius: var(--ui-components-badge-border-radius);
   padding: calc(var(--ui-components-badge-padding) - 1px);
   border: 1px solid var(--alert-alarm-outline-color);
   background: var(--alert-alarm-color);
@@ -18,8 +18,8 @@
   }
 
   .icon {
-    width: var(--app-components-badge-icon-size);
-    height: var(--app-components-badge-icon-size);
+    width: var(--ui-components-badge-icon-size);
+    height: var(--ui-components-badge-icon-size);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -33,18 +33,18 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 0 var(--app-components-badge-label-spacing) 1px
-      var(--app-components-badge-label-spacing);
-    height: var(--app-components-badge-icon-size);
-    min-width: var(--app-components-badge-icon-size);
+    padding: 0 var(--ui-components-badge-label-spacing) 1px
+      var(--ui-components-badge-label-spacing);
+    height: var(--ui-components-badge-icon-size);
+    min-width: var(--ui-components-badge-icon-size);
   }
 
   &.size-large {
     display: inline-flex;
     width: fit-content;
     height: 24px;
-    min-width: var(--app-components-badge-min-size-large);
-    min-height: var(--app-components-badge-min-size-large);
+    min-width: var(--ui-components-badge-min-size-large);
+    min-height: var(--ui-components-badge-min-size-large);
 
     padding: calc(var(--ui-components-badge-padding) - 1px);
     justify-content: center;
@@ -60,8 +60,8 @@
     }
 
     & .icon {
-      width: var(--app-components-badge-icon-size-large);
-      height: var(--app-components-badge-icon-size-large);
+      width: var(--ui-components-badge-icon-size-large);
+      height: var(--ui-components-badge-icon-size-large);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -132,8 +132,8 @@
     border-color: var(--flat-enabled-background-color);
 
     .icon {
-      min-width: var(--app-components-badge-icon-size);
-      min-height: var(--app-components-badge-icon-size);
+      min-width: var(--ui-components-badge-icon-size);
+      min-height: var(--ui-components-badge-icon-size);
     }
 
     .icon.type-alarm {
@@ -187,8 +187,8 @@
     }
 
     & .icon.type-outline {
-      width: var(--app-components-badge-icon-size-flat);
-      height: var(--app-components-badge-icon-size-flat);
+      width: var(--ui-components-badge-icon-size-flat);
+      height: var(--ui-components-badge-icon-size-flat);
     }
 
     .icon.type-outline + .number {

package/src/components/badge/badge.stories.ts

@@ -106,6 +106,7 @@ export const NoNumber: Story = {
   render(args) {
     return html`<obc-badge
       .showNumber=${args.showNumber}
+      .showIcon=${args.showIcon}
       size=${args.size}
       type=${args.type}
       variant=${args.variant}
@@ -126,6 +127,7 @@ export const NoNumberLarge: Story = {
   render(args) {
     return html`<obc-badge
       .showNumber=${args.showNumber}
+      .showIcon=${args.showIcon}
       size=${args.size}
       type=${args.type}
       variant=${args.variant}

package/src/components/icon-button/icon-button.ts

@@ -58,6 +58,9 @@ export enum IconButtonVariant {
  * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |
  * | label     | If `hasLabel` is set | Optional label text below the icon           |
  *
+ * ## Events
+ * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.
+ *
  * ## Best Practices
  * - Ensure icons are clear and universally recognizable.
  * - For accessibility, provide an `aria-label` or descriptive label for the button's action.
@@ -77,6 +80,7 @@ export enum IconButtonVariant {
  *
  * @slot - Icon slot (default): Place an icon such as <obi-search> here.
  * @slot label - Optional label shown below the icon when `hasLabel` is true.
+ * @fires click - Fired when the button is clicked (if not disabled).
  */
 @customElement('obc-icon-button')
 export class ObcIconButton extends LitElement {

package/src/navigation-instruments/compass/compass.stories.ts

@@ -30,7 +30,7 @@ const meta: Meta<typeof ObcCompass> = {
       },
     ],
     headingSetpoint: 311,
-    windSpeed: 4,
+    currentWindSpeedKnots: 20,
     windFromDirection: 45,
     currentSpeed: 3,
     currentFromDirection: 60,
@@ -51,7 +51,10 @@ const meta: Meta<typeof ObcCompass> = {
     heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
     courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
     headingSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
-    windSpeed: {control: {type: 'range', min: 0, max: 14, step: 1}},
+    currentWindSpeedKnots: {
+      control: {type: 'range', min: 0, max: 75, step: 1},
+      description: 'Wind speed in knots.',
+    },
     windFromDirection: {control: {type: 'range', min: 0, max: 360, step: 1}},
     currentSpeed: {control: {type: 'range', min: 0, max: 4, step: 1}},
     currentFromDirection: {control: {type: 'range', min: 0, max: 360, step: 1}},

package/src/navigation-instruments/compass/compass.ts

@@ -78,7 +78,7 @@ export enum CompassPriorityElement {
  * - Use `headingSetpoint` to show a target heading marker.
  * - Pass `headingAdvices` as an array of `AngleAdvice` objects for
  *   caution/alert zones.
- * - Set `windSpeed` / `windFromDirection` and `currentSpeed` /
+ * - Set `currentWindSpeedKnots` / `windFromDirection` and `currentSpeed` /
  *   `currentFromDirection` to display environmental indicators.
  *
  * ## Example
@@ -102,7 +102,7 @@ export enum CompassPriorityElement {
  * @property {number} autoAtHeadingSetpointDeadband - The deadband for the heading set point in degrees.
  * @property {boolean} touching - Indicates if the compass is being touched.
  * @property {Array<AngleAdvice>} headingAdvices - An array of angle advices for the compass.
- * @property {number | null} windSpeed - The wind speed in beaufort scale number.
+ * @property {number | null} currentWindSpeedKnots - The wind speed in knots.
  * @property {number | null} windFromDirection - The direction the wind is coming from in degrees.
  * @property {number | null} currentSpeed - The current speed, number of arrows.
  * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.
@@ -133,7 +133,7 @@ export class ObcCompass extends LitElement {
   @property({type: Boolean}) animateSetpoint: boolean = false;
   @property({type: Boolean}) touching: boolean = false;
   @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
-  @property({type: Number}) windSpeed: number | null = null;
+  @property({type: Number}) currentWindSpeedKnots: number | null = null;
   @property({type: Number}) windFromDirection: number | null = null;
   @property({type: Number}) currentSpeed: number | null = null;
   @property({type: Number}) currentFromDirection: number | null = null;
@@ -311,7 +311,7 @@ export class ObcCompass extends LitElement {
               transform: `rotate(${this.heading}deg)`,
             },
           ]}
-          .wind=${this.windSpeed}
+          .windKnots=${this.currentWindSpeedKnots}
           .windFromDirectionDeg=${this.windFromDirection}
           .windColor=${this.colorFor(CompassPriorityElement.wind)}
           .current=${this.currentSpeed}

package/src/navigation-instruments/compass-indicator/compass-indicator.stories.ts

@@ -1,4 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
 import {
   CompassIndicatorDirection,
   CompassIndicatorType,
@@ -6,17 +7,26 @@ import {
 } from './compass-indicator.js';
 import './compass-indicator.js';
 
-const meta: Meta<typeof ObcCompassIndicator> = {
+const meta: Meta<ObcCompassIndicator> = {
   title: 'Indicators/Compass Indicator',
   tags: ['autodocs', '6.0'],
   component: 'obc-compass-indicator',
   parameters: {
     layout: 'centered',
   },
+  render: (args) => html`
+    <obc-compass-indicator
+      .angle=${args.angle}
+      .type=${args.type}
+      .direction=${args.direction}
+      .northUp=${args.northUp}
+    ></obc-compass-indicator>
+  `,
   args: {
     angle: 315,
     type: CompassIndicatorType.Regular,
     direction: CompassIndicatorDirection.Heading,
+    northUp: true,
   },
   argTypes: {
     angle: {
@@ -30,6 +40,11 @@ const meta: Meta<typeof ObcCompassIndicator> = {
       control: 'select',
       options: Object.values(CompassIndicatorDirection),
     },
+    northUp: {
+      control: 'boolean',
+      description:
+        'When true the compass face stays north-up and the arrow rotates; when false the arrow stays vertical and the face rotates (heading-up / course-up).',
+    },
   },
 } satisfies Meta<ObcCompassIndicator>;
 
@@ -87,3 +102,21 @@ export const LabeledNorth: Story = {
     angle: 315,
   },
 };
+
+export const RegularHeadingHeadingUp: Story = {
+  args: {
+    type: CompassIndicatorType.Regular,
+    direction: CompassIndicatorDirection.Heading,
+    angle: 45,
+    northUp: false,
+  },
+};
+
+export const RegularCourseCourseUp: Story = {
+  args: {
+    type: CompassIndicatorType.Regular,
+    direction: CompassIndicatorDirection.Course,
+    angle: 45,
+    northUp: false,
+  },
+};

package/src/navigation-instruments/compass-indicator/compass-indicator.ts

@@ -39,6 +39,7 @@ export enum CompassIndicatorDirection {
  * - **Types**: `regular` shows the circular compass indicator; `labeled` shows a framed indicator with a single cardinal label.
  * - **Directions**: `heading`, `course`, and `north` each use their own visual symbol.
  * - **Angle-driven output**: `angle` rotates the active symbol and drives the derived label in labeled mode.
+ * - **Orientation**: `northUp` keeps the compass face fixed north-up and rotates the arrow; when `false` the face rotates and the arrow stays pointing up (heading-up / course-up).
  *
  * ## Usage Guidelines
  *
@@ -47,6 +48,8 @@ export enum CompassIndicatorDirection {
  * - Use `direction="north"` for the north marker / bearing-style indicator.
  * - Switch `type` to `labeled` when the indicator should also communicate the
  *   nearest cardinal direction as text.
+ * - Set `northUp` to `false` to render a heading-up / course-up presentation
+ *   where the arrow stays vertical and the compass face rotates instead.
  */
 @customElement('obc-compass-indicator')
 export class ObcCompassIndicator extends LitElement {
@@ -61,6 +64,17 @@ export class ObcCompassIndicator extends LitElement {
   @property({type: String})
   direction: CompassIndicatorDirection = CompassIndicatorDirection.Heading;
 
+  /**
+   * When `true` (default) the compass face stays north-up and the arrow
+   * rotates by `angle`. When `false` the arrow stays pointing up and the
+   * compass face rotates instead (heading-up / course-up presentation).
+   *
+   * Declared with `attribute: false` because the default is `true`; set it
+   * via the JavaScript property (or framework binding) to opt out.
+   */
+  @property({type: Boolean, attribute: false})
+  northUp: boolean = true;
+
   private get normalizedAngle(): number {
     return normalizeAngle(this.angle);
   }
@@ -381,7 +395,11 @@ export class ObcCompassIndicator extends LitElement {
       return this.renderLabeledIndicator(this.direction);
     }
 
-    return this.renderRoundIndicator(this.direction, 0, -this.normalizedAngle);
+    return this.renderRoundIndicator(
+      this.direction,
+      this.northUp ? this.normalizedAngle : 0,
+      this.northUp ? 0 : -this.normalizedAngle
+    );
   }
 
   static override styles = unsafeCSS(componentStyle);

package/src/navigation-instruments/velocity-projection-plot/velocity-projection-plot.stories.ts

@@ -38,16 +38,16 @@ const meta: Meta<typeof ObcVelocityProjectionPlot> = {
     steps: {
       control: {type: 'range', min: 1, max: 360, step: 1},
     },
-    instantWindDirectionDeg: {
+    currentWindFromDirection: {
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
-    instantWindSpeedNumber: {
-      control: {type: 'range', min: 0, max: 12, step: 1},
+    currentWindSpeedKnots: {
+      control: {type: 'range', min: 0, max: 75, step: 1},
     },
-    instantCurrentDirectionDeg: {
+    currentFromDirection: {
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
-    instantCurrentSpeedNumber: {
+    currentSpeedKnots: {
       control: {type: 'range', min: 0, max: 4, step: 1},
     },
     vesselImage: {
@@ -63,10 +63,10 @@ const meta: Meta<typeof ObcVelocityProjectionPlot> = {
     console.log(dataPoints);
     return html`<obc-velocity-projection-plot
       .dataPoints=${dataPoints}
-      .instantWindDirectionDeg=${args.instantWindDirectionDeg}
-      .instantWindSpeedNumber=${args.instantWindSpeedNumber}
-      .instantCurrentDirectionDeg=${args.instantCurrentDirectionDeg}
-      .instantCurrentSpeedNumber=${args.instantCurrentSpeedNumber}
+      .currentWindFromDirection=${args.currentWindFromDirection}
+      .currentWindSpeedKnots=${args.currentWindSpeedKnots}
+      .currentFromDirection=${args.currentFromDirection}
+      .currentSpeedKnots=${args.currentSpeedKnots}
       .vesselImage=${args.vesselImage}
     ></obc-velocity-projection-plot>`;
   },
@@ -81,10 +81,10 @@ export const Average: Story = {
 
 export const Instantaneous: Story = {
   args: {
-    instantWindDirectionDeg: 90,
-    instantWindSpeedNumber: 3,
-    instantCurrentDirectionDeg: 0,
-    instantCurrentSpeedNumber: 1,
+    currentWindFromDirection: 90,
+    currentWindSpeedKnots: 3,
+    currentFromDirection: 0,
+    currentSpeedKnots: 1,
   },
 };
 function generateDataPoints(

package/src/navigation-instruments/velocity-projection-plot/velocity-projection-plot.ts

@@ -24,18 +24,22 @@ export class ObcVelocityProjectionPlot extends LitElement {
   @property({type: Array, attribute: false})
   dataPoints: VelocityProjectionDatapoint[] = [];
   @property({type: Number})
-  instantWindDirectionDeg: number | null = null;
+  currentWindFromDirection: number | null = null;
   @property({type: Number})
-  instantWindSpeedNumber: number | null = null;
+  currentWindSpeedKnots: number | null = null;
   @property({type: Number})
-  instantCurrentDirectionDeg: number | null = null;
+  currentFromDirection: number | null = null;
   @property({type: Number})
-  instantCurrentSpeedNumber: number | null = null;
+  currentSpeedKnots: number | null = null;
   @property({type: String})
   vesselImage: VesselImage = VesselImage.cargoWindTop;
   override render() {
     const width = 320;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const currentLevel =
+      this.currentSpeedKnots == null
+        ? null
+        : Math.max(0, Math.min(4, Math.round(this.currentSpeedKnots)));
 
     return html`
       <div class="container">
@@ -49,10 +53,10 @@ export class ObcVelocityProjectionPlot extends LitElement {
               transform: '',
             },
           ]}
-          .windFromDirectionDeg=${this.instantWindDirectionDeg}
-          .wind=${this.instantWindSpeedNumber}
-          .currentFromDirectionDeg=${this.instantCurrentDirectionDeg}
-          .current=${this.instantCurrentSpeedNumber}
+          .windFromDirectionDeg=${this.currentWindFromDirection}
+          .windKnots=${this.currentWindSpeedKnots}
+          .currentFromDirectionDeg=${this.currentFromDirection}
+          .current=${currentLevel}
           .padding=${70}
         >
         </obc-watch>
@@ -62,10 +66,10 @@ export class ObcVelocityProjectionPlot extends LitElement {
   }
 
   private isSelected(dp: VelocityProjectionDatapoint): boolean {
-    if (this.instantWindDirectionDeg != null) {
+    if (this.currentWindFromDirection != null) {
       return (
-        dp.startAngleDeg <= this.instantWindDirectionDeg &&
-        dp.endAngleDeg >= this.instantWindDirectionDeg
+        dp.startAngleDeg <= this.currentWindFromDirection &&
+        dp.endAngleDeg >= this.currentWindFromDirection
       );
     }
     return true;