@ncino/web-components 2.2.0-preview.4 → 2.2.0-preview.6

package/dist/components/table/gator/table.gator.js

@@ -1,23 +1,33 @@
-import{a as s,x as a}from"../../../assets/index-chunk2.js";import{t as b}from"../../../assets/index-chunk3.js";import{N as p}from"../table.js";import"../../../assets/index-chunk.js";const c=":host{--ngc-table-header-background-color: #ececec;--ngc-table-header-border-bottom-color: #ececec}",g=":host{display:block;overflow:auto}table{border-spacing:0;width:100%}thead>tr{height:56px}tbody>tr,tfoot>tr{height:48px}th{top:0;position:sticky;z-index:100;min-height:56px;background:var(--ngc-table-header-background-color, #ececec);text-align:left}[dir=rtl] th.mat-header-cell{text-align:right}td{padding:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--ngc-table-header-border-bottom-color, #ececec)}th:first-of-type,td:first-of-type{padding-left:24px}[dir=rtl] th:first-of-type,[dir=rtl] td:first-of-type{padding-left:0;padding-right:24px}th:last-of-type,td:last-of-type{padding-right:24px}[dir=rtl] th:last-of-type,[dir=rtl] td:last-of-type{padding-right:0;padding-left:24px}";var h=Object.defineProperty,f=Object.getOwnPropertyDescriptor,u=(t,e,o,r)=>{for(var l=r>1?void 0:r?f(e,o):e,d=t.length-1,i;d>=0;d--)(i=t[d])&&(l=(r?i(e,o,l):i(l))||l);return r&&l&&h(e,o,l),l};let n=class extends p{renderWrapper(t,e){return a`
-            <table role="grid" aria-labelledby="${this.tableAriaLabelledBy}">
-                ${t} ${e}
+import{a,x as l}from"../../../assets/index-chunk2.js";import{t as p}from"../../../assets/index-chunk3.js";import{p as h}from"../../../assets/index-chunk5.js";import{s as n}from"../../../assets/index-chunk6.js";import{N as b}from"../table.js";import"../../checkbox/checkbox.gator.js";import"../../../assets/index-chunk.js";import"../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../utils/string-utils.js";import"../../../utils/lightdom-utils.js";import"../../icon/gator/icon.gator.js";import"../../icon/gator/templates/arrow-left.js";import"../../icon/icon-registry.js";import"../../icon/gator/templates/arrow-right.js";import"../../icon/gator/templates/calendar.js";import"../../icon/gator/templates/check-circle.js";import"../../icon/gator/templates/check.js";import"../../icon/gator/templates/checkbox.js";import"../../icon/gator/templates/checkbox-selected.js";import"../../icon/gator/templates/chevron-down.js";import"../../icon/gator/templates/chevron-left.js";import"../../icon/gator/templates/chevron-right.js";import"../../icon/gator/templates/chevron-up.js";import"../../icon/gator/templates/dashboard.js";import"../../icon/gator/templates/exit.js";import"../../icon/gator/templates/exit-circle.js";import"../../icon/gator/templates/eye-crossed.js";import"../../icon/gator/templates/info.js";import"../../icon/gator/templates/link.js";import"../../icon/gator/templates/overflow-menu.js";import"../../icon/gator/templates/percent.js";import"../../icon/gator/templates/picture.js";import"../../icon/gator/templates/shield-lock.js";import"../../icon/gator/templates/radio.js";import"../../icon/gator/templates/radio-selected.js";import"../../icon/gator/templates/restricted.js";import"../../icon/gator/templates/settings.js";import"../../icon/gator/templates/warning.js";const g=":host{--ngc-table-header-background-color: #ececec;--ngc-table-header-border-bottom-color: #ececec}",m=":host{display:block;overflow:auto}.gator-table{font-family:var(--ngc-font-family-body),sans-serif;border-spacing:0;width:100%}.gator-table thead>tr{height:56px}.gator-table tbody>tr,.gator-table tfoot>tr{height:48px}.gator-table th{top:0;position:sticky;z-index:100;min-height:56px;background:var(--ngc-table-header-background-color, #ececec);text-align:left}.gator-table [dir=rtl] th.mat-header-cell{text-align:right}.gator-table td{padding:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--ngc-table-header-border-bottom-color, #ececec)}.gator-table th:first-of-type,.gator-table td:first-of-type{padding-left:24px}.gator-table [dir=rtl] th:first-of-type,.gator-table [dir=rtl] td:first-of-type{padding-left:0;padding-right:24px}.gator-table th:last-of-type,.gator-table td:last-of-type{padding-right:24px}.gator-table [dir=rtl] th:last-of-type,.gator-table [dir=rtl] td:last-of-type{padding-right:0;padding-left:24px}";var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,y=(e,t,r,o)=>{for(var i=o>1?void 0:o?u(t,r):t,s=e.length-1,d;s>=0;s--)(d=e[s])&&(i=(o?d(t,r,i):d(i))||i);return o&&i&&f(t,r,i),i};let c=class extends b{constructor(){super(...arguments),this.selectedRows=[]}renderWrapper(e,t){return l`
+            <table class="gator-table" role="grid" aria-labelledby="${this.tableAriaLabelledBy}">
+                ${e} ${t}
             </table>
-        `}getTableHeader(t){const e=t.map(this.getTableHeaderColumn);return a`
+        `}getTableHeader(e){const t=e.map(this.getTableHeaderColumn);return this.selectable&&t.unshift(l`<th role="gridcell">
+                <ngc-checkbox
+                    ?selected="${this.selectedRows.length===this.data.length}"
+                    @change="${r=>this.handleSelectAll(r)}"
+                ></ngc-checkbox>
+            </th>`),l`
           <thead role="rowgroup">
             <tr role="row">
-              ${e}
+              ${t}
             </tr>
           </thead>
-        `}getTableHeaderColumn(t){return a`<th>${t.name}</th>`}getTableBody(t,e){const o=e.map(r=>this.getTableBodyRow(r,t));return a`
+        `}handleSelectAll(e){e.detail.selected?(this.selectedRows=[...this.data],this.data.forEach(t=>{t.selected=e.detail.selected})):(this.selectedRows=[],this.data.forEach(t=>{t.selected=!1})),this.dispatchEvent(new CustomEvent("selectall",{bubbles:!0,detail:{selectedRows:this.selectedRows}})),this.requestUpdate()}getTableHeaderColumn(e){return l`<th>${e.name}</th>`}getTableBody(e,t){const r=t.map(o=>this.getTableBodyRow(o,e));return l`
           <tbody role="rowgroup">
-            ${o}
+            ${r}
           </tbody>
-        `}getTableBodyRow(t,e){const o=e.map(r=>this.getTableBodyCell(t,r));return a`
+        `}getTableBodyRow(e,t){const r=t.map(o=>this.getTableBodyCell(e,o));return this.selectable&&r.unshift(l`<td role="gridcell">
+                <ngc-checkbox
+                    ?selected="${e.selected}"
+                    @change="${o=>this.handleTableBodyRowSelected(o,e)}"
+                ></ngc-checkbox>
+            </td>`),l`
           <tr role="row">
-            ${o}
+            ${r}
           </tr>
-        `}getTableBodyCell(t,e){return a`
+        `}handleTableBodyRowSelected(e,t){e.detail.selected?this.selectedRows.push(t):this.selectedRows=this.selectedRows.filter(r=>r!==t),this.dispatchEvent(new CustomEvent("rowselected",{bubbles:!0,detail:{data:t,selectedRows:this.selectedRows}}))}getTableBodyCell(e,t){return l`
           <td role="gridcell">
-              ${this.getValueForCell(t,e)}
+              ${this.getValueForCell(e,t)}
           </td>
-        `}getValueForCell(t,e){return typeof e.valueGetter=="function"?a`${e.valueGetter(t)}`:t[e.field]}render(){return this.columnDefinitions?this.renderWrapper(this.getTableHeader(this.columnDefinitions),this.getTableBody(this.columnDefinitions,this.data)):null}};n.styles=[s(c),s(g)];n=u([b("ngc-table")],n);
+        `}getValueForCell(e,t){return typeof t.valueGetter=="function"?l`${t.valueGetter(e)}`:e[t.field]}render(){return this.columnDefinitions?this.renderWrapper(this.getTableHeader(this.columnDefinitions),this.getTableBody(this.columnDefinitions,this.data)):null}};c.styles=[a(n),a(h),a(g),a(m)];c=y([p("ngc-table")],c);

