@odx/addon-ag-grid 1.3.0 → 1.3.1
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 +1 -1
- package/dist/lib/parts/button-style.d.ts +19 -17
- package/dist/lib/parts/button-style.js +2 -29
- package/dist/lib/parts/button-style2.js +26 -0
- package/dist/lib/parts/checkbox-style.d.ts +16 -14
- package/dist/lib/parts/checkbox-style.js +2 -34
- package/dist/lib/parts/checkbox-style2.js +25 -0
- package/dist/lib/parts/core-style.js +2 -10
- package/dist/lib/parts/core-style2.js +7 -0
- package/dist/lib/parts/icon-set.d.ts +6 -4
- package/dist/lib/parts/icon-set.js +63 -68
- package/dist/lib/parts/input-style.d.ts +3 -2
- package/dist/lib/parts/input-style.js +2 -10
- package/dist/lib/parts/input-style2.js +7 -0
- package/dist/lib/parts/tab-style.d.ts +22 -20
- package/dist/lib/parts/tab-style.js +2 -49
- package/dist/lib/parts/tab-style2.js +28 -0
- package/dist/lib/theme.d.ts +3 -2
- package/dist/lib/theme.js +63 -67
- package/dist/main.d.ts +7 -6
- package/dist/main.js +7 -6
- package/package.json +14 -16
- package/dist/lib/parts/core-style.d.ts +0 -2
- package/dist/oss-licenses.json +0 -1
package/README.md
CHANGED
|
@@ -87,4 +87,4 @@ const odxTheme = themeOdx
|
|
|
87
87
|
|
|
88
88
|
### Documentation
|
|
89
89
|
|
|
90
|
-
For
|
|
90
|
+
For detailed documentation on how to use the `@odx/addon-ag-grid` package, please visit our <a href="https://ca-odx-storybook-dev.yellowisland-7b13f2d7.westeurope.azurecontainerapps.io/" target="_blank" rel="noopener">storybook documentation</a>.
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import * as _$ag_grid_community0 from "ag-grid-community";
|
|
2
|
+
declare const buttonStyleOdx: _$ag_grid_community0.Part<{
|
|
3
|
+
buttonTextColor: _$ag_grid_community0.ColorValue;
|
|
4
|
+
buttonFontWeight: _$ag_grid_community0.FontWeightValue;
|
|
5
|
+
buttonBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
6
|
+
buttonBorder: _$ag_grid_community0.BorderValue;
|
|
7
|
+
buttonBorderRadius: _$ag_grid_community0.LengthValue;
|
|
8
|
+
buttonHorizontalPadding: _$ag_grid_community0.LengthValue;
|
|
9
|
+
buttonVerticalPadding: _$ag_grid_community0.LengthValue;
|
|
10
|
+
buttonHoverTextColor: _$ag_grid_community0.ColorValue;
|
|
11
|
+
buttonHoverBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
12
|
+
buttonHoverBorder: _$ag_grid_community0.BorderValue;
|
|
13
|
+
buttonActiveTextColor: _$ag_grid_community0.ColorValue;
|
|
14
|
+
buttonActiveBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
15
|
+
buttonActiveBorder: _$ag_grid_community0.BorderValue;
|
|
16
|
+
buttonDisabledTextColor: _$ag_grid_community0.ColorValue;
|
|
17
|
+
buttonDisabledBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
18
|
+
buttonDisabledBorder: _$ag_grid_community0.BorderValue;
|
|
18
19
|
}>;
|
|
20
|
+
export { buttonStyleOdx };
|
|
@@ -1,29 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const styles = ".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)}}";
|
|
5
|
-
|
|
6
|
-
const buttonStyleOdx = createPart({
|
|
7
|
-
feature: "buttonStyle",
|
|
8
|
-
params: {
|
|
9
|
-
buttonActiveBackgroundColor: token("color.background.primary.pressed"),
|
|
10
|
-
buttonActiveBorder: false,
|
|
11
|
-
buttonActiveTextColor: token("color.foreground.inverse"),
|
|
12
|
-
buttonBackgroundColor: token("color.background.primary.rest"),
|
|
13
|
-
buttonBorder: false,
|
|
14
|
-
buttonBorderRadius: token("border-radius.control"),
|
|
15
|
-
buttonDisabledBackgroundColor: token("color.background.disabled.rest"),
|
|
16
|
-
buttonDisabledBorder: false,
|
|
17
|
-
buttonDisabledTextColor: token("color.foreground.disabled.rest"),
|
|
18
|
-
buttonFontWeight: token("typography.font-weight.medium"),
|
|
19
|
-
buttonHorizontalPadding: { calc: `${token("control.spacing-inline-md")} * 2` },
|
|
20
|
-
buttonHoverBackgroundColor: token("color.background.primary.hover"),
|
|
21
|
-
buttonHoverBorder: false,
|
|
22
|
-
buttonHoverTextColor: token("color.foreground.inverse"),
|
|
23
|
-
buttonTextColor: token("color.foreground.inverse"),
|
|
24
|
-
buttonVerticalPadding: token("control.spacing-md")
|
|
25
|
-
},
|
|
26
|
-
css: styles
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
export { buttonStyleOdx };
|
|
1
|
+
var button_style_default = ".ag-button {\n transition: var(--odx-motion-transition-reduced);\n text-indent: inherit;\n text-transform: inherit;\n text-shadow: inherit;\n line-height: inherit;\n word-spacing: inherit;\n letter-spacing: inherit;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n cursor: pointer;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n transition-property: background-color, border-color, color;\n\n &:disabled {\n cursor: default;\n }\n\n &:focus-visible {\n outline: var(--odx-focus-ring-outer);\n box-shadow: var(--odx-focus-ring-inner);\n }\n}\n\n.ag-standard-button {\n appearance: none;\n border: var(--ag-button-border);\n border-radius: var(--ag-button-border-radius);\n background-color: var(--ag-button-background-color);\n padding: var(--ag-button-vertical-padding) var(--ag-button-horizontal-padding);\n color: var(--ag-button-text-color);\n font-weight: var(--ag-button-font-weight);\n cursor: pointer;\n\n &:hover {\n border: var(--ag-button-hover-border);\n background-color: var(--ag-button-hover-background-color);\n color: var(--ag-button-hover-text-color);\n }\n\n &:active {\n border: var(--ag-button-active-border);\n background-color: var(--ag-button-active-background-color);\n color: var(--ag-button-active-text-color);\n }\n\n &:disabled {\n border: var(--ag-button-disabled-border);\n background-color: var(--ag-button-disabled-background-color);\n color: var(--ag-button-disabled-text-color);\n }\n}\n";
|
|
2
|
+
export { button_style_default as default };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import button_style_default from "./button-style.js";
|
|
2
|
+
import { token } from "@odx/design-tokens";
|
|
3
|
+
import { createPart } from "ag-grid-community";
|
|
4
|
+
const buttonStyleOdx = createPart({
|
|
5
|
+
feature: "buttonStyle",
|
|
6
|
+
params: {
|
|
7
|
+
buttonActiveBackgroundColor: token("color.background.primary.pressed"),
|
|
8
|
+
buttonActiveBorder: false,
|
|
9
|
+
buttonActiveTextColor: token("color.foreground.inverse"),
|
|
10
|
+
buttonBackgroundColor: token("color.background.primary.rest"),
|
|
11
|
+
buttonBorder: false,
|
|
12
|
+
buttonBorderRadius: token("border-radius.control"),
|
|
13
|
+
buttonDisabledBackgroundColor: token("color.background.disabled.rest"),
|
|
14
|
+
buttonDisabledBorder: false,
|
|
15
|
+
buttonDisabledTextColor: token("color.foreground.disabled.rest"),
|
|
16
|
+
buttonFontWeight: token("typography.font-weight.medium"),
|
|
17
|
+
buttonHorizontalPadding: { calc: `${token("control.spacing-inline-md")} * 2` },
|
|
18
|
+
buttonHoverBackgroundColor: token("color.background.primary.hover"),
|
|
19
|
+
buttonHoverBorder: false,
|
|
20
|
+
buttonHoverTextColor: token("color.foreground.inverse"),
|
|
21
|
+
buttonTextColor: token("color.foreground.inverse"),
|
|
22
|
+
buttonVerticalPadding: token("control.spacing-md")
|
|
23
|
+
},
|
|
24
|
+
css: button_style_default
|
|
25
|
+
});
|
|
26
|
+
export { buttonStyleOdx };
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import * as _$ag_grid_community0 from "ag-grid-community";
|
|
2
|
+
declare const checkboxStyleOdx: _$ag_grid_community0.Part<{
|
|
3
|
+
checkboxBorderRadius: _$ag_grid_community0.LengthValue;
|
|
4
|
+
checkboxBorderWidth: _$ag_grid_community0.LengthValue;
|
|
5
|
+
checkboxCheckedBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
6
|
+
checkboxCheckedBorderColor: _$ag_grid_community0.ColorValue;
|
|
7
|
+
checkboxCheckedShapeColor: _$ag_grid_community0.ColorValue;
|
|
8
|
+
checkboxCheckedShapeImage: _$ag_grid_community0.ImageValue;
|
|
9
|
+
checkboxIndeterminateBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
10
|
+
checkboxIndeterminateBorderColor: _$ag_grid_community0.ColorValue;
|
|
11
|
+
checkboxIndeterminateShapeColor: _$ag_grid_community0.ColorValue;
|
|
12
|
+
checkboxIndeterminateShapeImage: _$ag_grid_community0.ImageValue;
|
|
13
|
+
checkboxUncheckedBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
14
|
+
checkboxUncheckedBorderColor: _$ag_grid_community0.ColorValue;
|
|
15
|
+
radioCheckedShapeImage: _$ag_grid_community0.ImageValue;
|
|
15
16
|
}>;
|
|
17
|
+
export { checkboxStyleOdx };
|
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { createPart } from 'ag-grid-community';
|
|
4
|
-
import { getIconContent } from './icon-set.js';
|
|
5
|
-
|
|
6
|
-
const styles = ".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)}}";
|
|
7
|
-
|
|
8
|
-
const checkboxStyleOdx = createPart({
|
|
9
|
-
feature: "checkboxStyle",
|
|
10
|
-
params: {
|
|
11
|
-
checkboxBorderRadius: token("border-radius.control"),
|
|
12
|
-
checkboxBorderWidth: token("border-width.thin"),
|
|
13
|
-
checkboxUncheckedBackgroundColor: token("color.background.control.rest"),
|
|
14
|
-
checkboxUncheckedBorderColor: token("color.stroke.control.rest"),
|
|
15
|
-
checkboxCheckedBackgroundColor: token("color.background.control.selected"),
|
|
16
|
-
checkboxCheckedBorderColor: token("color.stroke.control.selected"),
|
|
17
|
-
checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
|
|
18
|
-
checkboxCheckedShapeImage: {
|
|
19
|
-
svg: getIconContent(CheckIcon).svg
|
|
20
|
-
},
|
|
21
|
-
checkboxIndeterminateBackgroundColor: token("color.background.control.selected"),
|
|
22
|
-
checkboxIndeterminateBorderColor: token("color.stroke.control.selected"),
|
|
23
|
-
checkboxIndeterminateShapeColor: token("color.foreground.inverse-static"),
|
|
24
|
-
checkboxIndeterminateShapeImage: {
|
|
25
|
-
svg: getIconContent(MinusIcon).svg
|
|
26
|
-
},
|
|
27
|
-
radioCheckedShapeImage: {
|
|
28
|
-
svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4" /></svg>`
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
css: styles
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export { checkboxStyleOdx };
|
|
1
|
+
var checkbox_style_default = ".ag-checkbox-input-wrapper, .ag-radio-button-input-wrapper {\n transition: var(--odx-motion-transition-reduced);\n border: solid var(--ag-checkbox-border-width) var(--ag-checkbox-unchecked-border-color);\n background-color: var(--ag-checkbox-unchecked-background-color);\n width: var(--ag-icon-size);\n height: var(--ag-icon-size);\n flex: none;\n transition-property: background-color, border-color;\n position: relative;\n\n &:after {\n content: \"\";\n pointer-events: none;\n display: block;\n position: absolute;\n inset: 0;\n mask-position: center;\n mask-repeat: no-repeat;\n }\n\n &:where(:focus-within) {\n outline: var(--odx-focus-ring-outer);\n outline-offset: var(--odx-focus-ring-offset-sm);\n }\n\n &.ag-checked {\n border-color: var(--ag-checkbox-checked-border-color);\n background-color: var(--ag-checkbox-checked-background-color);\n\n &:after {\n background-color: var(--ag-checkbox-checked-shape-color);\n }\n }\n\n &.ag-disabled {\n opacity: .5;\n filter: grayscale();\n }\n\n & input {\n appearance: none;\n opacity: 0;\n width: var(--ag-icon-size);\n height: var(--ag-icon-size);\n cursor: pointer;\n margin: 0;\n display: block;\n }\n}\n\n.ag-checkbox-input-wrapper {\n border-radius: var(--ag-checkbox-border-radius);\n\n &.ag-checked:after {\n mask-image: var(--ag-checkbox-checked-shape-image);\n }\n\n &.ag-indeterminate {\n border-color: var(--ag-checkbox-indeterminate-border-color);\n background-color: var(--ag-checkbox-indeterminate-background-color);\n\n &:after {\n mask-image: var(--ag-checkbox-indeterminate-shape-image);\n background-color: var(--ag-checkbox-indeterminate-shape-color);\n }\n }\n}\n\n.ag-cell-editing-error .ag-checkbox-input-wrapper:focus-within {\n outline: var(--odx-border-width-thick) solid var(--odx-color-stroke-danger-rest);\n outline-offset: var(--odx-focus-ring-offset-sm);\n}\n\n.ag-radio-button-input-wrapper {\n border-radius: 100%;\n\n &.ag-checked:after {\n mask-image: var(--ag-radio-checked-shape-image);\n }\n}\n";
|
|
2
|
+
export { checkbox_style_default as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import checkbox_style_default from "./checkbox-style.js";
|
|
2
|
+
import { getIconContent } from "./icon-set.js";
|
|
3
|
+
import { token } from "@odx/design-tokens";
|
|
4
|
+
import { createPart } from "ag-grid-community";
|
|
5
|
+
import { CheckIcon, MinusIcon } from "@odx/icons/core";
|
|
6
|
+
const checkboxStyleOdx = createPart({
|
|
7
|
+
feature: "checkboxStyle",
|
|
8
|
+
params: {
|
|
9
|
+
checkboxBorderRadius: token("border-radius.control"),
|
|
10
|
+
checkboxBorderWidth: token("border-width.thin"),
|
|
11
|
+
checkboxUncheckedBackgroundColor: token("color.background.control.rest"),
|
|
12
|
+
checkboxUncheckedBorderColor: token("color.stroke.control.rest"),
|
|
13
|
+
checkboxCheckedBackgroundColor: token("color.background.control.selected"),
|
|
14
|
+
checkboxCheckedBorderColor: token("color.stroke.control.selected"),
|
|
15
|
+
checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
|
|
16
|
+
checkboxCheckedShapeImage: { svg: getIconContent(CheckIcon).svg },
|
|
17
|
+
checkboxIndeterminateBackgroundColor: token("color.background.control.selected"),
|
|
18
|
+
checkboxIndeterminateBorderColor: token("color.stroke.control.selected"),
|
|
19
|
+
checkboxIndeterminateShapeColor: token("color.foreground.inverse-static"),
|
|
20
|
+
checkboxIndeterminateShapeImage: { svg: getIconContent(MinusIcon).svg },
|
|
21
|
+
radioCheckedShapeImage: { svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4" /></svg>` }
|
|
22
|
+
},
|
|
23
|
+
css: checkbox_style_default
|
|
24
|
+
});
|
|
25
|
+
export { checkboxStyleOdx };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
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-1);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)}";
|
|
4
|
-
|
|
5
|
-
const coreStylesOdx = createPart({
|
|
6
|
-
feature: "coreStyles",
|
|
7
|
-
css: styles
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
export { coreStylesOdx };
|
|
1
|
+
var core_style_default = ".ag-header-cell, .ag-picker-field-wrapper, .ag-select-list-item, .ag-select-list-item:after {\n transition: var(--odx-motion-transition-reduced);\n transition-property: background-color;\n}\n\n.ag-filter-apply-panel-button {\n line-height: 1.5em;\n}\n\n.ag-picker-field-wrapper {\n --ag-focus-shadow: var(--odx-focus-ring-inner);\n border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-control-rest);\n border-radius: var(--odx-border-radius-control);\n background-color: var(--odx-color-background-control-rest);\n min-width: var(--odx-control-width-lg);\n cursor: pointer;\n\n &:focus-within {\n outline: var(--odx-focus-ring-outer);\n }\n}\n\n.ag-select-list {\n border-radius: var(--odx-border-radius-control);\n box-shadow: var(--odx-elevation-shadow-level-1);\n background-color: var(--odx-color-background-level-2);\n\n & .ag-select-list-item {\n border: var(--odx-border-width-thin) solid transparent;\n padding-inline: calc(var(--odx-control-spacing-inline-md) - var(--odx-border-width-thin));\n height: var(--odx-control-height-md);\n cursor: pointer;\n touch-action: manipulation;\n display: flex;\n\n &.ag-active-item {\n background-color: var(--odx-color-background-transparent-selected-hover);\n }\n }\n}\n\n.ag-header-cell-text {\n flex: 1;\n}\n\n.ag-paging-panel .ag-paging-row-summary-panel-number {\n font-weight: var(--odx-typography-font-weight-semibold);\n}\n\n.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 {\n border-width: var(--odx-border-width-thick);\n}\n";
|
|
2
|
+
export { core_style_default as default };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import * as _$ag_grid_community0 from "ag-grid-community";
|
|
2
|
+
import { AggregationIcon } from "@odx/icons/core";
|
|
3
|
+
declare function getIconContent(icon: typeof AggregationIcon): {
|
|
4
|
+
svg: string;
|
|
4
5
|
};
|
|
5
|
-
|
|
6
|
+
declare const iconSetOdx: _$ag_grid_community0.Part<{}>;
|
|
7
|
+
export { getIconContent, iconSetOdx };
|
|
@@ -1,73 +1,68 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { iconOverrides } from "ag-grid-community";
|
|
2
|
+
import { AggregationIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AscendingIcon, BarChartIcon, CancelIcon, CheckIcon, ChevronDownIcon, ChevronLeftEndIcon, ChevronLeftIcon, ChevronRightEndIcon, ChevronRightIcon, ChevronUpIcon, ChevronsIcon, CloseIcon, ColorpickerIcon, ColumnIcon, CopyContentIcon, CutIcon, DescendingIcon, EditIcon, ErrorIcon, FileCsvIcon, FileExcelIcon, FilterIcon, GroupIcon, LinkIcon, LinkOffIcon, LoadingIcon, MaximizeIcon, MenuIcon, MinimizeIcon, MinusIcon, MoreIcon, PasteIcon, PinIcon, PlusIcon, RearrangeIcon, SaveIcon, SortableIcon, TableIcon, ViewIcon, ViewOffIcon } from "@odx/icons/core";
|
|
4
3
|
function getIconContent(icon) {
|
|
5
|
-
|
|
4
|
+
return { svg: icon.content || "" };
|
|
6
5
|
}
|
|
7
6
|
const iconSetOdx = iconOverrides({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
unlinked: getIconContent(LinkOffIcon),
|
|
69
|
-
up: getIconContent(ArrowUpIcon)
|
|
70
|
-
}
|
|
7
|
+
type: "image",
|
|
8
|
+
mask: true,
|
|
9
|
+
icons: {
|
|
10
|
+
aggregation: getIconContent(AggregationIcon),
|
|
11
|
+
arrows: getIconContent(ChevronsIcon),
|
|
12
|
+
asc: getIconContent(AscendingIcon),
|
|
13
|
+
cancel: getIconContent(CancelIcon),
|
|
14
|
+
chart: getIconContent(BarChartIcon),
|
|
15
|
+
"chevron-up": getIconContent(ChevronUpIcon),
|
|
16
|
+
"chevron-down": getIconContent(ChevronDownIcon),
|
|
17
|
+
"chevron-left": getIconContent(ChevronLeftIcon),
|
|
18
|
+
"chevron-right": getIconContent(ChevronRightIcon),
|
|
19
|
+
"color-picker": getIconContent(ColorpickerIcon),
|
|
20
|
+
columns: getIconContent(ColumnIcon),
|
|
21
|
+
contracted: getIconContent(ChevronRightIcon),
|
|
22
|
+
copy: getIconContent(CopyContentIcon),
|
|
23
|
+
cut: getIconContent(CutIcon),
|
|
24
|
+
cross: getIconContent(CloseIcon),
|
|
25
|
+
csv: getIconContent(FileCsvIcon),
|
|
26
|
+
desc: getIconContent(DescendingIcon),
|
|
27
|
+
down: getIconContent(ArrowDownIcon),
|
|
28
|
+
edit: getIconContent(EditIcon),
|
|
29
|
+
excel: getIconContent(FileExcelIcon),
|
|
30
|
+
expanded: getIconContent(ChevronLeftIcon),
|
|
31
|
+
"eye-slash": getIconContent(ViewOffIcon),
|
|
32
|
+
eye: getIconContent(ViewIcon),
|
|
33
|
+
filter: getIconContent(FilterIcon),
|
|
34
|
+
first: getIconContent(ChevronLeftEndIcon),
|
|
35
|
+
grip: getIconContent(RearrangeIcon),
|
|
36
|
+
group: getIconContent(GroupIcon),
|
|
37
|
+
last: getIconContent(ChevronRightEndIcon),
|
|
38
|
+
left: getIconContent(ArrowLeftIcon),
|
|
39
|
+
linked: getIconContent(LinkIcon),
|
|
40
|
+
loading: getIconContent(LoadingIcon),
|
|
41
|
+
maximize: getIconContent(MaximizeIcon),
|
|
42
|
+
menu: getIconContent(MenuIcon),
|
|
43
|
+
"menu-alt": getIconContent(MoreIcon),
|
|
44
|
+
minimize: getIconContent(MinimizeIcon),
|
|
45
|
+
minus: getIconContent(MinusIcon),
|
|
46
|
+
next: getIconContent(ChevronRightIcon),
|
|
47
|
+
none: getIconContent(SortableIcon),
|
|
48
|
+
"not-allowed": getIconContent(ErrorIcon),
|
|
49
|
+
paste: getIconContent(PasteIcon),
|
|
50
|
+
pin: getIconContent(PinIcon),
|
|
51
|
+
pivot: getIconContent(TableIcon),
|
|
52
|
+
plus: getIconContent(PlusIcon),
|
|
53
|
+
previous: getIconContent(ChevronLeftIcon),
|
|
54
|
+
right: getIconContent(ArrowRightIcon),
|
|
55
|
+
save: getIconContent(SaveIcon),
|
|
56
|
+
"small-down": getIconContent(ChevronDownIcon),
|
|
57
|
+
"small-left": getIconContent(ChevronLeftIcon),
|
|
58
|
+
"small-right": getIconContent(ChevronRightIcon),
|
|
59
|
+
"small-up": getIconContent(ChevronUpIcon),
|
|
60
|
+
tick: getIconContent(CheckIcon),
|
|
61
|
+
"tree-closed": getIconContent(ChevronRightIcon),
|
|
62
|
+
"tree-indeterminate": getIconContent(MinusIcon),
|
|
63
|
+
"tree-open": getIconContent(ChevronDownIcon),
|
|
64
|
+
unlinked: getIconContent(LinkOffIcon),
|
|
65
|
+
up: getIconContent(ArrowUpIcon)
|
|
66
|
+
}
|
|
71
67
|
});
|
|
72
|
-
|
|
73
68
|
export { getIconContent, iconSetOdx };
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import { Part } from
|
|
2
|
-
|
|
1
|
+
import { Part } from "ag-grid-community";
|
|
2
|
+
declare const inputStyleOdx: Part;
|
|
3
|
+
export { inputStyleOdx };
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const styles = ".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)}}";
|
|
4
|
-
|
|
5
|
-
const inputStyleOdx = createPart({
|
|
6
|
-
feature: "inputStyle",
|
|
7
|
-
css: styles
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
export { inputStyleOdx };
|
|
1
|
+
var input_style_default = ".ag-input-field-input[type=\"number\"]:not(.ag-number-field-input-stepper) {\n appearance: textfield;\n\n &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n}\n\n.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) {\n --_color-background: var(--odx-color-background-control-rest);\n --_color-background-hover: var(--odx-color-background-control-hover);\n --_color-stroke: var(--odx-color-stroke-control-rest);\n --_color-stroke-hover: var(--odx-color-stroke-control-hover);\n border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-control-rest);\n border-radius: var(--odx-border-radius-control);\n background-color: var(--_color-background);\n padding-block: calc(var(--odx-control-spacing-md) - var(--odx-border-width-thin));\n padding-inline: calc(var(--odx-control-spacing-inline-md) - var(--odx-border-width-thin));\n min-width: var(--odx-control-width-lg);\n min-height: var(--odx-control-height-md);\n line-height: inherit;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n\n &::placeholder {\n color: var(--odx-color-foreground-subtle);\n font-weight: var(--odx-typography-font-weight-normal);\n }\n\n &:disabled {\n --_color-foreground: var(--odx-color-foreground-disabled-rest);\n --_color-background: var(--odx-color-background-disabled-rest);\n --_color-stroke: var(--odx-color-stroke-disabled-rest);\n }\n\n &:focus {\n outline: var(--odx-focus-ring-outer);\n box-shadow: var(--odx-focus-ring-inner);\n }\n\n &:invalid, &.invalid {\n --_color-background: var(--odx-color-background-danger-subtle);\n --_color-stroke: var(--odx-color-foreground-danger-rest);\n }\n}\n";
|
|
2
|
+
export { input_style_default as default };
|
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import * as _$ag_grid_community0 from "ag-grid-community";
|
|
2
|
+
declare const tabStyleOdx: _$ag_grid_community0.Part<{
|
|
3
|
+
tabBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
4
|
+
tabBarBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
5
|
+
tabBarBorder: _$ag_grid_community0.BorderValue;
|
|
6
|
+
tabBarHorizontalPadding: _$ag_grid_community0.LengthValue;
|
|
7
|
+
tabBarTopPadding: _$ag_grid_community0.LengthValue;
|
|
8
|
+
tabBottomPadding: _$ag_grid_community0.LengthValue;
|
|
9
|
+
tabHorizontalPadding: _$ag_grid_community0.LengthValue;
|
|
10
|
+
tabHoverBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
11
|
+
tabHoverTextColor: _$ag_grid_community0.ColorValue;
|
|
12
|
+
tabSelectedBackgroundColor: _$ag_grid_community0.ColorValue;
|
|
13
|
+
tabSelectedBorderColor: _$ag_grid_community0.ColorValue;
|
|
14
|
+
tabSelectedBorderWidth: _$ag_grid_community0.LengthValue;
|
|
15
|
+
tabSelectedTextColor: _$ag_grid_community0.ColorValue;
|
|
16
|
+
tabSelectedUnderlineColor: _$ag_grid_community0.ColorValue;
|
|
17
|
+
tabSelectedUnderlineTransitionDuration: _$ag_grid_community0.DurationValue;
|
|
18
|
+
tabSelectedUnderlineWidth: _$ag_grid_community0.LengthValue;
|
|
19
|
+
tabSpacing: _$ag_grid_community0.LengthValue;
|
|
20
|
+
tabTextColor: _$ag_grid_community0.ColorValue;
|
|
21
|
+
tabTopPadding: _$ag_grid_community0.LengthValue;
|
|
21
22
|
}>;
|
|
23
|
+
export { tabStyleOdx };
|
|
@@ -1,49 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const styles = ".ag-tabs-header{gap:var(--ag-tab-spacing);border-bottom:var(--ag-tab-bar-border);background-color:var(--ag-tab-bar-background-color);padding:var(--ag-tab-bar-top-padding) var(--ag-tab-bar-horizontal-padding) 0;flex:1;display:flex}.ag-tabs-header-wrapper{display:flex}.ag-tabs-close-button-wrapper{padding:var(--ag-spacing);border:0;align-items:center;display:flex}.ag-ltr .ag-tabs-close-button-wrapper{border-right:solid var(--ag-border-width) var(--ag-border-color)}.ag-rtl .ag-tabs-close-button-wrapper{border-left:solid var(--ag-border-width) var(--ag-border-color)}.ag-tabs-close-button{background-color:unset;cursor:pointer;border:0;padding:0}.ag-tab{border-right:var(--ag-tab-selected-border-width) solid transparent;border-left:var(--ag-tab-selected-border-width) solid transparent;background-color:var(--ag-tab-background-color);cursor:pointer;padding:var(--ag-tab-top-padding) var(--ag-tab-horizontal-padding) var(--ag-tab-bottom-padding);color:var(--ag-tab-text-color);flex:1;justify-content:center;align-items:center;display:flex;position:relative;&:after{transition:opacity var(--ag-tab-selected-underline-transition-duration);opacity:0;background-color:var(--ag-tab-selected-underline-color);height:var(--ag-tab-selected-underline-width);content:\"\";display:block;position:absolute;bottom:0;left:0;right:0}&:hover{background-color:var(--ag-tab-hover-background-color);color:var(--ag-tab-hover-text-color)}&.ag-tab-selected{background-color:var(--ag-tab-selected-background-color);color:var(--ag-tab-selected-text-color)}&.ag-tab-selected:after{opacity:1}}.ag-ltr .ag-tab{&.ag-tab-selected{&:not(:first-of-type){border-left-color:var(--ag-tab-selected-border-color)}&:not(:last-of-type){border-right-color:var(--ag-tab-selected-border-color)}}}.ag-rtl .ag-tab{&.ag-tab-selected{&:not(:first-of-type){border-right-color:var(--ag-tab-selected-border-color)}&:not(:last-of-type){border-left-color:var(--ag-tab-selected-border-color)}}}";
|
|
4
|
-
|
|
5
|
-
const tabStyleOdx = createPart({
|
|
6
|
-
feature: "tabStyle",
|
|
7
|
-
params: {
|
|
8
|
-
tabBarBackgroundColor: "transparent",
|
|
9
|
-
tabBarHorizontalPadding: 0,
|
|
10
|
-
tabBarTopPadding: 0,
|
|
11
|
-
tabBackgroundColor: "transparent",
|
|
12
|
-
tabTextColor: {
|
|
13
|
-
ref: "textColor"
|
|
14
|
-
},
|
|
15
|
-
tabHorizontalPadding: {
|
|
16
|
-
ref: "spacing"
|
|
17
|
-
},
|
|
18
|
-
tabTopPadding: {
|
|
19
|
-
ref: "spacing"
|
|
20
|
-
},
|
|
21
|
-
tabBottomPadding: {
|
|
22
|
-
ref: "spacing"
|
|
23
|
-
},
|
|
24
|
-
tabSpacing: "0",
|
|
25
|
-
tabHoverBackgroundColor: {
|
|
26
|
-
ref: "tabBackgroundColor"
|
|
27
|
-
},
|
|
28
|
-
tabHoverTextColor: {
|
|
29
|
-
ref: "tabTextColor"
|
|
30
|
-
},
|
|
31
|
-
tabSelectedBackgroundColor: {
|
|
32
|
-
ref: "tabBackgroundColor"
|
|
33
|
-
},
|
|
34
|
-
tabSelectedTextColor: {
|
|
35
|
-
ref: "tabTextColor"
|
|
36
|
-
},
|
|
37
|
-
tabSelectedBorderWidth: {
|
|
38
|
-
ref: "borderWidth"
|
|
39
|
-
},
|
|
40
|
-
tabSelectedBorderColor: "transparent",
|
|
41
|
-
tabSelectedUnderlineColor: "transparent",
|
|
42
|
-
tabSelectedUnderlineWidth: 0,
|
|
43
|
-
tabSelectedUnderlineTransitionDuration: 0,
|
|
44
|
-
tabBarBorder: false
|
|
45
|
-
},
|
|
46
|
-
css: styles
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
export { tabStyleOdx };
|
|
1
|
+
var tab_style_default = ".ag-tabs-header {\n gap: var(--ag-tab-spacing);\n border-bottom: var(--ag-tab-bar-border);\n background-color: var(--ag-tab-bar-background-color);\n padding: var(--ag-tab-bar-top-padding) var(--ag-tab-bar-horizontal-padding) 0;\n flex: 1;\n display: flex;\n}\n\n.ag-tabs-header-wrapper {\n display: flex;\n}\n\n.ag-tabs-close-button-wrapper {\n padding: var(--ag-spacing);\n border: 0;\n align-items: center;\n display: flex;\n}\n\n.ag-ltr .ag-tabs-close-button-wrapper {\n border-right: solid var(--ag-border-width) var(--ag-border-color);\n}\n\n.ag-rtl .ag-tabs-close-button-wrapper {\n border-left: solid var(--ag-border-width) var(--ag-border-color);\n}\n\n.ag-tabs-close-button {\n background-color: unset;\n cursor: pointer;\n border: 0;\n padding: 0;\n}\n\n.ag-tab {\n border-right: var(--ag-tab-selected-border-width) solid transparent;\n border-left: var(--ag-tab-selected-border-width) solid transparent;\n background-color: var(--ag-tab-background-color);\n padding: var(--ag-tab-top-padding) var(--ag-tab-horizontal-padding) var(--ag-tab-bottom-padding);\n color: var(--ag-tab-text-color);\n cursor: pointer;\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n\n &:after {\n transition: opacity var(--ag-tab-selected-underline-transition-duration);\n opacity: 0;\n background-color: var(--ag-tab-selected-underline-color);\n height: var(--ag-tab-selected-underline-width);\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &:hover {\n background-color: var(--ag-tab-hover-background-color);\n color: var(--ag-tab-hover-text-color);\n }\n\n &.ag-tab-selected {\n background-color: var(--ag-tab-selected-background-color);\n color: var(--ag-tab-selected-text-color);\n }\n\n &.ag-tab-selected:after {\n opacity: 1;\n }\n}\n\n.ag-ltr .ag-tab {\n &.ag-tab-selected {\n &:not(:first-of-type) {\n border-left-color: var(--ag-tab-selected-border-color);\n }\n\n &:not(:last-of-type) {\n border-right-color: var(--ag-tab-selected-border-color);\n }\n }\n}\n\n.ag-rtl .ag-tab {\n &.ag-tab-selected {\n &:not(:first-of-type) {\n border-right-color: var(--ag-tab-selected-border-color);\n }\n\n &:not(:last-of-type) {\n border-left-color: var(--ag-tab-selected-border-color);\n }\n }\n}\n";
|
|
2
|
+
export { tab_style_default as default };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import tab_style_default from "./tab-style.js";
|
|
2
|
+
import { createPart } from "ag-grid-community";
|
|
3
|
+
const tabStyleOdx = createPart({
|
|
4
|
+
feature: "tabStyle",
|
|
5
|
+
params: {
|
|
6
|
+
tabBarBackgroundColor: "transparent",
|
|
7
|
+
tabBarHorizontalPadding: 0,
|
|
8
|
+
tabBarTopPadding: 0,
|
|
9
|
+
tabBackgroundColor: "transparent",
|
|
10
|
+
tabTextColor: { ref: "textColor" },
|
|
11
|
+
tabHorizontalPadding: { ref: "spacing" },
|
|
12
|
+
tabTopPadding: { ref: "spacing" },
|
|
13
|
+
tabBottomPadding: { ref: "spacing" },
|
|
14
|
+
tabSpacing: "0",
|
|
15
|
+
tabHoverBackgroundColor: { ref: "tabBackgroundColor" },
|
|
16
|
+
tabHoverTextColor: { ref: "tabTextColor" },
|
|
17
|
+
tabSelectedBackgroundColor: { ref: "tabBackgroundColor" },
|
|
18
|
+
tabSelectedTextColor: { ref: "tabTextColor" },
|
|
19
|
+
tabSelectedBorderWidth: { ref: "borderWidth" },
|
|
20
|
+
tabSelectedBorderColor: "transparent",
|
|
21
|
+
tabSelectedUnderlineColor: "transparent",
|
|
22
|
+
tabSelectedUnderlineWidth: 0,
|
|
23
|
+
tabSelectedUnderlineTransitionDuration: 0,
|
|
24
|
+
tabBarBorder: false
|
|
25
|
+
},
|
|
26
|
+
css: tab_style_default
|
|
27
|
+
});
|
|
28
|
+
export { tabStyleOdx };
|
package/dist/lib/theme.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import { Theme, ThemeDefaultParams } from
|
|
2
|
-
|
|
1
|
+
import { Theme, ThemeDefaultParams } from "ag-grid-community";
|
|
2
|
+
declare const themeOdx: Theme<ThemeDefaultParams>;
|
|
3
|
+
export { themeOdx };
|
package/dist/lib/theme.js
CHANGED
|
@@ -1,70 +1,66 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { iconSetOdx } from "./parts/icon-set.js";
|
|
2
|
+
import { coreStylesOdx } from "./parts/core-style2.js";
|
|
3
|
+
import { token } from "@odx/design-tokens";
|
|
4
|
+
import { createTheme } from "ag-grid-community";
|
|
6
5
|
const themeOdx = createTheme().withPart(iconSetOdx).withParams({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
}
|
|
6
|
+
accentColor: token("color.foreground.rest"),
|
|
7
|
+
wrapperBorder: false,
|
|
8
|
+
wrapperBorderRadius: token("border-radius.md"),
|
|
9
|
+
borderRadius: token("border-radius.md"),
|
|
10
|
+
foregroundColor: token("color.foreground.rest"),
|
|
11
|
+
borderColor: token("color.stroke.neutral.subtle"),
|
|
12
|
+
backgroundColor: token("color.background.level-1"),
|
|
13
|
+
headerBackgroundColor: "transparent",
|
|
14
|
+
headerColumnResizeHandleColor: token("color.stroke.control.rest"),
|
|
15
|
+
headerRowBorder: {
|
|
16
|
+
style: "solid",
|
|
17
|
+
color: token("color.stroke.control.rest"),
|
|
18
|
+
width: token("border-width.thin")
|
|
19
|
+
},
|
|
20
|
+
fontFamily: token("typography.font-family.base"),
|
|
21
|
+
fontSize: token("typography.font-size.base"),
|
|
22
|
+
headerFontWeight: token("typography.font-weight.semibold"),
|
|
23
|
+
rowBorder: {
|
|
24
|
+
style: "solid",
|
|
25
|
+
color: token("color.stroke.neutral.subtle"),
|
|
26
|
+
width: token("border-width.thin")
|
|
27
|
+
},
|
|
28
|
+
rowHeight: token("size.300"),
|
|
29
|
+
rowHoverColor: token("color.background.transparent.hover"),
|
|
30
|
+
oddRowBackgroundColor: token("color.background.transparent.hover"),
|
|
31
|
+
selectedRowBackgroundColor: token("color.background.transparent.selected"),
|
|
32
|
+
cellHorizontalPadding: token("spacing.75"),
|
|
33
|
+
pinnedColumnBorder: {
|
|
34
|
+
width: token("border-width.thin"),
|
|
35
|
+
style: "solid",
|
|
36
|
+
color: token("color.stroke.control.rest")
|
|
37
|
+
},
|
|
38
|
+
rangeSelectionBorderColor: token("color.stroke.focus.outer"),
|
|
39
|
+
iconSize: token("control.addon-size-sm"),
|
|
40
|
+
iconButtonActiveColor: token("color.foreground.rest"),
|
|
41
|
+
iconButtonActiveBackgroundColor: token("color.background.transparent.hover"),
|
|
42
|
+
iconButtonColor: token("color.foreground.rest"),
|
|
43
|
+
iconButtonBackgroundColor: "transparent",
|
|
44
|
+
iconButtonActiveIndicatorColor: token("color.foreground.rest"),
|
|
45
|
+
iconButtonHoverBackgroundColor: token("color.background.transparent.hover"),
|
|
46
|
+
iconColor: token("color.foreground.rest"),
|
|
47
|
+
invalidColor: token("color.background.warning.rest"),
|
|
48
|
+
browserColorScheme: "inherit",
|
|
49
|
+
menuBackgroundColor: token("color.background.level-2"),
|
|
50
|
+
menuBorder: "none",
|
|
51
|
+
menuShadow: token("elevation.shadow.level-2"),
|
|
52
|
+
menuTextColor: token("color.foreground.rest"),
|
|
53
|
+
widgetVerticalSpacing: token("spacing.100"),
|
|
54
|
+
footerRowBorder: {
|
|
55
|
+
style: "solid",
|
|
56
|
+
color: token("color.stroke.control.rest"),
|
|
57
|
+
width: token("border-width.thin")
|
|
58
|
+
},
|
|
59
|
+
focusShadow: {
|
|
60
|
+
color: token("color.stroke.focus.outer"),
|
|
61
|
+
offsetX: 0,
|
|
62
|
+
offsetY: 0,
|
|
63
|
+
spread: { calc: "var(--odx-focus-ring-offset) * -1" }
|
|
64
|
+
}
|
|
68
65
|
}).withPart(coreStylesOdx);
|
|
69
|
-
|
|
70
66
|
export { themeOdx };
|
package/dist/main.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { buttonStyleOdx } from "./lib/parts/button-style.js";
|
|
2
|
+
import { checkboxStyleOdx } from "./lib/parts/checkbox-style.js";
|
|
3
|
+
import { getIconContent, iconSetOdx } from "./lib/parts/icon-set.js";
|
|
4
|
+
import { inputStyleOdx } from "./lib/parts/input-style.js";
|
|
5
|
+
import { tabStyleOdx } from "./lib/parts/tab-style.js";
|
|
6
|
+
import { themeOdx } from "./lib/theme.js";
|
|
7
|
+
export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };
|
package/dist/main.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { buttonStyleOdx } from "./lib/parts/button-style2.js";
|
|
2
|
+
import { getIconContent, iconSetOdx } from "./lib/parts/icon-set.js";
|
|
3
|
+
import { checkboxStyleOdx } from "./lib/parts/checkbox-style2.js";
|
|
4
|
+
import { inputStyleOdx } from "./lib/parts/input-style2.js";
|
|
5
|
+
import { tabStyleOdx } from "./lib/parts/tab-style2.js";
|
|
6
|
+
import { themeOdx } from "./lib/theme.js";
|
|
7
|
+
export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };
|
package/package.json
CHANGED
|
@@ -2,32 +2,30 @@
|
|
|
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.3.
|
|
5
|
+
"version": "1.3.1",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
|
-
"
|
|
12
|
-
"!dist/**/*.map",
|
|
13
|
-
"!dist/**/*.stories.d.ts"
|
|
11
|
+
"!dist/**/*.map"
|
|
14
12
|
],
|
|
15
13
|
"type": "module",
|
|
16
14
|
"dependencies": {
|
|
17
15
|
"ag-grid-community": "^35.1.0"
|
|
18
16
|
},
|
|
19
17
|
"peerDependencies": {
|
|
20
|
-
"@odx/
|
|
21
|
-
"@odx/
|
|
18
|
+
"@odx/design-tokens": "^4.0.0",
|
|
19
|
+
"@odx/icons": "^4.2.0"
|
|
22
20
|
},
|
|
23
21
|
"devDependencies": {
|
|
24
|
-
"@odx/
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"@odx/
|
|
22
|
+
"@odx/design-tokens": "4.2.0",
|
|
23
|
+
"@odx/icons": "4.9.1",
|
|
24
|
+
"@tsdown/css": "0.22.0",
|
|
25
|
+
"lit": "3.3.3",
|
|
26
|
+
"stylelint": "17.11.1",
|
|
27
|
+
"tsdown": "0.22.0",
|
|
28
|
+
"@odx-internal/config-stylelint": "0.0.0"
|
|
31
29
|
},
|
|
32
30
|
"sideEffects": [],
|
|
33
31
|
"exports": {
|
|
@@ -44,10 +42,10 @@
|
|
|
44
42
|
"extends": "@odx-internal/config-stylelint"
|
|
45
43
|
},
|
|
46
44
|
"scripts": {
|
|
47
|
-
"build": "
|
|
48
|
-
"dev": "
|
|
49
|
-
"dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
|
|
45
|
+
"build": "tsdown",
|
|
46
|
+
"dev": "tsdown --no-clean --watch",
|
|
50
47
|
"lint": "biome lint src",
|
|
48
|
+
"lint:styles": "stylelint '**/*.css'",
|
|
51
49
|
"generate:manifest": "cem analyze"
|
|
52
50
|
}
|
|
53
51
|
}
|
package/dist/oss-licenses.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[]
|