@odx/addon-ag-grid 1.2.2 → 1.3.1

package/README.md

@@ -87,8 +87,4 @@ const odxTheme = themeOdx
 
 ### Documentation
 
-For advanced usage, customization strategies, and best practices, refer to our <a href="https://odx.draeger.com" target="_blank" rel="noopener">documentation</a>.
-
-### Contact
-
-For questions, feedback, or support, please reach out via our <a href="https://odx.draeger.com/contact" target="_blank" rel="noopener">contact page</a>.
+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>.

package/dist/lib/parts/button-style.d.ts

@@ -1,19 +1,20 @@
-export declare const buttonStyleOdx: import('ag-grid-community').Part<{
-    buttonTextColor: import('ag-grid-community').ColorValue;
-    buttonFontWeight: import('ag-grid-community').FontWeightValue;
-    buttonBackgroundColor: import('ag-grid-community').ColorValue;
-    buttonBorder: import('ag-grid-community').BorderValue;
-    buttonBorderRadius: import('ag-grid-community').LengthValue;
-    buttonHorizontalPadding: import('ag-grid-community').LengthValue;
-    buttonVerticalPadding: import('ag-grid-community').LengthValue;
-    buttonHoverTextColor: import('ag-grid-community').ColorValue;
-    buttonHoverBackgroundColor: import('ag-grid-community').ColorValue;
-    buttonHoverBorder: import('ag-grid-community').BorderValue;
-    buttonActiveTextColor: import('ag-grid-community').ColorValue;
-    buttonActiveBackgroundColor: import('ag-grid-community').ColorValue;
-    buttonActiveBorder: import('ag-grid-community').BorderValue;
-    buttonDisabledTextColor: import('ag-grid-community').ColorValue;
-    buttonDisabledBackgroundColor: import('ag-grid-community').ColorValue;
-    buttonDisabledBorder: import('ag-grid-community').BorderValue;
+import * as _$ag_grid_community0 from "ag-grid-community";
+declare const buttonStyleOdx: _$ag_grid_community0.Part<{
+  buttonTextColor: _$ag_grid_community0.ColorValue;
+  buttonFontWeight: _$ag_grid_community0.FontWeightValue;
+  buttonBackgroundColor: _$ag_grid_community0.ColorValue;
+  buttonBorder: _$ag_grid_community0.BorderValue;
+  buttonBorderRadius: _$ag_grid_community0.LengthValue;
+  buttonHorizontalPadding: _$ag_grid_community0.LengthValue;
+  buttonVerticalPadding: _$ag_grid_community0.LengthValue;
+  buttonHoverTextColor: _$ag_grid_community0.ColorValue;
+  buttonHoverBackgroundColor: _$ag_grid_community0.ColorValue;
+  buttonHoverBorder: _$ag_grid_community0.BorderValue;
+  buttonActiveTextColor: _$ag_grid_community0.ColorValue;
+  buttonActiveBackgroundColor: _$ag_grid_community0.ColorValue;
+  buttonActiveBorder: _$ag_grid_community0.BorderValue;
+  buttonDisabledTextColor: _$ag_grid_community0.ColorValue;
+  buttonDisabledBackgroundColor: _$ag_grid_community0.ColorValue;
+  buttonDisabledBorder: _$ag_grid_community0.BorderValue;
 }>;
-//# sourceMappingURL=button-style.d.ts.map
+export { buttonStyleOdx };

package/dist/lib/parts/button-style.js

@@ -0,0 +1,2 @@
+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";
+export { button_style_default as default };

package/dist/lib/parts/button-style2.js

@@ -0,0 +1,26 @@
+import button_style_default from "./button-style.js";
+import { token } from "@odx/design-tokens";
+import { createPart } from "ag-grid-community";
+const buttonStyleOdx = createPart({
+	feature: "buttonStyle",
+	params: {
+		buttonActiveBackgroundColor: token("color.background.primary.pressed"),
+		buttonActiveBorder: false,
+		buttonActiveTextColor: token("color.foreground.inverse"),
+		buttonBackgroundColor: token("color.background.primary.rest"),
+		buttonBorder: false,
+		buttonBorderRadius: token("border-radius.control"),
+		buttonDisabledBackgroundColor: token("color.background.disabled.rest"),
+		buttonDisabledBorder: false,
+		buttonDisabledTextColor: token("color.foreground.disabled.rest"),
+		buttonFontWeight: token("typography.font-weight.medium"),
+		buttonHorizontalPadding: { calc: `${token("control.spacing-inline-md")} * 2` },
+		buttonHoverBackgroundColor: token("color.background.primary.hover"),
+		buttonHoverBorder: false,
+		buttonHoverTextColor: token("color.foreground.inverse"),
+		buttonTextColor: token("color.foreground.inverse"),
+		buttonVerticalPadding: token("control.spacing-md")
+	},
+	css: button_style_default
+});
+export { buttonStyleOdx };

package/dist/lib/parts/checkbox-style.d.ts

@@ -1,16 +1,17 @@
-export declare const checkboxStyleOdx: import('ag-grid-community').Part<{
-    checkboxBorderRadius: import('ag-grid-community').LengthValue;
-    checkboxBorderWidth: import('ag-grid-community').LengthValue;
-    checkboxCheckedBackgroundColor: import('ag-grid-community').ColorValue;
-    checkboxCheckedBorderColor: import('ag-grid-community').ColorValue;
-    checkboxCheckedShapeColor: import('ag-grid-community').ColorValue;
-    checkboxCheckedShapeImage: import('ag-grid-community').ImageValue;
-    checkboxIndeterminateBackgroundColor: import('ag-grid-community').ColorValue;
-    checkboxIndeterminateBorderColor: import('ag-grid-community').ColorValue;
-    checkboxIndeterminateShapeColor: import('ag-grid-community').ColorValue;
-    checkboxIndeterminateShapeImage: import('ag-grid-community').ImageValue;
-    checkboxUncheckedBackgroundColor: import('ag-grid-community').ColorValue;
-    checkboxUncheckedBorderColor: import('ag-grid-community').ColorValue;
-    radioCheckedShapeImage: import('ag-grid-community').ImageValue;
+import * as _$ag_grid_community0 from "ag-grid-community";
+declare const checkboxStyleOdx: _$ag_grid_community0.Part<{
+  checkboxBorderRadius: _$ag_grid_community0.LengthValue;
+  checkboxBorderWidth: _$ag_grid_community0.LengthValue;
+  checkboxCheckedBackgroundColor: _$ag_grid_community0.ColorValue;
+  checkboxCheckedBorderColor: _$ag_grid_community0.ColorValue;
+  checkboxCheckedShapeColor: _$ag_grid_community0.ColorValue;
+  checkboxCheckedShapeImage: _$ag_grid_community0.ImageValue;
+  checkboxIndeterminateBackgroundColor: _$ag_grid_community0.ColorValue;
+  checkboxIndeterminateBorderColor: _$ag_grid_community0.ColorValue;
+  checkboxIndeterminateShapeColor: _$ag_grid_community0.ColorValue;
+  checkboxIndeterminateShapeImage: _$ag_grid_community0.ImageValue;
+  checkboxUncheckedBackgroundColor: _$ag_grid_community0.ColorValue;
+  checkboxUncheckedBorderColor: _$ag_grid_community0.ColorValue;
+  radioCheckedShapeImage: _$ag_grid_community0.ImageValue;
 }>;
-//# sourceMappingURL=checkbox-style.d.ts.map
+export { checkboxStyleOdx };

package/dist/lib/parts/checkbox-style.js

@@ -0,0 +1,2 @@
+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";
+export { checkbox_style_default as default };

package/dist/lib/parts/checkbox-style2.js

@@ -0,0 +1,25 @@
+import checkbox_style_default from "./checkbox-style.js";
+import { getIconContent } from "./icon-set.js";
+import { token } from "@odx/design-tokens";
+import { createPart } from "ag-grid-community";
+import { CheckIcon, MinusIcon } from "@odx/icons/core";
+const checkboxStyleOdx = createPart({
+	feature: "checkboxStyle",
+	params: {
+		checkboxBorderRadius: token("border-radius.control"),
+		checkboxBorderWidth: token("border-width.thin"),
+		checkboxUncheckedBackgroundColor: token("color.background.control.rest"),
+		checkboxUncheckedBorderColor: token("color.stroke.control.rest"),
+		checkboxCheckedBackgroundColor: token("color.background.control.selected"),
+		checkboxCheckedBorderColor: token("color.stroke.control.selected"),
+		checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
+		checkboxCheckedShapeImage: { svg: getIconContent(CheckIcon).svg },
+		checkboxIndeterminateBackgroundColor: token("color.background.control.selected"),
+		checkboxIndeterminateBorderColor: token("color.stroke.control.selected"),
+		checkboxIndeterminateShapeColor: token("color.foreground.inverse-static"),
+		checkboxIndeterminateShapeImage: { svg: getIconContent(MinusIcon).svg },
+		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>` }
+	},
+	css: checkbox_style_default
+});
+export { checkboxStyleOdx };

package/dist/lib/parts/core-style.js

@@ -0,0 +1,2 @@
+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";
+export { core_style_default as default };

package/dist/lib/parts/core-style2.js

@@ -0,0 +1,7 @@
+import core_style_default from "./core-style.js";
+import { createPart } from "ag-grid-community";
+const coreStylesOdx = createPart({
+	feature: "coreStyles",
+	css: core_style_default
+});
+export { coreStylesOdx };

package/dist/lib/parts/icon-set.d.ts

@@ -1,6 +1,7 @@
-import { AggregationIcon } from '@odx/icons/core';
-export declare function getIconContent(icon: typeof AggregationIcon): {
-    svg: string;
+import * as _$ag_grid_community0 from "ag-grid-community";
+import { AggregationIcon } from "@odx/icons/core";
+declare function getIconContent(icon: typeof AggregationIcon): {
+  svg: string;
 };
-export declare const iconSetOdx: import('ag-grid-community').Part<{}>;
-//# sourceMappingURL=icon-set.d.ts.map
+declare const iconSetOdx: _$ag_grid_community0.Part<{}>;
+export { getIconContent, iconSetOdx };

package/dist/lib/parts/icon-set.js

@@ -0,0 +1,68 @@
+import { iconOverrides } from "ag-grid-community";
+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";
+function getIconContent(icon) {
+	return { svg: icon.content || "" };
+}
+const iconSetOdx = iconOverrides({
+	type: "image",
+	mask: true,
+	icons: {
+		aggregation: getIconContent(AggregationIcon),
+		arrows: getIconContent(ChevronsIcon),
+		asc: getIconContent(AscendingIcon),
+		cancel: getIconContent(CancelIcon),
+		chart: getIconContent(BarChartIcon),
+		"chevron-up": getIconContent(ChevronUpIcon),
+		"chevron-down": getIconContent(ChevronDownIcon),
+		"chevron-left": getIconContent(ChevronLeftIcon),
+		"chevron-right": getIconContent(ChevronRightIcon),
+		"color-picker": getIconContent(ColorpickerIcon),
+		columns: getIconContent(ColumnIcon),
+		contracted: getIconContent(ChevronRightIcon),
+		copy: getIconContent(CopyContentIcon),
+		cut: getIconContent(CutIcon),
+		cross: getIconContent(CloseIcon),
+		csv: getIconContent(FileCsvIcon),
+		desc: getIconContent(DescendingIcon),
+		down: getIconContent(ArrowDownIcon),
+		edit: getIconContent(EditIcon),
+		excel: getIconContent(FileExcelIcon),
+		expanded: getIconContent(ChevronLeftIcon),
+		"eye-slash": getIconContent(ViewOffIcon),
+		eye: getIconContent(ViewIcon),
+		filter: getIconContent(FilterIcon),
+		first: getIconContent(ChevronLeftEndIcon),
+		grip: getIconContent(RearrangeIcon),
+		group: getIconContent(GroupIcon),
+		last: getIconContent(ChevronRightEndIcon),
+		left: getIconContent(ArrowLeftIcon),
+		linked: getIconContent(LinkIcon),
+		loading: getIconContent(LoadingIcon),
+		maximize: getIconContent(MaximizeIcon),
+		menu: getIconContent(MenuIcon),
+		"menu-alt": getIconContent(MoreIcon),
+		minimize: getIconContent(MinimizeIcon),
+		minus: getIconContent(MinusIcon),
+		next: getIconContent(ChevronRightIcon),
+		none: getIconContent(SortableIcon),
+		"not-allowed": getIconContent(ErrorIcon),
+		paste: getIconContent(PasteIcon),
+		pin: getIconContent(PinIcon),
+		pivot: getIconContent(TableIcon),
+		plus: getIconContent(PlusIcon),
+		previous: getIconContent(ChevronLeftIcon),
+		right: getIconContent(ArrowRightIcon),
+		save: getIconContent(SaveIcon),
+		"small-down": getIconContent(ChevronDownIcon),
+		"small-left": getIconContent(ChevronLeftIcon),
+		"small-right": getIconContent(ChevronRightIcon),
+		"small-up": getIconContent(ChevronUpIcon),
+		tick: getIconContent(CheckIcon),
+		"tree-closed": getIconContent(ChevronRightIcon),
+		"tree-indeterminate": getIconContent(MinusIcon),
+		"tree-open": getIconContent(ChevronDownIcon),
+		unlinked: getIconContent(LinkOffIcon),
+		up: getIconContent(ArrowUpIcon)
+	}
+});
+export { getIconContent, iconSetOdx };

package/dist/lib/parts/input-style.d.ts

@@ -1,3 +1,3 @@
-import { Part } from 'ag-grid-community';
-export declare const inputStyleOdx: Part;
-//# sourceMappingURL=input-style.d.ts.map
+import { Part } from "ag-grid-community";
+declare const inputStyleOdx: Part;
+export { inputStyleOdx };

package/dist/lib/parts/input-style.js

@@ -0,0 +1,2 @@
+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";
+export { input_style_default as default };

package/dist/lib/parts/input-style2.js

@@ -0,0 +1,7 @@
+import input_style_default from "./input-style.js";
+import { createPart } from "ag-grid-community";
+const inputStyleOdx = createPart({
+	feature: "inputStyle",
+	css: input_style_default
+});
+export { inputStyleOdx };

package/dist/lib/parts/tab-style.d.ts

@@ -1,22 +1,23 @@
-export declare const tabStyleOdx: import('ag-grid-community').Part<{
-    tabBackgroundColor: import('ag-grid-community').ColorValue;
-    tabBarBackgroundColor: import('ag-grid-community').ColorValue;
-    tabBarBorder: import('ag-grid-community').BorderValue;
-    tabBarHorizontalPadding: import('ag-grid-community').LengthValue;
-    tabBarTopPadding: import('ag-grid-community').LengthValue;
-    tabBottomPadding: import('ag-grid-community').LengthValue;
-    tabHorizontalPadding: import('ag-grid-community').LengthValue;
-    tabHoverBackgroundColor: import('ag-grid-community').ColorValue;
-    tabHoverTextColor: import('ag-grid-community').ColorValue;
-    tabSelectedBackgroundColor: import('ag-grid-community').ColorValue;
-    tabSelectedBorderColor: import('ag-grid-community').ColorValue;
-    tabSelectedBorderWidth: import('ag-grid-community').LengthValue;
-    tabSelectedTextColor: import('ag-grid-community').ColorValue;
-    tabSelectedUnderlineColor: import('ag-grid-community').ColorValue;
-    tabSelectedUnderlineTransitionDuration: import('ag-grid-community').DurationValue;
-    tabSelectedUnderlineWidth: import('ag-grid-community').LengthValue;
-    tabSpacing: import('ag-grid-community').LengthValue;
-    tabTextColor: import('ag-grid-community').ColorValue;
-    tabTopPadding: import('ag-grid-community').LengthValue;
+import * as _$ag_grid_community0 from "ag-grid-community";
+declare const tabStyleOdx: _$ag_grid_community0.Part<{
+  tabBackgroundColor: _$ag_grid_community0.ColorValue;
+  tabBarBackgroundColor: _$ag_grid_community0.ColorValue;
+  tabBarBorder: _$ag_grid_community0.BorderValue;
+  tabBarHorizontalPadding: _$ag_grid_community0.LengthValue;
+  tabBarTopPadding: _$ag_grid_community0.LengthValue;
+  tabBottomPadding: _$ag_grid_community0.LengthValue;
+  tabHorizontalPadding: _$ag_grid_community0.LengthValue;
+  tabHoverBackgroundColor: _$ag_grid_community0.ColorValue;
+  tabHoverTextColor: _$ag_grid_community0.ColorValue;
+  tabSelectedBackgroundColor: _$ag_grid_community0.ColorValue;
+  tabSelectedBorderColor: _$ag_grid_community0.ColorValue;
+  tabSelectedBorderWidth: _$ag_grid_community0.LengthValue;
+  tabSelectedTextColor: _$ag_grid_community0.ColorValue;
+  tabSelectedUnderlineColor: _$ag_grid_community0.ColorValue;
+  tabSelectedUnderlineTransitionDuration: _$ag_grid_community0.DurationValue;
+  tabSelectedUnderlineWidth: _$ag_grid_community0.LengthValue;
+  tabSpacing: _$ag_grid_community0.LengthValue;
+  tabTextColor: _$ag_grid_community0.ColorValue;
+  tabTopPadding: _$ag_grid_community0.LengthValue;
 }>;
-//# sourceMappingURL=tab-style.d.ts.map
+export { tabStyleOdx };

package/dist/lib/parts/tab-style.js

@@ -0,0 +1,2 @@
+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";
+export { tab_style_default as default };

package/dist/lib/parts/tab-style2.js

@@ -0,0 +1,28 @@
+import tab_style_default from "./tab-style.js";
+import { createPart } from "ag-grid-community";
+const tabStyleOdx = createPart({
+	feature: "tabStyle",
+	params: {
+		tabBarBackgroundColor: "transparent",
+		tabBarHorizontalPadding: 0,
+		tabBarTopPadding: 0,
+		tabBackgroundColor: "transparent",
+		tabTextColor: { ref: "textColor" },
+		tabHorizontalPadding: { ref: "spacing" },
+		tabTopPadding: { ref: "spacing" },
+		tabBottomPadding: { ref: "spacing" },
+		tabSpacing: "0",
+		tabHoverBackgroundColor: { ref: "tabBackgroundColor" },
+		tabHoverTextColor: { ref: "tabTextColor" },
+		tabSelectedBackgroundColor: { ref: "tabBackgroundColor" },
+		tabSelectedTextColor: { ref: "tabTextColor" },
+		tabSelectedBorderWidth: { ref: "borderWidth" },
+		tabSelectedBorderColor: "transparent",
+		tabSelectedUnderlineColor: "transparent",
+		tabSelectedUnderlineWidth: 0,
+		tabSelectedUnderlineTransitionDuration: 0,
+		tabBarBorder: false
+	},
+	css: tab_style_default
+});
+export { tabStyleOdx };

package/dist/lib/theme.d.ts

@@ -1,3 +1,3 @@
-import { Theme, ThemeDefaultParams } from 'ag-grid-community';
-export declare const themeOdx: Theme<ThemeDefaultParams>;
-//# sourceMappingURL=theme.d.ts.map
+import { Theme, ThemeDefaultParams } from "ag-grid-community";
+declare const themeOdx: Theme<ThemeDefaultParams>;
+export { themeOdx };

package/dist/lib/theme.js

@@ -0,0 +1,66 @@
+import { iconSetOdx } from "./parts/icon-set.js";
+import { coreStylesOdx } from "./parts/core-style2.js";
+import { token } from "@odx/design-tokens";
+import { createTheme } from "ag-grid-community";
+const themeOdx = createTheme().withPart(iconSetOdx).withParams({
+	accentColor: token("color.foreground.rest"),
+	wrapperBorder: false,
+	wrapperBorderRadius: token("border-radius.md"),
+	borderRadius: token("border-radius.md"),
+	foregroundColor: token("color.foreground.rest"),
+	borderColor: token("color.stroke.neutral.subtle"),
+	backgroundColor: token("color.background.level-1"),
+	headerBackgroundColor: "transparent",
+	headerColumnResizeHandleColor: token("color.stroke.control.rest"),
+	headerRowBorder: {
+		style: "solid",
+		color: token("color.stroke.control.rest"),
+		width: token("border-width.thin")
+	},
+	fontFamily: token("typography.font-family.base"),
+	fontSize: token("typography.font-size.base"),
+	headerFontWeight: token("typography.font-weight.semibold"),
+	rowBorder: {
+		style: "solid",
+		color: token("color.stroke.neutral.subtle"),
+		width: token("border-width.thin")
+	},
+	rowHeight: token("size.300"),
+	rowHoverColor: token("color.background.transparent.hover"),
+	oddRowBackgroundColor: token("color.background.transparent.hover"),
+	selectedRowBackgroundColor: token("color.background.transparent.selected"),
+	cellHorizontalPadding: token("spacing.75"),
+	pinnedColumnBorder: {
+		width: token("border-width.thin"),
+		style: "solid",
+		color: token("color.stroke.control.rest")
+	},
+	rangeSelectionBorderColor: token("color.stroke.focus.outer"),
+	iconSize: token("control.addon-size-sm"),
+	iconButtonActiveColor: token("color.foreground.rest"),
+	iconButtonActiveBackgroundColor: token("color.background.transparent.hover"),
+	iconButtonColor: token("color.foreground.rest"),
+	iconButtonBackgroundColor: "transparent",
+	iconButtonActiveIndicatorColor: token("color.foreground.rest"),
+	iconButtonHoverBackgroundColor: token("color.background.transparent.hover"),
+	iconColor: token("color.foreground.rest"),
+	invalidColor: token("color.background.warning.rest"),
+	browserColorScheme: "inherit",
+	menuBackgroundColor: token("color.background.level-2"),
+	menuBorder: "none",
+	menuShadow: token("elevation.shadow.level-2"),
+	menuTextColor: token("color.foreground.rest"),
+	widgetVerticalSpacing: token("spacing.100"),
+	footerRowBorder: {
+		style: "solid",
+		color: token("color.stroke.control.rest"),
+		width: token("border-width.thin")
+	},
+	focusShadow: {
+		color: token("color.stroke.focus.outer"),
+		offsetX: 0,
+		offsetY: 0,
+		spread: { calc: "var(--odx-focus-ring-offset) * -1" }
+	}
+}).withPart(coreStylesOdx);
+export { themeOdx };

package/dist/main.d.ts

@@ -1,7 +1,7 @@
-export * from './lib/parts/button-style.js';
-export * from './lib/parts/checkbox-style.js';
-export * from './lib/parts/icon-set.js';
-export * from './lib/parts/input-style.js';
-export * from './lib/parts/tab-style.js';
-export * from './lib/theme.js';
-//# sourceMappingURL=main.d.ts.map
+import { buttonStyleOdx } from "./lib/parts/button-style.js";
+import { checkboxStyleOdx } from "./lib/parts/checkbox-style.js";
+import { getIconContent, iconSetOdx } from "./lib/parts/icon-set.js";
+import { inputStyleOdx } from "./lib/parts/input-style.js";
+import { tabStyleOdx } from "./lib/parts/tab-style.js";
+import { themeOdx } from "./lib/theme.js";
+export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };

package/dist/main.js

@@ -1,251 +1,7 @@
-import { token } from '@odx/design-tokens';
-import { createPart, iconOverrides, createTheme } from 'ag-grid-community';
-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';
-
-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)}}";
-
-const buttonStyleOdx = createPart({
-  feature: "buttonStyle",
-  params: {
-    buttonActiveBackgroundColor: token("color.background.primary.pressed"),
-    buttonActiveBorder: false,
-    buttonActiveTextColor: token("color.foreground.inverse"),
-    buttonBackgroundColor: token("color.background.primary.rest"),
-    buttonBorder: false,
-    buttonBorderRadius: token("border-radius.control"),
-    buttonDisabledBackgroundColor: token("color.background.disabled.rest"),
-    buttonDisabledBorder: false,
-    buttonDisabledTextColor: token("color.foreground.disabled.rest"),
-    buttonFontWeight: token("typography.font-weight.medium"),
-    buttonHorizontalPadding: { calc: `${token("control.spacing-inline-md")} * 2` },
-    buttonHoverBackgroundColor: token("color.background.primary.hover"),
-    buttonHoverBorder: false,
-    buttonHoverTextColor: token("color.foreground.inverse"),
-    buttonTextColor: token("color.foreground.inverse"),
-    buttonVerticalPadding: token("control.spacing-md")
-  },
-  css: styles$4
-});
-
-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)}}";
-
-function getIconContent(icon) {
-  return { svg: icon.content || "" };
-}
-const iconSetOdx = iconOverrides({
-  type: "image",
-  mask: true,
-  icons: {
-    aggregation: getIconContent(AggregationIcon),
-    arrows: getIconContent(ChevronsIcon),
-    asc: getIconContent(AscendingIcon),
-    cancel: getIconContent(CancelIcon),
-    chart: getIconContent(BarChartIcon),
-    "chevron-up": getIconContent(ChevronUpIcon),
-    "chevron-down": getIconContent(ChevronDownIcon),
-    "chevron-left": getIconContent(ChevronLeftIcon),
-    "chevron-right": getIconContent(ChevronRightIcon),
-    "color-picker": getIconContent(ColorpickerIcon),
-    columns: getIconContent(ColumnIcon),
-    contracted: getIconContent(ChevronRightIcon),
-    copy: getIconContent(CopyContentIcon),
-    cut: getIconContent(CutIcon),
-    cross: getIconContent(CloseIcon),
-    csv: getIconContent(FileCsvIcon),
-    desc: getIconContent(DescendingIcon),
-    down: getIconContent(ArrowDownIcon),
-    edit: getIconContent(EditIcon),
-    excel: getIconContent(FileExcelIcon),
-    expanded: getIconContent(ChevronLeftIcon),
-    "eye-slash": getIconContent(ViewOffIcon),
-    eye: getIconContent(ViewIcon),
-    filter: getIconContent(FilterIcon),
-    // 'filter-add': '',
-    first: getIconContent(ChevronLeftEndIcon),
-    grip: getIconContent(RearrangeIcon),
-    group: getIconContent(GroupIcon),
-    last: getIconContent(ChevronRightEndIcon),
-    left: getIconContent(ArrowLeftIcon),
-    linked: getIconContent(LinkIcon),
-    loading: getIconContent(LoadingIcon),
-    maximize: getIconContent(MaximizeIcon),
-    menu: getIconContent(MenuIcon),
-    "menu-alt": getIconContent(MoreIcon),
-    minimize: getIconContent(MinimizeIcon),
-    minus: getIconContent(MinusIcon),
-    next: getIconContent(ChevronRightIcon),
-    none: getIconContent(SortableIcon),
-    "not-allowed": getIconContent(ErrorIcon),
-    paste: getIconContent(PasteIcon),
-    pin: getIconContent(PinIcon),
-    // 'pinned-bottom': '',
-    // 'pinned-top': '',
-    pivot: getIconContent(TableIcon),
-    plus: getIconContent(PlusIcon),
-    previous: getIconContent(ChevronLeftIcon),
-    right: getIconContent(ArrowRightIcon),
-    save: getIconContent(SaveIcon),
-    "small-down": getIconContent(ChevronDownIcon),
-    "small-left": getIconContent(ChevronLeftIcon),
-    "small-right": getIconContent(ChevronRightIcon),
-    "small-up": getIconContent(ChevronUpIcon),
-    tick: getIconContent(CheckIcon),
-    "tree-closed": getIconContent(ChevronRightIcon),
-    "tree-indeterminate": getIconContent(MinusIcon),
-    "tree-open": getIconContent(ChevronDownIcon),
-    unlinked: getIconContent(LinkOffIcon),
-    up: getIconContent(ArrowUpIcon)
-  }
-});
-
-const checkboxStyleOdx = createPart({
-  feature: "checkboxStyle",
-  params: {
-    checkboxBorderRadius: token("border-radius.control"),
-    checkboxBorderWidth: token("border-width.thin"),
-    checkboxUncheckedBackgroundColor: token("color.background.control.rest"),
-    checkboxUncheckedBorderColor: token("color.stroke.control.rest"),
-    checkboxCheckedBackgroundColor: token("color.background.control.selected"),
-    checkboxCheckedBorderColor: token("color.stroke.control.selected"),
-    checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
-    checkboxCheckedShapeImage: {
-      svg: getIconContent(CheckIcon).svg
-    },
-    checkboxIndeterminateBackgroundColor: token("color.background.control.selected"),
-    checkboxIndeterminateBorderColor: token("color.stroke.control.selected"),
-    checkboxIndeterminateShapeColor: token("color.foreground.inverse-static"),
-    checkboxIndeterminateShapeImage: {
-      svg: getIconContent(MinusIcon).svg
-    },
-    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>`
-    }
-  },
-  css: styles$3
-});
-
-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)}}";
-
-const inputStyleOdx = createPart({
-  feature: "inputStyle",
-  css: styles$2
-});
-
-const styles$1 = ".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)}}}";
-
-const tabStyleOdx = createPart({
-  feature: "tabStyle",
-  params: {
-    tabBarBackgroundColor: "transparent",
-    tabBarHorizontalPadding: 0,
-    tabBarTopPadding: 0,
-    tabBackgroundColor: "transparent",
-    tabTextColor: {
-      ref: "textColor"
-    },
-    tabHorizontalPadding: {
-      ref: "spacing"
-    },
-    tabTopPadding: {
-      ref: "spacing"
-    },
-    tabBottomPadding: {
-      ref: "spacing"
-    },
-    tabSpacing: "0",
-    tabHoverBackgroundColor: {
-      ref: "tabBackgroundColor"
-    },
-    tabHoverTextColor: {
-      ref: "tabTextColor"
-    },
-    tabSelectedBackgroundColor: {
-      ref: "tabBackgroundColor"
-    },
-    tabSelectedTextColor: {
-      ref: "tabTextColor"
-    },
-    tabSelectedBorderWidth: {
-      ref: "borderWidth"
-    },
-    tabSelectedBorderColor: "transparent",
-    tabSelectedUnderlineColor: "transparent",
-    tabSelectedUnderlineWidth: 0,
-    tabSelectedUnderlineTransitionDuration: 0,
-    tabBarBorder: false
-  },
-  css: styles$1
-});
-
-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)}";
-
-const coreStylesOdx = createPart({
-  feature: "coreStyles",
-  css: styles
-});
-
-const themeOdx = createTheme().withPart(iconSetOdx).withParams({
-  accentColor: token("color.foreground.rest"),
-  wrapperBorder: false,
-  wrapperBorderRadius: token("border-radius.md"),
-  borderRadius: token("border-radius.md"),
-  foregroundColor: token("color.foreground.rest"),
-  borderColor: token("color.stroke.neutral.subtle"),
-  backgroundColor: token("color.background.level-1"),
-  headerBackgroundColor: "transparent",
-  headerColumnResizeHandleColor: token("color.stroke.control.rest"),
-  headerRowBorder: {
-    style: "solid",
-    color: token("color.stroke.control.rest"),
-    width: token("border-width.thin")
-  },
-  fontFamily: token("typography.font-family.base"),
-  fontSize: token("typography.font-size.base"),
-  headerFontWeight: token("typography.font-weight.semibold"),
-  rowBorder: {
-    style: "solid",
-    color: token("color.stroke.neutral.subtle"),
-    width: token("border-width.thin")
-  },
-  rowHeight: token("size.300"),
-  rowHoverColor: token("color.background.transparent.hover"),
-  oddRowBackgroundColor: token("color.background.transparent.hover"),
-  selectedRowBackgroundColor: token("color.background.transparent.selected"),
-  cellHorizontalPadding: token("spacing.75"),
-  pinnedColumnBorder: {
-    width: token("border-width.thin"),
-    style: "solid",
-    color: token("color.stroke.control.rest")
-  },
-  rangeSelectionBorderColor: token("color.stroke.focus.outer"),
-  iconSize: token("control.addon-size-sm"),
-  iconButtonActiveColor: token("color.foreground.rest"),
-  iconButtonActiveBackgroundColor: token("color.background.transparent.hover"),
-  iconButtonColor: token("color.foreground.rest"),
-  iconButtonBackgroundColor: "transparent",
-  iconButtonActiveIndicatorColor: token("color.foreground.rest"),
-  iconButtonHoverBackgroundColor: token("color.background.transparent.hover"),
-  iconColor: token("color.foreground.rest"),
-  invalidColor: token("color.background.warning.rest"),
-  browserColorScheme: "inherit",
-  menuBackgroundColor: token("color.background.level-2"),
-  menuBorder: "none",
-  menuShadow: token("elevation.shadow.level-2"),
-  menuTextColor: token("color.foreground.rest"),
-  widgetVerticalSpacing: token("spacing.100"),
-  footerRowBorder: {
-    style: "solid",
-    color: token("color.stroke.control.rest"),
-    width: token("border-width.thin")
-  },
-  focusShadow: {
-    color: token("color.stroke.focus.outer"),
-    offsetX: 0,
-    offsetY: 0,
-    spread: {
-      calc: "var(--odx-focus-ring-offset) * -1"
-    }
-  }
-}).withPart(coreStylesOdx);
-
+import { buttonStyleOdx } from "./lib/parts/button-style2.js";
+import { getIconContent, iconSetOdx } from "./lib/parts/icon-set.js";
+import { checkboxStyleOdx } from "./lib/parts/checkbox-style2.js";
+import { inputStyleOdx } from "./lib/parts/input-style2.js";
+import { tabStyleOdx } from "./lib/parts/tab-style2.js";
+import { themeOdx } from "./lib/theme.js";
 export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };

