@odx/addon-ag-grid 1.0.4 → 1.1.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/dist/main.js +23 -23
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -2,7 +2,7 @@ import { token } from '@odx/design-tokens';
|
|
|
2
2
|
import { createPart, iconOverrides, createTheme } from 'ag-grid-community';
|
|
3
3
|
import { ArrowUpIcon, LinkOffIcon, ChevronDownIcon, MinusIcon, ChevronRightIcon, CheckIcon, ChevronUpIcon, ChevronLeftIcon, SaveIcon, ArrowRightIcon, PlusIcon, TableIcon, PinIcon, PasteIcon, ErrorIcon, SortableIcon, MinimizeIcon, MoreIcon, MenuIcon, MaximizeIcon, LoadingIcon, LinkIcon, ArrowLeftIcon, ChevronRightEndIcon, GroupIcon, RearrangeIcon, ChevronLeftEndIcon, FilterIcon, ViewIcon, ViewOffIcon, FileExcelIcon, EditIcon, ArrowDownIcon, DescendingIcon, FileCsvIcon, CloseIcon, CutIcon, CopyContentIcon, ColumnIcon, ColorpickerIcon, BarChartIcon, CancelIcon, AscendingIcon, ChevronsIcon, AggregationIcon } from '@odx/icons/core';
|
|
4
4
|
|
|
5
|
-
const styles$4 = ".ag-button{transition:var(--odx-transition-reduced);cursor:pointer;text-indent:inherit;text-transform:inherit;text-shadow:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;background:0 0;border:none;margin:0;padding:0;transition-property:background-color,border-color,color;&:disabled{cursor:default}&:focus-visible{outline:var(--odx-focus-ring-outer);box-shadow:var(--odx-focus-ring-inner)}}.ag-standard-button{appearance:none;border:var(--ag-button-border);border-radius:var(--ag-button-border-radius);background-color:var(--ag-button-background-color);cursor:pointer;padding:var(--ag-button-vertical-padding)var(--ag-button-horizontal-padding);color:var(--ag-button-text-color);font-weight:var(--ag-button-font-weight);&:hover{border:var(--ag-button-hover-border);background-color:var(--ag-button-hover-background-color);color:var(--ag-button-hover-text-color)}&:active{border:var(--ag-button-active-border);background-color:var(--ag-button-active-background-color);color:var(--ag-button-active-text-color)}&:disabled{border:var(--ag-button-disabled-border);background-color:var(--ag-button-disabled-background-color);color:var(--ag-button-disabled-text-color)}}";
|
|
5
|
+
const styles$4 = ".ag-button{transition:var(--odx-motion-transition-reduced);cursor:pointer;text-indent:inherit;text-transform:inherit;text-shadow:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;background:0 0;border:none;margin:0;padding:0;transition-property:background-color,border-color,color;&:disabled{cursor:default}&:focus-visible{outline:var(--odx-focus-ring-outer);box-shadow:var(--odx-focus-ring-inner)}}.ag-standard-button{appearance:none;border:var(--ag-button-border);border-radius:var(--ag-button-border-radius);background-color:var(--ag-button-background-color);cursor:pointer;padding:var(--ag-button-vertical-padding)var(--ag-button-horizontal-padding);color:var(--ag-button-text-color);font-weight:var(--ag-button-font-weight);&:hover{border:var(--ag-button-hover-border);background-color:var(--ag-button-hover-background-color);color:var(--ag-button-hover-text-color)}&:active{border:var(--ag-button-active-border);background-color:var(--ag-button-active-background-color);color:var(--ag-button-active-text-color)}&:disabled{border:var(--ag-button-disabled-border);background-color:var(--ag-button-disabled-background-color);color:var(--ag-button-disabled-text-color)}}";
|
|
6
6
|
|
|
7
7
|
const buttonStyleOdx = createPart({
|
|
8
8
|
feature: "buttonStyle",
|
|
@@ -12,7 +12,7 @@ const buttonStyleOdx = createPart({
|
|
|
12
12
|
buttonActiveTextColor: token("color.foreground.inverse"),
|
|
13
13
|
buttonBackgroundColor: token("color.background.primary.rest"),
|
|
14
14
|
buttonBorder: false,
|
|
15
|
-
buttonBorderRadius: token("
|
|
15
|
+
buttonBorderRadius: token("border-radius.control"),
|
|
16
16
|
buttonDisabledBackgroundColor: token("color.background.disabled.rest"),
|
|
17
17
|
buttonDisabledBorder: false,
|
|
18
18
|
buttonDisabledTextColor: token("color.foreground.disabled.rest"),
|
|
@@ -27,7 +27,7 @@ const buttonStyleOdx = createPart({
|
|
|
27
27
|
css: styles$4
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
-
const styles$3 = ".ag-checkbox-input-wrapper,.ag-radio-button-input-wrapper{transition:var(--odx-transition-reduced);border:solid var(--ag-checkbox-border-width)var(--ag-checkbox-unchecked-border-color);background-color:var(--ag-checkbox-unchecked-background-color);width:var(--ag-icon-size);height:var(--ag-icon-size);flex:none;transition-property:background-color,border-color;position:relative;&:after{content:\"\";pointer-events:none;display:block;position:absolute;inset:0;mask-position:50%;mask-repeat:no-repeat}&:where(:focus-within){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&.ag-checked{border-color:var(--ag-checkbox-checked-border-color);background-color:var(--ag-checkbox-checked-background-color);&:after{background-color:var(--ag-checkbox-checked-shape-color)}}&.ag-disabled{filter:grayscale();opacity:.5}& input{appearance:none;opacity:0;cursor:pointer;width:var(--ag-icon-size);height:var(--ag-icon-size);margin:0;display:block}}.ag-checkbox-input-wrapper{border-radius:var(--ag-checkbox-border-radius);&.ag-checked:after{mask-image:var(--ag-checkbox-checked-shape-image)}&.ag-indeterminate{border-color:var(--ag-checkbox-indeterminate-border-color);background-color:var(--ag-checkbox-indeterminate-background-color);&:after{background-color:var(--ag-checkbox-indeterminate-shape-color);mask-image:var(--ag-checkbox-indeterminate-shape-image)}}}.ag-cell-editing-error .ag-checkbox-input-wrapper:focus-within{outline:var(--odx-border-width-thick)solid var(--odx-color-stroke-danger-rest);outline-offset:var(--odx-focus-ring-offset-sm)}.ag-radio-button-input-wrapper{border-radius:100%;&.ag-checked:after{mask-image:var(--ag-radio-checked-shape-image)}}";
|
|
30
|
+
const styles$3 = ".ag-checkbox-input-wrapper,.ag-radio-button-input-wrapper{transition:var(--odx-motion-transition-reduced);border:solid var(--ag-checkbox-border-width)var(--ag-checkbox-unchecked-border-color);background-color:var(--ag-checkbox-unchecked-background-color);width:var(--ag-icon-size);height:var(--ag-icon-size);flex:none;transition-property:background-color,border-color;position:relative;&:after{content:\"\";pointer-events:none;display:block;position:absolute;inset:0;mask-position:50%;mask-repeat:no-repeat}&:where(:focus-within){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&.ag-checked{border-color:var(--ag-checkbox-checked-border-color);background-color:var(--ag-checkbox-checked-background-color);&:after{background-color:var(--ag-checkbox-checked-shape-color)}}&.ag-disabled{filter:grayscale();opacity:.5}& input{appearance:none;opacity:0;cursor:pointer;width:var(--ag-icon-size);height:var(--ag-icon-size);margin:0;display:block}}.ag-checkbox-input-wrapper{border-radius:var(--ag-checkbox-border-radius);&.ag-checked:after{mask-image:var(--ag-checkbox-checked-shape-image)}&.ag-indeterminate{border-color:var(--ag-checkbox-indeterminate-border-color);background-color:var(--ag-checkbox-indeterminate-background-color);&:after{background-color:var(--ag-checkbox-indeterminate-shape-color);mask-image:var(--ag-checkbox-indeterminate-shape-image)}}}.ag-cell-editing-error .ag-checkbox-input-wrapper:focus-within{outline:var(--odx-border-width-thick)solid var(--odx-color-stroke-danger-rest);outline-offset:var(--odx-focus-ring-offset-sm)}.ag-radio-button-input-wrapper{border-radius:100%;&.ag-checked:after{mask-image:var(--ag-radio-checked-shape-image)}}";
|
|
31
31
|
|
|
32
32
|
function getIconContent(icon) {
|
|
33
33
|
return { svg: icon.content || "" };
|
|
@@ -101,18 +101,18 @@ const iconSetOdx = iconOverrides({
|
|
|
101
101
|
const checkboxStyleOdx = createPart({
|
|
102
102
|
feature: "checkboxStyle",
|
|
103
103
|
params: {
|
|
104
|
-
checkboxBorderRadius: token("
|
|
105
|
-
checkboxBorderWidth: token("
|
|
106
|
-
checkboxUncheckedBackgroundColor: token("
|
|
107
|
-
checkboxUncheckedBorderColor: token("
|
|
108
|
-
checkboxCheckedBackgroundColor: token("
|
|
109
|
-
checkboxCheckedBorderColor: token("
|
|
104
|
+
checkboxBorderRadius: token("border-radius.control"),
|
|
105
|
+
checkboxBorderWidth: token("border-width.thin"),
|
|
106
|
+
checkboxUncheckedBackgroundColor: token("color.background.control.rest"),
|
|
107
|
+
checkboxUncheckedBorderColor: token("color.stroke.control.rest"),
|
|
108
|
+
checkboxCheckedBackgroundColor: token("color.background.control.selected"),
|
|
109
|
+
checkboxCheckedBorderColor: token("color.stroke.control.selected"),
|
|
110
110
|
checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
|
|
111
111
|
checkboxCheckedShapeImage: {
|
|
112
112
|
svg: getIconContent(CheckIcon).svg
|
|
113
113
|
},
|
|
114
|
-
checkboxIndeterminateBackgroundColor: token("
|
|
115
|
-
checkboxIndeterminateBorderColor: token("
|
|
114
|
+
checkboxIndeterminateBackgroundColor: token("color.background.control.selected"),
|
|
115
|
+
checkboxIndeterminateBorderColor: token("color.stroke.control.selected"),
|
|
116
116
|
checkboxIndeterminateShapeColor: token("color.foreground.inverse-static"),
|
|
117
117
|
checkboxIndeterminateShapeImage: {
|
|
118
118
|
svg: getIconContent(MinusIcon).svg
|
|
@@ -124,7 +124,7 @@ const checkboxStyleOdx = createPart({
|
|
|
124
124
|
css: styles$3
|
|
125
125
|
});
|
|
126
126
|
|
|
127
|
-
const styles$2 = ".ag-input-field-input[type=number]:not(.ag-number-field-input-stepper){appearance:textfield;&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}}.ag-input-field-input:is(input:not([type]),input[type=text],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],textarea){--_color-background:var(--odx-
|
|
127
|
+
const styles$2 = ".ag-input-field-input[type=number]:not(.ag-number-field-input-stepper){appearance:textfield;&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}}.ag-input-field-input:is(input:not([type]),input[type=text],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],textarea){--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-control);background-color:var(--_color-background);padding-block:calc(var(--odx-control-spacing-md) - var(--odx-border-width-thin));padding-inline:calc(var(--odx-control-spacing-inline-md) - var(--odx-border-width-thin));min-width:var(--odx-control-width-lg);min-height:var(--odx-control-height-md);line-height:inherit;color:inherit;font-family:inherit;font-size:inherit;margin:0;&::placeholder{color:var(--odx-color-foreground-subtle);font-weight:var(--odx-typography-font-weight-normal)}&:disabled{--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest)}&:focus{outline:var(--odx-focus-ring-outer);box-shadow:var(--odx-focus-ring-inner)}&:invalid,&.invalid{--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}}";
|
|
128
128
|
|
|
129
129
|
const inputStyleOdx = createPart({
|
|
130
130
|
feature: "inputStyle",
|
|
@@ -177,7 +177,7 @@ const tabStyleOdx = createPart({
|
|
|
177
177
|
css: styles$1
|
|
178
178
|
});
|
|
179
179
|
|
|
180
|
-
const styles = ".ag-header-cell,.ag-picker-field-wrapper,.ag-select-list-item,.ag-select-list-item:after{transition:var(--odx-transition-reduced);transition-property:background-color}.ag-filter-apply-panel-button{line-height:1.5em}.ag-picker-field-wrapper{--ag-focus-shadow:var(--odx-focus-ring-inner);border-bottom:var(--odx-
|
|
180
|
+
const styles = ".ag-header-cell,.ag-picker-field-wrapper,.ag-select-list-item,.ag-select-list-item:after{transition:var(--odx-motion-transition-reduced);transition-property:background-color}.ag-filter-apply-panel-button{line-height:1.5em}.ag-picker-field-wrapper{--ag-focus-shadow:var(--odx-focus-ring-inner);border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-control);background-color:var(--odx-color-background-control-rest);cursor:pointer;min-width:var(--odx-control-width-lg);&:focus-within{outline:var(--odx-focus-ring-outer)}}.ag-select-list{border-radius:var(--odx-border-radius-control);box-shadow:var(--odx-elevation-shadow-level-2);background-color:var(--odx-color-background-level-2);.ag-select-list-item{border:var(--odx-border-width-thin)solid transparent;cursor:pointer;padding-inline:calc(var(--odx-control-spacing-inline-md) - var(--odx-border-width-thin));height:var(--odx-control-height-md);touch-action:manipulation;display:flex;&.ag-active-item{background-color:var(--odx-color-background-transparent-selected-hover)}}}.ag-header-cell-text{flex:1}.ag-paging-panel .ag-paging-row-summary-panel-number{font-weight:var(--odx-typography-font-weight-semibold)}.ag-cell-focus:not(.ag-cell-range-selected):focus-within,.ag-cell-focus:not(.ag-cell-range-selected).pseudo-focus-within,.pseudo-focus-within-all .ag-cell-focus:not(.ag-cell-range-selected),.ag-cell-range-single-cell,.ag-cell-range-single-cell.ag-cell-range-handle,.ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),.ag-context-menu-open .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group,.ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,.ag-full-width-row.ag-row-focus.pseudo-focus .ag-cell-wrapper.ag-row-group,.pseudo-focus-all .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group{border-width:var(--odx-border-width-thick)}";
|
|
181
181
|
|
|
182
182
|
const coreStylesOdx = createPart({
|
|
183
183
|
feature: "coreStyles",
|
|
@@ -192,12 +192,12 @@ const themeOdx = createTheme().withPart(iconSetOdx).withParams({
|
|
|
192
192
|
foregroundColor: token("color.foreground.rest"),
|
|
193
193
|
borderColor: token("color.stroke.neutral.subtle"),
|
|
194
194
|
backgroundColor: token("color.background.level-1"),
|
|
195
|
-
headerBackgroundColor:
|
|
196
|
-
headerColumnResizeHandleColor: token("
|
|
195
|
+
headerBackgroundColor: "transparent",
|
|
196
|
+
headerColumnResizeHandleColor: token("color.stroke.control.rest"),
|
|
197
197
|
headerRowBorder: {
|
|
198
198
|
style: "solid",
|
|
199
|
-
color: token("
|
|
200
|
-
width: token("
|
|
199
|
+
color: token("color.stroke.control.rest"),
|
|
200
|
+
width: token("border-width.thin")
|
|
201
201
|
},
|
|
202
202
|
fontFamily: token("typography.font-family.base"),
|
|
203
203
|
fontSize: token("typography.font-size.base"),
|
|
@@ -205,7 +205,7 @@ const themeOdx = createTheme().withPart(iconSetOdx).withParams({
|
|
|
205
205
|
rowBorder: {
|
|
206
206
|
style: "solid",
|
|
207
207
|
color: token("color.stroke.neutral.subtle"),
|
|
208
|
-
width: token("
|
|
208
|
+
width: token("border-width.thin")
|
|
209
209
|
},
|
|
210
210
|
rowHeight: token("size.300"),
|
|
211
211
|
rowHoverColor: token("color.background.transparent.hover"),
|
|
@@ -213,16 +213,16 @@ const themeOdx = createTheme().withPart(iconSetOdx).withParams({
|
|
|
213
213
|
selectedRowBackgroundColor: token("color.background.transparent.selected"),
|
|
214
214
|
cellHorizontalPadding: token("spacing.75"),
|
|
215
215
|
pinnedColumnBorder: {
|
|
216
|
-
width: token("
|
|
216
|
+
width: token("border-width.thin"),
|
|
217
217
|
style: "solid",
|
|
218
|
-
color: token("
|
|
218
|
+
color: token("color.stroke.control.rest")
|
|
219
219
|
},
|
|
220
220
|
rangeSelectionBorderColor: token("color.stroke.focus.outer"),
|
|
221
221
|
iconSize: token("control.addon-size-sm"),
|
|
222
222
|
iconButtonActiveColor: token("color.foreground.rest"),
|
|
223
223
|
iconButtonActiveBackgroundColor: token("color.background.transparent.hover"),
|
|
224
224
|
iconButtonColor: token("color.foreground.rest"),
|
|
225
|
-
iconButtonBackgroundColor:
|
|
225
|
+
iconButtonBackgroundColor: "transparent",
|
|
226
226
|
iconButtonActiveIndicatorColor: token("color.foreground.rest"),
|
|
227
227
|
iconButtonHoverBackgroundColor: token("color.background.transparent.hover"),
|
|
228
228
|
iconColor: token("color.foreground.rest"),
|
|
@@ -235,8 +235,8 @@ const themeOdx = createTheme().withPart(iconSetOdx).withParams({
|
|
|
235
235
|
widgetVerticalSpacing: token("spacing.100"),
|
|
236
236
|
footerRowBorder: {
|
|
237
237
|
style: "solid",
|
|
238
|
-
color: token("
|
|
239
|
-
width: token("
|
|
238
|
+
color: token("color.stroke.control.rest"),
|
|
239
|
+
width: token("border-width.thin")
|
|
240
240
|
},
|
|
241
241
|
focusShadow: {
|
|
242
242
|
color: token("color.stroke.focus.outer"),
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/addon-ag-grid",
|
|
3
3
|
"displayName": "ODX AG Grid Theming Addon",
|
|
4
4
|
"description": "A package providing integration and enhancements for ag-Grid within the ODX Foundation project",
|
|
5
|
-
"version": "1.0
|
|
5
|
+
"version": "1.1.0",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -14,20 +14,20 @@
|
|
|
14
14
|
],
|
|
15
15
|
"type": "module",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"ag-grid-community": "^
|
|
17
|
+
"ag-grid-community": "^35.0.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@odx/icons": "^4.0.0",
|
|
21
|
-
"@odx/design-tokens": "^
|
|
21
|
+
"@odx/design-tokens": "^3.0.0"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@odx/icons": "4.0.0",
|
|
25
25
|
"lit": "3.3.1",
|
|
26
|
-
"stylelint": "16.26.
|
|
26
|
+
"stylelint": "16.26.1",
|
|
27
27
|
"@odx-internal/config-stylelint": "0.0.0",
|
|
28
28
|
"@odx-internal/config-typescript": "0.0.0",
|
|
29
29
|
"@odx-internal/config-vite": "0.0.0",
|
|
30
|
-
"@odx/design-tokens": "
|
|
30
|
+
"@odx/design-tokens": "3.0.0"
|
|
31
31
|
},
|
|
32
32
|
"sideEffects": [],
|
|
33
33
|
"exports": {
|