@oicl/openbridge-webcomponents-ng 0.2.2 → 1.0.0-next.2

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.
Files changed (3) hide show
  1. package/README.md +86 -29
  2. package/fesm2022/oicl-openbridge-webcomponents-ng.mjs +6606 -6606
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -1,20 +1,36 @@
1
- # @oicl/openbridge-webcomponents-ng
1
+ # @oicl/openbridge-webcomponents
2
2
 
3
- Angular wrappers for the OpenBridge design system.
3
+ The core library of the OpenBridge design system, implemented as Lit-based web components.
4
4
 
5
- [![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)
5
+ ## 🚀 Project Status
6
+
7
+ **v1.0.0 is now released!** The code was officially opened by **Prince Sverre Magnus of Norway**, and the library is now stable and publicly available.
8
+
9
+ ## 🏷️ Tag Strategy
10
+
11
+ We use npm tags to manage our releases:
12
+
13
+ - **`latest`**: The stable, production-ready version of the library. It is updated approximately once every quarter. It's based on the `stable` branch in the GitHub repository.
14
+ - **`next`**: The latest development version, containing new features and improvements. This version may include breaking changes and is intended for early adopters. It's based on the `develop` branch in the GitHub repository.
15
+
16
+ ## 🤝 Support the Project
17
+
18
+ We are thrilled if you would like to support the OpenBridge Web Components project. Your contribution plays a vital role in maintaining an open, high-quality design system.
19
+
20
+ We invite industry partners to join our Joint Industry Project. By becoming a donor, you help secure the future of the project and gain influence over the roadmap.
6
21
 
7
- This package provides **Angular wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native Angular components with full IDE support, props, and event handling.
22
+ ### Donor Benefits
8
23
 
9
- ## ⚠️ Autogenerated
24
+ By becoming a donor, you aren’t just supporting code—you’re joining a collaborative movement. To show our appreciation, donors receive a specialized benefits package valid for 12 months upon receipt of payment:
10
25
 
11
- This package is **automatically generated** from the core library.
26
+ - **Proudly Show Your Support:** You are authorized to use the official "OpenBridge Member" logo in your marketing materials and corporate communications.
27
+ - **Early & Easy Access:** You gain the right to use all new releases of the project’s software components directly under the Apache License 2.0.
12
28
 
13
- **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.
29
+ ### How to Support
14
30
 
15
- ## 🏗️ Project Status
31
+ If you are interested in supporting the project, please fill out this **[Support Form](https://docs.google.com/forms/d/e/1FAIpQLSc6JVRyyIease2PkUArirNkG0DeTB__YnWEovjVwISlaYdktA/viewform?usp=header)**.
16
32
 
17
- This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.
33
+ For more information, please contact **Torstein A. Bø** at [torstein.bo@openstudio.no](mailto:torstein.bo@openstudio.no) or contact us on [Slack](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ).
18
34
 
19
35
  ## 📚 Storybook & Demo
20
36
 
@@ -23,21 +39,22 @@ This library is currently in active development. We are gearing up for our first
23
39
 
24
40
  ## 💾 Installation
25
41
 
42
+ To use the components in your project, install the package from npm:
43
+
26
44
  ```bash
27
- npm install @oicl/openbridge-webcomponents-ng
45
+ npm install @oicl/openbridge-webcomponents
28
46
  ```
29
47
 
48
+ > **Note:** If you are using Vue, React, Angular, or Svelte, we recommend using our [wrapper packages](#-framework-wrappers) for a better developer experience.
49
+
30
50
  ## 🚀 Quick Setup
31
51
 
32
52
  ### 1. Include CSS Palettes
33
53
 
34
- Add the global OpenBridge CSS file to your `angular.json`:
54
+ Import the global OpenBridge CSS file in your main entry point:
35
55
 
36
- ```json
37
- "styles": [
38
- "node_modules/@oicl/openbridge-webcomponents/dist/openbridge.css",
39
- "src/styles.css"
40
- ]
56
+ ```javascript
57
+ import '@oicl/openbridge-webcomponents/dist/openbridge.css';
41
58
  ```
42
59
 
43
60
  ### 2. Set the Theme
@@ -48,31 +65,71 @@ Select the palette by setting the `data-obc-theme` attribute on the `html` tag (
48
65
  <html lang="en" data-obc-theme="day"></html>
49
66
  ```
50
67
 
51
- ### 3. Font Setup
68
+ ### 3. Set Component Size
69
+
70
+ Select the global component size by setting a class on the `body` tag (`obc-component-size-regular`, `medium`, `large`, or `xl`):
71
+
72
+ ```html
73
+ <body class="obc-component-size-regular"></body>
74
+ ```
75
+
76
+ ### 4. Font Setup
52
77
 
53
- Ensure **Noto Sans** is available in your project.
78
+ The library uses **Noto Sans**. You should ensure it is available in your project.
79
+
80
+ ```css
81
+ @font-face {
82
+ font-family: 'Noto Sans';
83
+ src: url('path/to/NotoSans.ttf');
84
+ }
85
+
86
+ * {
87
+ font-family: 'Noto Sans', sans-serif;
88
+ }
89
+ ```
54
90
 
55
91
  ## 🧩 Usage
56
92
 
57
- Import the desired components in your standalone component or module:
93
+ ### Standard Web Components
58
94
 
59
- ```typescript
60
- import { ObcTopBarComponent } from "@oicl/openbridge-webcomponents-ng";
95
+ Import the components you need:
61
96
 
62
- @Component({
63
- // ...
64
- standalone: true,
65
- imports: [ObcTopBarComponent],
66
- })
67
- export class MyComponent {}
97
+ ```javascript
98
+ import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
68
99
  ```
69
100
 
70
- Use it in your template:
101
+ Use them in your HTML:
71
102
 
72
103
  ```html
73
104
  <obc-top-bar></obc-top-bar>
74
105
  ```
75
106
 
107
+ ### Bundle Version (CDN / Prototyping)
108
+
109
+ For quick prototyping, you can use the bundled version:
110
+
111
+ ```html
112
+ <script
113
+ type="module"
114
+ src="node_modules/@oicl/openbridge-webcomponents/dist/openbridge-webcomponents.bundle.js"
115
+ ></script>
116
+ ```
117
+
118
+ ## 📦 Framework Wrappers
119
+
120
+ For the best experience in your framework of choice, use our auto-generated wrappers:
121
+
122
+ - [`@oicl/openbridge-webcomponents-vue`](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-vue)
123
+ - [`@oicl/openbridge-webcomponents-react`](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-react)
124
+ - [`@oicl/openbridge-webcomponents-ng`](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-ng)
125
+ - [`@oicl/openbridge-webcomponents-svelte`](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-svelte)
126
+
127
+ ## 💬 Slack
128
+
129
+ [![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)
130
+
131
+ [Join our Slack](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ) to get the latest updates and to ask questions.
132
+
76
133
  ## 👫 Contributing
77
134
 
78
- Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
135
+ Contributions are welcome! Please see the [root README](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/blob/stable/README.md) and [CONTRIBUTING.md](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/blob/stable/CONTRIBUTING.md) for development instructions.