package/package.json

@@ -2,38 +2,37 @@
   "name": "@odx/addon-ag-grid",
   "displayName": "ODX AG Grid Theming Addon",
   "description": "A package providing integration and enhancements for ag-Grid within the ODX Foundation project",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
   "files": [
     "dist",
-    "LICENSE",
-    "!dist/**/*.map",
-    "!dist/**/*.stories.d.ts"
+    "!dist/**/*.map"
   ],
   "type": "module",
   "dependencies": {
-    "ag-grid-community": "^35.0.0"
+    "ag-grid-community": "^35.1.0"
   },
   "peerDependencies": {
-    "@odx/icons": "^4.2.0",
-    "@odx/design-tokens": "^3.3.0"
+    "@odx/design-tokens": "^4.0.0",
+    "@odx/icons": "^4.2.0"
   },
   "devDependencies": {
-    "@odx/icons": "4.2.1",
-    "lit": "3.3.2",
-    "stylelint": "16.26.1",
-    "@odx-internal/config-stylelint": "0.0.0",
-    "@odx-internal/config-typescript": "0.0.0",
-    "@odx-internal/config-vite": "0.0.0",
-    "@odx/design-tokens": "3.3.0"
+    "@odx/design-tokens": "4.2.0",
+    "@odx/icons": "4.9.1",
+    "@tsdown/css": "0.22.0",
+    "lit": "3.3.3",
+    "stylelint": "17.11.1",
+    "tsdown": "0.22.0",
+    "@odx-internal/config-stylelint": "0.0.0"
   },
   "sideEffects": [],
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "types": "./dist/main.d.ts"
+      "types": "./dist/main.d.ts",
+      "default": "./dist/main.js"
     }
   },
   "publishConfig": {
@@ -43,10 +42,10 @@
     "extends": "@odx-internal/config-stylelint"
   },
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch --mode=development",
-    "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
+    "build": "tsdown",
+    "dev": "tsdown  --no-clean --watch",
     "lint": "biome lint src",
+    "lint:styles": "stylelint '**/*.css'",
     "generate:manifest": "cem analyze"
   }
 }

package/dist/lib/parts/core-style.d.ts

@@ -1,3 +0,0 @@
-import { Part } from 'ag-grid-community';
-export declare const coreStylesOdx: Part;
-//# sourceMappingURL=core-style.d.ts.map

package/dist/oss-licenses.json

@@ -1 +0,0 @@
-[]