package/dist/components/table/index.js

@@ -1 +1 @@
-import"./gator/table.gator.js";import"../../assets/index-chunk2.js";import"../../assets/index-chunk3.js";import"./table.js";import"../../assets/index-chunk.js";
+import"./gator/table.gator.js";import"../../assets/index-chunk2.js";import"../../assets/index-chunk3.js";import"../../assets/index-chunk5.js";import"../../assets/index-chunk6.js";import"./table.js";import"../../assets/index-chunk.js";import"../../utils/components/testable-lit-element/testable-lit-element.js";import"../checkbox/checkbox.gator.js";import"../../utils/string-utils.js";import"../../utils/lightdom-utils.js";import"../icon/gator/icon.gator.js";import"../icon/gator/templates/arrow-left.js";import"../icon/icon-registry.js";import"../icon/gator/templates/arrow-right.js";import"../icon/gator/templates/calendar.js";import"../icon/gator/templates/check-circle.js";import"../icon/gator/templates/check.js";import"../icon/gator/templates/checkbox.js";import"../icon/gator/templates/checkbox-selected.js";import"../icon/gator/templates/chevron-down.js";import"../icon/gator/templates/chevron-left.js";import"../icon/gator/templates/chevron-right.js";import"../icon/gator/templates/chevron-up.js";import"../icon/gator/templates/dashboard.js";import"../icon/gator/templates/exit.js";import"../icon/gator/templates/exit-circle.js";import"../icon/gator/templates/eye-crossed.js";import"../icon/gator/templates/info.js";import"../icon/gator/templates/link.js";import"../icon/gator/templates/overflow-menu.js";import"../icon/gator/templates/percent.js";import"../icon/gator/templates/picture.js";import"../icon/gator/templates/shield-lock.js";import"../icon/gator/templates/radio.js";import"../icon/gator/templates/radio-selected.js";import"../icon/gator/templates/restricted.js";import"../icon/gator/templates/settings.js";import"../icon/gator/templates/warning.js";

