@ncino/web-components 13.9.1 → 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 b,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 g}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 S}from"../table.js";import{formatTableTextValue as P}from"../table-format-utils.js";import T from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import x from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import _ 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 R=Object.defineProperty,A=Object.getOwnPropertyDescriptor,p=(e,t,l,i)=>{for(var s=i>1?void 0:i?A(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&&R(t,l,s),s};let d=class extends S{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)})),f=h?n.join(";"):"",m=h?"":n||"";return o`
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="${g("Filter by")} ${e.name}"
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=${g("Filter")}
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="${g("Search")}"
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
- `:b}
26
+ `:g}
27
27
  ${h?o`
28
28
  <ngc-checkbox-group
29
29
  .options="${c}"
30
- .value="${f}"
31
- aria-label="${g("Filter by")} ${e.name}"
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="${g("Filter by")} ${e.name}"
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)}">${g("Apply")}</ngc-button>
45
- <ngc-button variant="base" @click="${()=>this.handleFilterPopoverClear(e)}">${g("Clear")}</ngc-button>
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="${g("Active filters")}">
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
- >${g("Clear all")}</button>
74
- `:b}
73
+ >${f("Clear all")}</button>
74
+ `:g}
75
75
  </div>
76
- `:b}
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
- `:b}
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="${g("Select All")}"
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),f=r||a,m=r?o`
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="${g("Sort by")} ${e.name}"
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))),w=l?i:o`
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):b}
131
+ ${a?this.renderHeaderFilterPopover(e,u,t):g}
132
132
  </div>
133
- `,y=[n?"gator-table-header-cell-sort-active":"",c?"gator-table-header-cell-filter-active":"",f?"gator-table-header-cell-interactive":""].filter(Boolean).join(" ");return o`
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??b}"
138
- class="${y}"
139
- @mouseenter="${a||r?()=>this._hoveredHeaderColumnField=e.field:b}"
140
- @mouseleave="${a||r?()=>this._hoveredHeaderColumnField=null:b}"
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
- ${w}
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 f=this.parseNumericValue(c[n.field]);f!==null&&(i[n.field]+=f)})});const s=l?`${l}-total`:"total-row",r=o`
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}`,f=[s,l,c].filter(Boolean).join(" ");return n.includedInTotals?o`
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="${f}"
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
  &nbsp;
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 P(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`
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=g("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`
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 role="gridcell" headers="${h}" class="${n}">
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(_),k(x),k(T)];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};
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};
@@ -1,7 +1,8 @@
1
- import{NjcTooltip as f}from"../tooltip.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as m}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as c}from"../../../utils/decorators/custom-element-decorator.js";import h from"../../../packages/web-components/src/components/tooltip/gator/tooltip.gator.scss.js";import g from"../../../packages/web-components/src/components/tooltip/tooltip.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import d from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as _,computePosition as v}from"../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{unsafeCSS as i}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var O=Object.getOwnPropertyDescriptor,y=(t,o,r,l)=>{for(var e=l>1?void 0:l?O(o,r):o,n=t.length-1,p;n>=0;n--)(p=t[n])&&(e=p(e)||e);return e};let s=class extends f{render(){return a`
2
- <div ${u(this._tooltipRef)} class="gator-tooltip ${this.nubbinPositionClass}" role="tooltip" id="${this.tooltipId}">
1
+ import{NjcTooltip as c}from"../tooltip.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as d}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as f}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as m}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as h}from"../../../utils/decorators/custom-element-decorator.js";import a from"../../../packages/web-components/src/components/tooltip/gator/tooltip.gator.scss.js";import u from"../../../packages/web-components/src/components/tooltip/tooltip.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import g from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as y,computePosition as P}from"../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{unsafeCSS as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var _=Object.getOwnPropertyDescriptor,v=(t,i,e,r)=>{for(var s=r>1?void 0:r?_(i,e):i,n=t.length-1,l;n>=0;n--)(l=t[n])&&(s=l(s)||s);return s};let o=class extends c{constructor(){super(...arguments),this._portaledPopup=null}render(){return d`
2
+ <div ${m(this._tooltipRef)} class="gator-tooltip ${this.nubbinPositionClass}" role="tooltip" id="${this.tooltipId}">
3
3
  <div class="gator-tooltip-body">
