@oicl/openbridge-webcomponents-ng
v0.0.20260411072018
Published
Angular wrappers for the OpenBridge design system.
Readme
@oicl/openbridge-webcomponents-ng
Angular wrappers for the OpenBridge design system.
This package provides Angular wrappers for the @oicl/openbridge-webcomponents core library. It allows you to use OpenBridge components as native Angular components with full IDE support, props, and event handling.
⚠️ Autogenerated
This package is automatically generated from the core library.
Do not edit this package directly. All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.
🏗️ Project Status
This library is currently in active development. We are gearing up for our first stable release in Q2 2026.
📚 Storybook & Demo
- Storybook: Browse components and view their different states.
- Live Demo: See the components in action.
💾 Installation
npm install @oicl/openbridge-webcomponents-ng🚀 Quick Setup
1. Include CSS Palettes
Add the global OpenBridge CSS file to your angular.json:
"styles": [
"node_modules/@oicl/openbridge-webcomponents/dist/openbridge.css",
"src/styles.css"
]2. Set the Theme
Select the palette by setting the data-obc-theme attribute on the html tag (bright, day, dusk, or night):
<html lang="en" data-obc-theme="day"></html>3. Font Setup
Ensure Noto Sans is available in your project.
🧩 Usage
Import the desired components in your standalone component or module:
import { ObcTopBarComponent } from "@oicl/openbridge-webcomponents-ng";
@Component({
// ...
standalone: true,
imports: [ObcTopBarComponent],
})
export class MyComponent {}Use it in your template:
<obc-top-bar></obc-top-bar>👫 Contributing
Contributions are welcome! Please see the root README and CONTRIBUTING.md for development instructions.