ag-grid-community-rails 28.1.1.1

data/vendor/assets/javascripts/ag-grid-community/styles/ag-theme-base/sass/parts/_footer.scss

@@ -0,0 +1,54 @@
+
+@mixin ag-theme-base-part-footer {
+    
+    .ag-paging-panel {
+        border-top: 1px solid;
+        @include ag-color-property(border-top-color, border-color);
+        @include ag-color-property(color, secondary-foreground-color);
+        height: ag-param(header-height);
+
+        > * {
+            margin: 0 ag-param(cell-horizontal-padding);
+        }
+    }
+
+
+    .ag-paging-button {
+        cursor: pointer;
+    }
+
+    .ag-paging-button.ag-disabled  {
+        cursor: default;
+        @include ag-color-property(color, disabled-foreground-color);
+    }
+
+    @include ag-keyboard-focus((ag-paging-button), 0px);
+
+    .ag-paging-button, .ag-paging-description {
+        margin: 0 ag-param(grid-size);
+    }
+
+    .ag-status-bar {
+        @include ag-border(primary, top);
+        @include ag-color-property(color, disabled-foreground-color);
+        padding-right: ag-param(grid-size) * 4;
+        padding-left: ag-param(grid-size) * 4;
+        line-height: 1.5;
+    }
+
+    .ag-status-name-value-value {
+        @include ag-color-property(color, foreground-color);
+    }
+
+    .ag-status-bar-center {
+        text-align: center;
+    }
+
+    .ag-status-name-value {
+        margin-left: ag-param(grid-size);
+        margin-right: ag-param(grid-size);
+        padding-top: ag-param(grid-size) * 2;
+        padding-bottom: ag-param(grid-size) * 2;
+    }
+
+}

data/vendor/assets/javascripts/ag-grid-community/styles/ag-theme-base/sass/parts/_grid-borders.scss

@@ -0,0 +1,123 @@
+
+@mixin ag-theme-base-part-grid-borders {
+
+    .ag-cell {
+        @include ag-theme-rtl(( border-right: ag-param(cell-horizontal-border) ));
+        @include ag-theme-rtl(( border-right-width: 1px ));
+    }
+
+    .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
+        @include ag-border(critical, left);
+    }
+
+    .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
+        @include ag-border(critical, right);
+    }
+
+    // we do not want to color the range color when the cell is also focused
+    .ag-cell-range-selected:not(.ag-cell-focus),
+    .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-single-cell:not(.ag-cell-inline-editing) {
+        @include ag-color-property(background-color, range-selection-background-color);
+
+        &.ag-cell-range-chart {
+            @include ag-color-property(background-color, range-selection-chart-background-color, true);
+
+            &.ag-cell-range-chart-category {
+                @include ag-color-property(background-color, range-selection-chart-category-background-color, true);
+            }
+        }
+    }
+
+    .ag-cell-range-selected-1:not(.ag-cell-focus),
+    .ag-root:not(.ag-context-menu-open) .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-selected-1:not(.ag-cell-inline-editing) {
+        @include ag-color-property(background-color, range-selection-background-color-1);
+    }
+
+    .ag-cell-range-selected-2:not(.ag-cell-focus),
+    .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-selected-2 {
+        @include ag-color-property(background-color, range-selection-background-color-2);
+    }
+
+    .ag-cell-range-selected-3:not(.ag-cell-focus),
+    .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-selected-3 {
+        @include ag-color-property(background-color, range-selection-background-color-3);
+    }
+
+    .ag-cell-range-selected-4:not(.ag-cell-focus),
+    .ag-body-viewport:not(.ag-has-focus) .ag-cell-range-selected-4 {
+        @include ag-color-property(background-color, range-selection-background-color-4);
+    }
+
+    .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell) {
+        &.ag-cell-range-top {
+            @include ag-color-property(border-top-color, range-selection-border-color);
+        }
+        &.ag-cell-range-right {
+            @include ag-color-property(border-right-color, range-selection-border-color);
+        }
+        &.ag-cell-range-bottom {
+            @include ag-color-property(border-bottom-color, range-selection-border-color);
+        }
+        &.ag-cell-range-left {
+            @include ag-color-property(border-left-color, range-selection-border-color);
+        }
+    }
+
+    // ltr/rtl needed so that this overrides the rtl/ltr styles of pinned column borders
+    .ag-ltr, .ag-rtl {
+        .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
+        .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected),
+        .ag-full-width-row.ag-row-focus:focus .ag-cell-wrapper.ag-row-group,
+        .ag-cell-range-single-cell,
+        .ag-cell-range-single-cell.ag-cell-range-handle {
+            border: 1px solid;
+            @include ag-color-property(border-color, range-selection-border-color);
+            outline: initial;
+        }
+    }
+
+    .ag-cell.ag-selection-fill-top,
+    .ag-cell.ag-selection-fill-top.ag-cell-range-selected {
+        border-top: 1px dashed;
+        @include ag-color-property(border-top-color, range-selection-border-color);
+    }
+
+    .ag-cell.ag-selection-fill-right,
+    .ag-cell.ag-selection-fill-right.ag-cell-range-selected {
+        @include ag-theme-rtl((border-right: 1px dashed !important), $color-param: range-selection-border-color, $color-param-important: true);
+    }
+
+    .ag-cell.ag-selection-fill-bottom,
+    .ag-cell.ag-selection-fill-bottom.ag-cell-range-selected {
+        border-bottom: 1px dashed;
+        @include ag-color-property(border-bottom-color, range-selection-border-color);
+    }
+
+    .ag-cell.ag-selection-fill-left,
+    .ag-cell.ag-selection-fill-left.ag-cell-range-selected {
+        @include ag-theme-rtl((border-left: 1px dashed !important), $color-param: range-selection-border-color, $color-param-important: true);
+    }
+
+    %ag-selection-handle {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        bottom: -1px;
+        @include ag-theme-rtl((right: -1px));
+        @include ag-color-property(background-color, range-selection-border-color);
+    }
+
+    .ag-fill-handle {
+        @extend %ag-selection-handle;
+        cursor: cell;
+    }
+
+    .ag-range-handle {
+        @extend %ag-selection-handle;
+        cursor: nwse-resize;
+    }
+
+    .ag-cell-inline-editing {
+        @include ag-color-property(border-color, input-focus-border-color, $important: true);
+    }
+}

