@sebgroup/green-core 3.29.0 → 3.31.0
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/components/calendar/calendar.component.js +2 -0
- package/components/coachmark/coachmark.component.js +3 -1
- package/components/datepicker/datepicker.component.js +9 -0
- package/components/dropdown/dropdown.component.js +4 -6
- package/components/index.d.ts +1 -0
- package/components/index.js +1 -0
- package/components/popover/popover.component.js +16 -2
- package/components/progress/progress.component.js +2 -0
- package/components/table/table.component.js +24 -15
- package/components/table/table.stories.data.js +6 -2
- package/components/table/table.styles.js +83 -4
- package/components/table/table.types.d.ts +2 -0
- package/components/tooltip/index.d.ts +1 -0
- package/components/tooltip/index.js +1 -0
- package/components/tooltip/tooltip.component.d.ts +52 -0
- package/components/tooltip/tooltip.component.js +339 -0
- package/components/tooltip/tooltip.d.ts +2 -0
- package/components/tooltip/tooltip.js +6 -0
- package/components/tooltip/tooltip.styles.d.ts +2 -0
- package/components/tooltip/tooltip.styles.js +120 -0
- package/custom-elements.json +26257 -25779
- package/gds-element.js +1 -1
- package/generated/mcp/components.json +13 -1
- package/generated/mcp/icons.json +1 -1
- package/generated/mcp/index.json +1 -1
- package/generated/mcp/tokens.json +1 -1
- package/generated/mcp/tooltip/angular.md +25 -0
- package/generated/mcp/tooltip/api.md +30 -0
- package/generated/mcp/tooltip/index.json +8 -0
- package/generated/mcp/tooltip/react.md +25 -0
- package/generated/react/index.d.ts +4 -3
- package/generated/react/index.js +4 -3
- package/generated/react/tooltip/index.d.ts +683 -0
- package/generated/react/tooltip/index.js +14 -0
- package/package.json +3 -1
- package/pure.d.ts +1 -0
- package/pure.js +1 -0
- package/utils/helpers/custom-element-scoping.js +1 -1
- package/utils/localization/localization.d.ts +9 -0
- package/utils/localization/localization.js +6 -1
package/gds-element.js
CHANGED
|
@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
|
|
|
16
16
|
/**
|
|
17
17
|
* The semantic version of this element. Can be used for troubleshooting to verify the version being used.
|
|
18
18
|
*/
|
|
19
|
-
this.semanticVersion = "3.
|
|
19
|
+
this.semanticVersion = "3.31.0";
|
|
20
20
|
this.syncFirstRender = false;
|
|
21
21
|
this._isUsingTransitionalStyles = false;
|
|
22
22
|
this._dynamicStylesController = new DynamicStylesController(this);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"generatedAt": "2026-10-20T14:04:05.572Z",
|
|
3
3
|
"components": [
|
|
4
4
|
{
|
|
5
5
|
"name": "gds-alert",
|
|
@@ -836,6 +836,18 @@
|
|
|
836
836
|
"react"
|
|
837
837
|
]
|
|
838
838
|
},
|
|
839
|
+
{
|
|
840
|
+
"name": "gds-tooltip",
|
|
841
|
+
"tagName": "gds-tooltip",
|
|
842
|
+
"className": "GdsTooltip",
|
|
843
|
+
"description": "",
|
|
844
|
+
"path": "tooltip/",
|
|
845
|
+
"files": [
|
|
846
|
+
"api",
|
|
847
|
+
"angular",
|
|
848
|
+
"react"
|
|
849
|
+
]
|
|
850
|
+
},
|
|
839
851
|
{
|
|
840
852
|
"name": "gds-video",
|
|
841
853
|
"tagName": "gds-video",
|
package/generated/mcp/icons.json
CHANGED
package/generated/mcp/index.json
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# gds-tooltip - Angular
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { GdsTooltipComponent } from '@sebgroup/green-core-ng'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
Use the component in your Angular templates:
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<gds-tooltip>
|
|
15
|
+
<!-- content -->
|
|
16
|
+
</gds-tooltip>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Event Handling
|
|
20
|
+
|
|
21
|
+
Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
|
|
22
|
+
|
|
23
|
+
| Web Component Event | Angular Output | Handler Example |
|
|
24
|
+
|---------------------|----------------|-----------------|
|
|
25
|
+
| `gds-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# gds-tooltip
|
|
2
|
+
|
|
3
|
+
**Class**: `GdsTooltip`
|
|
4
|
+
|
|
5
|
+
**Tag**: `<gds-tooltip>`
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Name | Type | Default | Description |
|
|
11
|
+
|------|------|---------|-------------|
|
|
12
|
+
| `open` | `boolean` | `-` | Whether the tooltip is visible. |
|
|
13
|
+
| `for` | `string \| undefined` | `-` | The id of the trigger element. The id is resolved in the same document or shadow root as the tooltip. |
|
|
14
|
+
| `placement` | `Placement` | `-` | The preferred placement of the tooltip relative to the trigger. The tooltip flips and shifts automatically when there is not enough space. Accepts any of the placements supported by Floating UI. |
|
|
15
|
+
| `delay` | `number` | `-` | Delay in milliseconds before the tooltip opens on hover. Keyboard focus opens it without delay, and so does hovering another trigger right after a tooltip was shown. |
|
|
16
|
+
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`. This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected. Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## Events
|
|
20
|
+
|
|
21
|
+
| Name | Type | Description |
|
|
22
|
+
|------|------|-------------|
|
|
23
|
+
| `gds-ui-state` | `CustomEvent<any>` | Fired when the tooltip is about to open or close. Can be cancelled to prevent the state change. The `detail` object contains the `open` boolean for the resulting state, and the `reason` string, which is one of `show`, `close` or `cancel`. |
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## Slots
|
|
27
|
+
|
|
28
|
+
| Name | Description |
|
|
29
|
+
|------|-------------|
|
|
30
|
+
| `(default)` | The tooltip text. |
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# gds-tooltip - React
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { GdsTooltip } from '@sebgroup/green-core/react'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
Use the component as a React JSX element:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<GdsTooltip>
|
|
15
|
+
{/* content */}
|
|
16
|
+
</GdsTooltip>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Event Handling
|
|
20
|
+
|
|
21
|
+
Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
|
|
22
|
+
|
|
23
|
+
| Web Component Event | React Handler Prop | Handler Example |
|
|
24
|
+
|---------------------|--------------------|-----------------|
|
|
25
|
+
| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from './alert/index.js';
|
|
2
2
|
export * from './avatar/index.js';
|
|
3
|
-
export * from './badge/index.js';
|
|
4
3
|
export * from './blur/index.js';
|
|
4
|
+
export * from './badge/index.js';
|
|
5
5
|
export * from './breadcrumbs/index.js';
|
|
6
6
|
export * from './button/index.js';
|
|
7
7
|
export * from './calendar/index.js';
|
|
@@ -45,8 +45,9 @@ export * from './table/index.js';
|
|
|
45
45
|
export * from './tabs/index.js';
|
|
46
46
|
export * from './text/index.js';
|
|
47
47
|
export * from './textarea/index.js';
|
|
48
|
-
export * from './
|
|
48
|
+
export * from './tooltip/index.js';
|
|
49
49
|
export * from './video/index.js';
|
|
50
|
+
export * from './theme/index.js';
|
|
50
51
|
export * from './card-pattern-01/index.js';
|
|
51
52
|
export * from './list-item-pattern-01/index.js';
|
|
52
53
|
export * from './avatar-group/index.js';
|
|
@@ -57,8 +58,8 @@ export * from './filter-chip/index.js';
|
|
|
57
58
|
export * from './formatted-account/index.js';
|
|
58
59
|
export * from './formatted-date/index.js';
|
|
59
60
|
export * from './formatted-number/index.js';
|
|
60
|
-
export * from './radio-group/index.js';
|
|
61
61
|
export * from './list-item/index.js';
|
|
62
|
+
export * from './radio-group/index.js';
|
|
62
63
|
export * from './segment/index.js';
|
|
63
64
|
export * from './sensitive-account/index.js';
|
|
64
65
|
export * from './sensitive-date/index.js';
|
package/generated/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from "./alert/index.js";
|
|
2
2
|
export * from "./avatar/index.js";
|
|
3
|
-
export * from "./badge/index.js";
|
|
4
3
|
export * from "./blur/index.js";
|
|
4
|
+
export * from "./badge/index.js";
|
|
5
5
|
export * from "./breadcrumbs/index.js";
|
|
6
6
|
export * from "./button/index.js";
|
|
7
7
|
export * from "./calendar/index.js";
|
|
@@ -45,8 +45,9 @@ export * from "./table/index.js";
|
|
|
45
45
|
export * from "./tabs/index.js";
|
|
46
46
|
export * from "./text/index.js";
|
|
47
47
|
export * from "./textarea/index.js";
|
|
48
|
-
export * from "./
|
|
48
|
+
export * from "./tooltip/index.js";
|
|
49
49
|
export * from "./video/index.js";
|
|
50
|
+
export * from "./theme/index.js";
|
|
50
51
|
export * from "./card-pattern-01/index.js";
|
|
51
52
|
export * from "./list-item-pattern-01/index.js";
|
|
52
53
|
export * from "./avatar-group/index.js";
|
|
@@ -57,8 +58,8 @@ export * from "./filter-chip/index.js";
|
|
|
57
58
|
export * from "./formatted-account/index.js";
|
|
58
59
|
export * from "./formatted-date/index.js";
|
|
59
60
|
export * from "./formatted-number/index.js";
|
|
60
|
-
export * from "./radio-group/index.js";
|
|
61
61
|
export * from "./list-item/index.js";
|
|
62
|
+
export * from "./radio-group/index.js";
|
|
62
63
|
export * from "./segment/index.js";
|
|
63
64
|
export * from "./sensitive-account/index.js";
|
|
64
65
|
export * from "./sensitive-date/index.js";
|