@odx/addon-ag-grid 1.2.1 → 1.3.0

package/README.md

@@ -88,7 +88,3 @@ 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>.

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

@@ -16,4 +16,3 @@ export declare const buttonStyleOdx: import('ag-grid-community').Part<{
     buttonDisabledBackgroundColor: import('ag-grid-community').ColorValue;
     buttonDisabledBorder: import('ag-grid-community').BorderValue;
 }>;
-//# sourceMappingURL=button-style.d.ts.map

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

@@ -0,0 +1,29 @@
+import { token } from '@odx/design-tokens';
+import { createPart } from 'ag-grid-community';
+
+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)}}";
+
+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
+});
+
+export { buttonStyleOdx };

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

@@ -13,4 +13,3 @@ export declare const checkboxStyleOdx: import('ag-grid-community').Part<{
     checkboxUncheckedBorderColor: import('ag-grid-community').ColorValue;
     radioCheckedShapeImage: import('ag-grid-community').ImageValue;
 }>;
-//# sourceMappingURL=checkbox-style.d.ts.map

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

@@ -0,0 +1,34 @@
+import { token } from '@odx/design-tokens';
+import { MinusIcon, CheckIcon } from '@odx/icons/core';
+import { createPart } from 'ag-grid-community';
+import { getIconContent } from './icon-set.js';
+
+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)}}";
+
+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
+});
+
+export { checkboxStyleOdx };

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

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

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

@@ -0,0 +1,10 @@
+import { createPart } from 'ag-grid-community';
+
+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
+});
+
+export { coreStylesOdx };

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

@@ -3,4 +3,3 @@ 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/icon-set.js

@@ -0,0 +1,73 @@
+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';
+import { iconOverrides } from 'ag-grid-community';
+
+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)
+  }
+});
+
+export { getIconContent, iconSetOdx };

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

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

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

@@ -0,0 +1,10 @@
+import { createPart } from 'ag-grid-community';
+
+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)}}";
+
+const inputStyleOdx = createPart({
+  feature: "inputStyle",
+  css: styles
+});
+
+export { inputStyleOdx };

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

@@ -19,4 +19,3 @@ export declare const tabStyleOdx: import('ag-grid-community').Part<{
     tabTextColor: import('ag-grid-community').ColorValue;
     tabTopPadding: import('ag-grid-community').LengthValue;
 }>;
-//# sourceMappingURL=tab-style.d.ts.map

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

@@ -0,0 +1,49 @@
+import { createPart } from 'ag-grid-community';
+
+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)}}}";
+
+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
+});
+
+export { tabStyleOdx };

package/dist/lib/theme.d.ts

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

package/dist/lib/theme.js

@@ -0,0 +1,70 @@
+import { token } from '@odx/design-tokens';
+import { createTheme } from 'ag-grid-community';
+import { coreStylesOdx } from './parts/core-style.js';
+import { iconSetOdx } from './parts/icon-set.js';
+
+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

@@ -4,4 +4,3 @@ 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

@@ -1,251 +1,6 @@
-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);
-
-export { buttonStyleOdx, checkboxStyleOdx, getIconContent, iconSetOdx, inputStyleOdx, tabStyleOdx, themeOdx };
+export { buttonStyleOdx } from './lib/parts/button-style.js';
+export { checkboxStyleOdx } from './lib/parts/checkbox-style.js';
+export { getIconContent, iconSetOdx } from './lib/parts/icon-set.js';
+export { inputStyleOdx } from './lib/parts/input-style.js';
+export { tabStyleOdx } from './lib/parts/tab-style.js';
+export { themeOdx } from './lib/theme.js';

package/package.json

@@ -2,7 +2,7 @@
   "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.1",
+  "version": "1.3.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -14,26 +14,27 @@
   ],
   "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.2.1"
+    "@odx/design-tokens": "^4.0.2"
   },
   "devDependencies": {
-    "@odx/icons": "4.2.1",
+    "@odx/icons": "4.5.1",
     "lit": "3.3.2",
-    "stylelint": "16.26.1",
+    "stylelint": "17.5.0",
     "@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.2.1"
+    "@odx/design-tokens": "4.0.2"
   },
   "sideEffects": [],
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "types": "./dist/main.d.ts"
+      "types": "./dist/main.d.ts",
+      "default": "./dist/main.js"
     }
   },
   "publishConfig": {