@getflip/swirl-components 0.43.2 → 0.44.1

package/dist/collection/collection-manifest.json

@@ -24,6 +24,7 @@
     "./components/swirl-inline-error/swirl-inline-error.js",
     "./components/swirl-inline-notification/swirl-inline-notification.js",
     "./components/swirl-link/swirl-link.js",
+    "./components/swirl-modal/swirl-modal.js",
     "./components/swirl-option-list-item/swirl-option-list-item.js",
     "./components/swirl-pagination/swirl-pagination.js",
     "./components/swirl-popover/swirl-popover.js",
@@ -166,7 +167,6 @@
     "./components/swirl-icon/icons/swirl-icon-warning.js",
     "./components/swirl-lightbox/swirl-lightbox.js",
     "./components/swirl-list/swirl-list.js",
-    "./components/swirl-modal/swirl-modal.js",
     "./components/swirl-option-list/swirl-option-list.js",
     "./components/swirl-option-list-section/swirl-option-list-section.js",
     "./components/swirl-pdf-reader/swirl-pdf-reader.js",

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -23,32 +23,120 @@
     display: none;
   }
 
-.modal:not(.modal--closing) .modal__backdrop {
-    -webkit-animation: 0.15s modal-backdrop-fade-in;
-            animation: 0.15s modal-backdrop-fade-in;
+.modal--variant-default.modal--closing {
+    -webkit-animation: 0.15s modal-fade-out;
+            animation: 0.15s modal-fade-out;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
   }
 
 @media (prefers-reduced-motion) {
 
-.modal:not(.modal--closing) .modal__backdrop {
+.modal--variant-default.modal--closing {
       -webkit-animation: none;
               animation: none
   }
     }
 
-.modal:not(.modal--closing) .modal__body {
-    -webkit-animation: 0.15s modal-scale-in;
-            animation: 0.15s modal-scale-in;
+.modal--variant-default:not(.modal--closing) .modal__backdrop {
+      -webkit-animation: 0.15s modal-backdrop-fade-in;
+              animation: 0.15s modal-backdrop-fade-in;
+    }
+
+@media (prefers-reduced-motion) {
+
+.modal--variant-default:not(.modal--closing) .modal__backdrop {
+        -webkit-animation: none;
+                animation: none
+    }
+      }
+
+.modal--variant-default:not(.modal--closing) .modal__body {
+      -webkit-animation: 0.15s modal-scale-in;
+              animation: 0.15s modal-scale-in;
+    }
+
+@media (prefers-reduced-motion) {
+
+.modal--variant-default:not(.modal--closing) .modal__body {
+        -webkit-animation: none;
+                animation: none
+    }
+      }
+
+.modal--variant-drawer {
+  justify-content: end;
+  align-items: stretch;
+}
+
+.modal--variant-drawer.modal--closing {
+    -webkit-animation: 0.15s modal-drawer-slide-out;
+            animation: 0.15s modal-drawer-slide-out;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards;
+  }
+
+@media (prefers-reduced-motion) {
+
+.modal--variant-drawer.modal--closing {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.modal--variant-drawer.modal--hide-label .modal__content {
+      padding-top: calc(3.5rem + var(--s-space-8));
+    }
+
+.modal--variant-drawer .modal__backdrop {
+    background-color: transparent;
+    -webkit-animation: none;
+            animation: none;
+  }
+
+.modal--variant-drawer .modal__body {
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+    -webkit-animation: 0.15s modal-drawer-slide-in;
+            animation: 0.15s modal-drawer-slide-in;
+    box-shadow: var(--s-shadow-level-3);
   }
 
 @media (prefers-reduced-motion) {
 
-.modal:not(.modal--closing) .modal__body {
+.modal--variant-drawer .modal__body {
       -webkit-animation: none;
               animation: none
   }
     }
 
+.modal--variant-drawer .modal__close-button {
+    right: auto;
+    left: var(--s-space-8);
+  }
+
+@media (min-width: 768px) {
+
+.modal--variant-drawer .modal__close-button {
+      left: var(--s-space-16)
+  }
+    }
+
+.modal--variant-drawer .modal__header {
+    padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));
+    padding-right: var(--s-space-16);
+  }
+
+@media (min-width: 768px) {
+
+.modal--variant-drawer .modal__header {
+      padding-top: var(--s-space-16);
+      padding-right: var(--s-space-24);
+      padding-left: calc(var(--s-space-16) + 2.5rem + var(--s-space-8))
+  }
+    }
+
 .modal--padded .modal__content {
     padding-top: var(--s-space-24);
     padding-right: var(--s-space-16);
@@ -70,21 +158,6 @@
     padding-top: var(--s-space-16);
   }
 
-.modal--closing {
-  -webkit-animation: 0.15s modal-fade-out;
-          animation: 0.15s modal-fade-out;
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-@media (prefers-reduced-motion) {
-
-.modal--closing {
-    -webkit-animation: none;
-            animation: none
-}
-  }
-
 @media (min-width: 768px) {
 
 .modal--scrollable .modal__content {
@@ -260,3 +333,39 @@
     opacity: 0;
   }
 }
+
+@-webkit-keyframes modal-drawer-slide-in {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes modal-drawer-slide-in {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes modal-drawer-slide-out {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes modal-drawer-slide-out {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -51,6 +51,7 @@ export class SwirlModal {
     this.padded = true;
     this.primaryActionLabel = undefined;
     this.secondaryActionLabel = undefined;
+    this.variant = "default";
     this.isOpen = false;
     this.closing = false;
     this.hasCustomHeader = undefined;
@@ -119,15 +120,18 @@ export class SwirlModal {
   }
   render() {
     const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
-    const className = classnames("modal", {
+    const className = classnames("modal", `modal--variant-${this.variant}`, {
       "modal--closing": this.closing,
       "modal--has-custom-header": this.hasCustomHeader,
+      "modal--hide-label": this.hideLabel,
       "modal--padded": this.padded,
       "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header", onSlotchange: this.onCustomHeaderSlotChange, ref: (el) => (this.customHeaderSlot = el) })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+        ? "<swirl-icon-close></swirl-icon-close>"
+        : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header", onSlotchange: this.onCustomHeaderSlotChange, ref: (el) => (this.customHeaderSlot = el) })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
   static get originalStyleUrls() {
@@ -279,6 +283,29 @@ export class SwirlModal {
         },
         "attribute": "secondary-action-label",
         "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlModalVariant",
+          "resolved": "\"default\" | \"drawer\"",
+          "references": {
+            "SwirlModalVariant": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-modal/swirl-modal.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
       }
     };
   }

package/dist/collection/components/swirl-table/swirl-table.js

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
-import debouncePromise from "debounce-promise";
 import { isMobileViewport } from "../../utils";
+import debouncePromise from "debounce-promise";
 /**
  * @slot columns - Column container, should contain SwirlTableColumns.
  * @slot rows - Row container, should contain SwirlTableRows.
@@ -8,18 +8,22 @@ import { isMobileViewport } from "../../utils";
 export class SwirlTable {
   constructor() {
     this.updateLayout = debouncePromise(async () => {
-      await this.resetEmptyRowStyles();
-      await this.resetRowGroupStyles();
-      await this.resetCellStyles();
-      await this.resetColumnStyles();
-      await this.layoutEmptyRow();
-      await this.layoutRowGroups();
-      await this.layOutColumns();
+      this.resetCellStyles();
+      this.resetColumnStyles();
+      this.resetEmptyRowStyles();
+      this.resetRowGroupStyles();
+      this.layoutEmptyRow();
+      this.layoutRowGroups();
       this.layOutCells();
-    }, 17, { leading: true });
+    }, 16, { leading: true });
     this.onScroll = () => {
       this.updateScrolledState();
     };
+    this.onSlotChange = async () => {
+      await this.updateLayout();
+      this.updateScrolledState();
+      this.updateEmptyState();
+    };
     this.caption = undefined;
     this.emptyStateLabel = "No results found.";
     this.label = undefined;
@@ -28,22 +32,6 @@ export class SwirlTable {
     this.scrolled = undefined;
     this.scrolledToEnd = undefined;
   }
-  componentDidLoad() {
-    this.observer = new MutationObserver(async () => {
-      await this.updateLayout();
-      this.updateScrolledState();
-      this.updateEmptyState();
-    });
-    this.observer.observe(this.el, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.columnObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-  }
   async componentDidRender() {
     await this.updateLayout();
     this.updateScrolledState();
@@ -53,6 +41,52 @@ export class SwirlTable {
     await this.updateLayout();
     this.updateScrolledState();
   }
+  /**
+   * Force a re-render of the table
+   */
+  async rerender() {
+    await this.updateLayout();
+    this.updateScrolledState();
+    this.updateEmptyState();
+  }
+  resetEmptyRowStyles() {
+    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+    if (!Boolean(emptyRow)) {
+      return;
+    }
+    emptyRow.style.width = "";
+  }
+  resetRowGroupStyles() {
+    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
+    tableRowGroups.forEach((tableRowGroup) => {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
+        return;
+      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
+    });
+  }
+  resetColumnStyles() {
+    const columns = this.getColumns();
+    columns.forEach((column) => {
+      column.classList.remove("table-column--has-shadow");
+      column.style.right = "";
+      column.style.left = "";
+      column.style.position = "";
+      column.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    const cells = this.getCells();
+    cells.forEach((cell) => {
+      cell.classList.remove("table-cell--has-shadow");
+      cell.style.flex = "";
+      cell.style.left = "";
+      cell.style.right = "";
+      cell.style.position = "";
+      cell.style.zIndex = "";
+    });
+  }
   updateScrolledState() {
     const isMobile = isMobileViewport();
     const scrollable = this.container.scrollWidth > this.container.clientWidth;
@@ -90,45 +124,7 @@ export class SwirlTable {
   getCells() {
     return Array.from(this.el.querySelectorAll("swirl-table-cell"));
   }
-  async resetEmptyRowStyles() {
-    const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
-    if (!Boolean(emptyRow)) {
-      return;
-    }
-    emptyRow.style.width = "";
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetRowGroupStyles() {
-    const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-    tableRowGroups.forEach((tableRowGroup) => {
-      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetColumnStyles() {
-    const columns = this.getColumns();
-    columns.forEach((column) => {
-      column.classList.remove("table-column--has-shadow");
-      column.style.right = "";
-      column.style.left = "";
-      column.style.position = "";
-      column.style.zIndex = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async resetCellStyles() {
-    const cells = this.getCells();
-    cells.forEach((cell) => {
-      cell.classList.remove("table-cell--has-shadow");
-      cell.style.flex = "";
-      cell.style.left = "";
-      cell.style.right = "";
-      cell.style.position = "";
-      cell.style.zIndex = "";
-    });
-    await new Promise((resolve) => setTimeout(resolve));
-  }
-  async layoutEmptyRow() {
+  layoutEmptyRow() {
     const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
     if (!Boolean(emptyRow)) {
       return;
@@ -136,97 +132,28 @@ export class SwirlTable {
     const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
     emptyRow.style.width = scrollWidth;
   }
-  async layoutRowGroups() {
+  layoutRowGroups() {
+    var _a;
     const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+    const scrollWidth = `${(_a = this.el.shadowRoot.querySelector(".table__container")) === null || _a === void 0 ? void 0 : _a.scrollWidth}px`;
     tableRowGroups.forEach((tableRowGroup) => {
-      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
-    });
-  }
-  async layOutColumns() {
-    const columns = this.getColumns();
-    const tableContainer = this.container;
-    const tableContainerWidth = tableContainer.clientWidth;
-    columns.forEach((column, index) => {
-      var _a, _b;
-      if (!column.sticky || isMobileViewport()) {
+      const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
+      if (!Boolean(headerRow)) {
         return;
       }
-      const isInFirstHalfOfTable = index <= Math.floor(columns.length / 2);
-      const nextColumnIsSticky = (_a = columns[index + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
-      const prevColumnIsSticky = (_b = columns[index - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
-      const columnIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
-      column.style.zIndex = columnIsOnTopOfShadow ? "1" : "";
-      const columnHasShadow = (isInFirstHalfOfTable && !nextColumnIsSticky) ||
-        (!isInFirstHalfOfTable && !prevColumnIsSticky);
-      if (columnHasShadow) {
-        column.classList.add(isInFirstHalfOfTable
-          ? "table-column--has-shadow-right"
-          : "table-column--has-shadow-left");
-      }
-      else {
-        column.classList.remove("table-column--has-shadow-right");
-        column.classList.remove("table-column--has-shadow-left");
-      }
-      const offset = isInFirstHalfOfTable
-        ? column.offsetLeft
-        : Math.max(0, tableContainerWidth -
-          (column.offsetLeft + column.getBoundingClientRect().width));
-      column.style.position = "sticky";
-      if (isInFirstHalfOfTable) {
-        column.style.left = `${offset}px`;
-      }
-      else {
-        column.style.right = `${offset}px`;
-      }
+      tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
     });
-    await new Promise((resolve) => setTimeout(resolve));
   }
   layOutCells() {
     const columns = this.getColumns();
     const cells = this.getCells();
     columns.forEach((column, colIndex) => {
-      var _a, _b;
       const cellsOfColumn = cells.filter((_, cellIndex) => {
         return (colIndex - cellIndex) % columns.length === 0;
       });
-      const isInFirstHalfOfTable = colIndex <= Math.floor(columns.length / 2);
-      const offset = isInFirstHalfOfTable
-        ? window.getComputedStyle(column).left
-        : window.getComputedStyle(column).right;
-      const nextColumnIsSticky = (_a = columns[colIndex + 1]) === null || _a === void 0 ? void 0 : _a.sticky;
-      const prevColumnIsSticky = (_b = columns[colIndex - 1]) === null || _b === void 0 ? void 0 : _b.sticky;
-      const columnIsSticky = column.sticky;
       const columnWidth = column.width || `${column.getBoundingClientRect().width}px`;
       cellsOfColumn.forEach((cell) => {
-        const cellSticksToLeft = columnIsSticky && isInFirstHalfOfTable;
-        const cellSticksToRight = columnIsSticky && !isInFirstHalfOfTable;
-        const cellIsOnTopOfShadow = isInFirstHalfOfTable && nextColumnIsSticky;
         cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
-        if (isMobileViewport()) {
-          cell.classList.remove("table-cell--has-shadow");
-          cell.style.left = "";
-          cell.style.right = "";
-          cell.style.position = "";
-          cell.style.zIndex = "";
-          return;
-        }
-        cell.style.left = cellSticksToLeft ? offset : "";
-        cell.style.right = cellSticksToRight ? offset : "";
-        cell.style.position = columnIsSticky ? "sticky" : "";
-        cell.style.zIndex = cellIsOnTopOfShadow ? "1" : "";
-        const cellHasShadow = columnIsSticky &&
-          ((isInFirstHalfOfTable && !nextColumnIsSticky) ||
-            (!isInFirstHalfOfTable && !prevColumnIsSticky));
-        if (cellHasShadow) {
-          cell.classList.add(isInFirstHalfOfTable
-            ? "table-cell--has-shadow-right"
-            : "table-cell--has-shadow-left");
-        }
-        else {
-          cell.classList.remove("table-cell--has-shadow-right");
-          cell.classList.remove("table-cell--has-shadow-left");
-        }
       });
     });
   }
@@ -235,7 +162,7 @@ export class SwirlTable {
     this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
   }
   render() {
-    return (h(Host, null, h("div", { class: "table" }, h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", null, h("div", { id: "caption" }, this.caption))), h("div", { role: "rowgroup" }, h("div", { class: "table__header", role: "row" }, h("slot", { name: "columns" }))), h("div", { class: "table__body" }, h("slot", { name: "rows" }), this.empty && (h("div", { class: "table__empty-row", role: "row" }, h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+    return (h(Host, null, h("div", { class: "table" }, h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", null, h("div", { id: "caption" }, this.caption))), h("div", { role: "rowgroup" }, h("div", { class: "table__header", role: "row" }, h("slot", { name: "columns", onSlotchange: this.onSlotChange }))), h("div", { class: "table__body" }, h("slot", { name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { class: "table__empty-row", role: "row" }, h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
   }
   static get is() { return "swirl-table"; }
   static get encapsulation() { return "shadow"; }
@@ -313,6 +240,26 @@ export class SwirlTable {
       "scrolledToEnd": {}
     };
   }
+  static get methods() {
+    return {
+      "rerender": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Force a re-render of the table",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

package/dist/collection/components/swirl-table-column/swirl-table-column.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { closestPassShadow } from "../../utils";
 /**
  * @slot slot - The column label.
  */
@@ -11,6 +12,10 @@ export class SwirlTableColumn {
     this.sticky = undefined;
     this.width = undefined;
   }
+  componentDidRender() {
+    const table = closestPassShadow(this.el, "swirl-table");
+    table === null || table === void 0 ? void 0 : table.rerender();
+  }
   render() {
     const styles = {
       flex: Boolean(this.width) ? `0 0 ${this.width}` : "",

package/dist/collection/components/swirl-table-row/swirl-table-row.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
+import { closestPassShadow } from "../../utils";
 /**
  * @slot slot - The cells of this row.
  */
@@ -8,6 +9,10 @@ export class SwirlTableRow {
     this.highlighted = undefined;
     this.index = undefined;
   }
+  componentDidLoad() {
+    const table = closestPassShadow(this.el, "swirl-table");
+    table === null || table === void 0 ? void 0 : table.rerender();
+  }
   render() {
     const className = classnames("table-row", {
       "table-row--highlighted": this.highlighted,
@@ -64,4 +69,5 @@ export class SwirlTableRow {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }