@siemens/element-ng 48.9.0 → 49.0.0-rc.1

package/fesm2022/siemens-element-ng-ag-grid.mjs

@@ -0,0 +1,842 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Component, signal, makeEnvironmentProviders } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SiDatepickerDirective, SiCalendarButtonComponent } from '@siemens/element-ng/datepicker';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
+import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { createPart, iconOverrides, themeAlpine, iconSetAlpine, provideGlobalGridOptions } from 'ag-grid-community';
+import { elementCheckedImageShape, elementMenu, elementSortUp, elementLinkBroken, elementDown2, elementMinus, elementRight2, elementOk, elementUp2, elementLeft2, elementDownload, elementRight4, elementPlus, elementPin, elementPaste, elementOutOfService, elementPinch, elementOptionsVertical, elementZoom, elementBusy, elementLink, elementLeft4, elementJumpToListItem, elementFilter, elementShow, elementHide, elementEdit, elementDown4, elementCut, elementCancel, elementCopy, elementLayoutPane3Alt, elementPalette, elementReport, elementUp4, elementMove, elementSum } from '@siemens/element-ng/icon';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Custom AG Grid date component using Element datepicker.
+ * This component replaces the native HTML date input with the Element design system datepicker.
+ */
+class AgDateInputComponent {
+    elementRef = inject(ElementRef);
+    /**
+     * The selected date value.
+     */
+    date = undefined;
+    /**
+     * AG Grid date filter parameters.
+     * @internal
+     */
+    params;
+    /**
+     * Document click event listener for calendar overlay.
+     * @internal
+     */
+    documentClickListener;
+    /**
+     * Notifies AG Grid when the date value changes.
+     * @internal
+     */
+    onDateChange() {
+        if (this.params) {
+            this.params.onDateChanged();
+        }
+    }
+    /**
+     * Lifecycle hook called after the component GUI is attached.
+     * Sets up event listeners to prevent filter popup from closing when interacting with calendar.
+     */
+    afterGuiAttached() {
+        // Remove any existing listener to prevent duplicates
+        if (this.documentClickListener) {
+            document.removeEventListener('mousedown', this.documentClickListener, true);
+        }
+        // Intercept document click events to keep the filter open when clicking the calendar
+        this.documentClickListener = (event) => {
+            const target = event.target;
+            const calendarOverlay = target.closest('si-datepicker, .cdk-overlay-pane');
+            if (calendarOverlay) {
+                event.stopPropagation();
+            }
+        };
+        document.addEventListener('mousedown', this.documentClickListener, true);
+    }
+    ngOnDestroy() {
+        if (this.documentClickListener) {
+            document.removeEventListener('mousedown', this.documentClickListener, true);
+        }
+    }
+    agInit(params) {
+        this.params = params;
+    }
+    getDate() {
+        return this.date ?? null;
+    }
+    getGui() {
+        return this.elementRef.nativeElement;
+    }
+    setDate(date) {
+        this.date = date ?? undefined;
+        if (this.params) {
+            this.params.onDateChanged();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AgDateInputComponent, isStandalone: true, selector: "si-ag-date-input", ngImport: i0, template: `
+    <si-form-item>
+      <si-calendar-button class="w-100">
+        <input
+          type="text"
+          class="form-control"
+          siDatepicker
+          [autoClose]="true"
+          [(ngModel)]="date"
+          (ngModelChange)="onDateChange()"
+        />
+      </si-calendar-button>
+    </si-form-item>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "component", type: SiFormItemComponent, selector: "si-form-item", inputs: ["label", "labelWidth", "disableErrorPrinting", "formErrorMapper", "required"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgDateInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-ag-date-input',
+                    imports: [FormsModule, SiDatepickerDirective, SiCalendarButtonComponent, SiFormItemComponent],
+                    template: `
+    <si-form-item>
+      <si-calendar-button class="w-100">
+        <input
+          type="text"
+          class="form-control"
+          siDatepicker
+          [autoClose]="true"
+          [(ngModel)]="date"
+          (ngModelChange)="onDateChange()"
+        />
+      </si-calendar-button>
+    </si-form-item>
+  `
+                }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Custom AG Grid no rows overlay component using Element Empty State.
+ * This component is displayed when the grid has no data to show.
+ *
+ * @example
+ * Using with custom parameters
+ * ```typescript
+ * <ag-grid-angular
+ *   [noRowsOverlayComponent]="AgNoRowsOverlayComponent"
+ *   [noRowsOverlayComponentParams]="{
+ *     icon: 'element-technical-search',
+ *     heading: 'No results found',
+ *     content: 'Try adjusting your filters.'
+ *   }"
+ * />
+ * ```
+ */
+class AgNoRowsOverlayComponent {
+    /**
+     * Icon to display in the empty state.
+     *
+     */
+    icon = signal('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * Heading text for the empty state.
+     *
+     */
+    heading = signal('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    /**
+     * Description text for the empty state.
+     *
+     */
+    content = signal(undefined, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    agInit(params) {
+        this.icon.set(params.icon);
+        this.heading.set(params.heading);
+        this.content.set(params.content);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AgNoRowsOverlayComponent, isStandalone: true, selector: "si-ag-no-rows-overlay", ngImport: i0, template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: SiEmptyStateComponent, selector: "si-empty-state", inputs: ["icon", "heading", "content"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AgNoRowsOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-ag-no-rows-overlay', imports: [SiEmptyStateComponent], template: ` <si-empty-state [icon]="icon()" [heading]="heading()" [content]="content()" /> `, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a checkbox style part for the Element AG Grid theme.
+ * This part overrides the unchecked checkbox hover state to match Element design system.
+ *
+ * @returns A part that defines checkbox styling for the Element AG Grid theme.
+ */
+const elementCheckboxStyle = createPart({
+    css: `
+.ag-checkbox-input-wrapper:not(.ag-checked):not(.ag-indeterminate):hover {
+  border-color: var(--element-action-secondary-border-hover);
+  background: var(--element-action-secondary-hover);
+}
+`
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a comprehensive color scheme part for the Element AG Grid theme.
+ *
+ * This part applies Element design system colors and styling to all AG Grid components,
+ * including:
+ * - Typography (fonts, weights, sizes)
+ * - Base colors (backgrounds, borders, foreground)
+ * - Interactive elements (buttons, inputs, icons)
+ * - Cell and row styling (hover, selection, borders)
+ * - Header components
+ * - Checkboxes and form controls
+ * - Menus, dialogs, and overlays
+ * - Tooltips and tabs
+ * - Charts and visualizations
+ *
+ * All colors are mapped to CSS custom properties from the Element design system,
+ * ensuring consistency with other Element components and automatic theme support.
+ *
+ * @returns A part that defines the complete color scheme for the Element AG Grid theme.
+ */
+const elementColorScheme = createPart({
+    feature: 'colorScheme',
+    params: {
+        // Typography
+        buttonFontWeight: '600',
+        cellFontFamily: 'var(--element-body-font-family)',
+        fontFamily: 'var(--element-body-font-family)',
+        fontSize: '14px',
+        headerFontWeight: '600',
+        // Base colors:
+        accentColor: 'var(--element-focus-default)',
+        backgroundColor: 'var(--element-base-1)',
+        borderColor: 'var(--element-ui-4)',
+        foregroundColor: 'var(--element-text-primary)',
+        invalidColor: 'var(--element-status-danger)',
+        subtleTextColor: 'var(--element-text-secondary)',
+        // Button styles
+        buttonActiveBackgroundColor: 'var(--element-action-secondary-hover)',
+        buttonActiveBorder: {
+            color: 'var(--element-action-secondary-hover)'
+        },
+        buttonActiveTextColor: 'var(--element-action-secondary-text-hover)',
+        buttonBackgroundColor: 'var(--element-action-secondary)',
+        buttonBorder: {
+            color: 'var(--element-action-secondary-border)'
+        },
+        buttonTextColor: 'var(--element-action-secondary-text)',
+        buttonHoverBackgroundColor: 'var(--element-action-secondary-hover)',
+        buttonHoverBorder: {
+            color: 'var(--element-action-secondary-border-hover)'
+        },
+        buttonHoverTextColor: 'var(--element-action-secondary-text-hover)',
+        buttonDisabledBackgroundColor: 'var(--element-action-secondary)',
+        buttonDisabledTextColor: 'var(--element-text-disabled)',
+        buttonDisabledBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        // Advanced filter builder styles
+        advancedFilterBuilderButtonBarBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        advancedFilterBuilderJoinPillColor: 'var(--element-base-danger)',
+        advancedFilterBuilderColumnPillColor: 'var(--element-base-success)',
+        advancedFilterBuilderOptionPillColor: 'var(--element-base-warning)',
+        advancedFilterBuilderValuePillColor: 'var(--element-base-information)',
+        // Cell styles
+        cellEditingBorder: {
+            color: 'var(--element-action-primary)'
+        },
+        cellTextColor: 'var(--element-text-primary)',
+        // Column styles
+        columnBorder: {
+            color: 'var(--element-action-secondary)'
+        },
+        columnDropCellBackgroundColor: 'var(--element-base-1)',
+        columnDropCellBorder: {
+            color: 'var(--element-action-secondary)'
+        },
+        columnDropCellDragHandleColor: 'var(--element-text-primary)',
+        columnDropCellTextColor: 'var(--element-text-primary)',
+        columnHoverColor: 'var(--element-base-1-hover)',
+        // Row styles
+        oddRowBackgroundColor: 'var(--element-base-1)',
+        rowBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        rowHoverColor: 'var(--element-base-1-hover)',
+        rowLoadingSkeletonEffectColor: 'var(--element-base-1)',
+        selectedRowBackgroundColor: 'var(--element-base-1-selected)',
+        // Dialog and footer styles
+        footerRowBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        dialogBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        // Checkbox styles
+        checkboxBorderRadius: '2px',
+        checkboxBorderWidth: '1px',
+        checkboxCheckedBackgroundColor: 'var(--element-action-primary)',
+        checkboxCheckedBorderColor: 'var(--element-action-primary)',
+        checkboxCheckedShapeColor: 'var(--element-action-primary-text)',
+        checkboxCheckedShapeImage: {
+            url: elementCheckedImageShape
+        },
+        checkboxIndeterminateBackgroundColor: 'var(--element-action-primary)',
+        checkboxIndeterminateBorderColor: 'var(--element-action-primary)',
+        checkboxIndeterminateShapeColor: 'var(--element-base-1)',
+        checkboxUncheckedBackgroundColor: 'var(--element-base-1)',
+        checkboxUncheckedBorderColor: 'var(--element-ui-1)',
+        // Header styles
+        headerBackgroundColor: 'var(--element-base-1)',
+        headerCellHoverBackgroundColor: 'var(--element-base-1-hover)',
+        headerColumnBorder: {
+            color: 'var(--element-action-secondary)'
+        },
+        headerColumnResizeHandleColor: 'var(--element-ui-4)',
+        headerRowBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        // Input styles
+        inputBackgroundColor: 'var(--element-base-1)',
+        inputBorder: {
+            color: 'var(--element-ui-2)'
+        },
+        inputBorderRadius: '2px',
+        inputDisabledBackgroundColor: 'var(--element-base-1)',
+        inputDisabledBorder: {
+            color: 'var(--element-ui-3)'
+        },
+        inputDisabledTextColor: 'var(--element-text-disabled)',
+        inputFocusBorder: {
+            color: 'var(--element-focus-default)'
+        },
+        inputFocusShadow: false,
+        inputIconColor: 'var(--element-ui-1)',
+        inputInvalidBorder: {
+            color: 'var(--element-status-danger)'
+        },
+        inputTextColor: 'var(--element-text-primary)',
+        // Icon styles
+        iconButtonActiveBackgroundColor: 'var(--element-base-1-selected)',
+        iconButtonActiveColor: 'var(--element-action-primary-hover)',
+        iconButtonActiveIndicatorColor: 'var(--element-action-primary-hover)',
+        iconButtonBackgroundColor: 'var(--element-action-secondary)',
+        iconButtonColor: 'var(--element-text-primary)',
+        iconButtonHoverBackgroundColor: 'var(--element-base-1-hover)',
+        iconButtonHoverColor: 'var(--element-text-primary)',
+        iconColor: 'var(--element-text-primary)',
+        iconSize: '18px',
+        // Menu styles
+        menuBackgroundColor: 'var(--element-base-1)',
+        menuBorder: false,
+        menuShadow: '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
+        // Pinning styles
+        pinnedColumnBorder: {
+            color: 'var(--element-base-1-selected)'
+        },
+        pinnedRowBorder: {
+            color: 'var(--element-base-1-selected)'
+        },
+        // Drag and drop styles
+        dragAndDropImageBackgroundColor: 'var(--element-base-3)',
+        dragAndDropImageBorder: false,
+        dragAndDropImageShadow: '0 0 8px var(--element-box-shadow-color-1), 0 8px 8px var(--element-box-shadow-color-2)',
+        dragHandleColor: 'var(--element-text-primary)',
+        // Range selection styles
+        rangeHeaderHighlightColor: 'var(--element-base-1)',
+        rangeSelectionBackgroundColor: 'var(--element-base-1-selected)',
+        rangeSelectionBorderColor: 'var(--element-action-primary-hover)',
+        rangeSelectionHighlightColor: 'var(--element-base-1-selected)',
+        // Sidebar styles
+        sideBarBackgroundColor: 'var(--element-base-1)',
+        sidePanelBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        // Side button styles
+        sideButtonBackgroundColor: 'var(--element-action-secondary)',
+        sideButtonBarBackgroundColor: 'var(--element-base-1)',
+        sideButtonHoverBackgroundColor: 'var(--element-base-1-hover)',
+        sideButtonSelectedBackgroundColor: 'var(--element-base-1-selected)',
+        sideButtonSelectedBorder: 'var(--element-action-secondary-border)',
+        sideButtonSelectedUnderlineColor: 'var(--element-base-1-selected)',
+        // Status bar styles
+        statusBarLabelColor: 'var(--element-text-primary)',
+        statusBarValueColor: 'var(--element-text-primary)',
+        // Select cell styles
+        selectCellBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        // Toggle button styles - matching Element switch design
+        toggleButtonHeight: '20px',
+        toggleButtonOffBackgroundColor: 'var(--element-ui-4)',
+        toggleButtonOnBackgroundColor: 'var(--element-ui-0)',
+        toggleButtonSwitchBackgroundColor: 'var(--element-ui-2)',
+        toggleButtonSwitchInset: '4px',
+        toggleButtonWidth: '40px',
+        // Value change styles
+        valueChangeDeltaDownColor: 'var(--element-status-danger)',
+        valueChangeDeltaUpColor: 'var(--element-status-success)',
+        valueChangeValueHighlightBackgroundColor: 'var(--element-base-1-selected)',
+        // Tooltip styles
+        tooltipBackgroundColor: 'var(--element-base-translucent-2)',
+        tooltipBorder: false,
+        tooltipTextColor: 'var(--element-text-inverse)',
+        // Tab styles
+        tabBackgroundColor: 'var(--element-action-secondary)',
+        tabBarBackgroundColor: 'var(--element-base-1)',
+        tabBarBorder: {
+            color: 'var(--element-ui-4)'
+        },
+        tabHoverBackgroundColor: 'var(--element-action-secondary)',
+        tabSelectedTextColor: 'var(--element-action-primary)',
+        tabSelectedUnderlineColor: 'var(--element-action-secondary)',
+        // Chart styles
+        chartMenuLabelColor: 'var(--element-text-primary)',
+        // Misc styles
+        focusShadow: false,
+        wrapperBorder: false
+    }
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Utility function to convert data URI icon map to AG Grid icon format.
+ * Extracts base64 SVG data from data URIs.
+ *
+ * @param icons - Record of icon names to data URI strings
+ * @returns Record of icon names to AG Grid icon objects with SVG data
+ */
+const createIconMap = (icons) => Object.fromEntries(Object.entries(icons).map(([key, dataUri]) => [key, { svg: dataUri.split(',')[1] }]));
+/**
+ * Creates an icon overrides part for the Element AG Grid theme.
+ * This part allows customization of AG Grid icons with Element design system icons.
+ * Icons can be added to the icons map as needed.
+ *
+ * @returns A part that defines icon overrides for the Element AG Grid theme.
+ */
+const elementIconOverrides = iconOverrides({
+    type: 'image',
+    mask: true,
+    icons: createIconMap({
+        aggregation: elementSum,
+        arrows: elementMove,
+        asc: elementUp4,
+        cancel: elementCancel,
+        chart: elementReport,
+        'chevron-down': elementDown2,
+        'chevron-left': elementLeft2,
+        'chevron-right': elementRight2,
+        'chevron-up': elementUp2,
+        'color-picker': elementPalette,
+        columns: elementLayoutPane3Alt,
+        contracted: elementRight2,
+        copy: elementCopy,
+        cross: elementCancel,
+        cut: elementCut,
+        desc: elementDown4,
+        edit: elementEdit,
+        expanded: elementLeft2,
+        'eye-slash': elementHide,
+        eye: elementShow,
+        filter: elementFilter,
+        group: elementJumpToListItem,
+        left: elementLeft4,
+        linked: elementLink,
+        loading: elementBusy,
+        maximize: elementZoom,
+        menu: elementOptionsVertical,
+        'menu-alt': elementOptionsVertical,
+        minimize: elementPinch,
+        minus: elementMinus,
+        next: elementRight2,
+        'not-allowed': elementOutOfService,
+        paste: elementPaste,
+        pin: elementPin,
+        plus: elementPlus,
+        previous: elementLeft2,
+        right: elementRight4,
+        save: elementDownload,
+        'small-down': elementDown2,
+        'small-left': elementLeft2,
+        'small-right': elementRight2,
+        'small-up': elementUp2,
+        tick: elementOk,
+        'tree-closed': elementRight2,
+        'tree-indeterminate': elementMinus,
+        'tree-open': elementDown2,
+        unlinked: elementLinkBroken,
+        up: elementSortUp,
+        grip: elementMenu
+    })
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a pagination style part for the Element AG Grid theme.
+ * This part applies font weight styling to pagination summary numbers.
+ *
+ * @returns A part that defines pagination styling for the Element AG Grid theme.
+ */
+const elementPaginationStyle = createPart({
+    css: `
+    .ag-paging-row-summary-panel-number {
+      font-weight: 600;
+    }
+  `
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a pinning style part for the Element AG Grid theme.
+ * This part applies box shadow styling to floating top and bottom rows.
+ *
+ * @returns A part that defines pinning styles for the Element AG Grid theme.
+ */
+const elementPinningStyle = createPart({
+    css: `
+  .ag-floating-top {
+    box-shadow:
+      0 0 8px var(--element-box-shadow-color-1),
+      0 8px 8px var(--element-box-shadow-color-2);
+    z-index: 1;
+    position: relative;
+  }
+
+  .ag-floating-bottom {
+    box-shadow:
+      0 0 8px var(--element-box-shadow-color-1),
+      0 -8px 8px var(--element-box-shadow-color-2);
+    z-index: 1;
+    position: relative;
+  }
+`
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a radio button style part for the Element AG Grid theme.
+ * This part applies Element design system styling to radio buttons including colors,
+ * hover states, checked states, and disabled states.
+ *
+ * @returns A part that defines radio button styling for the Element AG Grid theme.
+ */
+const elementRadioStyle = createPart({
+    css: `
+  .ag-radio-button-input-wrapper {
+  background-color: var(--element-ui-5);
+  border: 1px solid var(--element-ui-1);
+}
+
+.ag-radio-button-input-wrapper:hover {
+  border-color: var(--element-action-secondary-border-hover);
+  background: var(--element-action-secondary-hover);
+}
+
+.ag-radio-button-input-wrapper.ag-checked {
+  border-color: var(--element-ui-0);
+  background-color: var(--element-ui-5);
+}
+
+.ag-radio-button-input-wrapper.ag-checked::after {
+  background-color: var(--element-ui-0);
+  mask-image: none;
+  inset: 4px;
+  border-radius: 50%;
+}
+
+.ag-radio-button-input-wrapper.ag-checked:hover {
+  border-color: var(--element-ui-0-hover);
+}
+
+.ag-radio-button-input-wrapper.ag-checked:hover::after {
+  background-color: var(--element-ui-0-hover);
+}
+
+.ag-radio-button-input-wrapper.ag-disabled {
+  border-color: var(--element-ui-3);
+  background-color: var(--element-ui-5);
+  opacity: 1;
+}
+
+.ag-radio-button-input-wrapper.ag-checked.ag-disabled {
+  border-color: var(--element-ui-3);
+}
+
+.ag-radio-button-input-wrapper.ag-checked.ag-disabled::after {
+  background-color: var(--element-ui-3);
+}
+`
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a skeleton style part for the Element AG Grid theme.
+ * This part applies Element design system shimmer animation to skeleton loading effects
+ * to match the Element skeleton component design.
+ *
+ * @returns A part that defines skeleton loading styles for the Element AG Grid theme.
+ */
+const elementSkeletonStyle = createPart({
+    css: `
+    @keyframes shimmer {
+      to {
+        background-position-x: -100%;
+      }
+    }
+
+    .ag-skeleton-effect {
+      background: linear-gradient(
+        90deg,
+        var(--element-base-1-hover) 0%,
+        var(--element-base-1-selected) 25%,
+        var(--element-base-1-hover) 50%
+      );
+      background-size: 200% 100%;
+      background-position-x: 100%;
+      animation: shimmer calc(1.6s * var(--element-animations-enabled, 1)) ease-in-out infinite;
+    }
+  `
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a text filter style part for the Element AG Grid theme.
+ * This part applies Element design system styling to text filter search inputs,
+ * including border width and background color customization.
+ *
+ * @returns A part that defines text filter search input styling for the Element AG Grid theme.
+ */
+const elementTextFilterStyle = createPart({
+    css: `
+  .ag-column-select-header-filter-wrapper,
+.ag-filter-toolpanel-search,
+.ag-mini-filter,
+.ag-filter-filter,
+.ag-filter-add-select {
+  .ag-text-field-input[type='text'] {
+    border-width: 0;
+    background-color: var(--element-base-4);
+  }
+}
+`
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a toggle button style part for the Element AG Grid theme.
+ * This part applies Element design system switch styling including hover states,
+ * transitions, and proper knob positioning to match the Element switch component.
+ *
+ * @returns A part that defines toggle button styling for the Element AG Grid theme.
+ */
+const elementToggleStyle = createPart({
+    css: `
+    .ag-toggle-button-input-wrapper {
+      transition: background-color 0.4s;
+    }
+
+    .ag-toggle-button-input-wrapper::before {
+      transition: left 0.4s;
+    }
+
+    .ag-toggle-button-input-wrapper:not(.ag-checked):hover {
+      background-color: var(--element-ui-4);
+    }
+
+    .ag-toggle-button-input-wrapper.ag-checked:hover {
+      background-color: var(--element-ui-0-hover);
+    }
+
+    .ag-toggle-button-input-wrapper.ag-checked::before {
+      background-color: var(--element-ui-5);
+    }
+  `
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base theme combining all Element design system parts with AG Grid Alpine theme.
+ * This theme includes custom styling for checkboxes, radios, toggles, pagination,
+ * pinning, skeleton loaders, text filters, icons, and color scheme.
+ * @internal
+ */
+const elementBaseTheme = themeAlpine
+    .withPart(iconSetAlpine)
+    .withPart(elementCheckboxStyle)
+    .withPart(elementRadioStyle)
+    .withPart(elementToggleStyle)
+    .withPart(elementPaginationStyle)
+    .withPart(elementPinningStyle)
+    .withPart(elementSkeletonStyle)
+    .withPart(elementTextFilterStyle)
+    .withPart(elementIconOverrides)
+    .withPart(elementColorScheme);
+/**
+ * Standard density Element AG Grid theme.
+ * Provides balanced spacing suitable for most use cases.
+ * - Row height: 42px
+ * - Header height: 48px
+ * - Spacing: 8px
+ */
+const elementTheme = elementBaseTheme.withParams({
+    rowHeight: '42px',
+    headerHeight: '48px',
+    spacing: '8px'
+});
+/**
+ * Compact density Element AG Grid theme.
+ * Optimized for displaying more data in limited space.
+ * - Row height: 28px
+ * - Header height: 32px
+ * - Spacing: 4px
+ */
+const elementThemeCompact = elementBaseTheme.withParams({
+    rowHeight: '28px',
+    headerHeight: '32px',
+    spacing: '4px'
+});
+/**
+ * Comfort density Element AG Grid theme.
+ * Provides generous spacing for enhanced readability and touch interactions.
+ * - Row height: 84px
+ * - Header height: 96px
+ * - Spacing: 12px
+ */
+const elementThemeComfort = elementBaseTheme.withParams({
+    rowHeight: '84px',
+    headerHeight: '96px',
+    spacing: '12px'
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Default AG Grid options for Element theme.
+ * Includes custom components for date input and empty state overlay.
+ * @internal
+ */
+const ELEMENT_AG_GRID_OPTIONS = {
+    tooltipShowDelay: 200,
+    components: {
+        agDateInput: AgDateInputComponent,
+        agNoRowsOverlay: AgNoRowsOverlayComponent
+    }
+};
+/**
+ * Theme mapping by density variant.
+ * @internal
+ */
+const THEME_BY_DENSITY = new Map([
+    ['compact', elementThemeCompact],
+    ['comfort', elementThemeComfort],
+    ['standard', elementTheme]
+]);
+/**
+ * Provides AG Grid global configuration with Element design system theme.
+ *
+ * This provider configures AG Grid with the Element theme, custom components,
+ * and density-specific styling. Use it in your application providers.
+ *
+ * @param density - The density variant to use. Options:
+ *   - 'compact': Minimal spacing (28px row height, 32px header height, 4px spacing)
+ *   - 'standard': Default spacing (42px row height, 48px header height, 8px spacing)
+ *   - 'comfort': Generous spacing (84px row height, 96px header height, 12px spacing)
+ * @param gridOptions - Optional AG Grid options to merge with Element defaults.
+ *   These options will override Element defaults if specified.
+ * @returns Environment providers for dependency injection
+ *
+ * @example
+ * ```typescript
+ * // In app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSiAgGridConfig()
+ *   ]
+ * };
+ *
+ * // With custom options
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSiAgGridConfig('compact', {
+ *       rowHeight: 30,
+ *       suppressMenuHide: true
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+const provideSiAgGridConfig = (density = 'standard', gridOptions) => {
+    return makeEnvironmentProviders([
+        {
+            provide: 'ag-grid-options',
+            useValue: provideGlobalGridOptions({
+                ...ELEMENT_AG_GRID_OPTIONS,
+                ...gridOptions,
+                theme: THEME_BY_DENSITY.get(density)
+            })
+        }
+    ]);
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AgDateInputComponent, AgNoRowsOverlayComponent, elementTheme, elementThemeComfort, elementThemeCompact, provideSiAgGridConfig };
+//# sourceMappingURL=siemens-element-ng-ag-grid.mjs.map