package/dist/components/table/table.js

@@ -1 +1 @@
-import{r as s}from"../../assets/index-chunk2.js";import{n as a}from"../../assets/index-chunk.js";var b=Object.defineProperty,i=(e,l,o,u)=>{for(var t=void 0,r=e.length-1,p;r>=0;r--)(p=e[r])&&(t=p(l,o,t)||t);return t&&b(l,o,t),t};class n extends s{constructor(){super(...arguments),this.columnDefinitions=[],this.data=[],this.tableAriaLabelledBy=null}}i([a({type:Object,attribute:"column-definitions"})],n.prototype,"columnDefinitions");i([a({type:Object})],n.prototype,"data");i([a({type:String,attribute:"table-aria-labelledby"})],n.prototype,"tableAriaLabelledBy");export{n as N};
+import{n as t}from"../../assets/index-chunk.js";import{T as p}from"../../utils/components/testable-lit-element/testable-lit-element.js";import"../../assets/index-chunk2.js";var b=Object.defineProperty,a=(r,o,n,f)=>{for(var e=void 0,i=r.length-1,s;i>=0;i--)(s=r[i])&&(e=s(o,n,e)||e);return e&&b(o,n,e),e};class l extends p{constructor(){super(...arguments),this.columnDefinitions=[],this.data=[],this.tableAriaLabelledBy=null,this.selectable=!1}}a([t({type:Object,attribute:"column-definitions"})],l.prototype,"columnDefinitions");a([t({type:Object})],l.prototype,"data");a([t({type:String,attribute:"table-aria-labelledby"})],l.prototype,"tableAriaLabelledBy");a([t({type:Boolean})],l.prototype,"selectable");export{l as N};

package/dist/types/components/table/gator/table.gator.d.ts

@@ -1,11 +1,14 @@
-import { NjcTable } from '../table.ts';
+import { NjcTable, RowData } from '../table.ts';
 export declare class NgcTable extends NjcTable {
     static styles: import('lit').CSSResult[];
+    selectedRows: RowData[];
     renderWrapper(header: unknown, body: unknown): import('lit').TemplateResult<1>;
     private getTableHeader;
+    handleSelectAll(event: CustomEvent): void;
     private getTableHeaderColumn;
     private getTableBody;
     private getTableBodyRow;
+    handleTableBodyRowSelected(event: CustomEvent, rowData: RowData): void;
     private getTableBodyCell;
     private getValueForCell;
     render(): import('lit').TemplateResult<1> | null;

package/dist/types/components/table/table.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 export interface ColumnDefinition {
     id?: string;
     field: string;
@@ -8,8 +8,9 @@ export interface ColumnDefinition {
 export interface RowData {
     [key: string]: any;
 }
-export declare class NjcTable extends LitElement {
+export declare class NjcTable extends TestableLitElement {
     columnDefinitions: ColumnDefinition[];
     data: RowData[];
     tableAriaLabelledBy: string | null;
+    selectable: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ncino/web-components",
     "author": "nCino",
-    "version": "2.2.0-preview.4",
+    "version": "2.2.0-preview.6",
     "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "2.2.0-preview.3",
+  "version": "2.2.0-preview.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3657,7 +3657,7 @@
         },
         {
           "name": "ngc-table",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **selectall**\n- **rowselected**",
           "doc-url": "",
           "attributes": [
             {
@@ -3671,16 +3671,36 @@
             {
               "name": "table-aria-labelledby",
               "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "selectable",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "data-testid",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
-          "events": [],
+          "events": [
+            { "name": "selectall", "type": "CustomEvent" },
+            { "name": "rowselected", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
+              { "name": "selectedRows", "type": "RowData[]" },
               { "name": "columnDefinitions", "type": "ColumnDefinition[]" },
               { "name": "data", "type": "RowData[]" },
-              { "name": "tableAriaLabelledBy", "type": "string | null" }
+              { "name": "tableAriaLabelledBy", "type": "string | null" },
+              { "name": "selectable", "type": "boolean" },
+              { "name": "dataTestid", "type": "string | undefined" },
+              { "name": "labelDataTestid" },
+              { "name": "helpTextDataTestid" },
+              { "name": "errorMessageDataTestid" }
             ],
-            "events": []
+            "events": [
+              { "name": "selectall", "type": "CustomEvent" },
+              { "name": "rowselected", "type": "CustomEvent" }
+            ]
           }
         },
         {