@oicl/openbridge-webcomponents-ng 2.0.0-next.3 → 2.0.0-next.30

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 (5) hide show
  1. package/README.md +29 -58
  2. package/package.json +8841 -2
  3. package/fesm2022/oicl-openbridge-webcomponents-ng.mjs +0 -78259
  4. package/fesm2022/oicl-openbridge-webcomponents-ng.mjs.map +0 -1
  5. package/index.d.ts +0 -27895
package/README.md CHANGED
@@ -1,6 +1,14 @@
1
- # @oicl/openbridge-webcomponents
1
+ # @oicl/openbridge-webcomponents-ng
2
2
 
3
- The core library of the OpenBridge design system, implemented as Lit-based web components.
3
+ Angular wrappers for the OpenBridge design system.
4
+
5
+ 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.
6
+
7
+ ## ⚠️ Autogenerated
8
+
9
+ This package is **automatically generated** from the [core library](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/tree/stable/packages/openbridge-webcomponents).
10
+
11
+ **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.
4
12
 
5
13
  ## 🚀 Project Status
6
14
 
@@ -20,14 +28,12 @@ We are thrilled if you would like to support the OpenBridge Web Components proje
20
28
  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.
21
29
 
22
30
  ### Donor Benefits
23
-
24
31
  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:
25
32
 
26
33
  - **Proudly Show Your Support:** You are authorized to use the official "OpenBridge Member" logo in your marketing materials and corporate communications.
27
34
  - **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.
28
35
 
29
36
  ### How to Support
30
-
31
37
  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)**.
32
38
 
33
39
  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).
@@ -39,22 +45,21 @@ For more information, please contact **Torstein A. Bø** at [torstein.bo@openstu
39
45
 
40
46
  ## 💾 Installation
41
47
 
42
- To use the components in your project, install the package from npm:
43
-
44
48
  ```bash
45
- npm install @oicl/openbridge-webcomponents
49
+ npm install @oicl/openbridge-webcomponents-ng
46
50
  ```
47
51
 
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
-
50
52
  ## 🚀 Quick Setup
51
53
 
52
54
  ### 1. Include CSS Palettes
53
55
 
54
- Import the global OpenBridge CSS file in your main entry point:
56
+ Add the global OpenBridge CSS file to your `angular.json`:
55
57
 
56
- ```javascript
57
- import '@oicl/openbridge-webcomponents/dist/openbridge.css';
58
+ ```json
59
+ "styles": [
60
+ "node_modules/@oicl/openbridge-webcomponents/dist/openbridge.css",
61
+ "src/styles.css"
62
+ ]
58
63
  ```
59
64
 
60
65
  ### 2. Set the Theme
@@ -65,65 +70,31 @@ Select the palette by setting the `data-obc-theme` attribute on the `html` tag (
65
70
  <html lang="en" data-obc-theme="day"></html>
66
71
  ```
67
72
 
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
77
-
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
- }
73
+ ### 3. Font Setup
85
74
 
86
- * {
87
- font-family: 'Noto Sans', sans-serif;
88
- }
89
- ```
75
+ Ensure **Noto Sans** is available in your project.
90
76
 
91
77
  ## 🧩 Usage
92
78
 
93
- ### Standard Web Components
79
+ Import the desired components in your standalone component or module:
94
80
 
95
- Import the components you need:
81
+ ```typescript
82
+ import { ObcTopBarComponent } from "@oicl/openbridge-webcomponents-ng";
96
83
 
97
- ```javascript
98
- import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
84
+ @Component({
85
+ // ...
86
+ standalone: true,
87
+ imports: [ObcTopBarComponent],
88
+ })
89
+ export class MyComponent {}
99
90
  ```
100
91
 
101
- Use them in your HTML:
92
+ Use it in your template:
102
93
 
103
94
  ```html
104
95
  <obc-top-bar></obc-top-bar>
105
96
  ```
106
97
 
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
98
  ## 💬 Slack
128
99
 
129
100
  [![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)