@sebgroup/green-core 1.85.2 → 1.85.3
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.
- package/README.md +4 -4
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/segmented-control/index.d.ts +1 -0
- package/components/segmented-control/index.js +1 -0
- package/generated/react/index.d.ts +5 -5
- package/generated/react/index.js +5 -5
- package/generated/react/segmented-control/index.d.ts +1 -1
- package/package.json +1 -1
- package/utils/helpers/custom-element-scoping.js +1 -1
package/README.md
CHANGED
|
@@ -57,7 +57,7 @@ export class MyApp extends LitElement {
|
|
|
57
57
|
|
|
58
58
|
Angular has support for using web components directly in the template. To enable it, you need to do the following:
|
|
59
59
|
|
|
60
|
-
Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the
|
|
60
|
+
Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the modules/components where you need it, and not in the app module.
|
|
61
61
|
|
|
62
62
|
You also need the `NggCoreWrapperModule` from `@sebgroup/green-angular`.
|
|
63
63
|
|
|
@@ -86,7 +86,7 @@ import * as ButtonStyles from '@sebgroup/green-core/components/button/button.tra
|
|
|
86
86
|
ButtonStyles.register()
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
Use the
|
|
89
|
+
Use the web component in your template with the `*nggCoreElement` directive.
|
|
90
90
|
|
|
91
91
|
In your template:
|
|
92
92
|
|
|
@@ -94,11 +94,11 @@ In your template:
|
|
|
94
94
|
<gds-button *nggCoreElement>Click me!</gds-button>
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
-
The `*nggCoreElement` directive comes from the `NggCoreWrapperModule` you imported above. It has the same
|
|
97
|
+
The `*nggCoreElement` directive comes from the `NggCoreWrapperModule` you imported above. It has the same purpose as the custom html template tag mentioned in the Lit example above: It handles custom element scoping for you.
|
|
98
98
|
|
|
99
99
|
### Using React
|
|
100
100
|
|
|
101
|
-
In most cases, we already
|
|
101
|
+
In most cases, we already export React wrappers for these components from the `@sebgroup/green-react` package. In those cases you can just use those. But you can also easily create your own wrappers using `@lit/react`.
|
|
102
102
|
|
|
103
103
|
Here is an example:
|
|
104
104
|
|
package/components/index.d.ts
CHANGED
package/components/index.js
CHANGED
|
@@ -51,11 +51,6 @@ export * from './filter-chip/index.js';
|
|
|
51
51
|
export * from './formatted-account/index.js';
|
|
52
52
|
export * from './formatted-date/index.js';
|
|
53
53
|
export * from './formatted-number/index.js';
|
|
54
|
-
export * from './radio-group/index.js';
|
|
55
|
-
export * from './segment/index.js';
|
|
56
|
-
export * from './sensitive-account/index.js';
|
|
57
|
-
export * from './sensitive-number/index.js';
|
|
58
|
-
export * from './sensitive-date/index.js';
|
|
59
54
|
export * from './icons/icon-ai/index.js';
|
|
60
55
|
export * from './icons/icon-airplane-up/index.js';
|
|
61
56
|
export * from './icons/icon-archive/index.js';
|
|
@@ -343,3 +338,8 @@ export * from './icons/icon-youtube/index.js';
|
|
|
343
338
|
export * from './icons/icon-zap/index.js';
|
|
344
339
|
export * from './icons/icon-zoom-in/index.js';
|
|
345
340
|
export * from './icons/icon-zoom-out/index.js';
|
|
341
|
+
export * from './radio-group/index.js';
|
|
342
|
+
export * from './segment/index.js';
|
|
343
|
+
export * from './sensitive-account/index.js';
|
|
344
|
+
export * from './sensitive-date/index.js';
|
|
345
|
+
export * from './sensitive-number/index.js';
|
package/generated/react/index.js
CHANGED
|
@@ -51,11 +51,6 @@ export * from "./filter-chip/index.js";
|
|
|
51
51
|
export * from "./formatted-account/index.js";
|
|
52
52
|
export * from "./formatted-date/index.js";
|
|
53
53
|
export * from "./formatted-number/index.js";
|
|
54
|
-
export * from "./radio-group/index.js";
|
|
55
|
-
export * from "./segment/index.js";
|
|
56
|
-
export * from "./sensitive-account/index.js";
|
|
57
|
-
export * from "./sensitive-number/index.js";
|
|
58
|
-
export * from "./sensitive-date/index.js";
|
|
59
54
|
export * from "./icons/icon-ai/index.js";
|
|
60
55
|
export * from "./icons/icon-airplane-up/index.js";
|
|
61
56
|
export * from "./icons/icon-archive/index.js";
|
|
@@ -343,3 +338,8 @@ export * from "./icons/icon-youtube/index.js";
|
|
|
343
338
|
export * from "./icons/icon-zap/index.js";
|
|
344
339
|
export * from "./icons/icon-zoom-in/index.js";
|
|
345
340
|
export * from "./icons/icon-zoom-out/index.js";
|
|
341
|
+
export * from "./radio-group/index.js";
|
|
342
|
+
export * from "./segment/index.js";
|
|
343
|
+
export * from "./sensitive-account/index.js";
|
|
344
|
+
export * from "./sensitive-date/index.js";
|
|
345
|
+
export * from "./sensitive-number/index.js";
|
|
@@ -3,7 +3,7 @@ import { GdsSegmentedControl as GdsSegmentedControlClass } from "../../../compon
|
|
|
3
3
|
export declare const GdsSegmentedControl: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsSegmentedControlClass>>>) => import("react").ReactElement<Omit<{
|
|
4
4
|
size?: "small" | "medium" | undefined;
|
|
5
5
|
value?: any;
|
|
6
|
-
readonly segments?: import("
|
|
6
|
+
readonly segments?: import("../../..").GdsSegment<any>[] | undefined;
|
|
7
7
|
intersectionObserver?: IntersectionObserver | null | undefined;
|
|
8
8
|
connectedCallback?: (() => void) | undefined;
|
|
9
9
|
render?: (() => any) | undefined;
|
package/package.json
CHANGED