4
4
  <slot></slot>
5
5
  </div>
6
6
  </div>
7
- `}get xPositionOffset(){return this.placement.includes("left")?-12+this.xOffset:this.placement.includes("right")?12+this.xOffset:0}get yPositionOffset(){return this.placement.includes("top")?-12+this.yOffset:this.placement.includes("bottom")?12+this.yOffset:0}get nubbinPositionClass(){switch(this.placement){case"top":return"gator-tooltip-nubbin_bottom";case"right":return"gator-tooltip-nubbin_left";case"bottom":return"gator-tooltip-nubbin_top";case"left":return"gator-tooltip-nubbin_right"}return""}assignPosition(){const t=this.referenceElement;!this._tooltipRef||!this._tooltipRef.value||!t||(this._cleanup=_(t,this._tooltipRef.value,async()=>{if(!this._tooltipRef||!this._tooltipRef.value||!t)return;const{x:o,y:r}=await v(t,this._tooltipRef.value,{placement:this.placement});Object.assign(this._tooltipRef.value.style,{left:`${o+this.xPositionOffset}px`,top:`${r+this.yPositionOffset}px`})}))}};s.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0,mode:"open"};s.styles=[i(h),i(g),i(b),i(d)];s=y([c("ngc-tooltip")],s);export{s as NgcTooltip};
7
+ `}get xPositionOffset(){return this.placement.includes("left")?-12+this.xOffset:this.placement.includes("right")?12+this.xOffset:0}get yPositionOffset(){return this.placement.includes("top")?-12+this.yOffset:this.placement.includes("bottom")?12+this.yOffset:0}get nubbinPositionClass(){switch(this.placement){case"top":return"gator-tooltip-nubbin_bottom";case"right":return"gator-tooltip-nubbin_left";case"bottom":return"gator-tooltip-nubbin_top";case"left":return"gator-tooltip-nubbin_right"}return""}getActivePopup(){return this._portaledPopup??this._tooltipRef.value??null}preparePopupForShow(){const t=this._tooltipRef.value;if(!t)return;if(!o.portalStylesInjected){const e=document.createElement("style");e.setAttribute("data-ngc-tooltip-portal",""),e.textContent=`${a}
8
+ ${u}`,document.head.appendChild(e),o.portalStylesInjected=!0}t.parentElement!==document.body&&document.body.appendChild(t),this._portaledPopup=t,t.style.width="max-content",t.querySelector(".gator-tooltip-body")?.replaceChildren(...Array.from(this.childNodes).map(e=>e.cloneNode(!0)))}cleanupPopupAfterHide(){this._cleanup&&(this._cleanup(),this._cleanup=void 0);const t=this._portaledPopup;t?.parentElement===document.body&&this.renderRoot.appendChild(t),this._portaledPopup=null}disconnectedCallback(){this._portaledPopup?.remove(),this._portaledPopup=null,super.disconnectedCallback()}assignPosition(){const t=this.referenceElement,i=this.getActivePopup();!t||!i||(this._cleanup?.(),this._cleanup=y(t,i,async()=>{const e=this.referenceElement,r=this.getActivePopup();if(!e||!r)return;const{x:s,y:n}=await P(e,r,{placement:this.placement,strategy:"fixed"});Object.assign(r.style,{position:"fixed",left:`${s+this.xPositionOffset}px`,top:`${n+this.yPositionOffset}px`,right:"auto",bottom:"auto"})}))}};o.portalStylesInjected=!1;o.shadowRootOptions={...f.shadowRootOptions,delegatesFocus:!0,mode:"open"};o.styles=[p(a),p(u),p(b),p(g)];o=v([h("ngc-tooltip")],o);export{o as NgcTooltip};
@@ -1 +1 @@
1
- import{property as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as c}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as f}from"../../consts/key-constants.js";import{generateRandomId as u}from"../../utils/string-utils.js";import{TestableLitElement as p}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as h}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as _}from"../../utils/accessibility-utils.js";var m=Object.defineProperty,n=(a,e,t,s)=>{for(var i=void 0,r=a.length-1,d;r>=0;r--)(d=a[r])&&(i=d(e,t,i)||i);return i&&m(e,t,i),i};const v=100;class l extends p{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=c(),this._forceOpen=!1,this._initialized=!1,this._boundReferenceElement=null,this.elementListeners=new WeakMap,this.tooltipId=u()}firstUpdated(){this.hideTooltip(),this._tryInitialize()}updated(e){super.updated(e),(e.has("referenceId")||e.has("isLabel"))&&this._teardown(),this._initialized||this._tryInitialize()}get referenceElement(){if(!this.referenceId)return null;let e=this.parentElement?.querySelector(`#${this.referenceId}`);return e||(e=document.getElementById(this.referenceId)),e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),e||(e=this.getRootNode().querySelector?.(`#${this.referenceId}`)),!e&&this.previousElementSibling&&this.previousElementSibling.id===this.referenceId&&(e=this.previousElementSibling),e}_tryInitialize(){if(this._initialized||!this.referenceId)return;const e=this.referenceElement,t=this._tooltipRef.value;!e||!t||(h(e,this.dataTestid,"trigger"),h(t,this.dataTestid,"tooltip"),this._updateAriaAssociation(e,!0),this._addInteractionEvents(e,t),this._initialized=!0,this._boundReferenceElement=e)}_teardown(){if(!this._initialized)return;this._clearScheduledHide();const e=this._boundReferenceElement,t=this._tooltipRef.value;e&&(this._updateAriaAssociation(e,!1),this.removeAllTrackedEventListeners(e)),t&&this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this._initialized=!1,this._boundReferenceElement=null}_getAriaTargetElement(e){return e.shadowRoot?.delegatesFocus?_(e):e}_updateAriaAssociation(e,t){const s=this._getAriaTargetElement(e);if(!s)return;if(this.isLabel){const r=s.ariaLabelledByElements??[];s.ariaLabelledByElements=t?[...r,this]:r.filter(d=>d!==this);return}const i=s.ariaDescribedByElements??[];s.ariaDescribedByElements=t?[...i,this]:i.filter(r=>r!==this)}_addInteractionEvents(e,t){const s=()=>{this._clearScheduledHide(),this.showTooltip()};this.addTrackedEventListener(e,"mouseenter",s),this.addTrackedEventListener(e,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(e,"focusin",()=>this.showTooltip()),this.addTrackedEventListener(e,"focusout",()=>this.hideTooltip()),this.addTrackedEventListener(t,"mouseenter",s),this.addTrackedEventListener(t,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(document,"keydown",i=>{i instanceof KeyboardEvent&&i.key===f.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}_scheduleHide(){this._clearScheduledHide(),this._hideTimeoutId=setTimeout(()=>this.hideTooltip(),v)}_clearScheduledHide(){this._hideTimeoutId!==void 0&&(clearTimeout(this._hideTimeoutId),this._hideTimeoutId=void 0)}addTrackedEventListener(e,t,s,i={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:t,listener:s,options:i}),e.addEventListener(t,s,i)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const t=this.elementListeners.get(e);for(const{eventType:s,listener:i,options:r}of t)e.removeEventListener(s,i,r);this.elementListeners.delete(e)}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._teardown(),this._cleanup&&this._cleanup(),super.disconnectedCallback()}showTooltip(){this.assignPosition(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="visible",this._tooltipRef.value.style.opacity="1")}hideTooltip(){this._forceOpen||(this._clearScheduledHide(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0"))}assignPosition(){}}n([o({attribute:"reference-id"})],l.prototype,"referenceId");n([o()],l.prototype,"placement");n([o({type:Number,attribute:"x-offset"})],l.prototype,"xOffset");n([o({type:Number,attribute:"y-offset"})],l.prototype,"yOffset");n([o({type:Boolean,attribute:"is-label"})],l.prototype,"isLabel");export{l as NjcTooltip};
1
+ import{property as n}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as c}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as u}from"../../consts/key-constants.js";import{generateRandomId as f}from"../../utils/string-utils.js";import{TestableLitElement as p}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as h}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as _}from"../../utils/accessibility-utils.js";var v=Object.defineProperty,o=(l,e,t,i)=>{for(var s=void 0,r=l.length-1,a;r>=0;r--)(a=l[r])&&(s=a(e,t,s)||s);return s&&v(e,t,s),s};const m=100;class d extends p{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=c(),this._forceOpen=!1,this._initialized=!1,this._boundReferenceElement=null,this.elementListeners=new WeakMap,this.tooltipId=f()}firstUpdated(){this.hideTooltip(),this._tryInitialize(),this._observeReferenceAvailability()}updated(e){super.updated(e),(e.has("referenceId")||e.has("isLabel"))&&(this._disconnectReferenceObserver(),this._teardown()),this._initialized||(this._tryInitialize(),this._observeReferenceAvailability())}get referenceElement(){if(!this.referenceId)return null;const e=this.previousElementSibling;if(e?.id===this.referenceId)return e;const t=`[id="${CSS.escape(this.referenceId)}"]`;let i=this.parentElement?.querySelector(t);return i||(i=document.getElementById(this.referenceId)),i||(i=document.querySelector(`[data-id="${CSS.escape(this.referenceId)}"]`)?.shadowRoot?.querySelector(t)),i||(i=this.getRootNode().querySelector?.(t)),i}_observeReferenceAvailability(){if(this._initialized||!this.referenceId||this._initObserver)return;const e=this.parentElement??document.body;this._initObserver=new MutationObserver(()=>{if(this._initialized){this._disconnectReferenceObserver();return}this._tryInitialize()}),this._initObserver.observe(e,{attributes:!0,attributeFilter:["id"],childList:!0,subtree:!0})}_disconnectReferenceObserver(){this._initObserver?.disconnect(),this._initObserver=void 0}_tryInitialize(){if(this._initialized||!this.referenceId)return;const e=this.referenceElement,t=this._tooltipRef.value;!e||!t||(h(e,this.dataTestid,"trigger"),h(t,this.dataTestid,"tooltip"),this._updateAriaAssociation(e,!0),this._addInteractionEvents(e,t),this._initialized=!0,this._boundReferenceElement=e,this._disconnectReferenceObserver())}_teardown(){if(!this._initialized)return;this._clearScheduledHide();const e=this._boundReferenceElement,t=this._tooltipRef.value;e&&(this._updateAriaAssociation(e,!1),this.removeAllTrackedEventListeners(e)),t&&this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this._initialized=!1,this._boundReferenceElement=null}_getAriaTargetElement(e){return e.shadowRoot?.delegatesFocus?_(e):e}_updateAriaAssociation(e,t){const i=this._getAriaTargetElement(e);if(!i)return;if(this.isLabel){const r=i.ariaLabelledByElements??[];i.ariaLabelledByElements=t?[...r,this]:r.filter(a=>a!==this);return}const s=i.ariaDescribedByElements??[];i.ariaDescribedByElements=t?[...s,this]:s.filter(r=>r!==this)}_addInteractionEvents(e,t){const i=()=>{this._clearScheduledHide(),this.showTooltip()};this.addTrackedEventListener(e,"mouseenter",i),this.addTrackedEventListener(e,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(e,"focusin",()=>this.showTooltip()),this.addTrackedEventListener(e,"focusout",()=>this.hideTooltip()),this.addTrackedEventListener(t,"mouseenter",i),this.addTrackedEventListener(t,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(document,"keydown",s=>{s instanceof KeyboardEvent&&s.key===u.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}_scheduleHide(){this._clearScheduledHide(),this._hideTimeoutId=setTimeout(()=>this.hideTooltip(),m)}_clearScheduledHide(){this._hideTimeoutId!==void 0&&(clearTimeout(this._hideTimeoutId),this._hideTimeoutId=void 0)}addTrackedEventListener(e,t,i,s={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:t,listener:i,options:s}),e.addEventListener(t,i,s)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const t=this.elementListeners.get(e);for(const{eventType:i,listener:s,options:r}of t)e.removeEventListener(i,s,r);this.elementListeners.delete(e)}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._disconnectReferenceObserver(),this._teardown(),this._cleanup&&this._cleanup(),super.disconnectedCallback()}getActivePopup(){return this._tooltipRef.value??null}preparePopupForShow(){}cleanupPopupAfterHide(){}showTooltip(){this.preparePopupForShow(),this.assignPosition();const e=this.getActivePopup();e&&(e.style.visibility="visible",e.style.opacity="1")}hideTooltip(){if(this._forceOpen)return;this._clearScheduledHide();const e=this.getActivePopup();e&&(e.style.visibility="hidden",e.style.opacity="0"),this.cleanupPopupAfterHide()}assignPosition(){}}o([n({attribute:"reference-id"})],d.prototype,"referenceId");o([n()],d.prototype,"placement");o([n({type:Number,attribute:"x-offset"})],d.prototype,"xOffset");o([n({type:Number,attribute:"y-offset"})],d.prototype,"yOffset");o([n({type:Boolean,attribute:"is-label"})],d.prototype,"isLabel");export{d as NjcTooltip};
@@ -1 +1 @@
1
- const a=".gator-modal-dialog{border:none;padding:0;background:transparent;inset:0;display:grid;place-items:center}.gator-modal-dialog::backdrop{background-color:var(--color-overlay-secondary)}.gator-modal{--ngc-card-position: static;--ngc-card-top: auto;--ngc-card-left: auto;--ngc-card-max-width: none;--ngc-card-transform: none}.gator-modal-wrapper{display:flex;flex-direction:column;max-height:90vh;overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-header{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--color-surface-secondary)}.gator-modal-header .gator-modal-close-button{--ngc-icon-button-hover-box-shadow: none}.gator-modal-content{flex-grow:1;padding:var(--spacing-10) var(--spacing-10) var(--spacing-11) var(--spacing-10);overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-content ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 0 var(--spacing-5) 0}.gator-modal-footer{flex-shrink:0;display:flex;padding:var(--spacing-10)}.gator-modal-warning{display:flex;flex-direction:row;align-items:center}.gator-modal-warning ngc-icon{--ngc-icon-color: var(--color-text-error);--ngc-icon-margin: 0 var(--spacing-5) 0 0}.gator-modal-warning ngc-input-label{--ngc-input-label-color: var(--color-text-error);--ngc-input-label-font-size: var(--font-size-body-2);--ngc-input-label-line-height: var(--line-height-body-2)}.gator-modal-action-buttons{display:flex;gap:var(--spacing-5)}.gator-modal ngc-card-header{width:100%}.gator-modal--small{--ngc-card-width: var(--ngc-modal-width, 375px);--ngc-card-border-radius: var(--border-radius-medium)}.gator-modal--small .gator-modal-header{border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.gator-modal--small .gator-modal-content{padding:var(--spacing-8) var(--spacing-8) 56px var(--spacing-8)}.gator-modal--small .gator-modal-footer{flex-direction:column-reverse;align-items:center;padding:var(--spacing-8)}.gator-modal--small .gator-modal-warning{margin-top:var(--spacing-10)}.gator-modal--small .gator-modal-action-buttons{flex-direction:column-reverse;width:100%}.gator-modal--small .gator-modal-action-buttons ngc-button{--ngc-button-width: 100% }.gator-modal--standard{--ngc-card-width: var(--ngc-modal-width, 600px)}.gator-modal--standard .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);border-radius:var(--border-radius-x-large) var(--border-radius-x-large) 0 0}.gator-modal--standard .gator-modal-footer{flex-direction:row}.gator-modal--standard .gator-modal-warning{margin-right:auto}.gator-modal--standard .gator-modal-action-buttons{margin-left:auto}.gator-modal--standard .gator-modal-action-buttons ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 var(--spacing-5) 0 0}.gator-modal--fullscreen{--ngc-card-border-radius: var(--border-radius-no-radius)}.gator-modal--fullscreen .gator-modal-wrapper{height:100vh;width:100vw;max-height:100vh}.gator-modal--fullscreen .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);padding-left:48px}.gator-modal--fullscreen .gator-modal-header ngc-card-header{justify-content:center;--ngc-text-detail-content-alignment: center}.gator-modal--fullscreen .gator-modal-content{background:var(--color-surface-secondary)}.gator-modal--fullscreen .gator-modal-footer{flex-direction:column-reverse;justify-content:center;align-items:center;border-top:1px solid var(--color-border-tertiary)}.gator-modal--fullscreen .gator-modal-warning{margin-top:var(--spacing-5)}.gator-dialog--fullscreen{max-height:100%;max-width:100%;margin:0}";export{a as default};
1
+ const a=".gator-modal-dialog{border:none;padding:0;background:transparent;inset:0;display:grid;place-items:center;overflow:hidden}.gator-modal-dialog::backdrop{background-color:var(--color-overlay-secondary)}.gator-modal{--ngc-card-position: static;--ngc-card-top: auto;--ngc-card-left: auto;--ngc-card-max-width: none;--ngc-card-transform: none}.gator-modal-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0;overflow-y:hidden}.gator-modal-header{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--color-surface-secondary)}.gator-modal-header .gator-modal-close-button{--ngc-icon-button-hover-box-shadow: none}.gator-modal-content{flex-grow:1;min-height:0;padding:var(--spacing-10) var(--spacing-10) var(--spacing-11) var(--spacing-10);overflow-y:var(--ngc-modal-overflow-y, auto)}.gator-modal-content ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 0 var(--spacing-5) 0}.gator-modal-footer{flex-shrink:0;display:flex;padding:var(--spacing-10)}.gator-modal-warning{display:flex;flex-direction:row;align-items:center}.gator-modal-warning ngc-icon{--ngc-icon-color: var(--color-text-error);--ngc-icon-margin: 0 var(--spacing-5) 0 0}.gator-modal-warning ngc-input-label{--ngc-input-label-color: var(--color-text-error);--ngc-input-label-font-size: var(--font-size-body-2);--ngc-input-label-line-height: var(--line-height-body-2)}.gator-modal-action-buttons{display:flex;gap:var(--spacing-5)}.gator-modal ngc-card-header{width:100%}.gator-modal--small{--ngc-card-width: var(--ngc-modal-width, 375px);--ngc-card-border-radius: var(--border-radius-medium)}.gator-modal--small .gator-modal-header{border-radius:var(--border-radius-medium) var(--border-radius-medium) 0 0}.gator-modal--small .gator-modal-content{padding:var(--spacing-8) var(--spacing-8) 56px var(--spacing-8)}.gator-modal--small .gator-modal-footer{flex-direction:column-reverse;align-items:center;padding:var(--spacing-8)}.gator-modal--small .gator-modal-warning{margin-top:var(--spacing-10)}.gator-modal--small .gator-modal-action-buttons{flex-direction:column-reverse;width:100%}.gator-modal--small .gator-modal-action-buttons ngc-button{--ngc-button-width: 100% }.gator-modal--standard{--ngc-card-width: var(--ngc-modal-width, 600px)}.gator-modal--standard .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);border-radius:var(--border-radius-x-large) var(--border-radius-x-large) 0 0}.gator-modal--standard .gator-modal-footer{flex-direction:row}.gator-modal--standard .gator-modal-warning{margin-right:auto}.gator-modal--standard .gator-modal-action-buttons{margin-left:auto}.gator-modal--standard .gator-modal-action-buttons ngc-skeleton-loader:first-child{--ngc-skeleton-loader-margin: 0 var(--spacing-5) 0 0}.gator-modal--fullscreen{--ngc-card-border-radius: var(--border-radius-no-radius)}.gator-modal--fullscreen .gator-modal-wrapper{height:100vh;width:100vw;max-height:100vh}.gator-modal--fullscreen .gator-modal-header{--ngc-card-header-padding: var(--spacing-10);padding-left:48px}.gator-modal--fullscreen .gator-modal-header ngc-card-header{justify-content:center;--ngc-text-detail-content-alignment: center}.gator-modal--fullscreen .gator-modal-content{background:var(--color-surface-secondary)}.gator-modal--fullscreen .gator-modal-footer{flex-direction:column-reverse;justify-content:center;align-items:center;border-top:1px solid var(--color-border-tertiary)}.gator-modal--fullscreen .gator-modal-warning{margin-top:var(--spacing-5)}.gator-dialog--fullscreen{max-height:100%;max-width:100%;margin:0}";export{a as default};
@@ -1 +1 @@
1
- const t="div[role=tooltip]{position:absolute;width:max-content;top:0;left:0;z-index:9999;visibility:hidden;opacity:0;transition:opacity .2s}#floating{position:absolute;width:max-content;top:0;left:0;z-index:9999}";export{t as default};
1
+ const t="div[role=tooltip]{position:fixed;width:max-content;top:0;left:0;z-index:9999;visibility:hidden;opacity:0;transition:opacity .2s}#floating{position:absolute;width:max-content;top:0;left:0;z-index:9999}";export{t as default};
@@ -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';
@@ -1,5 +1,7 @@
1
1
  import { NjcTooltip } from '../tooltip.ts';
2
2
  export declare class NgcTooltip extends NjcTooltip {
3
+ private static portalStylesInjected;
4
+ private _portaledPopup;
3
5
  static shadowRootOptions: {
4
6
  delegatesFocus: boolean;
5
7
  mode: ShadowRootMode;
@@ -13,5 +15,9 @@ export declare class NgcTooltip extends NjcTooltip {
13
15
  get xPositionOffset(): number;
14
16
  get yPositionOffset(): number;
15
17
  get nubbinPositionClass(): "" | "gator-tooltip-nubbin_bottom" | "gator-tooltip-nubbin_left" | "gator-tooltip-nubbin_top" | "gator-tooltip-nubbin_right";
18
+ protected getActivePopup(): HTMLElement | null;
19
+ protected preparePopupForShow(): void;
20
+ protected cleanupPopupAfterHide(): void;
21
+ disconnectedCallback(): void;
16
22
  assignPosition(): void;
17
23
  }
@@ -12,6 +12,7 @@ export declare class NjcTooltip extends TestableLitElement {
12
12
  _cleanup: (() => void) | undefined;
13
13
  private _forceOpen;
14
14
  private _hideTimeoutId;
15
+ private _initObserver;
15
16
  private _initialized;
16
17
  private _boundReferenceElement;
17
18
  private elementListeners;
@@ -19,6 +20,8 @@ export declare class NjcTooltip extends TestableLitElement {
19
20
  firstUpdated(): void;
20
21
  updated(changedProperties: PropertyValues): void;
21
22
  get referenceElement(): HTMLElement | null;
23
+ private _observeReferenceAvailability;
24
+ private _disconnectReferenceObserver;
22
25
  private _tryInitialize;
23
26
  private _teardown;
24
27
  private _getAriaTargetElement;
@@ -30,6 +33,12 @@ export declare class NjcTooltip extends TestableLitElement {
30
33
  removeAllTrackedEventListeners(element: HTMLElement | Document): void;
31
34
  toggleTooltip(): void;
32
35
  disconnectedCallback(): void;
36
+ /** Popup element used for positioning and visibility. Gator overrides when portaling. */
37
+ protected getActivePopup(): HTMLElement | null;
38
+ /** Called before positioning when the popup is shown. */
39
+ protected preparePopupForShow(): void;
40
+ /** Called after the popup is hidden. */
41
+ protected cleanupPopupAfterHide(): void;
33
42
  showTooltip(): void;
34
43
  hideTooltip(): void;
35
44
  /**
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/web-components",
3
3
  "author": "nCino",
4
- "version": "13.9.1",
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.9.1"
103
+ "@ncino/styles": "13.10.0"
104
104
  },
105
105
  "peerDependencies": {
106
- "@ncino/styles": "13.9.1"
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
@@ -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": "13.9.0",
4
+ "version": "13.9.2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -1995,7 +1995,7 @@
1995
1995
  },
1996
1996
  {
1997
1997
  "name": "ngc-tooltip",
1998
- "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
1998
+ "description": "\n---\n\n\n### **Methods:**\n \n\n\n- **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
1999
1999
  "doc-url": "",
2000
2000
  "attributes": [
2001
2001
  {
@@ -7553,7 +7553,7 @@
7553
7553
  },
7554
7554
  {
7555
7555
  "name": "nsc-tooltip",
7556
- "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
7556
+ "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition\n\n\n",
7557
7557
  "doc-url": "",
7558
7558
  "attributes": [
7559
7559
  {