@govtechsg/sgds-web-component 3.1.2 → 3.2.0

package/components/Table/index.umd.js

@@ -4233,7 +4233,7 @@
    */
   const classMap = directive(ClassMapDirective);
 
-  var css_248z$1 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$4 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4290,14 +4290,67 @@
           });
       }
   }
-  SgdsElement.styles = [css_248z$1];
+  SgdsElement.styles = [css_248z$4];
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+  var css_248z$3 = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+
+  class HasSlotController {
+      constructor(host, ...slotNames) {
+          this.slotNames = [];
+          (this.host = host).addController(this);
+          this.slotNames = slotNames;
+          this.handleSlotChange = this.handleSlotChange.bind(this);
+      }
+      hasDefaultSlot() {
+          return [...this.host.childNodes].some(node => {
+              var _a;
+              if (node.nodeType === node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== "") {
+                  return true;
+              }
+              if (node.nodeType === node.ELEMENT_NODE) {
+                  const el = node;
+                  const tagName = el.tagName.toLowerCase();
+                  // Ignore visually hidden elements since they aren't rendered
+                  if (tagName === "sl-visually-hidden") {
+                      return false;
+                  }
+                  // If it doesn't have a slot attribute, it's part of the default slot
+                  if (!el.hasAttribute("slot")) {
+                      return true;
+                  }
+              }
+              return false;
+          });
+      }
+      hasNamedSlot(name) {
+          return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+      }
+      test(slotName) {
+          return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+      }
+      hostConnected() {
+          var _a;
+          (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener("slotchange", this.handleSlotChange);
+      }
+      hostDisconnected() {
+          var _a;
+          (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.handleSlotChange);
+      }
+      handleSlotChange(event) {
+          const slot = event.target;
+          if ((this.slotNames.includes("[default]") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+              this.host.requestUpdate();
+          }
+      }
+  }
 
   /**
-   * @summary The use of a table is to organise a collections of data into readable rows
+   * @summary Table is used for displaying collections of data in organized rows and columns.
+   * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+   *
+   * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
    */
   class SgdsTable extends SgdsElement {
       constructor() {
@@ -4319,18 +4372,17 @@
            */
           this.headerPosition = "horizontal";
           /** @internal */
-          this.originalTableData = [];
+          this.hasSlotController = new HasSlotController(this, "[default]");
       }
       connectedCallback() {
           super.connectedCallback();
-          this.originalTableData = [...this.tableData];
       }
       _renderTable() {
           if (this.headerPosition === "horizontal") {
               return html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -4347,7 +4399,7 @@
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -4373,6 +4425,7 @@
           }
       }
       render() {
+          const hasDefaultSlot = this.hasSlotController.test("[default]");
           return html `
       <div
         class=${classMap({
@@ -4384,14 +4437,18 @@
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
       }
   }
-  SgdsTable.styles = [...SgdsElement.styles, css_248z];
+  SgdsTable.styles = [...SgdsElement.styles, css_248z$3];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsTable.prototype, "responsive", void 0);
@@ -4405,11 +4462,8 @@
       property({ type: Array })
   ], SgdsTable.prototype, "tableData", void 0);
   __decorate([
-      property({ type: String, reflect: true })
+      property({ type: String })
   ], SgdsTable.prototype, "headerPosition", void 0);
-  __decorate([
-      state()
-  ], SgdsTable.prototype, "originalTableData", void 0);
 
   /**
    *
@@ -4422,7 +4476,119 @@
       }
   }
 
+  var css_248z$2 = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
+
+  // @watch decorator
+  //
+  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+  //
+  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+  //
+  // Usage:
+  //
+  //  @watch('propName')
+  //  handlePropChange(oldValue, newValue) {
+  //    ...
+  //  }
+  function watch(propName, options) {
+      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+      return (proto, decoratedFnName) => {
+          // @ts-expect-error -- update is a protected property
+          const { update } = proto;
+          if (propName in proto) {
+              const propNameKey = propName;
+              // @ts-expect-error -- update is a protected property
+              proto.update = function (changedProps) {
+                  if (changedProps.has(propNameKey)) {
+                      const oldValue = changedProps.get(propNameKey);
+                      const newValue = this[propNameKey];
+                      if (oldValue !== newValue) {
+                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                              this[decoratedFnName](oldValue, newValue);
+                          }
+                      }
+                  }
+                  update.call(this, changedProps);
+              };
+          }
+      };
+  }
+
+  /**
+   * @summary Table head represents a table header cell that identifies a group of information within the table.
+   *
+   * @slot - Place any elements inside to display as the header content.
+   */
+  class SgdsTableHead extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * To indicate if the header will have a darker bottom border style
+           */
+          this.border = false;
+      }
+      _handleBorderChange() {
+          var _a, _b;
+          this.border = ((_b = (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== "sgds-table-cell";
+          this.border ? this.setAttribute("border", "true") : this.removeAttribute("border");
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute("role", "columnheader");
+      }
+      render() {
+          return html `<slot></slot>`;
+      }
+  }
+  SgdsTableHead.styles = [...SgdsElement.styles, css_248z$2];
+  __decorate([
+      state()
+  ], SgdsTableHead.prototype, "border", void 0);
+  __decorate([
+      watch("border")
+  ], SgdsTableHead.prototype, "_handleBorderChange", null);
+
+  var css_248z$1 = css`:host{display:table-row;width:100%}`;
+
+  /**
+   * @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.
+   *
+   * @slot - Insert any table cell or header elements to be displayed as part of this row.
+   */
+  class SgdsTableRow extends SgdsElement {
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute("role", "row");
+      }
+      render() {
+          return html `<slot class="table-row"></slot>`;
+      }
+  }
+  SgdsTableRow.styles = [...SgdsElement.styles, css_248z$1];
+
+  var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
+
+  /**
+   * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.
+   *
+   *  @slot - Insert any elements to be rendered as the cell’s content.
+   */
+  class SgdsTableCell extends SgdsElement {
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute("role", "cell");
+      }
+      render() {
+          return html ` <slot class="table-cell"></slot> `;
+      }
+  }
+  SgdsTableCell.styles = [...SgdsElement.styles, css_248z];
+
   register("sgds-table", SgdsTable);
+  register("sgds-table-head", SgdsTableHead);
+  register("sgds-table-row", SgdsTableRow);
+  register("sgds-table-cell", SgdsTableCell);
 
 }));
 //# sourceMappingURL=index.umd.js.map