@odx/addon-ag-grid 1.0.0

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright (c) 2023 Drägerwerk AG & Co.KGaA, all rights reserved.
+
+The use of the associated software is only permitted within the scope of a usage permit. For customers of Dräger, this right of use and its scope is derived from the contracts concluded with Dräger. Service providers/suppliers of Dräger may use the associated software for the provision of services to Dräger to the extent resulting from the contracts concluded with Dräger. Use by other third parties is expressly not permitted.
+
+Die Nutzung der zugehörigen Software ist nur im Rahmen einer Nutzungserlaubnis gestattet. Für Kunden von Dräger ergibt sich dieses Nutzungsrecht und sein Umfang aus den mit Dräger geschlossenen Verträgen. Dienstleister/Lieferanten von Dräger dürfen die zugehörige Software zur Leistungserbringung gegenüber Dräger in dem Umfang verwenden, wie es sich aus den mit Dräger abgeschlossenen Verträgen ergibt. Eine Nutzung durch sonstige Dritte ist ausdrücklich nicht gestattet.

package/README.md

@@ -0,0 +1,94 @@
+# @odx/addon-ag-grid
+
+The `@odx/addon-ag-grid` package ships an ODX-branded theme for AG Grid. It gives you a turn-key way to align data grids with the ODX Design System while keeping access to every AG Grid capability.
+
+### Features
+
+- **ODX visual language**: Applies typography, spacing, color, and elevation tokens from the ODX Design System out of the box.
+- **Composable parts**: Start from the base `themeOdx` and opt into button, checkbox, input, and tab refinements as needed.
+- **Icon bundle included**: Ships with `iconSetOdx`, so grid controls pick up the full ODX iconography set without extra wiring.
+- **AG Grid ready**: Works with `ag-grid-community` v34+ and respects the new Theme API for smooth integration.
+
+### Install
+
+[<img alt="NPM Version (with dist tag)" src="https://img.shields.io/npm/v/%40odx%2Faddon-ag-grid/latest?style=flat-square">](https://npmjs.org/package/@odx/addon-ag-grid)
+
+```bash
+npm install @odx/addon-ag-grid --save
+```
+
+### Requirements
+
+- `@odx/design-tokens` (peer dependency for tokens)
+- `@odx/icons` (peer dependency for icon glyphs)
+- `ag-grid-community` v34 or newer
+
+### Usage
+
+Import the theme and optional parts you want to enable. The base theme already registers the full icon bundle, so you only need to opt into extra controls when you are ready to style them.
+
+```ts
+import {
+  buttonStyleOdx,
+  checkboxStyleOdx,
+  inputStyleOdx,
+  tabStyleOdx,
+  themeOdx,
+} from '@odx/addon-ag-grid';
+import type { GridOptions } from 'ag-grid-community';
+
+const odxTheme = themeOdx
+  .withPart(buttonStyleOdx)
+  .withPart(checkboxStyleOdx)
+  .withPart(inputStyleOdx)
+  .withPart(tabStyleOdx);
+
+export const gridOptions: GridOptions = {
+  // your existing grid configuration
+  columnDefs: [],
+  rowData: [],
+  theme: odxTheme,
+};
+```
+
+Add or remove parts to match the AG Grid features you are using. Each part maps to an AG Grid Theme API feature, so you only pay the CSS cost for controls you adopt.
+
+### Theme Parts
+
+- `themeOdx` - Registers the core ODX theme tokens, layout primitives, ODX typography, and density.
+- `iconSetOdx` - Supplies the ODX icon bundle for grid controls out of the box.
+- `buttonStyleOdx` - Gives grid buttons the ODX look, spacing, and interaction states.
+- `checkboxStyleOdx` - Aligns selection checkboxes with ODX shapes and color tokens.
+- `inputStyleOdx` - Matches filter and inline inputs to the ODX form pattern.
+- `tabStyleOdx` - Styles grid tabs (in development for AG Grid Enterprise tab support).
+
+### Custom Parts
+
+Extend the theme with your own part when you need bespoke styling:
+
+```ts
+import { createPart } from 'ag-grid-community';
+
+const myCustomAddon = createPart({
+  feature: 'myCustomAddon',
+  css: `
+    /* write styles inline or import from a CSS module */
+  `,
+});
+
+const odxTheme = themeOdx
+  .withPart(buttonStyleOdx)
+  .withPart(checkboxStyleOdx)
+  .withPart(inputStyleOdx)
+  .withPart(tabStyleOdx)
+  // last part
+  .withPart(myCustomAddon);
+```
+
+### 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>.

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

@@ -0,0 +1,19 @@
+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;
+}>;
+//# sourceMappingURL=button-style.d.ts.map

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

@@ -0,0 +1,16 @@
+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;
+}>;
+//# sourceMappingURL=checkbox-style.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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;
+}>;
+//# sourceMappingURL=tab-style.d.ts.map

package/dist/lib/theme.d.ts

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

package/dist/main.d.ts

@@ -0,0 +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

package/dist/main.js

@@ -0,0 +1,251 @@
+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 = ":where(.ag-button){transition:var(--odx-transition-reduced);cursor:pointer;text-indent:inherit;text-transform:inherit;text-shadow:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;background:0 0;border:none;margin:0;padding:0;transition-property:background-color,border-color,color;&:disabled{cursor:default}&:focus-visible{outline:var(--odx-focus-ring-outer);box-shadow:var(--odx-focus-ring-inner)}}.ag-standard-button{appearance:none;border:var(--ag-button-border);border-radius:var(--ag-button-border-radius);background-color:var(--ag-button-background-color);cursor:pointer;padding:var(--ag-button-vertical-padding)var(--ag-button-horizontal-padding);color:var(--ag-button-text-color);font-weight:var(--ag-button-font-weight);&:hover{border:var(--ag-button-hover-border);background-color:var(--ag-button-hover-background-color);color:var(--ag-button-hover-text-color)}&:active{border:var(--ag-button-active-border);background-color:var(--ag-button-active-background-color);color:var(--ag-button-active-text-color)}&:disabled{border:var(--ag-button-disabled-border);background-color:var(--ag-button-disabled-background-color);color:var(--ag-button-disabled-text-color)}}";
+
+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("control.border-radius"),
+    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-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(.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)}}&:where(:focus-within){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:where(.ag-disabled){filter:grayscale();opacity:.5}:where(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);&:where(.ag-checked):after{mask-image:var(--ag-checkbox-checked-shape-image)}&:where(.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%;&:where(.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("control.border-radius"),
+    checkboxBorderWidth: token("control.border-width"),
+    checkboxUncheckedBackgroundColor: token("control.color.background.rest"),
+    checkboxUncheckedBorderColor: token("control.color.stroke.rest"),
+    checkboxCheckedBackgroundColor: token("control.color.background.selected"),
+    checkboxCheckedBorderColor: token("control.color.stroke.selected"),
+    checkboxCheckedShapeColor: token("color.foreground.inverse-static"),
+    checkboxCheckedShapeImage: {
+      svg: getIconContent(CheckIcon).svg
+    },
+    checkboxIndeterminateBackgroundColor: token("control.color.background.selected"),
+    checkboxIndeterminateBorderColor: token("control.color.stroke.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 = ":where(.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:where(input:not([type]),input[type=text],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],textarea){--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);border-bottom:var(--odx-control-border-width)solid var(--odx-control-color-stroke-rest);border-radius:var(--odx-control-border-radius);background-color:var(--_color-background);padding-block:calc(var(--odx-control-spacing-md) - var(--odx-control-border-width));padding-inline:calc(var(--odx-control-spacing-inline-md) - var(--odx-control-border-width));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-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&:where(: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)}&:where(:focus){outline:var(--odx-focus-ring-outer);box-shadow:var(--odx-focus-ring-inner)}&:where(:invalid),&:where(.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}:where(.ag-ltr) .ag-tabs-close-button-wrapper{border-right:solid var(--ag-border-width)var(--ag-border-color)}:where(.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}}:where(.ag-ltr) .ag-tab{&.ag-tab-selected{&:where(:not(:first-of-type)){border-left-color:var(--ag-tab-selected-border-color)}&:where(:not(:last-of-type)){border-right-color:var(--ag-tab-selected-border-color)}}}:where(.ag-rtl) .ag-tab{&.ag-tab-selected{&:where(:not(:first-of-type)){border-right-color:var(--ag-tab-selected-border-color)}&:where(: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-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-control-border-width)solid var(--odx-control-color-stroke-rest);border-radius:var(--odx-control-border-radius);background-color:var(--odx-control-color-background-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-control-border-radius);box-shadow:var(--odx-elevation-shadow-level-2);background-color:var(--odx-color-background-level-2);.ag-select-list-item{border:var(--odx-control-border-width)solid transparent;padding-block:calc(var(--odx-control-spacing-md) - var(--odx-control-border-width));padding-inline:calc(var(--odx-control-spacing-inline-md) - var(--odx-control-border-width));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: token("color.background.transparent.rest"),
+  headerColumnResizeHandleColor: token("control.color.stroke.rest"),
+  headerRowBorder: {
+    style: "solid",
+    color: token("control.color.stroke.rest"),
+    width: token("control.border-width")
+  },
+  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("control.border-width")
+  },
+  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("control.border-width"),
+    style: "solid",
+    color: token("control.color.stroke.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: token("color.background.transparent.rest"),
+  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("control.color.stroke.rest"),
+    width: token("control.border-width")
+  },
+  focusShadow: {
+    color: token("color.stroke.focus.outer"),
+    offsetX: 0,
+    offsetY: 0,
+    spread: {
+      calc: "var(--odx-focus-ring-offset) * -1"
+    }
+  }
+}).withPart(coreStylesOdx);
+
+export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "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.0.0",
+  "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"
+  ],
+  "type": "module",
+  "dependencies": {
+    "ag-grid-community": "^34.2.0",
+    "lit": "3.3.1"
+  },
+  "peerDependencies": {
+    "@odx/icons": "^4.0.0-rc.49",
+    "@odx/design-tokens": "^2.2.0"
+  },
+  "devDependencies": {
+    "@odx/icons": "4.0.0-rc.49",
+    "stylelint": "16.25.0",
+    "@odx/design-tokens": "2.2.0",
+    "@odx-internal/config-stylelint": "0.0.0",
+    "@odx-internal/config-typescript": "0.0.0",
+    "@odx-internal/config-vite": "0.0.0",
+    "@odx-internal/utils-storybook": "0.0.0"
+  },
+  "sideEffects": [
+    "dist/main.js"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "types": "./dist/main.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stylelint": {
+    "extends": "@odx-internal/config-stylelint"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch --mode=development",
+    "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
+    "lint": "biome lint src",
+    "generate:manifest": "cem analyze"
+  }
+}