@ukic/canary-web-components 2.0.0-canary.28 → 2.0.0-canary.29

package/dist/cjs/ic-data-table.cjs.entry.js

@@ -17,7 +17,7 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-const icDataTableCss = ":host{position:relative;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}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}: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;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.row-header,.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)}.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}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.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){background-color:var(--ic-architectural-20)}.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-address{text-align:left;vertical-align:top}.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)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.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}}";
+const icDataTableCss = ":host{position:relative;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}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}: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-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.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)}.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}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.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){background-color:var(--ic-architectural-20)}.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-address{text-align:left;vertical-align:top}.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)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.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}}";
 
 const DataTable = class {
     constructor(hostRef) {
@@ -58,6 +58,34 @@ const DataTable = class {
         this.densityUpdate = false;
         this.truncationPatternUpdated = false;
         this.isNewDebounceDelaySet = false;
+        this.headerResizeObserver = null;
+        this.IC_TOOLTIP_STRING = "ic-tooltip";
+        this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
+        this.runHeaderResizeObserver = () => {
+            this.headerResizeObserver = new ResizeObserver(() => {
+                this.headerResizeCallback();
+            });
+            this.headerResizeObserver.observe(this.el);
+        };
+        this.headerResizeCallback = () => {
+            if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
+                const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
+                if (tableContainerWidth !== this.prevTableContainerWidth) {
+                    const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+                    headers.forEach((header) => {
+                        const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                        const typographyEls = header.querySelectorAll("ic-typography");
+                        if (tooltip && typographyEls && typographyEls.length === 2) {
+                            tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
+                                tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            }
+                        }
+                    });
+                    this.prevTableContainerWidth = tableContainerWidth;
+                }
+            }
+        };
         this.updateSetRowHeight = (typographyEl) => {
             const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
             if (typographyEl) {
@@ -323,18 +351,22 @@ const DataTable = class {
             });
         };
         this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }) => (index.h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index$1) => (index.h("th", { scope: "col", class: {
                     ["column-header"]: true,
                     [`table-density-${this.density}`]: this.notDefaultDensity(),
                     ["updating-state-headers"]: this.updating && !this.loading,
                 }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, index.h("div", { class: {
                     "column-header-inner-container": true,
+                    "truncation-tooltip": this.columnHeaderTruncation,
                     [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
                 } }, helpers.isSlotUsed(this.el, `${key}-column-icon`) ? (index.h("slot", { name: `${key}-column-icon` })) : (icon &&
-                !icon.hideOnHeader && (index.h("span", { class: "icon", innerHTML: icon.icon }))), index.h("ic-typography", { variant: "body", class: {
+                !icon.hideOnHeader && (index.h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (index.h("ic-tooltip", { label: title, target: `column-header-${index$1}` }, index.h("ic-typography", { id: `column-header-${index$1}`, variant: "body", class: {
                     ["column-header-text"]: true,
                     [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), this.sortable && (index.h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+                } }, title))) : (index.h("ic-typography", { variant: "body", class: {
+                    ["column-header-text"]: true,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, title)), this.sortable && (index.h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
                 // eslint-disable-next-line react/jsx-no-bind
                 onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
@@ -342,7 +374,11 @@ const DataTable = class {
                     ["sort-button"]: true,
                     ["sort-button-unsorted"]: this.sortedColumn !== key ||
                         this.sortedColumnOrder === "unsorted",
-                } }))))));
+                } }))), this.columnHeaderTruncation && (index.h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                    ["column-header-text"]: true,
+                    ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, title)))));
         };
         this.onRowClick = (row) => {
             this.selectedRow =
@@ -487,7 +523,7 @@ const DataTable = class {
                     var _a;
                     const tooltipEl = (slottedEl.tagName === "IC-TOOLTIP"
                         ? slottedEl
-                        : (_a = slottedEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-tooltip"));
+                        : (_a = slottedEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
                     if (tooltipEl) {
                         tooltipEl.setExternalPopperProps({
                             strategy: "fixed",
@@ -508,6 +544,7 @@ const DataTable = class {
         this.currentRowHeight = undefined;
         this.debounceDelay = 0;
         this.caption = undefined;
+        this.columnHeaderTruncation = false;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
@@ -552,9 +589,24 @@ const DataTable = class {
         this.variableRowHeight = undefined;
         this.width = undefined;
     }
+    headerTruncationChangeHandler() {
+        if (this.columnHeaderTruncation) {
+            this.prevTableContainerWidth = 0;
+        }
+        else {
+            const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+            headers.forEach((header) => {
+                const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                if (tooltip) {
+                    tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                }
+            });
+        }
+    }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     componentWillLoad() {
         var _a;
@@ -570,6 +622,7 @@ const DataTable = class {
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        helpers.checkResizeObserver(this.runHeaderResizeObserver);
         if (this.dataUpdated) {
             this.dataUpdated = false;
         }
@@ -984,7 +1037,7 @@ const DataTable = class {
         typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
     }
     createTruncationTooltip(typographyEl, cellContainer) {
-        const tooltipEl = document.createElement("ic-tooltip");
+        const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
         tooltipEl.setAttribute("target", typographyEl.id);
         tooltipEl.setAttribute("label", typographyEl.textContent);
         tooltipEl.classList.add("ic-tooltip-overflow");
@@ -1019,6 +1072,7 @@ const DataTable = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "columnHeaderTruncation": ["headerTruncationChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],