@ukic/canary-web-components 3.0.0-canary.4 → 3.0.0-canary.5

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

@@ -25,6 +25,8 @@ tbody {
   min-height: 1.5rem;
   overflow-y: hidden;
   height: var(--row-height);
+
+  --ic-typography-color: var(--ic-data-table-text-default-emphasis);
 }
 
 .truncation-show-hide {
@@ -45,18 +47,6 @@ ic-loading-indicator {
   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 {
   position: relative;
   height: 100%;
@@ -85,7 +75,7 @@ table {
 }
 
 :host([embedded="true"]) .table-row-container {
-  border: var(--ic-border-light);
+  border: var(--ic-space-1px) solid var(--ic-data-table-border);
 }
 
 .column-header-inner-container {
@@ -130,7 +120,17 @@ table {
 }
 
 .table-row-selected {
-  background-color: var(--ic-table-row-selected) !important;
+  background-color: var(--ic-data-table-cell-background-selected) !important;
+}
+
+.table-row:hover {
+  background-color: var(--ic-data-table-cell-background-hover) !important;
+}
+
+.table-row-selected:hover {
+  background-color: var(
+    --ic-data-table-cell-background-selected-hover
+  ) !important;
 }
 
 .sort-button {
@@ -138,19 +138,19 @@ table {
 }
 
 .sort-button:hover {
-  background-color: var(--ic-action-dark-bg-hover);
+  background-color: var(--ic-data-table-icon-button-background-hover);
 }
 
 .sort-button:active {
-  background-color: var(--ic-action-dark-bg-pressed);
+  background-color: var(--ic-data-table-icon-button-background-pressed);
 }
 
 .sort-button svg {
-  color: var(--ic-architectural-black);
+  color: var(--ic-data-table-sort-toggle-icon);
 }
 
 .sort-button-unsorted svg {
-  color: var(--ic-color-text-tertiary);
+  color: var(--ic-data-table-sort-toggle-icon-default);
 }
 
 .table-density-dense .column-header-inner-container,
@@ -187,9 +187,10 @@ td.table-density-spacious {
 .column-header {
   text-align: left;
   padding: var(--ic-space-xs);
-  background-color: var(--ic-architectural-40);
-  border-right: var(--ic-border-light);
-  border-bottom: var(--ic-border-light);
+  background-color: var(--ic-data-table-header-background);
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  color: var(--ic-data-table-header-text);
 }
 
 .column-header {
@@ -204,7 +205,7 @@ td.table-density-spacious {
 }
 
 .scrollable .column-header:last-child {
-  border-right: var(--ic-border-light) !important;
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important;
 }
 
 :host([embedded="true"]) tr:last-child .table-cell,
@@ -241,13 +242,17 @@ td.table-density-spacious {
   justify-content: center !important;
 }
 
+.table-row {
+  background-color: var(--ic-data-table-cell-background);
+}
+
 .table-row:nth-child(even) {
-  background-color: var(--ic-architectural-20);
+  background-color: var(--ic-data-table-cell-background-stripe);
 }
 
 .table-cell {
   padding: var(--ic-space-xs);
-  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);
+  border-bottom: solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);
   overflow: hidden;
   box-sizing: border-box;
   max-width: var(--column-max-width);
@@ -286,17 +291,20 @@ td.table-density-spacious {
   align-items: flex-end;
 }
 
-.cell-emphasis-low {
-  --ic-typography-color: var(--ic-color-text-secondary);
+.cell-emphasis-low ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-low-emphasis);
 }
 
-.cell-emphasis-high {
+.cell-emphasis-high ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-high-emphasis);
+
   font-weight: var(--ic-font-weight-bold);
 }
 
 .pagination-container {
-  background-color: var(--ic-architectural-40);
-  border-top: var(--ic-border-light);
+  background-color: var(--ic-data-table-pagination-bar-background-color);
+  border-top: var(--ic-space-1px) solid
+    var(--ic-data-table-pagination-bar-keyline);
 }
 
 .screen-reader-sort-text,
@@ -319,7 +327,7 @@ td.table-density-spacious {
 
 .updating-state {
   padding: 0;
-  border-bottom: var(--ic-border-light);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
 }
 
 .updating-state-headers {
@@ -334,8 +342,8 @@ td.table-density-spacious {
 }
 
 .loading.show-background {
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-light);
+  background-color: var(--ic-data-table-overlay-background);
+  border: var(--ic-space-1px) solid var(--ic-data-table-overlay-border);
 }
 
 .loading.show {
@@ -349,6 +357,26 @@ td.table-density-spacious {
   margin-right: var(--ic-space-xxs);
 }
 
+.column-header .icon > svg,
+.column-header ::slotted(svg) {
+  fill: var(--ic-data-table-icon);
+}
+
+.table-cell .icon > svg,
+.table-cell ::slotted(svg) {
+  fill: var(--ic-data-table-icon-default-emphasis);
+}
+
+.cell-emphasis-high .icon > svg,
+.cell-emphasis-high ::slotted(svg) {
+  fill: var(--ic-data-table-icon-high-emphasis);
+}
+
+.cell-emphasis-low .icon > svg,
+.cell-emphasis-low ::slotted(svg) {
+  fill: var(--ic-data-table-icon-low-emphasis);
+}
+
 .column-header-alignment-right > .icon,
 .row-header-alignment-right > .icon,
 .cell-alignment-right > .icon,

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

@@ -232,8 +232,8 @@ export class DataTable {
             return this.getObjectValue(cell, key);
         };
         this.createUpdatingIndicator = () => {
-            const { appearance, description, max, min, progress, monochrome } = this.updatingOptions || {};
-            return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { theme: appearance, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
+            const { description, max, min, progress, monochrome } = this.updatingOptions || {};
+            return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
         this.setRowHeight = (height) => {
             return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
@@ -324,19 +324,18 @@ export class DataTable {
                                 !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
                                 !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
                                 (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
-                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
+                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                                !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                !!rowEmphasis }, this.setTruncationClass()), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
                             ? this.setRowHeight(currentRowHeight)
                             : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) &&
                         (cellValue("icon") || ((_l = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _l === void 0 ? void 0 : _l.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_m = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _m === void 0 ? void 0 : _m.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
                         !isSlotUsed(this.el, cellSlotName) && (h("ic-typography", { variant: "body", class: {
-                            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                                !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                                !!rowEmphasis,
                             [`text-${this.density}`]: this.notDefaultDensity(),
                         } }, this.isObject(cell) &&
-                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), theme: this.theme }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
                 }
             });
         };
@@ -387,7 +386,9 @@ export class DataTable {
             const organisedData = data.map((row, rowIndex) => {
                 const slottedColumns = this.columns
                     .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
-                    .filter((col) => !!col);
+                    .filter((col) => !!col &&
+                    // skip the column if its already in the row
+                    !Object.prototype.hasOwnProperty.call(row, col.key));
                 return slottedColumns.length > 0
                     ? addDataToPosition(row, slottedColumns, "")
                     : row;
@@ -562,7 +563,6 @@ export class DataTable {
             pageLabel: "Page",
             hideRangeLabel: false,
             hideAllFromItemsPerPage: false,
-            theme: "inherit",
             monochrome: false,
         };
         this.showPagination = false;
@@ -574,6 +574,7 @@ export class DataTable {
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
         this.tableLayout = "fixed";
+        this.theme = "inherit";
         this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
@@ -983,7 +984,8 @@ export class DataTable {
         this.variableRowHeight = null;
     }
     showLoadingIndicator() {
-        this.loadingIndicator.classList.add("show");
+        var _a;
+        (_a = this.loadingIndicator) === null || _a === void 0 ? void 0 : _a.classList.add("show");
     }
     getRowOptions(rowKeys, rowValues) {
         const rowOptionsIndex = rowKeys.indexOf("rowOptions");
@@ -1040,11 +1042,12 @@ export class DataTable {
         tooltipEl.appendChild(typographyEl);
     }
     render() {
-        const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
-        return (h(Host, { style: Object.assign({}, this.setTableDimensions()) }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
+        var _a;
+        const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
+        return (h(Host, { style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", { style: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", { style: {
                 ["--table-layout"]: this.tableLayout,
             } }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
@@ -1053,11 +1056,11 @@ export class DataTable {
             !loading &&
             (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
             !loading &&
-            (isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (h("ic-loading-indicator", { theme: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, monochrome: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.monochrome, class: {
+            (isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (h("ic-loading-indicator", { theme: theme, monochrome: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.monochrome, class: {
                 "loading-empty": loading,
                 loading: true,
                 "show-background": loadingOptions.showBackground,
-            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, theme: paginationBarOptions.theme, monochrome: paginationBarOptions.monochrome, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, theme: theme, monochrome: paginationBarOptions.monochrome, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
     }
@@ -1146,7 +1149,7 @@ export class DataTable {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The row content for the table."
@@ -1275,15 +1278,9 @@ export class DataTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    label?: string;\n    labelDuration?: number;\n    max?: number;\n    min?: number;\n    progress?: number;\n    showBackground?: boolean;\n    monochrome?: boolean;\n  }",
-                    "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; monochrome?: boolean; }",
-                    "references": {
-                        "IcThemeForegroundNoDefault": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
-                        }
-                    }
+                    "original": "{\n    description?: string;\n    label?: string;\n    labelDuration?: number;\n    max?: number;\n    min?: number;\n    progress?: number;\n    showBackground?: boolean;\n    monochrome?: boolean;\n  }",
+                    "resolved": "{ description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; monochrome?: boolean; }",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -1364,7 +1361,7 @@ export class DataTable {
                     "tags": [],
                     "text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
                 },
-                "defaultValue": "{\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    rangeLabelType: \"page\",\n    type: \"simple\",\n    showItemsPerPageControl: true,\n    showGoToPageControl: true,\n    alignment: \"right\",\n    itemLabel: \"Item\",\n    pageLabel: \"Page\",\n    hideRangeLabel: false,\n    hideAllFromItemsPerPage: false,\n    theme: \"inherit\",\n    monochrome: false,\n  }"
+                "defaultValue": "{\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    rangeLabelType: \"page\",\n    type: \"simple\",\n    showItemsPerPageControl: true,\n    showGoToPageControl: true,\n    alignment: \"right\",\n    itemLabel: \"Item\",\n    pageLabel: \"Page\",\n    hideRangeLabel: false,\n    hideAllFromItemsPerPage: false,\n    monochrome: false,\n  }"
             },
             "showPagination": {
                 "type": "boolean",
@@ -1478,6 +1475,30 @@ export class DataTable {
                 "reflect": false,
                 "defaultValue": "\"fixed\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "truncationPattern": {
                 "type": "string",
                 "mutable": false,
@@ -1523,15 +1544,9 @@ export class DataTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    max?: number;\n    min?: number;\n    progress?: number;\n    monochrome?: boolean;\n  }",
-                    "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; }",
-                    "references": {
-                        "IcThemeForegroundNoDefault": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
-                        }
-                    }
+                    "original": "{\n    description?: string;\n    max?: number;\n    min?: number;\n    progress?: number;\n    monochrome?: boolean;\n  }",
+                    "resolved": "{ description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; }",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,