@ukic/canary-web-components 2.0.0-canary.37 → 2.0.0-canary.38

package/dist/collection/components/ic-tree-item/ic-tree-item.css

@@ -51,9 +51,19 @@
   background-color: var(--ic-action-dark-bg-active) !important;
 }
 
+:host(.ic-tree-item-light) .tree-item-content:hover,
+:host(.ic-tree-item-light) ::slotted([slot="router-item"]:hover) {
+  background-color: var(--ic-action-light-bg-hover) !important;
+}
+
+:host(.ic-tree-item-light) .tree-item-content:active,
+:host(.ic-tree-item-light) ::slotted([slot="router-item"]:active) {
+  background-color: var(--ic-action-light-bg-active) !important;
+}
+
 :host(.ic-tree-item-selected) .tree-item-content,
 :host(.ic-tree-item-selected) ::slotted([slot="router-item"]) {
-  background-color: var(--ic-action-default-bg-hover) !important;
+  background-color: var(--ic-action-default-bg-hover);
 }
 
 :host(.ic-tree-item-small) .tree-item-content,
@@ -86,7 +96,7 @@
 :host(.ic-tree-item-disabled) .arrow-dropdown,
 :host(.ic-tree-item-disabled) ::slotted([slot="icon"]),
 :host(.ic-tree-item-disabled) ::slotted([slot="router-item"]) {
-  color: var(--ic-architectural-200) !important;
+  color: var(--ic-architectural-200);
   fill: var(--ic-architectural-200);
   pointer-events: none;
 }
@@ -99,6 +109,15 @@
   fill: var(--ic-architectural-white);
 }
 
+:host(.ic-tree-item-light.ic-tree-item-disabled) .tree-item-content,
+:host(.ic-tree-item-light.ic-tree-item-disabled) .arrow-dropdown,
+:host(.ic-tree-item-light.ic-tree-item-disabled) ::slotted([slot="icon"]),
+:host(.ic-tree-item-light.ic-tree-item-disabled)
+  ::slotted([slot="router-item"]) {
+  color: var(--ic-architectural-300);
+  fill: var(--ic-architectural-300);
+}
+
 :host .arrow-dropdown {
   color: var(--ic-action-default);
   margin-right: var(--ic-space-xs);
@@ -162,6 +181,6 @@
 
   :host(.ic-tree-item-selected) .tree-item-content,
   :host(.ic-tree-item-selected) ::slotted([slot="router-item"]) {
-    color: Highlight !important;
+    color: Highlight;
   }
 }

package/dist/components/ic-data-table.js

@@ -431,6 +431,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
                 : this.data.slice();
+            const paginationOffset = this.showPagination ? this.fromRow : 0;
             /**
              * Ensures that createCells has a value in data to map over to actually render the slot.
              * Removes the need for the user to add it multiple times.
@@ -439,7 +440,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
              */
             const organisedData = data.map((row, rowIndex) => {
                 const slottedColumns = this.columns
-                    .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
+                    .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
+                    key,
+                    index,
+                })
                     .filter((col) => !!col &&
                     // skip the column if its already in the row
                     !Object.prototype.hasOwnProperty.call(row, col.key));
@@ -458,7 +462,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                         ["table-row"]: true,
                         ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
                     }
-                }, this.createCells(row, index)));
+                }, this.createCells(row, index + paginationOffset)));
             });
         };
         this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];