@skyux/ag-grid 11.0.0-alpha.1 → 11.0.0-alpha.2

package/css/sky-ag-grid.css

@@ -1047,6 +1047,7 @@
   --ag-value-change-value-highlight-background-color: rgba(22, 160, 133, 0.5);
   --ag-value-change-delta-up-color: #43a047;
   --ag-value-change-delta-down-color: #e53935;
+  --ag-row-loading-skeleton-effect-color: rgba(66, 66, 66, 0.2);
   --ag-chip-background-color: transparent;
   --ag-chip-border-color: var(--ag-chip-background-color);
   --ag-borders: solid 1px;
@@ -1128,7 +1129,7 @@
   --ag-advanced-filter-value-pill-color: #85c0e4;
 }
 
-.ag-root-wrapper, .ag-sticky-top, .ag-dnd-ghost {
+.ag-root-wrapper, .ag-sticky-top, .ag-sticky-bottom, .ag-dnd-ghost {
   background-color: var(--ag-background-color);
 }
 
@@ -1310,7 +1311,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 .ag-body-horizontal-scroll-viewport,
 .ag-body-vertical-scroll-viewport,
 .ag-virtual-list-viewport,
-.ag-sticky-top-viewport {
+.ag-sticky-top-viewport,
+.ag-sticky-bottom-viewport {
   position: relative;
   height: 100%;
   min-width: 0px;
@@ -1367,14 +1369,16 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 .ag-full-width-container,
 .ag-floating-bottom-full-width-container,
 .ag-virtual-list-container,
-.ag-sticky-top-container {
+.ag-sticky-top-container,
+.ag-sticky-bottom-container {
   position: relative;
 }
 
 .ag-header-container,
 .ag-floating-top-container,
 .ag-floating-bottom-container,
-.ag-sticky-top-container {
+.ag-sticky-top-container,
+.ag-sticky-bottom-container {
   height: 100%;
   white-space: nowrap;
 }
@@ -1398,7 +1402,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 .ag-full-width-container,
 .ag-floating-top-full-width-container,
 .ag-floating-bottom-full-width-container,
-.ag-sticky-top-full-width-container {
+.ag-sticky-top-full-width-container,
+.ag-sticky-bottom-full-width-container {
   position: absolute;
   top: 0px;
   pointer-events: none;
@@ -1407,14 +1412,16 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 .ag-ltr .ag-full-width-container,
 .ag-ltr .ag-floating-top-full-width-container,
 .ag-ltr .ag-floating-bottom-full-width-container,
-.ag-ltr .ag-sticky-top-full-width-container {
+.ag-ltr .ag-sticky-top-full-width-container,
+.ag-ltr .ag-sticky-bottom-full-width-container {
   left: 0;
 }
 
 .ag-rtl .ag-full-width-container,
 .ag-rtl .ag-floating-top-full-width-container,
 .ag-rtl .ag-floating-bottom-full-width-container,
-.ag-rtl .ag-sticky-top-full-width-container {
+.ag-rtl .ag-sticky-top-full-width-container,
+.ag-rtl .ag-sticky-bottom-full-width-container {
   right: 0;
 }
 
@@ -1855,7 +1862,6 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 
 .ag-cell-wrap-text {
   white-space: normal;
-  word-break: break-all;
 }
 
 .ag-cell-wrapper {
@@ -1907,7 +1913,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 
 .ag-set-filter-item-checkbox {
   display: flex;
-  overflow: hidden;
+  width: 100%;
   height: 100%;
 }
 
@@ -2077,7 +2083,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   min-width: 0px;
 }
 
-.ag-sticky-top {
+.ag-sticky-top,
+.ag-sticky-bottom {
   position: absolute;
   display: flex;
   width: 100%;
@@ -2090,7 +2097,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   overflow: hidden;
 }
 
-.ag-sticky-top-full-width-container {
+.ag-sticky-top-full-width-container,
+.ag-sticky-bottom-full-width-container {
   overflow: hidden;
   width: 100%;
   height: 100%;
@@ -2582,8 +2590,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 }
 
 .ag-group-title {
-  display: block;
-  flex: 1 1 auto;
+  display: inline;
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
@@ -3030,7 +3037,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   direction: ltr;
 }
 
-.ag-ltr .ag-body, .ag-ltr .ag-floating-top, .ag-ltr .ag-floating-bottom, .ag-ltr .ag-header, .ag-ltr .ag-sticky-top, .ag-ltr .ag-body-viewport, .ag-ltr .ag-body-horizontal-scroll {
+.ag-ltr .ag-body, .ag-ltr .ag-floating-top, .ag-ltr .ag-floating-bottom, .ag-ltr .ag-header, .ag-ltr .ag-sticky-top, .ag-ltr .ag-sticky-bottom, .ag-ltr .ag-body-viewport, .ag-ltr .ag-body-horizontal-scroll {
   flex-direction: row;
 }
 
@@ -3038,7 +3045,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   direction: rtl;
 }
 
-.ag-rtl .ag-body, .ag-rtl .ag-floating-top, .ag-rtl .ag-floating-bottom, .ag-rtl .ag-header, .ag-rtl .ag-sticky-top, .ag-rtl .ag-body-viewport, .ag-rtl .ag-body-horizontal-scroll {
+.ag-rtl .ag-body, .ag-rtl .ag-floating-top, .ag-rtl .ag-floating-bottom, .ag-rtl .ag-header, .ag-rtl .ag-sticky-top, .ag-rtl .ag-sticky-bottom, .ag-rtl .ag-body-viewport, .ag-rtl .ag-body-horizontal-scroll {
   flex-direction: row-reverse;
 }
 
@@ -6364,6 +6371,11 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   border-bottom: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
 }
 
+.ag-sticky-bottom .ag-row {
+  border-bottom: none;
+  border-top: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
+}
+
 .ag-row-highlight-above::after, .ag-row-highlight-below::after {
   content: "";
   position: absolute;
@@ -6525,6 +6537,31 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   padding-top: 30px;
 }
 
+.ag-skeleton-container {
+  width: 100%;
+  height: 100%;
+  align-content: center;
+}
+
+.ag-skeleton-effect {
+  background-color: var(--ag-row-loading-skeleton-effect-color);
+  width: 100%;
+  height: 1em;
+  border-radius: 0.25rem;
+  animation: ag-skeleton-loading 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes ag-skeleton-loading {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .ag-loading {
   display: flex;
   height: 100%;
@@ -7232,27 +7269,8 @@ button.ag-side-button-button:focus {
   border-color: var(--ag-input-focus-border-color);
 }
 
-.ag-filter-toolpanel-group.ag-has-filter > .ag-group-title-bar .ag-group-title::after {
-  font-family: var(--ag-icon-font-family);
-  font-weight: var(--ag-icon-font-weight);
-  color: var(--ag-icon-font-color);
-  font-size: var(--ag-icon-size);
-  line-height: var(--ag-icon-size);
-  font-style: normal;
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: var(--ag-icon-font-code-filter, "\f115");
-  position: absolute;
-}
-
-.ag-ltr .ag-filter-toolpanel-group.ag-has-filter > .ag-group-title-bar .ag-group-title::after {
-  padding-left: var(--ag-grid-size);
-}
-
-.ag-rtl .ag-filter-toolpanel-group.ag-has-filter > .ag-group-title-bar .ag-group-title::after {
-  padding-right: var(--ag-grid-size);
+.ag-filter-toolpanel-group:not(.ag-has-filter) > .ag-group-title-bar .ag-filter-toolpanel-group-instance-header-icon {
+  display: none;
 }
 
 .ag-filter-toolpanel-group-level-0-header {
@@ -7425,10 +7443,12 @@ button.ag-side-button-button:focus {
   margin-top: var(--ag-grid-size);
 }
 
+.ag-ltr .ag-filter-toolpanel-group-instance-header-icon,
 .ag-ltr .ag-filter-toolpanel-instance-header-icon {
   margin-left: var(--ag-grid-size);
 }
 
+.ag-rtl .ag-filter-toolpanel-group-instance-header-icon,
 .ag-rtl .ag-filter-toolpanel-instance-header-icon {
   margin-right: var(--ag-grid-size);
 }
@@ -9044,6 +9064,7 @@ button.ag-side-button-button:focus {
   --ag-advanced-filter-column-pill-color: #355f2d;
   --ag-advanced-filter-option-pill-color: #5a3168;
   --ag-advanced-filter-value-pill-color: #374c86;
+  --ag-row-loading-skeleton-effect-color: rgba(202, 203, 204, 0.4);
   color-scheme: dark;
 }
 
@@ -9072,6 +9093,7 @@ button.ag-side-button-button:focus {
     --ag-advanced-filter-column-pill-color: #355f2d;
     --ag-advanced-filter-option-pill-color: #5a3168;
     --ag-advanced-filter-value-pill-color: #374c86;
+    --ag-row-loading-skeleton-effect-color: rgba(202, 203, 204, 0.4);
     color-scheme: dark;
   }
 }