@ncino/web-components 13.9.2 → 13.10.0
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,15 +1,15 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as g,html as o}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as v}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as $}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as F}from"../../../utils/decorators/custom-element-decorator.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 P}from"../table.js";import{formatTableTextValue as T}from"../table-format-utils.js";import x from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import _ from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import R from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"./table-bulk-controls/table-bulk-controls.gator.js";import"./table-cells/table-cell-chip.gator.js";import"./table-cells/table-cell-avatar.gator.js";import"./table-cells/table-cell-checkbox.gator.js";import"./table-cells/table-cell-text-link.gator.js";import"./table-cells/table-cell-button.gator.js";import"./table-cells/table-cell-icon-button.gator.js";import"./table-cells/table-cell-input-dropdown.gator.js";import"./table-cells/table-cell-input-text.gator.js";import"./table-cells/table-cell-text.gator.js";import"../../checkbox/checkbox.gator.js";import"../../icon/gator/icon.gator.js";import"../../icon/gator/templates/index.js";import"../../icon-button/gator/icon-button.gator.js";import"../../popover/gator/popover.gator.js";import"../../checkbox-group/checkbox-group.gator.js";import"../../radio-group/radio-group.gator.js";import"../../button/gator/button.gator.js";import"../../chip/gator/chip.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../skip-link/gator/base/skip-link.gator.js";import{unsafeCSS as k}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var A=Object.defineProperty,E=Object.getOwnPropertyDescriptor,p=(e,t,l,i)=>{for(var s=i>1?void 0:i?E(t,l):t,r=e.length-1,a;r>=0;r--)(a=e[r])&&(s=(i?a(t,l,s):a(s))||s);return i&&s&&A(t,l,s),s};let d=class extends P{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!1,this.skeleton=!1,this.sortField=null,this.sortDirection=null,this.filterValues={},this.selectedRows=[],this._currentPage=1,this._sortField=null,this._sortDirection=null,this._hoveredHeaderColumnField=null,this._pendingFilterValues={},this._filterSearchQuery={},this.renderHeaderFilterPopover=(e,t,l=!1)=>{const i=e.filterOptions??[],s=(this._filterSearchQuery[e.field]??"").toLowerCase(),r=s?i.filter(u=>u.label.toLowerCase().includes(s)):i,a=this.hasActiveFilter(e),h=e.filterMultiselect===!0,n=this.getEffectivePending(e),c=r.map(u=>({title:u.label,value:String(u.value)})),b=h?n.join(";"):"",m=h?"":n||"";return o`
|
|
2
2
|
<span class="gator-table-header-filter-trigger-wrap ${t?"gator-table-header-filter-trigger-visible":""}">
|
|
3
3
|
<ngc-icon-button
|
|
4
4
|
id="filter-trigger-${e.field}"
|
|
5
5
|
icon-name="filters-2"
|
|
6
6
|
size="xsmall"
|
|
7
|
-
icon-aria-label="${
|
|
7
|
+
icon-aria-label="${f("Filter by")} ${e.name}"
|
|
8
8
|
class="${a?"gator-table-header-filter-icon-active":""}"
|
|
9
9
|
></ngc-icon-button>
|
|
10
10
|
<ngc-popover
|
|
11
11
|
reference-id="filter-trigger-${e.field}"
|
|
12
|
-
.title=${
|
|
12
|
+
.title=${f("Filter")}
|
|
13
13
|
size="small"
|
|
14
14
|
placement="${l?"bottom-start":"bottom-end"}"
|
|
15
15
|
.hideTippet="${!0}"
|
|
@@ -18,35 +18,35 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
18
18
|
<div slot="content" class="gator-table-filter-popover-content">
|
|
19
19
|
${i.length>10?o`
|
|
20
20
|
<ngc-input-search
|
|
21
|
-
placeholder="${
|
|
21
|
+
placeholder="${f("Search")}"
|
|
22
22
|
.value="${this._filterSearchQuery[e.field]??""}"
|
|
23
23
|
@input="${u=>this.handleFilterSearchInput(u,e)}"
|
|
24
24
|
class="gator-table-filter-popover-search"
|
|
25
25
|
></ngc-input-search>
|
|
26
|
-
`:
|
|
26
|
+
`:g}
|
|
27
27
|
${h?o`
|
|
28
28
|
<ngc-checkbox-group
|
|
29
29
|
.options="${c}"
|
|
30
|
-
.value="${
|
|
31
|
-
aria-label="${
|
|
30
|
+
.value="${b}"
|
|
31
|
+
aria-label="${f("Filter by")} ${e.name}"
|
|
32
32
|
@change="${u=>this.handleFilterCheckboxGroupChange(u,e)}"
|
|
33
33
|
></ngc-checkbox-group>
|
|
34
34
|
`:o`
|
|
35
35
|
<ngc-radio-group
|
|
36
36
|
.options="${c}"
|
|
37
37
|
.value="${m}"
|
|
38
|
-
aria-label="${
|
|
38
|
+
aria-label="${f("Filter by")} ${e.name}"
|
|
39
39
|
@change="${u=>this.handleFilterRadioGroupChange(u,e)}"
|
|
40
40
|
></ngc-radio-group>
|
|
41
41
|
`}
|
|
42
42
|
</div>
|
|
43
43
|
<div slot="footer" class="gator-table-filter-popover-footer">
|
|
44
|
-
<ngc-button variant="primary" @click="${()=>this.handleFilterPopoverApply(e)}">${
|
|
45
|
-
<ngc-button variant="base" @click="${()=>this.handleFilterPopoverClear(e)}">${
|
|
44
|
+
<ngc-button variant="primary" @click="${()=>this.handleFilterPopoverApply(e)}">${f("Apply")}</ngc-button>
|
|
45
|
+
<ngc-button variant="base" @click="${()=>this.handleFilterPopoverClear(e)}">${f("Clear")}</ngc-button>
|
|
46
46
|
</div>
|
|
47
47
|
</ngc-popover>
|
|
48
48
|
</span>
|
|
49
|
-
`},this.handleClearAllFilters=()=>{if(!this.columns?.length||!this.filterValues)return;const e=t=>t.filterOptions??[];for(const t of this.columns){if(!t.filterable||e(t).length===0)continue;const l=this.filterValues[t.field];if(l==null)continue;if(t.filterMultiselect===!0?l.length>0:l!==""){const s=t.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:t.field,value:s}}))}}this.requestUpdate()}}updated(e){super.updated(e),e.has("data")&&queueMicrotask(()=>{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){const l=this.getActiveFilterChips();return o`
|
|
49
|
+
`},this.handleClearAllFilters=()=>{if(!this.columns?.length||!this.filterValues)return;const e=t=>t.filterOptions??[];for(const t of this.columns){if(!t.filterable||e(t).length===0)continue;const l=this.filterValues[t.field];if(l==null)continue;if(t.filterMultiselect===!0?l.length>0:l!==""){const s=t.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:t.field,value:s}}))}}this.requestUpdate()}}updated(e){super.updated(e),e.has("data")&&queueMicrotask(()=>{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))}getColumnCellStyle(e){const t=e.width??(e.cellType==="icon-button"?"5%":void 0);return t?`width: ${t}; box-sizing: border-box`:""}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){const l=this.getActiveFilterChips();return o`
|
|
50
50
|
<ngc-table-bulk-controls
|
|
51
51
|
?visible="${this.showBulkControls}"
|
|
52
52
|
.selectedRows="${this.selectedRows.length}"
|
|
@@ -57,7 +57,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
57
57
|
<slot name="bulk-controls"></slot>
|
|
58
58
|
</ngc-table-bulk-controls>
|
|
59
59
|
${!this.skeleton&&l.length>0?o`
|
|
60
|
-
<div class="gator-table-filter-chips" role="region" aria-label="${
|
|
60
|
+
<div class="gator-table-filter-chips" role="region" aria-label="${f("Active filters")}">
|
|
61
61
|
${l.map(({column:i,value:s,label:r})=>o`
|
|
62
62
|
<ngc-chip
|
|
63
63
|
dismissible
|
|
@@ -70,10 +70,10 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
70
70
|
type="button"
|
|
71
71
|
class="gator-table-filter-chips-clear-all"
|
|
72
72
|
@click="${this.handleClearAllFilters}"
|
|
73
|
-
>${
|
|
74
|
-
`:
|
|
73
|
+
>${f("Clear all")}</button>
|
|
74
|
+
`:g}
|
|
75
75
|
</div>
|
|
76
|
-
`:
|
|
76
|
+
`:g}
|
|
77
77
|
<table
|
|
78
78
|
class="gator-table ${this.tableElevatedClass}"
|
|
79
79
|
role="grid"
|
|
@@ -90,11 +90,11 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
90
90
|
@pagechanged="${this.handlePageChanged}"
|
|
91
91
|
@itemsperpagechanged="${this.handleItemsPerPageChanged}"
|
|
92
92
|
></ngc-table-pagination>
|
|
93
|
-
`:
|
|
93
|
+
`:g}
|
|
94
94
|
`}handlePageChanged(e){this._currentPage=e.detail.page}handleItemsPerPageChanged(e){this.itemsPerPage=e.detail.itemsPerPage}getTableHeader(e){const t=e.map((l,i)=>this.getTableHeaderColumn(l,i===0));return!this.skeleton&&this.selectable&&t.unshift(o`
|
|
95
95
|
<th id="col-select" scope="col">
|
|
96
96
|
<ngc-checkbox
|
|
97
|
-
title-text="${
|
|
97
|
+
title-text="${f("Select All")}"
|
|
98
98
|
hide-label
|
|
99
99
|
?selected="${this.selectedRows.length===this.data.filter(l=>!l.isTableHeader&&!l.disabled).length}"
|
|
100
100
|
@change="${l=>this.handleSelectAll(l)}"
|
|
@@ -111,12 +111,12 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
111
111
|
height="24"
|
|
112
112
|
rounded
|
|
113
113
|
></ngc-skeleton-loader>
|
|
114
|
-
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,h=r?this.getSortAriaSort(e):void 0,n=r&&this.effectiveSortField===e.field,c=a&&this.hasActiveFilter(e),
|
|
114
|
+
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,h=r?this.getSortAriaSort(e):void 0,n=r&&this.effectiveSortField===e.field,c=a&&this.hasActiveFilter(e),b=r||a,m=r?o`
|
|
115
115
|
<div
|
|
116
116
|
class="gator-table-header-sort-trigger"
|
|
117
117
|
role="button"
|
|
118
118
|
tabindex="0"
|
|
119
|
-
aria-label="${
|
|
119
|
+
aria-label="${f("Sort by")} ${e.name}"
|
|
120
120
|
@click="${()=>this.handleSortColumn(e)}"
|
|
121
121
|
@keydown="${C=>C.key==="Enter"||C.key===" "?(C.preventDefault(),this.handleSortColumn(e)):null}"
|
|
122
122
|
>
|
|
@@ -125,21 +125,22 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
125
125
|
<ngc-icon name="${this.getSortIcon(e)}" class="gator-table-sort-icon" size="x-small"></ngc-icon>
|
|
126
126
|
</span>
|
|
127
127
|
</div>
|
|
128
|
-
`:o`<span class="gator-table-header-label">${e.name}</span>`,u=!!(a&&(this._hoveredHeaderColumnField===e.field||c||this.isFilterPopoverOpen(e))),
|
|
128
|
+
`:o`<span class="gator-table-header-label">${e.name}</span>`,u=!!(a&&(this._hoveredHeaderColumnField===e.field||c||this.isFilterPopoverOpen(e))),y=l?i:o`
|
|
129
129
|
<div class="gator-table-header-cell-inner">
|
|
130
130
|
${m}
|
|
131
|
-
${a?this.renderHeaderFilterPopover(e,u,t):
|
|
131
|
+
${a?this.renderHeaderFilterPopover(e,u,t):g}
|
|
132
132
|
</div>
|
|
133
|
-
`,
|
|
133
|
+
`,S=[n?"gator-table-header-cell-sort-active":"",c?"gator-table-header-cell-filter-active":"",b?"gator-table-header-cell-interactive":""].filter(Boolean).join(" "),w=this.getColumnCellStyle(e);return o`
|
|
134
134
|
<th
|
|
135
135
|
id="${s}"
|
|
136
136
|
scope="col"
|
|
137
|
-
aria-sort="${h??
|
|
138
|
-
class="${
|
|
139
|
-
|
|
140
|
-
@
|
|
137
|
+
aria-sort="${h??g}"
|
|
138
|
+
class="${S}"
|
|
139
|
+
style="${w||g}"
|
|
140
|
+
@mouseenter="${a||r?()=>this._hoveredHeaderColumnField=e.field:g}"
|
|
141
|
+
@mouseleave="${a||r?()=>this._hoveredHeaderColumnField=null:g}"
|
|
141
142
|
>
|
|
142
|
-
${
|
|
143
|
+
${y}
|
|
143
144
|
</th>
|
|
144
145
|
`}getEffectivePending(e){const t=this._pendingFilterValues[e.field];return t!==void 0?t:this.filterValues[e.field]??(e.filterMultiselect===!0?[]:"")}getFilterPopoverForColumn(e){return this.shadowRoot?.querySelector(`ngc-popover[reference-id="filter-trigger-${e.field}"]`)??null}isFilterPopoverOpen(e){return this.getFilterPopoverForColumn(e)?.isOpen===!0}handleFilterPopoverClosed(e){this._filterSearchQuery={...this._filterSearchQuery,[e.field]:""}}handleFilterSearchInput(e,t){const l=e.detail?.value??"";this._filterSearchQuery={...this._filterSearchQuery,[t.field]:l},this.requestUpdate()}handleFilterCheckboxGroupChange(e,t){const l=e.detail??"",i=l?l.split(";").filter(Boolean):[];this._pendingFilterValues={...this._pendingFilterValues,[t.field]:i},this.requestUpdate()}handleFilterRadioGroupChange(e,t){const l=e.detail??"";this._pendingFilterValues={...this._pendingFilterValues,[t.field]:l},this.requestUpdate()}handleFilterPopoverApply(e){const t=this.getEffectivePending(e);this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:t}}));const l={...this._pendingFilterValues};delete l[e.field],this._pendingFilterValues=l,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}handleFilterPopoverClear(e){const l=e.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:l}}));const i={...this._pendingFilterValues};delete i[e.field],this._pendingFilterValues=i,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}hasActiveFilter(e){const t=this.filterValues[e.field];return t==null?!1:e.filterMultiselect===!0?t.length>0:t!==""}getActiveFilterChips(){if(!this.columns?.length||!this.filterValues)return[];const e=[],t=l=>l.filterOptions??[];for(const l of this.columns){if(!l.filterable||t(l).length===0)continue;const i=this.filterValues[l.field];if(i==null)continue;if(l.filterMultiselect===!0){const r=i;for(const a of r){const h=t(l).find(n=>String(n.value)===a);e.push({column:l,value:a,label:h?.label??a})}}else{const r=i;if(r==="")continue;const a=t(l).find(h=>String(h.value)===r);e.push({column:l,value:r,label:a?.label??r})}}return e}handleFilterChipDismiss(e,t){const l=e.filterMultiselect===!0,i=this.filterValues[e.field],s=l?(i||[]).filter(r=>r!==t):"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:s}})),this.requestUpdate()}getTableBody(e,t){const l=[];let i={rows:[]};return t.forEach(s=>{s.isTableHeader?((i.rows.length>0||i.header)&&l.push(i),i={header:s,rows:[]}):i.rows.push(s)}),(i.rows.length>0||i.header)&&l.push(i),l.length===0&&t.length>0&&l.push({rows:t}),o`
|
|
145
146
|
${l.map(s=>this.getCategoryBody(s,e))}
|
|
@@ -149,7 +150,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
149
150
|
${a}
|
|
150
151
|
${n}
|
|
151
152
|
</tbody>
|
|
152
|
-
`}getTotalRow(e,t,l){const i={};t.forEach(n=>{i[n.field]=0,n.includedInTotals&&e.forEach(c=>{const
|
|
153
|
+
`}getTotalRow(e,t,l){const i={};t.forEach(n=>{i[n.field]=0,n.includedInTotals&&e.forEach(c=>{const b=this.parseNumericValue(c[n.field]);b!==null&&(i[n.field]+=b)})});const s=l?`${l}-total`:"total-row",r=o`
|
|
153
154
|
<th
|
|
154
155
|
id="${s}"
|
|
155
156
|
scope="row"
|
|
@@ -157,11 +158,12 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
157
158
|
>
|
|
158
159
|
Total
|
|
159
160
|
</th>
|
|
160
|
-
`,a=t.map(n=>{const c=`col-${n.field}`,
|
|
161
|
+
`,a=t.map(n=>{const c=`col-${n.field}`,b=[s,l,c].filter(Boolean).join(" ");return n.includedInTotals?o`
|
|
161
162
|
<td
|
|
162
163
|
role="gridcell"
|
|
163
|
-
headers="${
|
|
164
|
+
headers="${b}"
|
|
164
165
|
class="gator-table-total-cell ${this.getCellAlignClass(n)}"
|
|
166
|
+
style="${this.getColumnCellStyle(n)||g}"
|
|
165
167
|
>
|
|
166
168
|
${this.formatTotal(i[n.field],n)}
|
|
167
169
|
</td>
|
|
@@ -169,6 +171,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
169
171
|
<td
|
|
170
172
|
role="gridcell"
|
|
171
173
|
class="gator-table-total-cell ${this.getCellAlignClass(n)}"
|
|
174
|
+
style="${this.getColumnCellStyle(n)||g}"
|
|
172
175
|
>
|
|
173
176
|
|
|
174
177
|
</td>
|
|
@@ -176,7 +179,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
176
179
|
<tr role="row" class="gator-table-total-row">
|
|
177
180
|
${h}
|
|
178
181
|
</tr>
|
|
179
|
-
`}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){if(typeof t.cellRenderer=="function"){const i=t.cellConfig?.decimalPlaces??t.decimalPlaces??2;return t.cellRenderer({[t.field]:e.toFixed(i)})}return
|
|
182
|
+
`}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){if(typeof t.cellRenderer=="function"){const i=t.cellConfig?.decimalPlaces??t.decimalPlaces??2;return t.cellRenderer({[t.field]:e.toFixed(i)})}return T(e,t.cellConfig,t.decimalPlaces)}getTableBodyRow(e,t,l,i){const s=t.map(r=>this.getTableBodyCell(e,r,l,i??0));if(!this.skeleton&&this.selectable){const r=l?`col-select ${l}`:"col-select";s.unshift(o`
|
|
180
183
|
<td role="gridcell" class="gator-table-checkbox-column" headers="${r}">
|
|
181
184
|
<ngc-checkbox
|
|
182
185
|
label="test"
|
|
@@ -196,14 +199,19 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
196
199
|
${i}
|
|
197
200
|
</th>
|
|
198
201
|
</tr>
|
|
199
|
-
`}handleTableBodyRowSelected(e,t){t.disabled||(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,composed:!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=
|
|
202
|
+
`}handleTableBodyRowSelected(e,t){t.disabled||(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,composed:!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 i=[];for(let s=0;s<5;s++)i=i.concat({skeleton:!0});return i}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,i=0){const s=!!e.skeleton,r=o`
|
|
200
203
|
<ngc-skeleton-loader
|
|
201
204
|
full-width
|
|
202
205
|
height="24"
|
|
203
206
|
rounded
|
|
204
207
|
></ngc-skeleton-loader>
|
|
205
208
|
`,a=`col-${t.field}`,h=l?`${a} ${l}`:a,n=s?this.getCellAlignClass(t):"",c=s?r:this.renderCellByType(e,t,i,l??"");return o`
|
|
206
|
-
<td
|
|
209
|
+
<td
|
|
210
|
+
role="gridcell"
|
|
211
|
+
headers="${h}"
|
|
212
|
+
class="${n}"
|
|
213
|
+
style="${this.getColumnCellStyle(t)||g}"
|
|
214
|
+
>
|
|
207
215
|
${c}
|
|
208
216
|
</td>
|
|
209
|
-
`}getCellAlignClass(e){return`gator-table-cell-${e.cellConfig?.align??"left"}`}renderCellByType(e,t,l,i){const s=a=>this.handleCellChange(a),r=a=>this.handleCellClick(a);switch(t.cellType){case"chip":return o`<ngc-table-cell-chip .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-chip>`;case"avatar":return o`<ngc-table-cell-avatar .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-avatar>`;case"checkbox":return o`<ngc-table-cell-checkbox .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-checkbox>`;case"text-link":return o`<ngc-table-cell-text-link .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text-link>`;case"button":return o`<ngc-table-cell-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-button>`;case"icon-button":return o`<ngc-table-cell-icon-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-icon-button>`;case"input-dropdown":return o`<ngc-table-cell-input-dropdown .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-dropdown>`;case"input-text":return o`<ngc-table-cell-input-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-text>`;default:return o`<ngc-table-cell-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text>`}}handleCellChange(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellchange",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,value:i}}))}handleCellClick(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellclick",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,...i!==void 0&&{value:i}}}))}};d.styles=[k(
|
|
217
|
+
`}getCellAlignClass(e){return`gator-table-cell-${e.cellConfig?.align??"left"}`}renderCellByType(e,t,l,i){const s=a=>this.handleCellChange(a),r=a=>this.handleCellClick(a);switch(t.cellType){case"chip":return o`<ngc-table-cell-chip .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-chip>`;case"avatar":return o`<ngc-table-cell-avatar .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-avatar>`;case"checkbox":return o`<ngc-table-cell-checkbox .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-checkbox>`;case"text-link":return o`<ngc-table-cell-text-link .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text-link>`;case"button":return o`<ngc-table-cell-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-button>`;case"icon-button":return o`<ngc-table-cell-icon-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-icon-button>`;case"input-dropdown":return o`<ngc-table-cell-input-dropdown .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-dropdown>`;case"input-text":return o`<ngc-table-cell-input-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-text>`;default:return o`<ngc-table-cell-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text>`}}handleCellChange(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellchange",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,value:i}}))}handleCellClick(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellclick",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,...i!==void 0&&{value:i}}}))}};d.styles=[k(R),k(_),k(x)];p([v({type:Boolean})],d.prototype,"elevated",2);p([v({type:Boolean,attribute:"include-pagination"})],d.prototype,"includePagination",2);p([v({type:Boolean})],d.prototype,"skeleton",2);p([v({type:String,attribute:"sort-field"})],d.prototype,"sortField",2);p([v({type:String,attribute:"sort-direction"})],d.prototype,"sortDirection",2);p([v({type:Object,attribute:!1})],d.prototype,"filterValues",2);p([$()],d.prototype,"selectedRows",2);p([$()],d.prototype,"_currentPage",2);p([$()],d.prototype,"_sortField",2);p([$()],d.prototype,"_sortDirection",2);p([$()],d.prototype,"_hoveredHeaderColumnField",2);p([$()],d.prototype,"_pendingFilterValues",2);p([$()],d.prototype,"_filterSearchQuery",2);d=p([F("ngc-table")],d);export{d as NgcTable};
|
|
@@ -18,6 +18,7 @@ export declare class NgcTable extends NjcTable {
|
|
|
18
18
|
_filterSearchQuery: Record<string, string>;
|
|
19
19
|
protected updated(_changedProperties: PropertyValues): void;
|
|
20
20
|
render(): TemplateResult<1> | null;
|
|
21
|
+
private getColumnCellStyle;
|
|
21
22
|
private get _skeletonLoaderColumns();
|
|
22
23
|
get tableElevatedClass(): "" | "gator-table-elevated";
|
|
23
24
|
get showBulkControls(): boolean;
|
|
@@ -14,6 +14,7 @@ interface BaseColumnDefinition {
|
|
|
14
14
|
filterable?: boolean;
|
|
15
15
|
filterOptions?: TableColumnFilterOption[];
|
|
16
16
|
filterMultiselect?: boolean;
|
|
17
|
+
width?: `${number}px` | `${number}%`;
|
|
17
18
|
}
|
|
18
19
|
export interface TextColumnDefinition extends BaseColumnDefinition {
|
|
19
20
|
cellType?: 'text';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "13.
|
|
4
|
+
"version": "13.10.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "13.
|
|
103
|
+
"@ncino/styles": "13.10.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "13.
|
|
106
|
+
"@ncino/styles": "13.10.0"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED