@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

package/dist/collection/components/ic-data-table/ic-data-table.css

@@ -1,13 +1,60 @@
 :host {
   position: relative;
-  display: block;
-  height: 100%;
+  display: inline-flex;
   max-height: 100%;
+  width: var(--table-width, 100%);
+  height: 100%;
+  min-width: var(--table-min-width);
+  max-width: var(--table-max-width);
+}
+
+tbody {
+  vertical-align: top;
 }
 
 .table-container {
   position: relative;
   height: calc(100% - var(--ic-space-xxxs));
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cell-container {
+  display: flex;
+  min-height: 1.5rem;
+  overflow-y: hidden;
+  height: var(--row-height);
+}
+
+.truncation-show-hide {
+  overflow: visible;
+  display: block;
+}
+
+.cell-icon.truncation-show-hide {
+  display: flex;
+}
+
+.cell-container:not(.data-type-element, .truncation-show-hide) {
+  overflow-x: hidden;
+}
+
+ic-loading-indicator {
+  position: sticky;
+  top: 20px;
+}
+
+ic-loading-indicator.ic-theme-dark {
+  --inner-color: var(--ic-action-default-dark);
+  --outer-color: var(--ic-action-neutral-light);
+  --label-color: var(--ic-color-text-primary-dark);
+}
+
+ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome {
+  --inner-color: var(--ic-action-light);
+  --outer-color: var(--ic-action-neutral-dark);
+  --label-color: var(--ic-color-text-inverse-dark);
 }
 
 .table-row-container {
@@ -23,9 +70,10 @@
 }
 
 table {
-  table-layout: fixed;
+  table-layout: var(--table-layout, "fixed");
   border-spacing: 0;
   width: 100%;
+  height: var(--table-height, auto);
 }
 
 .table-row-container:focus {
@@ -36,10 +84,15 @@ table {
   z-index: 1;
 }
 
-:host([embedded="true"]) .table-container {
+:host([embedded="true"]) .table-row-container {
   border: var(--ic-border-light);
 }
 
+.column-header-inner-container {
+  padding: var(--ic-space-xs);
+  box-sizing: border-box;
+}
+
 .column-header-sticky {
   position: sticky;
   top: 0;
@@ -77,7 +130,7 @@ table {
 }
 
 .sort-button:active {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-action-dark-bg-pressed);
 }
 
 .sort-button svg {
@@ -85,10 +138,11 @@ table {
 }
 
 .sort-button-unsorted svg {
-  color: var(--ic-color-tertiary-text);
+  color: var(--ic-color-text-tertiary);
 }
 
-.table-density-dense {
+.table-density-dense .column-header-inner-container,
+td.table-density-dense {
   padding: var(--ic-space-xxs) var(--ic-space-xs) !important;
 }
 
@@ -96,7 +150,8 @@ table {
   font-size: var(--ic-font-size-label);
 }
 
-.table-density-spacious {
+.table-density-spacious .column-header-inner-container,
+td.table-density-spacious {
   padding: 0.625rem var(--ic-space-xs) !important;
 }
 
@@ -108,8 +163,8 @@ table {
   font-weight: var(--ic-font-weight-bold);
 }
 
-.column-header,
-.row-header {
+.row-header,
+.column-header {
   text-align: left;
   padding: var(--ic-space-xs);
   background-color: var(--ic-architectural-40);
@@ -117,6 +172,13 @@ table {
   border-bottom: var(--ic-border-light);
 }
 
+.column-header {
+  padding: 0;
+  width: var(--column-width);
+  min-width: var(--column-min-width, 4rem);
+  max-width: var(--column-max-width);
+}
+
 .column-header:last-child {
   border-right: none;
 }
@@ -134,18 +196,29 @@ table {
 .row-header-alignment-left,
 .cell-alignment-left {
   text-align: left !important;
+  justify-content: start !important;
 }
 
 .column-header-alignment-right,
 .row-header-alignment-right,
 .cell-alignment-right {
   text-align: right !important;
+  justify-content: end !important;
+}
+
+.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography {
+  padding-right: calc(var(--ic-space-xxs) + var(--ic-space-xs));
+}
+
+.cell-alignment-right.truncation-show-hide ic-typography {
+  --ellipsis-padding-right: calc(var(--ic-space-xxs) + var(--ic-space-xs));
 }
 
 .column-header-alignment-center,
 .row-header-alignment-center,
 .cell-alignment-center {
   text-align: center !important;
+  justify-content: center !important;
 }
 
 .table-row:nth-child(even) {
@@ -155,9 +228,18 @@ table {
 .table-cell {
   padding: var(--ic-space-xs);
   border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: var(--column-max-width);
+  min-width: var(--column-min-width);
+}
+
+.table-cell.with-overflow {
+  overflow: visible;
 }
 
-.data-type-string {
+.data-type-string,
+.data-type-address {
   text-align: left;
   vertical-align: top;
 }
@@ -165,23 +247,27 @@ table {
 .data-type-number,
 .data-type-date {
   text-align: right;
+  justify-content: end;
   vertical-align: top;
 }
 
 .cell-alignment-top {
   vertical-align: top;
+  align-items: flex-start;
 }
 
 .cell-alignment-middle {
   vertical-align: middle;
+  align-items: center;
 }
 
 .cell-alignment-bottom {
   vertical-align: bottom;
+  align-items: flex-end;
 }
 
 .cell-emphasis-low {
-  color: var(--ic-color-secondary-text);
+  --ic-typography-color: var(--ic-color-text-secondary);
 }
 
 .cell-emphasis-high {
@@ -206,7 +292,82 @@ table {
   white-space: pre-wrap;
 }
 
-@media screen and (min-width: 576px) {
+.loading-empty {
+  padding: var(--ic-space-xl) var(--ic-space-xxl);
+  margin-top: var(--ic-space-xl);
+}
+
+.updating-state {
+  padding: 0;
+  border-bottom: var(--ic-border-light);
+}
+
+.updating-state-headers {
+  border-bottom: none;
+}
+
+.loading {
+  position: absolute;
+  left: calc(50% - 5.9741rem);
+  opacity: 0;
+  transition: opacity var(--ic-transition-duration-slow);
+}
+
+.loading.show-background {
+  background-color: var(--ic-architectural-white);
+  border: var(--ic-border-light);
+}
+
+.loading.show {
+  opacity: 1;
+}
+
+.icon,
+::slotted(svg) {
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
+  margin-right: var(--ic-space-xxs);
+}
+
+.column-header-alignment-right > .icon,
+.row-header-alignment-right > .icon,
+.cell-alignment-right > .icon,
+.column-header-alignment-right > ::slotted(svg),
+.row-header-alignment-right > ::slotted(svg),
+.cell-alignment-right > ::slotted(svg) {
+  margin-right: auto;
+}
+
+.column-header-alignment-center > ic-typography,
+.row-header-alignment-right > ic-typography,
+.cell-alignment-center > ic-typography {
+  flex: 1;
+}
+
+.icon > svg {
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
+  display: inline-block;
+}
+
+.truncation-tooltip ic-typography {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--ic-line-clamp, 0);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.truncation-tooltip ic-typography,
+.truncation-show-hide ic-typography {
+  white-space: normal;
+}
+
+.ic-tooltip-overflow {
+  overflow: hidden;
+  width: 100%;
+}
+
+@media screen and (min-width: 577px) {
   .column-header-inner-container {
     display: flex;
     align-items: center;