@ncino/web-components 9.1.0-preview.2 → 9.1.0-preview.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,10 @@
1
- import{property as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as v}from"../../../../utils/decorators/custom-element-decorator.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as h,html as p}from"../../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";import{createRef as u,ref as c}from"../../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/ref.js";import g from"../../../../packages/web-components/src/components/input/gator/input-search/input-search.gator.scss.js";import{NgcInputBase as f}from"../../base/input-base.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import"../input-text/input-text.gator.js";import"../dropdown/input-dropdown.gator.js";import{unsafeCSS as m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var $=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=Object.getPrototypeOf,R=Reflect.get,l=(t,s,a,i)=>{for(var r=i>1?void 0:i?b(s,a):s,n=t.length-1,o;n>=0;n--)(o=t[n])&&(r=(i?o(s,a,r):o(r))||r);return i&&r&&$(s,a,r),r},I=(t,s,a)=>R(x(t),a,s);let e=class extends f{constructor(){super(...arguments),this.value="",this.inputRef=u(),this.dropdownRef=u(),this.autocomplete=!1}render(){return this.autocomplete?this.dropdownInputMarkup:this.basicInputMarkup}handleInputEvent(t){t.preventDefault(),t.stopPropagation(),this.dispatchInputEvent(t.detail.value),this.inputRef.value?.inputRef.value?.focus(),this.dropdownRef.value?.inputRef.value?.focus()}handleChangeEvent(t){t.preventDefault(),t.stopPropagation(),this.dispatchChangeEvent(t.detail.value)}clearInput(){this.dispatchInputEvent(""),this.dispatchChangeEvent(""),this.inputRef.value?.inputRef.value?.focus()}get basicInputMarkup(){return p`
1
+ import{property as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as v}from"../../../../utils/decorators/custom-element-decorator.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as i,nothing as h}from"../../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";import{createRef as u,ref as c}from"../../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/ref.js";import g from"../../../../packages/web-components/src/components/input/gator/input-search/input-search.gator.scss.js";import{NgcInputBase as f}from"../../base/input-base.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import"../input-text/input-text.gator.js";import"../dropdown/input-dropdown.gator.js";import{unsafeCSS as m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var $=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=Object.getPrototypeOf,R=Reflect.get,l=(t,s,n,a)=>{for(var r=a>1?void 0:a?b(s,n):s,o=t.length-1,p;o>=0;o--)(p=t[o])&&(r=(a?p(s,n,r):p(r))||r);return a&&r&&$(s,n,r),r},I=(t,s,n)=>R(x(t),n,s);let e=class extends f{constructor(){super(...arguments),this.value="",this.inputRef=u(),this.dropdownRef=u(),this.autocomplete=!1}render(){return this.skeleton?this.skeletonLoaderMarkup:this.autocomplete?this.dropdownInputMarkup:this.basicInputMarkup}get skeletonLoaderMarkup(){return i`
2
+ <ngc-skeleton-loader
3
+ width="250"
4
+ height="50"
5
+ rounded
6
+ ></ngc-skeleton-loader>
7
+ `}handleInputEvent(t){t.preventDefault(),t.stopPropagation(),this.dispatchInputEvent(t.detail.value),this.inputRef.value?.inputRef.value?.focus(),this.dropdownRef.value?.inputRef.value?.focus()}handleChangeEvent(t){t.preventDefault(),t.stopPropagation(),this.dispatchChangeEvent(t.detail.value)}clearInput(){this.dispatchInputEvent(""),this.dispatchChangeEvent(""),this.inputRef.value?.inputRef.value?.focus()}get basicInputMarkup(){return i`
2
8
  <ngc-input-text
3
9
  ${c(this.inputRef)}
4
10
  id="${this.id}"
@@ -19,7 +25,7 @@ import{property as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2
19
25
  >
20
26
  ${this.value?this.clearButtonMarkup:h}
21
27
  </ngc-input-text>
22
- `}get clearButtonMarkup(){return this.disabled?h:p`
28
+ `}get clearButtonMarkup(){return this.disabled?h:i`
23
29
  <ngc-icon-button
24
30
  slot="end-slot"
25
31
  data-testid="test-search-clear"
@@ -28,7 +34,7 @@ import{property as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2
28
34
  size="medium"
29
35
  @click="${this.clearInput}"
30
36
  ></ngc-icon-button>
31
- `}get dropdownInputMarkup(){return p`
37
+ `}get dropdownInputMarkup(){return i`
32
38
  <ngc-input-dropdown
33
39
  ${c(this.dropdownRef)}
34
40
  id="${this.id}"
@@ -1,4 +1,4 @@
1
- import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as $,html as r}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";import{property as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as f}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as w}from"../../../utils/decorators/custom-element-decorator.js";import{unsafeHTML as T}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";import{msg as b}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{NjcTable as k}from"../table.js";import y from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import R from"../../../packages/styles/src/gator/tokens/primitive.tokens.css.js";import P from"../../../packages/styles/src/gator/tokens/semantic.tokens.css.js";import"./table-bulk-controls/table-bulk-controls.gator.js";import"../../checkbox/checkbox.gator.js";import"../../skip-link/gator/base/skip-link.gator.js";import{unsafeCSS as u}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var C=Object.defineProperty,B=Object.getOwnPropertyDescriptor,h=(e,t,l,s)=>{for(var a=s>1?void 0:s?B(t,l):t,i=e.length-1,n;i>=0;i--)(n=e[i])&&(a=(s?n(t,l,a):n(a))||a);return s&&a&&C(t,l,a),a};let c=class extends k{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!1,this.selectedRows=[],this._currentPage=1}updated(e){super.updated(e),e.has("data")&&(this.selectedRows=this.data.filter(t=>t.selected&&!t.isTableHeader))}render(){return this.columns?this.renderWrapper(this.getTableHeader(this.columns),this.getTableBody(this.columns,this.displayedRowData)):null}get tableElevatedClass(){return this.elevated?"gator-table-elevated":""}get showBulkControls(){return this.selectable&&this.selectedRows.length>0}renderWrapper(e,t){return r`
1
+ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as k,html as a}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";import{property as b}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as $}from"../../../utils/decorators/custom-element-decorator.js";import{unsafeHTML as w}from"../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";import{msg as f}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{NjcTable as T}from"../table.js";import R from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import y from"../../../packages/styles/src/gator/tokens/primitive.tokens.css.js";import S from"../../../packages/styles/src/gator/tokens/semantic.tokens.css.js";import"./table-bulk-controls/table-bulk-controls.gator.js";import"../../checkbox/checkbox.gator.js";import"../../skip-link/gator/base/skip-link.gator.js";import{unsafeCSS as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var C=Object.defineProperty,P=Object.getOwnPropertyDescriptor,h=(e,t,l,s)=>{for(var o=s>1?void 0:s?P(t,l):t,r=e.length-1,n;r>=0;r--)(n=e[r])&&(o=(s?n(t,l,o):n(o))||o);return s&&o&&C(t,l,o),o};let d=class extends T{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!1,this.skeleton=!1,this.selectedRows=[],this._currentPage=1}updated(e){super.updated(e),e.has("data")&&(this.selectedRows=this.data.filter(t=>t.selected&&!t.isTableHeader))}render(){if(!this.skeleton&&!this.columns)return null;const e=this.skeleton?this._skeletonLoaderColumns:this.columns;return this.renderWrapper(this.getTableHeader(e),this.getTableBody(e,this.displayedRowData))}get _skeletonLoaderColumns(){const e=this.columns?.length||6;let t=[];for(let l=0;l<e;l++)t=t.concat({field:`skeleton-loader-${l}`,name:`skeleton-loader-${l}`});return t}get tableElevatedClass(){return this.elevated?"gator-table-elevated":""}get showBulkControls(){return this.selectable&&this.selectedRows.length>0}renderWrapper(e,t){return a`
2
2
  <ngc-table-bulk-controls
3
3
  ?visible="${this.showBulkControls}"
4
4
  .selectedRows="${this.selectedRows.length}"
@@ -8,11 +8,14 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
8
8
  >
9
9
  <slot name="bulk-controls"></slot>
10
10
  </ngc-table-bulk-controls>
11
- <table class="gator-table ${this.tableElevatedClass}" role="grid"
12
- aria-labelledby="${this.tableAriaLabelledBy}">
11
+ <table
12
+ class="gator-table ${this.tableElevatedClass}"
13
+ role="grid"
14
+ aria-labelledby="${this.tableAriaLabelledBy}"
15
+ >
13
16
  ${e} ${t}
14
17
  </table>
15
- ${this.includePagination?r`
18
+ ${this.includePagination&&!this.skeleton?a`
16
19
  <ngc-table-pagination
17
20
  items-per-page="${this.itemsPerPage}"
18
21
  total-items="${this.data.length}"
@@ -20,78 +23,93 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
20
23
  @pagechanged="${this.handlePageChanged}"
21
24
  @itemsperpagechanged="${this.handleItemsPerPageChanged}"
22
25
  ></ngc-table-pagination>
23
- `:$}
24
- `}handlePageChanged(e){this._currentPage=e.detail.page}handleItemsPerPageChanged(e){this.itemsPerPage=e.detail.itemsPerPage}getTableHeader(e){const t=e.map(this.getTableHeaderColumn);return this.selectable&&t.unshift(r`
26
+ `:k}
27
+ `}handlePageChanged(e){this._currentPage=e.detail.page}handleItemsPerPageChanged(e){this.itemsPerPage=e.detail.itemsPerPage}getTableHeader(e){const t=e.map(this.getTableHeaderColumn);return!this.skeleton&&this.selectable&&t.unshift(a`
25
28
  <th id="col-select" scope="col">
26
29
  <ngc-checkbox
27
- title-text="${b("Select All")}"
30
+ title-text="${f("Select All")}"
28
31
  hide-label
29
32
  ?selected="${this.selectedRows.length===this.data.length}"
30
33
  @change="${l=>this.handleSelectAll(l)}"
31
34
  ></ngc-checkbox>
32
- </th>`),r`
35
+ </th>`),a`
33
36
  <thead role="rowgroup">
34
37
  <tr role="row">
35
38
  ${t}
36
39
  </tr>
37
40
  </thead>
38
- `}handleSelectAll(e){const t=e.detail.selected;t?(this.data.forEach(l=>{l.isTableHeader||(l.selected=!0)}),this.selectedRows=this.data.filter(l=>!l.isTableHeader)):(this.data.forEach(l=>{l.selected=!1}),this.selectedRows=[]),this.dispatchEvent(new CustomEvent("selectall",{bubbles:!0,detail:{selectedRows:this.selectedRows,selected:t}})),this.requestUpdate()}getTableHeaderColumn(e){const t=`col-${e.field}`;return r`
39
- <th id="${t}" scope="col">${e.name}</th>`}getTableBody(e,t){const l=[];let s={rows:[]};return t.forEach(a=>{a.isTableHeader?((s.rows.length>0||s.header)&&l.push(s),s={header:a,rows:[]}):s.rows.push(a)}),(s.rows.length>0||s.header)&&l.push(s),l.length===0&&t.length>0&&l.push({rows:t}),r`
40
- ${l.map(a=>this.getCategoryBody(a,e))}
41
- `}getCategoryBody(e,t){let l="",s="",a="";e.header&&(l=e.header.headerText||e.header.categoryText||e.header.name||"Category",a=`category-${l.toLowerCase().replace(/\s+/g,"-")}`,s=a);const i=e.header?this.getTableHeaderRow(t,e.header):"",n=e.rows.map(d=>this.getTableBodyRow(d,t,a)),p=t.some(d=>d.includedInTotals===!0),o=e.rows.length>0&&p?this.getTotalRow(e.rows,t,a):"";return r`
42
- <tbody role="rowgroup" ${s?r`aria-labelledby="${s}"`:""}>
43
- ${i}
41
+ `}handleSelectAll(e){const t=e.detail.selected;t?(this.data.forEach(l=>{l.isTableHeader||(l.selected=!0)}),this.selectedRows=this.data.filter(l=>!l.isTableHeader)):(this.data.forEach(l=>{l.selected=!1}),this.selectedRows=[]),this.dispatchEvent(new CustomEvent("selectall",{bubbles:!0,detail:{selectedRows:this.selectedRows,selected:t}})),this.requestUpdate()}getTableHeaderColumn(e){const t=e.field.startsWith("skeleton-loader"),l=a`
42
+ <ngc-skeleton-loader
43
+ full-width
44
+ height="24"
45
+ rounded
46
+ ></ngc-skeleton-loader>
47
+ `,s=`col-${e.field}`;return a`
48
+ <th id="${s}" scope="col">
49
+ ${t?l:e.name}
50
+ </th>
51
+ `}getTableBody(e,t){const l=[];let s={rows:[]};return t.forEach(o=>{o.isTableHeader?((s.rows.length>0||s.header)&&l.push(s),s={header:o,rows:[]}):s.rows.push(o)}),(s.rows.length>0||s.header)&&l.push(s),l.length===0&&t.length>0&&l.push({rows:t}),a`
52
+ ${l.map(o=>this.getCategoryBody(o,e))}
53
+ `}getCategoryBody(e,t){let l="",s="",o="";e.header&&(l=e.header.headerText||e.header.categoryText||e.header.name||"Category",o=`category-${l.toLowerCase().replace(/\s+/g,"-")}`,s=o);const r=e.header?this.getTableHeaderRow(t,e.header):"",n=e.rows.map(c=>this.getTableBodyRow(c,t,o)),u=t.some(c=>c.includedInTotals===!0),i=e.rows.length>0&&u?this.getTotalRow(e.rows,t,o):"";return a`
54
+ <tbody role="rowgroup" ${s?a`aria-labelledby="${s}"`:""}>
55
+ ${r}
44
56
  ${n}
45
- ${o}
57
+ ${i}
46
58
  </tbody>
47
- `}getTotalRow(e,t,l){const s={};t.forEach(o=>{s[o.field]=0,o.includedInTotals&&e.forEach(d=>{const g=this.parseNumericValue(d[o.field]);g!==null&&(s[o.field]+=g)})});const a=l?`${l}-total`:"total-row",i=r`
59
+ `}getTotalRow(e,t,l){const s={};t.forEach(i=>{s[i.field]=0,i.includedInTotals&&e.forEach(c=>{const g=this.parseNumericValue(c[i.field]);g!==null&&(s[i.field]+=g)})});const o=l?`${l}-total`:"total-row",r=a`
48
60
  <th
49
- id="${a}"
61
+ id="${o}"
50
62
  scope="row"
51
63
  class="gator-table-total-label"
52
64
  >
53
65
  Total
54
66
  </th>
55
- `,n=t.map(o=>{const d=`col-${o.field}`,g=[a,l,d].filter(Boolean).join(" ");return o.includedInTotals?r`
67
+ `,n=t.map(i=>{const c=`col-${i.field}`,g=[o,l,c].filter(Boolean).join(" ");return i.includedInTotals?a`
56
68
  <td
57
69
  role="gridcell"
58
70
  headers="${g}"
59
71
  class="gator-table-total-cell"
60
72
  >
61
- ${this.formatTotal(s[o.field],o)}
73
+ ${this.formatTotal(s[i.field],i)}
62
74
  </td>
63
- `:r`
75
+ `:a`
64
76
  <td
65
77
  role="gridcell"
66
78
  class="gator-table-total-cell"
67
79
  >
68
80
  &nbsp;
69
81
  </td>
70
- `}),p=this.selectable?[i,...n]:[i,...n.slice(1)];return r`
82
+ `}),u=this.selectable?[r,...n]:[r,...n.slice(1)];return a`
71
83
  <tr role="row" class="gator-table-total-row">
72
- ${p}
84
+ ${u}
73
85
  </tr>
74
- `}parseNumericValue(e){if(typeof e=="number")return e;if(typeof e=="string"){const t=e.replace(/[^0-9.-]/g,""),l=parseFloat(t);if(!isNaN(l))return l}return null}formatTotal(e,t){const l=typeof t.decimalPlaces=="number"?t.decimalPlaces:2,s=e.toFixed(l);return typeof t.cellRenderer=="function"?t.cellRenderer({[t.field]:s}):s}getTableBodyRow(e,t,l){const s=t.map(a=>this.getTableBodyCell(e,a,l));if(this.selectable){const a=l?`col-select ${l}`:"col-select";s.unshift(r`
75
- <td role="gridcell" class="gator-table-checkbox-column" headers="${a}">
86
+ `}parseNumericValue(e){if(typeof e=="number")return e;if(typeof e=="string"){const t=e.replace(/[^0-9.-]/g,""),l=parseFloat(t);if(!isNaN(l))return l}return null}formatTotal(e,t){const l=typeof t.decimalPlaces=="number"?t.decimalPlaces:2,s=e.toFixed(l);return typeof t.cellRenderer=="function"?t.cellRenderer({[t.field]:s}):s}getTableBodyRow(e,t,l){const s=t.map(o=>this.getTableBodyCell(e,o,l));if(!this.skeleton&&this.selectable){const o=l?`col-select ${l}`:"col-select";s.unshift(a`
87
+ <td role="gridcell" class="gator-table-checkbox-column" headers="${o}">
76
88
  <ngc-checkbox
77
89
  label="test"
78
90
  ?selected="${e.selected}"
79
- @change="${i=>this.handleTableBodyRowSelected(i,e)}"
91
+ @change="${r=>this.handleTableBodyRowSelected(r,e)}"
80
92
  id="checkbox-${e.id||Math.random().toString(36).substring(2,11)}"
81
93
  ></ngc-checkbox>
82
- </td>`)}return r`
94
+ </td>`)}return a`
83
95
  <tr role="row" class="${this.selectable&&e.selected?"gator-table-row-selected":""}">
84
96
  ${s}
85
97
  </tr>
86
- `}getTableHeaderRow(e,t){const l=this.selectable?e.length+1:e.length,s=t.headerText||t.categoryText||t.name||"Category";return r`
98
+ `}getTableHeaderRow(e,t){const l=this.selectable?e.length+1:e.length,s=t.headerText||t.categoryText||t.name||"Category";return a`
87
99
  <tr role="row" class="gator-table-category-header">
88
100
  <th role="rowheader" colspan="${l}" scope="rowgroup" class="gator-table-header-cell"
89
101
  id="${`category-${s.toLowerCase().replace(/\s+/g,"-")}`}">
90
102
  ${s}
91
103
  </th>
92
104
  </tr>
93
- `}handleTableBodyRowSelected(e,t){e.detail.selected?(t.selected=!0,this.selectedRows.push(t),this.addSkipLinkToBulkActions(e.target)):(t.selected=!1,this.selectedRows=this.selectedRows.filter(l=>l!==t),this.removeSkipLinkToBulkActions(e.target)),this.dispatchEvent(new CustomEvent("rowselected",{bubbles:!0,detail:{data:t,selectedRows:this.selectedRows}})),this.requestUpdate()}addSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")||e.parentNode?.insertBefore(this.getSkipToBulkActionsMarkup(e),e)}getSkipToBulkActionsMarkup(e){const t=document.createElement("ngc-skip-link");return t.target=this.shadowRoot?.querySelector("ngc-table-bulk-controls")||"",t.text=b("Jump to table actions"),t.referenceElement=e,t.placement="top-start",t.xOffset=4,t.yOffset=-12,t.onblur=this.removeSkipLinkToBulkActions.bind(this,e),t}removeSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")?.remove()}get displayedRowData(){if(!this.includePagination)return this.data;const e=(this._currentPage-1)*this.itemsPerPage,t=e+this.itemsPerPage;return this.data.slice(e,t)}getTableBodyCell(e,t,l){const s=`col-${t.field}`,a=l?`${s} ${l}`:s;return r`
94
- <td role="gridcell" headers="${a}">
95
- ${T(this.getValueForCell(e,t))}
105
+ `}handleTableBodyRowSelected(e,t){e.detail.selected?(t.selected=!0,this.selectedRows.push(t),this.addSkipLinkToBulkActions(e.target)):(t.selected=!1,this.selectedRows=this.selectedRows.filter(l=>l!==t),this.removeSkipLinkToBulkActions(e.target)),this.dispatchEvent(new CustomEvent("rowselected",{bubbles:!0,detail:{data:t,selectedRows:this.selectedRows}})),this.requestUpdate()}addSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")||e.parentNode?.insertBefore(this.getSkipToBulkActionsMarkup(e),e)}getSkipToBulkActionsMarkup(e){const t=document.createElement("ngc-skip-link");return t.target=this.shadowRoot?.querySelector("ngc-table-bulk-controls")||"",t.text=f("Jump to table actions"),t.referenceElement=e,t.placement="top-start",t.xOffset=4,t.yOffset=-12,t.onblur=this.removeSkipLinkToBulkActions.bind(this,e),t}removeSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")?.remove()}get displayedRowData(){if(this.skeleton){let s=[];for(let o=0;o<5;o++)s=s.concat({skeleton:!0});return s}if(!this.includePagination)return this.data;const e=(this._currentPage-1)*this.itemsPerPage,t=e+this.itemsPerPage;return this.data.slice(e,t)}getTableBodyCell(e,t,l){const s=!!e.skeleton,o=a`
106
+ <ngc-skeleton-loader
107
+ full-width
108
+ height="24"
109
+ rounded
110
+ ></ngc-skeleton-loader>
111
+ `,r=`col-${t.field}`,n=l?`${r} ${l}`:r;return a`
112
+ <td role="gridcell" headers="${n}">
113
+ ${s?o:w(this.getValueForCell(e,t))}
96
114
  </td>
97
- `}getValueForCell(e,t){return typeof t.cellRenderer=="function"?t.cellRenderer(e):e[t.field]}};c.styles=[u(P),u(R),u(y)];h([m({type:Boolean})],c.prototype,"elevated",2);h([m({type:Boolean,attribute:"include-pagination"})],c.prototype,"includePagination",2);h([f()],c.prototype,"selectedRows",2);h([f()],c.prototype,"_currentPage",2);c=h([w("ngc-table")],c);export{c as NgcTable};
115
+ `}getValueForCell(e,t){return typeof t.cellRenderer=="function"?t.cellRenderer(e):e[t.field]}};d.styles=[p(S),p(y),p(R)];h([b({type:Boolean})],d.prototype,"elevated",2);h([b({type:Boolean,attribute:"include-pagination"})],d.prototype,"includePagination",2);h([b({type:Boolean})],d.prototype,"skeleton",2);h([m()],d.prototype,"selectedRows",2);h([m()],d.prototype,"_currentPage",2);d=h([$("ngc-table")],d);export{d as NgcTable};
@@ -26,6 +26,7 @@ export declare class NgcInputSearch extends NgcInputBase {
26
26
  */
27
27
  options: NgcDropdownType[] | undefined | null;
28
28
  render(): import('lit').TemplateResult<1>;
29
+ private get skeletonLoaderMarkup();
29
30
  private handleInputEvent;
30
31
  private handleChangeEvent;
31
32
  private clearInput;
@@ -4,10 +4,12 @@ export declare class NgcTable extends NjcTable {
4
4
  static styles: import('lit').CSSResult[];
5
5
  elevated: boolean;
6
6
  includePagination: boolean;
7
+ skeleton: boolean;
7
8
  selectedRows: RowData[];
8
9
  _currentPage: number;
9
10
  protected updated(_changedProperties: PropertyValues): void;
10
11
  render(): import('lit').TemplateResult<1> | null;
12
+ private get _skeletonLoaderColumns();
11
13
  get tableElevatedClass(): "" | "gator-table-elevated";
12
14
  get showBulkControls(): boolean;
13
15
  renderWrapper(header: unknown, body: unknown): import('lit').TemplateResult<1>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/web-components",
3
3
  "author": "nCino",
4
- "version": "9.1.0-preview.2",
4
+ "version": "9.1.0-preview.3",
5
5
  "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
6
6
  "publishConfig": {
7
7
  "registry": "https://registry.npmjs.org/"
@@ -107,7 +107,7 @@
107
107
  "vite-plugin-static-copy": "^3.1.4",
108
108
  "vitest": "^4.0.15",
109
109
  "yaml-eslint-parser": "^1.3.2",
110
- "@ncino/styles": "9.1.0-preview.2"
110
+ "@ncino/styles": "9.1.0-preview.3"
111
111
  },
112
112
  "peerDependencies": {
113
113
  "@ncino/styles": ">=8.0.0-preview.0"
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@ncino/web-components",
4
- "version": "9.1.0-preview.1",
4
+ "version": "9.1.0-preview.2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -7503,6 +7503,10 @@
7503
7503
  "name": "include-pagination",
7504
7504
  "value": { "type": "boolean", "default": "false" }
7505
7505
  },
7506
+ {
7507
+ "name": "skeleton",
7508
+ "value": { "type": "boolean", "default": "false" }
7509
+ },
7506
7510
  {
7507
7511
  "name": "columns",
7508
7512
  "value": { "type": "ColumnDefinition[]", "default": "[]" }
@@ -7544,6 +7548,7 @@
7544
7548
  "properties": [
7545
7549
  { "name": "elevated", "type": "boolean" },
7546
7550
  { "name": "includePagination", "type": "boolean" },
7551
+ { "name": "skeleton", "type": "boolean" },
7547
7552
  { "name": "selectedRows", "type": "RowData[]" },
7548
7553
  { "name": "_currentPage", "type": "number" },
7549
7554
  { "name": "tableElevatedClass" },