@ncino/web-components 16.1.1 → 16.3.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.
- package/dist/components/checkbox/checkbox.gator.js +12 -7
- package/dist/components/checkbox-group/checkbox-group.gator.js +4 -3
- package/dist/components/table/gator/table.gator.js +6 -4
- package/dist/types/src/components/checkbox/checkbox.gator.d.ts +1 -0
- package/dist/types/src/components/table/table-column-definition.d.ts +2 -0
- package/package.json +3 -3
- package/web-types.json +7 -2
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import{property as
|
|
1
|
+
import{property as a}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as p}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 n,nothing as u}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{ref as b}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{generateRandomId as m,getElementId as f}from"../../utils/string-utils.js";import{ifDefined as c}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{NgcInputText as g}from"../input/gator/input-text/input-text.gator.js";import v from"../../packages/web-components/src/components/checkbox/checkbox.gator.scss.js";import{unsafeCSS as x}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.defineProperty,y=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,_=Reflect.get,s=(e,r,o,l)=>{for(var i=l>1?void 0:l?y(r,o):r,h=e.length-1,d;h>=0;h--)(d=e[h])&&(i=(l?d(r,o,i):d(i))||i);return l&&i&&k(r,o,i),i},T=(e,r,o)=>_($(e),o,r);let t=class extends g{constructor(){super(...arguments),this.titleText="",this.selected=!1,this.indeterminate=!1,this.hideLabel=!1,this.grouped=!1,this._randomId=m()}updated(e){super.updated(e),e.has("indeterminate")&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate),e.has("errorText")&&this.inputRef.value&&this.inputRef.value.setCustomValidity(this.errorText?"true":"")}render(){const e=this.elementId;return this.skeleton?this.skeletonMarkup:n`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<div id="${e}-checkbox" class="gator-checkbox">
|
|
4
4
|
<div class="gator-checkbox-input-align">
|
|
5
5
|
<div class="gator-checkbox-input-wrapper">
|
|
6
6
|
<input
|
|
7
|
-
${
|
|
7
|
+
${b(this.inputRef)}
|
|
8
8
|
id="${e}"
|
|
9
9
|
class="gator-checkbox-input"
|
|
10
10
|
type="checkbox"
|
|
11
11
|
.checked="${this.selected}"
|
|
12
12
|
?disabled="${this.disabled}"
|
|
13
|
-
aria-labelledby="${
|
|
13
|
+
aria-labelledby="${c(this.hideLabel?void 0:`${e}-checkbox`)}"
|
|
14
14
|
aria-describedby=${this.ariaDescribedby}
|
|
15
15
|
@change="${this.handleChange}"
|
|
16
|
-
aria-label=${
|
|
16
|
+
aria-label=${c(this.hideLabel?this.titleText:void 0)}
|
|
17
17
|
/>
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
|
-
${this.hideLabel?null:
|
|
20
|
+
${this.hideLabel?null:n`
|
|
21
21
|
<label
|
|
22
22
|
class="gator-checkbox-title"
|
|
23
23
|
@click="${this.handleChange}"
|
|
@@ -29,7 +29,12 @@ import{property as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/n
|
|
|
29
29
|
</div>
|
|
30
30
|
${this.bottomText}
|
|
31
31
|
</div>
|
|
32
|
-
`}get
|
|
32
|
+
`}get skeletonMarkup(){return n`
|
|
33
|
+
<div class="gator-checkbox">
|
|
34
|
+
<ngc-skeleton-loader width="18" height="18" radius="2"></ngc-skeleton-loader>
|
|
35
|
+
<ngc-skeleton-loader width="50" height="18" radius="2"></ngc-skeleton-loader>
|
|
36
|
+
</div>
|
|
37
|
+
`}get elementId(){return f(this.id,this._randomId)}get bottomText(){return this.grouped?u:n`
|
|
33
38
|
${this.errorTextMarkup}
|
|
34
39
|
${this.helpTextMarkup}
|
|
35
|
-
`}handleChange(){this.disabled||(this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value,selected:this.selected}})))}click(){this.inputRef.value?.click()}};t.styles=[...T(t,t,"styles"),x(
|
|
40
|
+
`}handleChange(){this.disabled||(this.selected=!this.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value,selected:this.selected}})))}click(){this.inputRef.value?.click()}};t.styles=[...T(t,t,"styles"),x(v)];s([a({type:String,attribute:"title-text"})],t.prototype,"titleText",2);s([a({type:Boolean})],t.prototype,"selected",2);s([a({type:Boolean})],t.prototype,"indeterminate",2);s([a({type:Boolean,attribute:"hide-label"})],t.prototype,"hideLabel",2);s([a({type:Boolean,attribute:"grouped"})],t.prototype,"grouped",2);t=s([p("ngc-checkbox")],t);export{t as NgcCheckbox};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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 c}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as d}from"../../utils/decorators/custom-element-decorator.js";import{generateRandomId as p,getElementId as u}from"../../utils/string-utils.js";import m from"../../packages/web-components/src/components/checkbox-group/checkbox-group.gator.scss.js";import"../checkbox/checkbox.gator.js";import"../input/gator/input-label/input-label.gator.js";import"../input/gator/help-text/help-text.gator.js";import{handleDataTestid as g}from"../../utils/datatestid-utils.js";import{ifDefined as b}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{NgcInputText as f}from"../input/gator/input-text/input-text.gator.js";import{createRef as v,ref as x}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{unsafeCSS as $}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,E=Object.getPrototypeOf,R=Reflect.get,h=(e,o,s,r)=>{for(var t=r>1?void 0:r?k(o,s):o,n=e.length-1,a;n>=0;n--)(a=e[n])&&(t=(r?a(o,s,t):a(t))||t);return r&&t&&y(o,s,t),t},_=(e,o,s)=>R(E(e),s,o);let i=class extends f{constructor(){super(...arguments),this.options=[],this._randomId=p(),this.groupRef=v()}render(){const e=this.elementId;return l`
|
|
2
2
|
<div class="gator-checkbox-group-container" ${x(this.groupRef)} role="group">
|
|
3
3
|
${this.label?l`
|
|
4
4
|
<ngc-input-label
|
|
5
5
|
id="${e}-label"
|
|
6
6
|
?required="${this.required&&!this.hideRequired}"
|
|
7
7
|
?optional="${this.optional}"
|
|
8
|
-
data-testid=${b(this.labelDataTestid)}
|
|
8
|
+
data-testid=${b(this.labelDataTestid)}
|
|
9
|
+
?skeleton=${this.skeleton}>
|
|
9
10
|
${this.label}
|
|
10
11
|
</ngc-input-label>`:null}
|
|
11
12
|
<div id="${e}-group"
|
|
@@ -27,4 +28,4 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/re
|
|
|
27
28
|
>
|
|
28
29
|
</ngc-checkbox>
|
|
29
30
|
`)}
|
|
30
|
-
`}handleCheckboxSelectionChange(e){const
|
|
31
|
+
`}handleCheckboxSelectionChange(e){const o=e;e.stopImmediatePropagation();const s=new Set(this.value?.split(";"));o.detail.selected?s.add(o.detail.value):s.delete(o.detail.value),this.value=Array.from(s).join(";"),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:this.value}))}get checkboxElements(){if(this.options.length>0)return this.shadowRoot?.querySelectorAll("ngc-checkbox");const e=this.shadowRoot?.querySelector("slot")?.assignedElements();return e&&e.length===1&&e[0]instanceof HTMLSlotElement?e[0].assignedElements():e}updated(){const e=new Set(this.value?.split(";")),o=this.checkboxElements;o&&o.length>0&&o.forEach((s,r)=>{const t=s;t.selected=e.has(t.value),t.disabled=this.disabled,t.errorText=this.errorText,t.grouped=!0,t.skeleton=this.skeleton,g(t,this.dataTestid,`checkbox-${r}`)}),requestAnimationFrame(()=>{const s=this.shadowRoot?.querySelector("ngc-input-label"),r=this.shadowRoot?.querySelectorAll("ngc-help-text");s&&this.groupRef.value&&(this.groupRef.value.ariaLabelledByElements=[s]),r&&this.groupRef.value&&(this.groupRef.value.ariaDescribedByElements=Array.from(r))})}};i.styles=[..._(i,i,"styles"),$(m)];h([c({type:Array})],i.prototype,"options",2);i=h([d("ngc-checkbox-group")],i);export{i as NgcCheckboxGroup};
|
|
@@ -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 f,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 T}from"../../../utils/decorators/custom-element-decorator.js";import{msg as u}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as x}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{NjcTable as _}from"../table.js";import{formatTableTextValue as P}from"../table-format-utils.js";import R from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as f,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 T}from"../../../utils/decorators/custom-element-decorator.js";import{msg as u}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as x}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{NjcTable as _}from"../table.js";import{formatTableTextValue as P}from"../table-format-utils.js";import R from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import E from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import O 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"../../illustration/gator/illustration.gator.js";import"../../illustration/gator/templates/index.js";import"../../card/gator/base/card.gator.js";import{unsafeCSS as y}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var A=Object.defineProperty,B=Object.getOwnPropertyDescriptor,g=(e,t,l,i)=>{for(var s=i>1?void 0:i?B(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};const k=5,V=60;let h=class extends _{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!1,this.includePageSelection=!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._visibleFilterChipCount=k,this.previousFilterOptionsScrollTop=0,this._filterChipResizeObserver=new ResizeObserver(()=>this.calculateFilterChipOverflow()),this.renderHeaderFilterPopover=(e,t,l=!1)=>{const i=e.filterOptions??[],s=(this._filterSearchQuery[e.field]??"").toLowerCase(),r=s?i.filter(p=>p.label.toLowerCase().includes(s)):i,a=this.hasActiveFilter(e),d=e.filterMultiselect===!0,n=this.getEffectivePending(e),c=r.map(p=>({title:p.label,value:String(p.value)})),b=d?n.join(";"):"",m=d?"":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}"
|
|
@@ -16,7 +16,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
16
16
|
@closed="${()=>this.handleFilterPopoverClosed(e)}"
|
|
17
17
|
>
|
|
18
18
|
<div slot="content" class="gator-table-filter-popover-content">
|
|
19
|
-
${i.length>10?o`
|
|
19
|
+
${i.length>10||e.alwaysShowSearchBar?o`
|
|
20
20
|
<ngc-input-search
|
|
21
21
|
placeholder="${u("Search")}"
|
|
22
22
|
.value="${this._filterSearchQuery[e.field]??""}"
|
|
@@ -32,6 +32,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
32
32
|
@change="${p=>this.handleFilterCheckboxGroupChange(p,e)}"
|
|
33
33
|
class="gator-table-filter-options"
|
|
34
34
|
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
35
|
+
?skeleton=${e.filterOptionsLoading}
|
|
35
36
|
></ngc-checkbox-group>
|
|
36
37
|
`:o`
|
|
37
38
|
<ngc-radio-group
|
|
@@ -41,6 +42,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
41
42
|
@change="${p=>this.handleFilterRadioGroupChange(p,e)}"
|
|
42
43
|
class="gator-table-filter-options"
|
|
43
44
|
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
45
|
+
?skeleton=${e.filterOptionsLoading}
|
|
44
46
|
></ngc-radio-group>
|
|
45
47
|
`}
|
|
46
48
|
</div>
|
|
@@ -185,7 +187,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
185
187
|
>
|
|
186
188
|
${S}
|
|
187
189
|
</th>
|
|
188
|
-
`}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.previousFilterOptionsScrollTop=0,this._filterSearchQuery={...this._filterSearchQuery,[e.field]:""}}handleFilterSearchInput(e,t){const l=e.detail?.value??"";this.previousFilterOptionsScrollTop=0,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 d=t(l).find(n=>String(n.value)===a);e.push({column:l,value:a,label:d?.label??a})}}else{const r=i;if(r==="")continue;const a=t(l).find(d=>String(d.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()}onFilterOptionsScroll(e,t){const l=e.target,i=l.scrollTop>this.previousFilterOptionsScrollTop,s=Math.floor(l.scrollHeight-l.scrollTop)===l.clientHeight;this.previousFilterOptionsScrollTop=l.scrollTop,i&&s&&this.dispatchEvent(new CustomEvent("filteroptionsreachedbottom",{bubbles:!0,composed:!0,detail:{field:t.field}}))}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`
|
|
190
|
+
`}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.previousFilterOptionsScrollTop=0,this._filterSearchQuery={...this._filterSearchQuery,[e.field]:""},this.dispatchEvent(new CustomEvent("filteroptionsclosed",{bubbles:!0,composed:!0,detail:{field:e.field}}))}handleFilterSearchInput(e,t){const l=e.detail?.value??"";this.previousFilterOptionsScrollTop=0,this._filterSearchQuery={...this._filterSearchQuery,[t.field]:l},this.dispatchEvent(new CustomEvent("filteroptionssearch",{bubbles:!0,composed:!0,detail:{field:t.field,value: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 d=t(l).find(n=>String(n.value)===a);e.push({column:l,value:a,label:d?.label??a})}}else{const r=i;if(r==="")continue;const a=t(l).find(d=>String(d.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()}onFilterOptionsScroll(e,t){const l=e.target,i=l.scrollTop>this.previousFilterOptionsScrollTop,s=Math.floor(l.scrollHeight-l.scrollTop)===l.clientHeight;this.previousFilterOptionsScrollTop=l.scrollTop,i&&s&&this.dispatchEvent(new CustomEvent("filteroptionsreachedbottom",{bubbles:!0,composed:!0,detail:{field:t.field}}))}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`
|
|
189
191
|
${l.map(s=>this.getCategoryBody(s,e))}
|
|
190
192
|
`}getCategoryBody(e,t){let l="",i="",s="";e.header&&(l=e.header.headerText||e.header.categoryText||e.header.name||"Category",s=`category-${l.toLowerCase().replace(/\s+/g,"-")}`,i=s);const r=e.header?this.getTableHeaderRow(t,e.header):"",a=e.rows.map(c=>this.getTableBodyRow(c,t,s,this.data.indexOf(c))),d=t.some(c=>c.includedInTotals===!0),n=e.rows.length>0&&d?this.getTotalRow(e.rows,t,s):"";return o`
|
|
191
193
|
<tbody role="rowgroup" ${i?o`aria-labelledby="${i}"`:""}>
|
|
@@ -257,4 +259,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
257
259
|
>
|
|
258
260
|
${c}
|
|
259
261
|
</td>
|
|
260
|
-
`}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}}}))}};h.styles=[y(O),y(
|
|
262
|
+
`}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}}}))}};h.styles=[y(O),y(E),y(R)];g([v({type:Boolean})],h.prototype,"elevated",2);g([v({type:Boolean,attribute:"include-pagination"})],h.prototype,"includePagination",2);g([v({type:Boolean,attribute:"include-page-selection"})],h.prototype,"includePageSelection",2);g([v({type:Boolean})],h.prototype,"skeleton",2);g([v({type:String,attribute:"sort-field"})],h.prototype,"sortField",2);g([v({type:String,attribute:"sort-direction"})],h.prototype,"sortDirection",2);g([v({type:Object,attribute:!1})],h.prototype,"filterValues",2);g([$()],h.prototype,"selectedRows",2);g([$()],h.prototype,"_currentPage",2);g([$()],h.prototype,"_sortField",2);g([$()],h.prototype,"_sortDirection",2);g([$()],h.prototype,"_hoveredHeaderColumnField",2);g([$()],h.prototype,"_pendingFilterValues",2);g([$()],h.prototype,"_filterSearchQuery",2);g([$()],h.prototype,"_visibleFilterChipCount",2);h=g([T("ngc-table"),x()],h);export{h as NgcTable};
|
|
@@ -22,6 +22,7 @@ export declare class NgcCheckbox extends NgcInputText {
|
|
|
22
22
|
private _randomId;
|
|
23
23
|
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
|
|
24
24
|
render(): import('lit').TemplateResult<1>;
|
|
25
|
+
get skeletonMarkup(): import('lit').TemplateResult<1>;
|
|
25
26
|
get elementId(): string;
|
|
26
27
|
get bottomText(): import('lit').TemplateResult<1> | typeof nothing;
|
|
27
28
|
handleChange(): void;
|
|
@@ -13,7 +13,9 @@ interface BaseColumnDefinition {
|
|
|
13
13
|
sortable?: boolean;
|
|
14
14
|
filterable?: boolean;
|
|
15
15
|
filterOptions?: TableColumnFilterOption[];
|
|
16
|
+
filterOptionsLoading?: boolean;
|
|
16
17
|
filterMultiselect?: boolean;
|
|
18
|
+
alwaysShowSearchBar?: boolean;
|
|
17
19
|
width?: `${number}px` | `${number}%`;
|
|
18
20
|
minWidth?: `${number}px` | `${number}%`;
|
|
19
21
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.3.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.10",
|
|
102
102
|
"yaml-eslint-parser": "^2.1.0",
|
|
103
|
-
"@ncino/styles": "16.
|
|
103
|
+
"@ncino/styles": "16.3.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "16.
|
|
106
|
+
"@ncino/styles": "16.3.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": "16.
|
|
4
|
+
"version": "16.2.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -2727,6 +2727,7 @@
|
|
|
2727
2727
|
{ "name": "indeterminate", "type": "boolean" },
|
|
2728
2728
|
{ "name": "hideLabel", "type": "boolean" },
|
|
2729
2729
|
{ "name": "grouped", "type": "boolean" },
|
|
2730
|
+
{ "name": "skeletonMarkup" },
|
|
2730
2731
|
{ "name": "elementId" },
|
|
2731
2732
|
{ "name": "bottomText" },
|
|
2732
2733
|
{ "name": "inputRef", "type": "Ref<HTMLInputElement>" },
|
|
@@ -8237,7 +8238,7 @@
|
|
|
8237
8238
|
},
|
|
8238
8239
|
{
|
|
8239
8240
|
"name": "ngc-table",
|
|
8240
|
-
"description": "Gator data table.\n---\n\n\n### **Events:**\n - **selectall**\n- **sort**\n- **filter**\n- **filteroptionsreachedbottom**\n- **rowselected**\n- **cellchange**\n- **cellclick**\n\n### **Slots:**\n - **bulk-controls** - Actions shown in the bulk selection toolbar when rows are selected.\n- **empty-state-actions** - Action buttons forwarded into `ngc-illustration`'s default actions slot when no filters are active (e.g. a primary \"Add\" CTA). Not rendered when filters are active; the built-in \"Clear filters\" button is shown in that slot instead.",
|
|
8241
|
+
"description": "Gator data table.\n---\n\n\n### **Events:**\n - **selectall**\n- **sort**\n- **filteroptionsclosed**\n- **filteroptionssearch**\n- **filter**\n- **filteroptionsreachedbottom**\n- **rowselected**\n- **cellchange**\n- **cellclick**\n\n### **Slots:**\n - **bulk-controls** - Actions shown in the bulk selection toolbar when rows are selected.\n- **empty-state-actions** - Action buttons forwarded into `ngc-illustration`'s default actions slot when no filters are active (e.g. a primary \"Add\" CTA). Not rendered when filters are active; the built-in \"Clear filters\" button is shown in that slot instead.",
|
|
8241
8242
|
"doc-url": "",
|
|
8242
8243
|
"attributes": [
|
|
8243
8244
|
{
|
|
@@ -8337,6 +8338,8 @@
|
|
|
8337
8338
|
"events": [
|
|
8338
8339
|
{ "name": "selectall", "type": "CustomEvent" },
|
|
8339
8340
|
{ "name": "sort", "type": "CustomEvent" },
|
|
8341
|
+
{ "name": "filteroptionsclosed", "type": "CustomEvent" },
|
|
8342
|
+
{ "name": "filteroptionssearch", "type": "CustomEvent" },
|
|
8340
8343
|
{ "name": "filter", "type": "CustomEvent" },
|
|
8341
8344
|
{ "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
|
|
8342
8345
|
{ "name": "rowselected", "type": "CustomEvent" },
|
|
@@ -8407,6 +8410,8 @@
|
|
|
8407
8410
|
"events": [
|
|
8408
8411
|
{ "name": "selectall", "type": "CustomEvent" },
|
|
8409
8412
|
{ "name": "sort", "type": "CustomEvent" },
|
|
8413
|
+
{ "name": "filteroptionsclosed", "type": "CustomEvent" },
|
|
8414
|
+
{ "name": "filteroptionssearch", "type": "CustomEvent" },
|
|
8410
8415
|
{ "name": "filter", "type": "CustomEvent" },
|
|
8411
8416
|
{ "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
|
|
8412
8417
|
{ "name": "rowselected", "type": "CustomEvent" },
|