data/vendor/assets/javascripts/ag-grid-community/styles/ag-theme-base/sass/parts/_grid-layout.scss

@@ -0,0 +1,276 @@
+
+@mixin ag-theme-base-part-grid-layout {
+
+    .ag-rtl {
+        text-align: right;
+    }
+
+    .ag-root-wrapper {
+        @include ag-border(primary);
+    }
+    
+    // support 100 levels here because row group indentation is used for tree data which can be quite deep
+    @for $i from 1 to 100 {
+        .ag-row > .ag-cell-wrapper.ag-row-group-indent-#{$i} {
+            @include ag-theme-rtl(( padding-left: ag-param(cell-horizontal-padding) + $i * ag-param(row-group-indent-size) ));
+        }
+        
+        .ag-row-group-indent-#{$i} {
+            @include ag-theme-rtl(( padding-left: $i * ag-param(row-group-indent-size) ));
+        }
+
+        .ag-row-level-#{$i} .ag-pivot-leaf-group {
+            @include ag-theme-rtl(( margin-left: ag-param(row-group-indent-size) ));
+        }
+    }
+
+    .ag-row-group-leaf-indent {
+        @include ag-theme-rtl(( margin-left: ag-param(row-group-indent-size) ));
+    }
+
+    .ag-value-change-delta {
+        padding-right: 2px;
+    }
+
+    .ag-value-change-delta-up {
+        @include ag-color-property(color, value-change-delta-up-color);
+    }
+
+    .ag-value-change-delta-down {
+        @include ag-color-property(color, value-change-delta-down-color);
+    }
+
+    .ag-value-change-value {
+        background-color: transparent;
+        border-radius: 1px;
+        padding-left: 1px;
+        padding-right: 1px;
+        transition: background-color 1s;
+    }
+
+    .ag-value-change-value-highlight {
+        @include ag-color-property(background-color, value-change-value-highlight-background-color);
+        transition: background-color 0.1s;
+    }
+
+    .ag-cell-data-changed {
+        @include ag-color-property(background-color, value-change-value-highlight-background-color, $important: true);
+    }
+
+    .ag-cell-data-changed-animation {
+        background-color: transparent;
+    }
+
+    .ag-cell-highlight {
+        @include ag-color-property(background-color, range-selection-highlight-color, $important: true);
+    }
+
+    .ag-row {
+        height: ag-param(row-height);
+        @include ag-color-property(background-color, background-color);
+        @include ag-color-property(color, data-color);
+        
+        @if ag-param-is-set(row-border-color) and ag-param(borders-critical) {
+            // NOTE: we define border-width and border-color at .ag-row level and only set
+            // border-style inside nested pseudoclass selectors, to allow derived themes
+            // to override border-width on .ag-row
+            border-width: 1px;
+            @include ag-color-property(border-color, row-border-color);
+
+            border-bottom-style: solid;
+        }
+    }
+
+    .ag-row-highlight-above::after, .ag-row-highlight-below::after {
+        content: '';
+        position: absolute;
+        width: calc(100% - 1px);
+        height: 1px;
+        @include ag-color-property(background-color, range-selection-border-color);
+        left: 1px;
+    }
+
+    .ag-row-highlight-above::after {
+        top: -1px;
+    }
+
+    .ag-row-highlight-above.ag-row-first::after {
+        top: 0;
+    }
+
+    .ag-row-highlight-below::after {
+        bottom: 0px;
+    }
+
+    .ag-row-odd {
+        @include ag-color-property(background-color, odd-row-background-color);
+    }
+
+    // NOTE: these don't need an RTL version because the "left spacer" is always the one visually on the left
+    .ag-body-horizontal-scroll:not(.ag-scrollbar-invisible) {
+        .ag-horizontal-left-spacer:not(.ag-scroller-corner) {
+            @include ag-border(critical, right);
+        }
+
+        .ag-horizontal-right-spacer:not(.ag-scroller-corner) {
+            @include ag-border(critical, left);
+        }
+    }
+
+    .ag-row-selected::before {
+        content: "";
+        @include ag-color-property(background-color, selected-row-background-color);
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    @if ag-param-is-set(row-hover-color) {
+        .ag-row-hover:not(.ag-full-width-row)::before,
+        .ag-row-hover.ag-full-width-row.ag-row-group::before {
+            // add a background on hover - use an absolutely positioned rectangle instead of
+            // a `background-color` so that `--ag-row-hover-color: transparent` doesn't remove
+            // an existing background color
+            content: "";
+            @include ag-color-property(background-color, row-hover-color);
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+        }
+
+        .ag-row-hover.ag-row-selected::before {
+            @include ag-color-property(background-color, row-hover-color);
+            // overlay the background color on the hover color when hovering over a selected row,
+            // if the background color is semi-transparent it will blend properly
+            background-image: linear-gradient(ag-param(selected-row-background-color), ag-param(selected-row-background-color));
+        }
+    }
+
+    // Default the content position to relative so that it doesn't
+    // appear under the background
+    .ag-row-hover.ag-full-width-row.ag-row-group > * {
+        position: relative
+    }
+
+    .ag-column-hover {
+        @if ag-param-is-set(column-hover-color) {
+            @include ag-color-property(background-color, column-hover-color);
+        }
+    }
+
+    .ag-right-aligned-cell {
+        @include ag-theme-rtl(( text-align: right ));
+    }
+
+    // right-align numeric values in cells with wrappers
+    .ag-right-aligned-cell .ag-cell-value,
+    .ag-right-aligned-cell .ag-group-value {
+        @include ag-theme-rtl(( margin-left: auto ));
+    }
+
+    .ag-cell, .ag-full-width-row .ag-cell-wrapper.ag-row-group {
+        // draw a transparent border so that the cell size doesn't change when we add a range border
+        border: 1px solid transparent;
+        // adjust for transparent border
+        // Needed to capitalize min, because it clashes with old versions of Sass
+        line-height: Min(var(--ag-line-height, ag-param(row-height) - 2px), ag-param(row-height) - 2px);
+        padding-left: ag-param(cell-horizontal-padding) - 1px;
+        padding-right: ag-param(cell-horizontal-padding) - 1px;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
+
+    // in full width rows, a cell renderer is rendered directly into a row with no cell in between,
+    // in which case we need to apply the padding to the cell renderer's wrapper.
+    .ag-row > .ag-cell-wrapper {
+        padding-left: ag-param(cell-horizontal-padding) - 1px;
+        padding-right: ag-param(cell-horizontal-padding) - 1px;
+    }
+
+    .ag-row-dragging {
+        cursor: move;
+        opacity: 0.5;
+    }
+
+    .ag-cell-inline-editing {
+        @include ag-card();
+        padding: 0;
+        height: ag-param(row-height);
+        @include ag-color-property(background-color, control-panel-background-color);
+    }
+
+    .ag-popup-editor {
+        @include ag-card();
+        @include ag-color-property(background-color, control-panel-background-color);
+        padding: 0;
+    }
+
+    .ag-large-text-input {
+        height: auto;
+        padding: ag-param(cell-horizontal-padding);
+    }
+
+    .ag-details-row {
+        padding: ag-param(grid-size) * 5;
+        @include ag-color-property(background-color, background-color);
+    }
+
+    .ag-layout-auto-height, .ag-layout-print {
+        .ag-center-cols-clipper, .ag-center-cols-container {
+            min-height: 50px;
+        }
+    }
+
+    .ag-overlay-loading-wrapper {
+        @include ag-color-property(background-color, modal-overlay-background-color);
+    }
+
+    .ag-overlay-loading-center {
+        @include ag-card();
+    }
+
+    // in auto-height mode with no rows, add padding to prevent grid being too small
+    .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
+        padding-top: 30px;
+    }
+
+    .ag-loading {
+        padding-left: ag-param(cell-horizontal-padding);
+        display: flex;
+        height: 100%;
+        align-items: center;
+    }
+
+    .ag-loading-icon {
+        padding-right: ag-param(cell-widget-spacing);
+    }
+
+    .ag-icon-loading {
+        animation-name: spin;
+        animation-duration: 1000ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .ag-floating-top {
+        @include ag-border(critical, bottom);
+    }
+    .ag-floating-bottom {
+        @include ag-border(critical, top);
+    }
+}

data/vendor/assets/javascripts/ag-grid-community/styles/ag-theme-base/sass/parts/_header.scss

@@ -0,0 +1,137 @@
+@mixin ag-theme-base-part-header {
+
+    .ag-header {
+        @include ag-color-property(background-color, header-background-color);
+        @include ag-border(critical, bottom);
+    }
+
+    .ag-header-row {
+        @include ag-color-property(color, header-foreground-color);
+        height: ag-param(header-height);
+    }
+
+    .ag-pinned-right-header {
+        @include ag-border(critical, left);
+    }
+
+    .ag-pinned-left-header {
+        @include ag-border(critical, right);
+    }
+
+    .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon {
+        @include ag-theme-rtl(( margin-left: ag-param(grid-size) ));
+    }
+
+    .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
+        @include ag-theme-rtl(( margin-right: ag-param(grid-size) ));
+    }
+
+    .ag-header-cell,
+    .ag-header-group-cell {
+        padding-left: ag-param(cell-horizontal-padding);
+        padding-right: ag-param(cell-horizontal-padding);
+
+        &.ag-header-cell-moving {
+            @include ag-color-property(background-color, header-cell-moving-background-color);
+        }
+    }
+
+    @include ag-keyboard-focus((ag-header-cell, ag-header-group-cell), 4px);
+
+    .ag-header-icon {
+        @include ag-color-property(color, secondary-foreground-color);
+    }
+
+    .ag-header-expand-icon {
+        cursor: pointer;
+        @include ag-theme-rtl(( padding-left: 4px ));
+    }
+
+    .ag-header-row:not(:first-child) {
+        .ag-header-cell,
+        .ag-header-group-cell.ag-header-group-cell-with-group {
+            @include ag-border(critical, top);
+        }
+    }
+
+    // This logic with :not(.ag-column-resizing) is to prevent a mouseover effect
+    // being applied to the adjacent cell as the user resizes a cell, because
+    // during a resize, the mouse will momentarily move over the neighbouring cell
+    .ag-header-group-cell:not(.ag-column-resizing) + .ag-header-group-cell,
+    .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell,
+    .ag-header-group-cell:first-of-type,
+    .ag-header-cell:first-of-type {
+        @if (ag-param-is-set(header-cell-hover-background-color) and ag-params-are-different(header-cell-hover-background-color, header-background-color)) {
+            &:not(.ag-header-cell-moving):hover,
+            &.ag-column-resizing {
+                @include ag-color-property(background-color, header-cell-hover-background-color);
+            }
+        }
+    }
+
+    @if ag-param(header-column-separator) {
+        .ag-header-cell::after,
+        .ag-header-group-cell::after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            display: block;
+            width: ag-param(header-column-separator-width);
+            height: ag-param(header-column-separator-height);
+            top: calc(50% - #{ag-param(header-column-separator-height) * 0.5});
+            @include ag-color-property(background-color, header-column-separator-color);
+
+            @include ag-theme-rtl(( right: 0 ));
+        }
+    }
+
+    @if ag-param(header-column-resize-handle) {
+        .ag-header-cell-resize {
+            display: flex;
+            align-items: center;
+        }
+
+        .ag-header-cell-resize::after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            display: block;
+            left: calc(50% - #{ag-param(header-column-resize-handle-width) * 0.5});
+            width: ag-param(header-column-resize-handle-width);
+            height: ag-param(header-column-resize-handle-height);
+            top: calc(50% - #{ag-param(header-column-resize-handle-height) * 0.5});
+            @include ag-color-property(background-color, header-column-resize-handle-color);
+        }
+
+        .ag-pinned-right-header .ag-header-cell-resize::after {
+            left: calc(50% - #{ag-param(header-column-resize-handle-width)});
+        }
+    }
+
+    .ag-header-select-all {
+        @include ag-theme-rtl(( margin-right: ag-param(cell-horizontal-padding) ));
+    }
+
+    .ag-floating-filter-button {
+        @include ag-theme-rtl(( margin-left: ag-param(grid-size) * 3 ));
+    }
+
+    .ag-floating-filter-button-button {
+        @include ag-inherit-text-styles();
+        appearance: none;
+        background: transparent;
+        border: none;
+        height: ag-param(icon-size);
+        padding: 0;
+        width: ag-param(icon-size);
+    }
+
+    .ag-filter-loading {
+        @include ag-color-property(background-color, control-panel-background-color);
+        height: 100%;
+        padding: ag-param(widget-container-vertical-padding) ag-param(widget-container-horizontal-padding);
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+}