@ncino/web-components 15.6.0 → 16.0.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/chip/chip.js +1 -1
- package/dist/components/chip/gator/chip.gator.js +9 -7
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +5 -5
- package/dist/components/input/gator/input-phone/input-phone.gator.js +6 -5
- package/dist/components/list/gator/list/list.gator.js +2 -2
- package/dist/components/popover/gator/popover.gator.js +2 -2
- package/dist/components/table/gator/__tests__/test-table-data.js +1 -1
- package/dist/components/table/gator/table.gator.js +62 -36
- package/dist/packages/web-components/src/components/table/gator/table.gator.scss.js +1 -1
- package/dist/types/src/components/chip/chip.d.ts +5 -0
- package/dist/types/src/components/input/gator/input-phone/input-phone.gator.d.ts +11 -1
- package/dist/types/src/components/list/gator/list/list.gator.d.ts +1 -1
- package/dist/types/src/components/table/gator/__tests__/test-table-data.d.ts +17 -0
- package/dist/types/src/components/table/gator/table.gator.d.ts +6 -0
- package/package.json +3 -3
- package/web-types.json +9 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as d}from"../../utils/components/testable-lit-element/testable-lit-element.js";var
|
|
1
|
+
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as d}from"../../utils/components/testable-lit-element/testable-lit-element.js";var l=Object.defineProperty,e=(o,p,a,y)=>{for(var i=void 0,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=n(p,a,i)||i);return i&&l(p,a,i),i};class r extends d{constructor(){super(...arguments),this.disabled=!1,this.readonly=!1,this.type=null,this.size=null,this.hideBorder=!1,this.startIcon="",this.endIcon="",this.dismissible=!1,this.ariaHidden="false"}}e([t({type:Boolean})],r.prototype,"disabled");e([t({type:Boolean})],r.prototype,"readonly");e([t()],r.prototype,"type");e([t()],r.prototype,"size");e([t({type:Boolean,attribute:"hide-border"})],r.prototype,"hideBorder");e([t({type:String,attribute:"start-icon"})],r.prototype,"startIcon");e([t({type:String,attribute:"end-icon"})],r.prototype,"endIcon");e([t({type:Boolean,attribute:"dismissible"})],r.prototype,"dismissible");e([t({type:String,attribute:"aria-hidden"})],r.prototype,"ariaHidden");export{r as NjcChip};
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as t,html as s}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{customElement as m}from"../../../utils/decorators/custom-element-decorator.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import u from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import g from"../../../packages/web-components/src/components/chip/gator/chip.gator.scss.js";import{NjcChip as d}from"../chip.js";import{classMap as h}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as r}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var $=Object.getOwnPropertyDescriptor,v=(i,o,p,l)=>{for(var e=l>1?void 0:l?$(o,p):o,n=i.length-1,c;n>=0;n--)(c=i[n])&&(e=c(e)||e);return e};let a=class extends d{render(){return this.readonly||this.dismissible?this.readonlyChipMarkup:this.chipMarkup}get chipMarkup(){return s`
|
|
2
2
|
<button
|
|
3
3
|
aria-hidden="${this.ariaHidden}"
|
|
4
|
-
class=${
|
|
4
|
+
class=${h(this.classes)}
|
|
5
5
|
?disabled="${this.disabled}"
|
|
6
6
|
@click=${this.handleClick}
|
|
7
7
|
>
|
|
8
|
-
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:
|
|
8
|
+
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:t}
|
|
9
9
|
<div class="chip-label"><slot></slot></div>
|
|
10
|
+
${this.endIcon?s`<ngc-icon name="${this.endIcon}" size="x-small"></ngc-icon>`:t}
|
|
10
11
|
</button>
|
|
11
12
|
`}get readonlyChipMarkup(){return s`
|
|
12
13
|
<div
|
|
13
14
|
aria-hidden="${this.ariaHidden}"
|
|
14
|
-
class="gator-chip__read-only ${
|
|
15
|
+
class="gator-chip__read-only ${h(this.classes)}"
|
|
15
16
|
aria-disabled="${this.disabled}"
|
|
16
17
|
@click=${this.handleClick}
|
|
17
18
|
>
|
|
18
|
-
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:
|
|
19
|
+
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:t}
|
|
19
20
|
<div class="chip-label"><slot></slot></div>
|
|
21
|
+
${this.endIcon?s`<ngc-icon name="${this.endIcon}" size="x-small"></ngc-icon>`:t}
|
|
20
22
|
${this.dismissible?s`
|
|
21
23
|
<ngc-icon-button
|
|
22
24
|
icon-name="exit-circle"
|
|
@@ -24,6 +26,6 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
24
26
|
@click=${this.handleDismiss}
|
|
25
27
|
?disabled="${this.disabled}"
|
|
26
28
|
.ariaLabel="Remove ${this.textContent?.trim()}"
|
|
27
|
-
></ngc-icon-button>`:
|
|
29
|
+
></ngc-icon-button>`:t}
|
|
28
30
|
</div>
|
|
29
|
-
`}handleClick(i){i.stopPropagation(),i.preventDefault(),!(this.disabled||this.readonly||this.dismissible)&&this.dispatchEvent(new Event("click",{bubbles:!0}))}handleDismiss(i){i.stopPropagation(),i.preventDefault(),!this.disabled&&this.dispatchEvent(new Event("dismiss",{bubbles:!0}))}get classes(){return{"gator-chip":!0,"gator-chip_small":this.size==="small","gator-chip_disabled":this.disabled,"hide-border":this.hideBorder,[`gator-chip_${this.type}`]:this.type!==null}}};
|
|
31
|
+
`}handleClick(i){i.stopPropagation(),i.preventDefault(),!(this.disabled||this.readonly||this.dismissible)&&this.dispatchEvent(new Event("click",{bubbles:!0}))}handleDismiss(i){i.stopPropagation(),i.preventDefault(),!this.disabled&&this.dispatchEvent(new Event("dismiss",{bubbles:!0}))}get classes(){return{"gator-chip":!0,"gator-chip_small":this.size==="small","gator-chip_disabled":this.disabled,"hide-border":this.hideBorder,[`gator-chip_${this.type}`]:this.type!==null}}};a.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0};a.styles=[r(g),r(b),r(u)];a=v([m("ngc-chip")],a);export{a as NgcChip};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as p}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{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{repeat as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as p}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{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{repeat as L}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js";import{msg as v}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as $}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{classMap as V}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as R}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as g,ref as f}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as S,computePosition as w,flip as O}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as M,formattedStatesForDropdown as D}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as k}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as T,formattedPhoneCountryCodes as F,phoneCountryDropdownOptionMatchesQuery as B}from"../../../../utils/phone-utils.js";import N from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as A}from"../../base/input-base.gator.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import{unsafeCSS as P}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var q=Object.defineProperty,W=Object.getOwnPropertyDescriptor,z=Object.getPrototypeOf,H=Reflect.get,o=(t,e,s,i)=>{for(var a=i>1?void 0:i?W(e,s):e,u=t.length-1,c;u>=0;u--)(c=t[u])&&(a=(i?c(e,s,a):c(a))||a);return i&&a&&q(e,s,a),a},K=(t,e,s)=>H(z(t),s,e);const I="__ngc_select_all__";let l=class extends A{constructor(){super(...arguments),this.multiselect=!1,this.options=[],this.autocomplete=!1,this.selectAll=!1,this.listboxHelpText="",this.valueDisplayed=!1,this.maxAutocompleteResults=250,this.wrapChips=!1,this.hideClear=!1,this.loading=!1,this.tagInput=!1,this._expanded=!1,this._searchValue="",this._focused=!1,this._hovered=!1,this._visibleChipCount=1/0,this._showOverflowChip=!1,this._truncateChips=!0,this._hasSlottedListItems=!1,this._calculationPending=!1,this.listboxRef=g(),this.listRef=g(),this.inputRef=g(),this.listboxMessageRef=g(),this.multiselectValueDelimiter=", ",this._selectedValues=[]}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._cleanup?.()}willUpdate(t){super.willUpdate(t),this.refreshSlottedMode()}render(){return r`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
@@ -89,7 +89,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
89
89
|
</ngc-chip>
|
|
90
90
|
`:p}
|
|
91
91
|
</div>
|
|
92
|
-
`}handleOverflowChipClick(){requestAnimationFrame(()=>{this.toggleListbox(n.DOWN,!1)})}scheduleOverflowCalculation(){this._calculationPending||(this._calculationPending=!0,requestAnimationFrame(()=>{this.calculateOverflow(),this._calculationPending=!1}))}calculateOverflow(){if(!this.multiselect||this.selectedValues.length<=1){this._showOverflowChip=!1,this._visibleChipCount=1/0;return}const t=this.shadowRoot?.querySelector(".gator-chips-container"),e=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!t||!e)return;const s=this.autocomplete?e.clientWidth/3*2:e.clientWidth,i=50,a=8,u=t.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");u.forEach(c=>c.classList.add("gator-visually-hidden"));for(let c=1;c<=this.selectedValues.length;c++){u.forEach((m,b)=>{b<c?m.classList.remove("gator-visually-hidden"):m.classList.add("gator-visually-hidden")});const x=t.scrollWidth,_=c===this.selectedValues.length;if(x+(!_?i+a:0)>s){const m=Math.max(1,c-1);this._visibleChipCount=m,this._showOverflowChip=m<this.selectedValues.length,u.forEach((b,
|
|
92
|
+
`}handleOverflowChipClick(){requestAnimationFrame(()=>{this.toggleListbox(n.DOWN,!1)})}scheduleOverflowCalculation(){this._calculationPending||(this._calculationPending=!0,requestAnimationFrame(()=>{this.calculateOverflow(),this._calculationPending=!1}))}calculateOverflow(){if(!this.multiselect||this.selectedValues.length<=1){this._showOverflowChip=!1,this._visibleChipCount=1/0;return}const t=this.shadowRoot?.querySelector(".gator-chips-container"),e=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!t||!e)return;const s=this.autocomplete?e.clientWidth/3*2:e.clientWidth,i=50,a=8,u=t.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");u.forEach(c=>c.classList.add("gator-visually-hidden"));for(let c=1;c<=this.selectedValues.length;c++){u.forEach((m,b)=>{b<c?m.classList.remove("gator-visually-hidden"):m.classList.add("gator-visually-hidden")});const x=t.scrollWidth,_=c===this.selectedValues.length;if(x+(!_?i+a:0)>s){const m=Math.max(1,c-1);this._visibleChipCount=m,this._showOverflowChip=m<this.selectedValues.length,u.forEach((b,E)=>{E<m?b.classList.remove("gator-visually-hidden"):b.classList.add("gator-visually-hidden")});return}if(_){this._visibleChipCount=this.selectedValues.length,this._showOverflowChip=!1;return}}}setupResizeObserver(){this.multiselect&&(this._resizeObserver=new ResizeObserver(()=>{this.scheduleOverflowCalculation()}),requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".gator-multiselect-selections");t&&this._resizeObserver?.observe(t)}))}removeSelection(t){let e=this.selectedValues;e=e.filter(s=>s!==t),this.emitChangeEvent(e)}get fauxInputMarkup(){return r`
|
|
93
93
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
94
94
|
${this.displayedValue||this.placeholder}
|
|
95
95
|
</div>
|
|
@@ -123,7 +123,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
123
123
|
</ngc-list-item>
|
|
124
124
|
`:p}
|
|
125
125
|
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
126
|
-
${this._hasSlottedListItems?p
|
|
126
|
+
${this._hasSlottedListItems?p:L(this.displayedOptions??[],t=>t.value,t=>{const e=this.getStartIconForOption(t);return r`
|
|
127
127
|
<ngc-list-item
|
|
128
128
|
class="gator-dropdown-option"
|
|
129
129
|
text="${t.label}"
|
|
@@ -149,7 +149,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
149
149
|
>
|
|
150
150
|
${t}
|
|
151
151
|
</div>
|
|
152
|
-
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const t=this.listboxMessageRef.value;if(!this.inputRef.value)return;const e=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(t){e.includes(t)||(this.inputRef.value.ariaDescribedByElements=[t,...e]),s.includes(t)||(this.listRef.value.ariaDescribedByElements=[t,...s]);return}this.inputRef.value.ariaDescribedByElements=e.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return v(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return v("No results found. Refine your search.")}get isTagInputMode(){return this.tagInput&&this.multiselect&&this.autocomplete}get shouldSuppressEmptyListbox(){return this._hasSlottedListItems?this.isTagInputMode&&this._searchValue.trim()===""&&this.slottedListItems.length===0:this.isTagInputMode&&this._searchValue.trim()===""&&this.filteredOptions.length===0}get tagInputHintMessage(){const t=this._searchValue.trim();return v(r`Press <kbd class="gator-tag-input-kbd">enter</kbd> or <kbd class="gator-tag-input-kbd">tab</kbd> to add "<strong>${t}</strong>"`)}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let t=this.options??[];return this.dataType==="country"?t=M():this.dataType==="state"&&this.countryCode?t=D(this.countryCode):this.dataType==="naics"?t=k():this.dataType==="phoneCodes"&&(t=F()),this._searchValue?this.dataType==="phoneCodes"?t.filter(s=>B(s,this._searchValue)):[...t.filter(s=>s.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:t}get limitedOptions(){const t=this.filteredOptions,e=this.maxAutocompleteResults??t.length;if(!this.multiselect)return t.filter((i,a)=>a<e||i.value===this.value);const s=new Set(this.selectedValues);return t.filter((i,a)=>a<e||s.has(i.value))}get resultsExceedMax(){if(!this.autocomplete||!this.maxAutocompleteResults)return!1;if(this._hasSlottedListItems){const t=this._searchValue.trim().toLowerCase();return this.slottedListItems.filter(s=>{if(!t)return!0;const i=(s.text||"").toLowerCase(),a=(s.subtitle||"").toLowerCase();return i.includes(t)||a.includes(t)}).length>this.maxAutocompleteResults}return this.filteredOptions.length>this.maxAutocompleteResults}getStartIconForOption(t){if(t.startIcon)return t.startIcon;if(typeof t.value=="string"&&this.dataType==="phoneCodes")return C(t.value)||void 0}handleSelected(t){if(t.stopImmediatePropagation(),this.clearAriaActiveDescendant(),this.multiselect){if(t.detail.value===I){this.allSelected?this.deselectAllOptions():this.selectAllOptions();return}const e=this.selectedValues,s=this.valueArrayType,i=e.findIndex(a=>{const u=s==="number"?Number(t.detail.value):t.detail.value;return a===u});i>-1?e.splice(i,1):s==="number"?e.push(Number(t.detail.value)):e.push(t.detail.value),e&&this.emitChangeEvent(e)}else this.closeListbox(),this.emitChangeEvent(t.detail.value)}get selectedValues(){return this.multiselect&&Array.isArray(this.value)?this._selectedValues:[]}handleComboboxKeydown(t){if(!this._expanded&&(t.key===n.ENTER||t.key===n.SPACE||t.key===n.DOWN))this.toggleListbox(t.key,!1);else if(this._expanded&&this.listRef.value){if(t.key===n.ENTER||t.key===n.SPACE){if(t.key===n.ENTER&&this.tryAddTagFromKeyboard(t))return;this.listRef.value?.selectFalseFocusedItem()}t.key===n.DOWN&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusNextItem(),this.setAriaActiveDescendant()),t.key===n.UP&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusPreviousItem(),this.setAriaActiveDescendant())}(t.key===n.ESCAPE||t.key===n.TAB)&&this.closeListbox()}toggleListbox(t,e){if(this.disabled||this.readonly)return;if(!e){if(!this._expanded&&this.shouldSuppressEmptyListbox){requestAnimationFrame(()=>{this.comboboxElement?.focus()});return}this._expanded=!this._expanded}const s=this.listboxRef.value;if(this._expanded&&s&&!this.shouldSuppressEmptyListbox)try{s.showPopover()}catch{}else if((!this._expanded||this.shouldSuppressEmptyListbox)&&s)try{s.hidePopover()}catch{}this.assignPosition(),this.listRef.value&&(this.autocomplete&&!this.multiselect&&this.value!==void 0&&this.value!==null&&this.value!==""?this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value):t==n.DOWN||!this.value?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value))),this._expanded&&(this._truncateChips=!1,this.setAriaActiveDescendant(),requestAnimationFrame(()=>{this.comboboxElement?.focus()})),this._expanded||(this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0),this.autocomplete&&(this._searchValue=""))}closeListbox(){this._expanded=!1,this.autocomplete&&(this._searchValue=""),this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0);const t=this.listboxRef.value;if(t)try{t.hidePopover()}catch{}}get endIconMarkup(){return r`<ngc-icon
|
|
152
|
+
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const t=this.listboxMessageRef.value;if(!this.inputRef.value)return;const e=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(t){e.includes(t)||(this.inputRef.value.ariaDescribedByElements=[t,...e]),s.includes(t)||(this.listRef.value.ariaDescribedByElements=[t,...s]);return}this.inputRef.value.ariaDescribedByElements=e.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return v(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return v("No results found. Refine your search.")}get isTagInputMode(){return this.tagInput&&this.multiselect&&this.autocomplete}get shouldSuppressEmptyListbox(){return this._hasSlottedListItems?this.isTagInputMode&&this._searchValue.trim()===""&&this.slottedListItems.length===0:this.isTagInputMode&&this._searchValue.trim()===""&&this.filteredOptions.length===0}get tagInputHintMessage(){const t=this._searchValue.trim();return v(r`Press <kbd class="gator-tag-input-kbd">enter</kbd> or <kbd class="gator-tag-input-kbd">tab</kbd> to add "<strong>${t}</strong>"`)}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let t=this.options??[];return this.dataType==="country"?t=M():this.dataType==="state"&&this.countryCode?t=D(this.countryCode):this.dataType==="naics"?t=k():this.dataType==="phoneCodes"&&(t=F()),this._searchValue?this.dataType==="phoneCodes"?t.filter(s=>B(s,this._searchValue)):[...t.filter(s=>s.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:t}get limitedOptions(){const t=this.filteredOptions,e=this.maxAutocompleteResults??t.length;if(!this.multiselect)return t.filter((i,a)=>a<e||i.value===this.value);const s=new Set(this.selectedValues);return t.filter((i,a)=>a<e||s.has(i.value))}get resultsExceedMax(){if(!this.autocomplete||!this.maxAutocompleteResults)return!1;if(this._hasSlottedListItems){const t=this._searchValue.trim().toLowerCase();return this.slottedListItems.filter(s=>{if(!t)return!0;const i=(s.text||"").toLowerCase(),a=(s.subtitle||"").toLowerCase();return i.includes(t)||a.includes(t)}).length>this.maxAutocompleteResults}return this.filteredOptions.length>this.maxAutocompleteResults}getStartIconForOption(t){if(t.startIcon)return t.startIcon;if(typeof t.value=="string"&&this.dataType==="phoneCodes")return C(t.value)||void 0}handleSelected(t){if(t.stopImmediatePropagation(),this.clearAriaActiveDescendant(),this.multiselect){if(t.detail.value===I){this.allSelected?this.deselectAllOptions():this.selectAllOptions();return}const e=this.selectedValues,s=this.valueArrayType,i=e.findIndex(a=>{const u=s==="number"?Number(t.detail.value):t.detail.value;return a===u});i>-1?e.splice(i,1):s==="number"?e.push(Number(t.detail.value)):e.push(t.detail.value),e&&this.emitChangeEvent(e)}else this.closeListbox(),this.emitChangeEvent(t.detail.value)}get selectedValues(){return this.multiselect&&Array.isArray(this.value)?this._selectedValues:[]}handleComboboxKeydown(t){if(!this._expanded&&(t.key===n.ENTER||t.key===n.SPACE||t.key===n.DOWN))this.toggleListbox(t.key,!1);else if(this._expanded&&this.listRef.value){if(t.key===n.ENTER||t.key===n.SPACE){if(t.key===n.ENTER&&this.tryAddTagFromKeyboard(t))return;const e=this.listRef.value?.selectFalseFocusedItem();t.key===n.ENTER&&e&&(t.preventDefault(),t.stopPropagation())}t.key===n.DOWN&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusNextItem(),this.setAriaActiveDescendant()),t.key===n.UP&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusPreviousItem(),this.setAriaActiveDescendant())}(t.key===n.ESCAPE||t.key===n.TAB)&&this.closeListbox()}toggleListbox(t,e){if(this.disabled||this.readonly)return;if(!e){if(!this._expanded&&this.shouldSuppressEmptyListbox){requestAnimationFrame(()=>{this.comboboxElement?.focus()});return}this._expanded=!this._expanded}const s=this.listboxRef.value;if(this._expanded&&s&&!this.shouldSuppressEmptyListbox)try{s.showPopover()}catch{}else if((!this._expanded||this.shouldSuppressEmptyListbox)&&s)try{s.hidePopover()}catch{}this.assignPosition(),this.listRef.value&&(this.autocomplete&&!this.multiselect&&this.value!==void 0&&this.value!==null&&this.value!==""?this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value):t==n.DOWN||!this.value?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value))),this._expanded&&(this._truncateChips=!1,this.setAriaActiveDescendant(),requestAnimationFrame(()=>{this.comboboxElement?.focus()})),this._expanded||(this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0),this.autocomplete&&(this._searchValue=""))}closeListbox(){this._expanded=!1,this.autocomplete&&(this._searchValue=""),this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0);const t=this.listboxRef.value;if(t)try{t.hidePopover()}catch{}}get endIconMarkup(){return r`<ngc-icon
|
|
153
153
|
class="gator-dropdown-chevron"
|
|
154
154
|
name="${this.renderedEndIcon}"
|
|
155
155
|
?disabled="${this.disabled||this.readonly}"
|
|
@@ -162,4 +162,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
162
162
|
@click="${this.clearValue}"
|
|
163
163
|
?disabled="${this.disabled||this.readonly}"
|
|
164
164
|
></ngc-icon-button>
|
|
165
|
-
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup?.(),this._cleanup=S(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:s,placement:i}=await w(t,this.listboxRef.value,{strategy:"fixed",placement:"bottom-start",middleware:[O()]});let a=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${s+a}px`,width:`${this.listWidth??t.clientWidth}px`})},{animationFrame:!0}))}handleInput(t){t.preventDefault(),t.stopPropagation();let e=t.target;e.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=e.value,this.shouldSuppressEmptyListbox?this._expanded&&this.closeListbox():(this._expanded=!0,this.showListboxPopover(),this.assignPosition()),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:e.value}}))}handleInputKeydown(t){if((t.key===n.DOWN||t.key===n.UP)&&t.preventDefault(),t.key===n.SPACE){t.stopPropagation();return}this.tryAddTagFromKeyboard(t)||t.key===n.BACKSPACE&&this.tryRemoveLastChipFromBackspace(t)}tryRemoveLastChipFromBackspace(t){if(!this.autocomplete||!this.multiselect||this._searchValue.trim()!=="")return;t.preventDefault(),t.stopPropagation(),this._searchValue!==""&&this.clearSearchInput();const e=this.selectedValues||[];e.length>0&&(e.pop(),this.emitChangeEvent(e))}tryAddTagFromKeyboard(t){if(!this.isTagInputMode)return!1;const e=t.key===n.ENTER,s=t.key===n.TAB;return!e&&!s||!this._searchValue.trim()||e&&this._expanded&&this.hasVisibleListOptions&&this.listRef.value&&this.listRef.value.listItems.some(u=>u.falseFocusing)?!1:(t.preventDefault(),t.stopPropagation(),this.addTagFromInput(),this.inputRef.value?.focus(),!0)}showListboxPopover(){const t=this.listboxRef.value;if(t)try{t.showPopover()}catch{}}get valueArrayType(){return this.selectedValues.length>0?typeof this.selectedValues[0]=="number"?"number":"string":this._hasSlottedListItems&&this.slottedListItems.length>0?typeof this.slottedListItems[0].value=="number"?"number":"string":this.options?.length&&typeof this.options[0].value=="number"?"number":"string"}addTagFromInput(){const t=this._searchValue.trim();if(!t||!this.isTagInputMode)return;const e=[...this.selectedValues],s=this.valueArrayType,i=s==="number"?Number(t):t;if(!(s==="number"&&Number.isNaN(i))){if(e.some(a=>a===i)){this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox();return}e.push(i),this.emitChangeEvent(e),this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox()}}clearSearchInput(){this._searchValue="",this.inputRef.value&&(this.inputRef.value.value="")}emitChangeEvent(t){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(t)?[...t]:t}}))}};l.shadowRootOptions={...A.shadowRootOptions,delegatesFocus:!0};l.styles=[...K(l,l,"styles"),P(N)];o([h({type:Boolean})],l.prototype,"multiselect",2);o([h({type:Array})],l.prototype,"options",2);o([h({type:Boolean})],l.prototype,"autocomplete",2);o([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);o([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);o([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);o([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);o([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);o([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);o([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);o([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);o([h({type:Boolean,attribute:"hide-clear"})],l.prototype,"hideClear",2);o([h({type:Boolean})],l.prototype,"loading",2);o([h({type:Boolean,attribute:"tag-input"})],l.prototype,"tagInput",2);o([d()],l.prototype,"_activeDescendant",2);o([d()],l.prototype,"_expanded",2);o([d()],l.prototype,"_searchValue",2);o([d()],l.prototype,"_focused",2);o([d()],l.prototype,"_hovered",2);o([d()],l.prototype,"_visibleChipCount",2);o([d()],l.prototype,"_showOverflowChip",2);o([d()],l.prototype,"_truncateChips",2);o([d()],l.prototype,"_hasSlottedListItems",2);o([d()],l.prototype,"_selectedValues",2);l=o([R("ngc-input-dropdown")
|
|
165
|
+
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup?.(),this._cleanup=S(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:s,placement:i}=await w(t,this.listboxRef.value,{strategy:"fixed",placement:"bottom-start",middleware:[O()]});let a=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${s+a}px`,width:`${this.listWidth??t.clientWidth}px`})},{animationFrame:!0}))}handleInput(t){t.preventDefault(),t.stopPropagation();let e=t.target;e.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=e.value,this.shouldSuppressEmptyListbox?this._expanded&&this.closeListbox():(this._expanded=!0,this.showListboxPopover(),this.assignPosition()),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:e.value}}))}handleInputKeydown(t){if((t.key===n.DOWN||t.key===n.UP)&&t.preventDefault(),t.key===n.SPACE){t.stopPropagation();return}this.tryAddTagFromKeyboard(t)||t.key===n.BACKSPACE&&this.tryRemoveLastChipFromBackspace(t)}tryRemoveLastChipFromBackspace(t){if(!this.autocomplete||!this.multiselect||this._searchValue.trim()!=="")return;t.preventDefault(),t.stopPropagation(),this._searchValue!==""&&this.clearSearchInput();const e=this.selectedValues||[];e.length>0&&(e.pop(),this.emitChangeEvent(e))}tryAddTagFromKeyboard(t){if(!this.isTagInputMode)return!1;const e=t.key===n.ENTER,s=t.key===n.TAB;return!e&&!s||!this._searchValue.trim()||e&&this._expanded&&this.hasVisibleListOptions&&this.listRef.value&&this.listRef.value.listItems.some(u=>u.falseFocusing)?!1:(t.preventDefault(),t.stopPropagation(),this.addTagFromInput(),this.inputRef.value?.focus(),!0)}showListboxPopover(){const t=this.listboxRef.value;if(t)try{t.showPopover()}catch{}}get valueArrayType(){return this.selectedValues.length>0?typeof this.selectedValues[0]=="number"?"number":"string":this._hasSlottedListItems&&this.slottedListItems.length>0?typeof this.slottedListItems[0].value=="number"?"number":"string":this.options?.length&&typeof this.options[0].value=="number"?"number":"string"}addTagFromInput(){const t=this._searchValue.trim();if(!t||!this.isTagInputMode)return;const e=[...this.selectedValues],s=this.valueArrayType,i=s==="number"?Number(t):t;if(!(s==="number"&&Number.isNaN(i))){if(e.some(a=>a===i)){this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox();return}e.push(i),this.emitChangeEvent(e),this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox()}}clearSearchInput(){this._searchValue="",this.inputRef.value&&(this.inputRef.value.value="")}emitChangeEvent(t){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(t)?[...t]:t}}))}};l.shadowRootOptions={...A.shadowRootOptions,delegatesFocus:!0};l.styles=[...K(l,l,"styles"),P(N)];o([h({type:Boolean})],l.prototype,"multiselect",2);o([h({type:Array})],l.prototype,"options",2);o([h({type:Boolean})],l.prototype,"autocomplete",2);o([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);o([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);o([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);o([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);o([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);o([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);o([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);o([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);o([h({type:Boolean,attribute:"hide-clear"})],l.prototype,"hideClear",2);o([h({type:Boolean})],l.prototype,"loading",2);o([h({type:Boolean,attribute:"tag-input"})],l.prototype,"tagInput",2);o([d()],l.prototype,"_activeDescendant",2);o([d()],l.prototype,"_expanded",2);o([d()],l.prototype,"_searchValue",2);o([d()],l.prototype,"_focused",2);o([d()],l.prototype,"_hovered",2);o([d()],l.prototype,"_visibleChipCount",2);o([d()],l.prototype,"_showOverflowChip",2);o([d()],l.prototype,"_truncateChips",2);o([d()],l.prototype,"_hasSlottedListItems",2);o([d()],l.prototype,"_selectedValues",2);l=o([R("ngc-input-dropdown"),$()],l);export{I as NGC_DROPDOWN_SELECT_ALL_VALUE,l as NgcInputDropdown};
|
|
@@ -1,10 +1,10 @@
|
|
|
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 m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}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{createRef 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 m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}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{createRef as h,ref as p}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import g from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{NgcInputBase as b}from"../../base/input-base.gator.js";import"../dropdown/input-dropdown.gator.js";import"../input-text/input-text.gator.js";import"../input-label/input-label.gator.js";import{isValidPhoneNumber as v}from"../../../../node_modules/.pnpm/libphonenumber-js@1.13.8/node_modules/libphonenumber-js/min/exports/isValidPhoneNumber.js";import{parsePhoneNumber as d}from"../../../../node_modules/.pnpm/libphonenumber-js@1.13.8/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as y}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var C=Object.defineProperty,P=Object.getOwnPropertyDescriptor,V=Object.getPrototypeOf,$=Reflect.get,a=(t,n,e,i)=>{for(var r=i>1?void 0:i?P(n,e):n,u=t.length-1,s;u>=0;u--)(s=t[u])&&(r=(i?s(n,e,r):s(r))||r);return i&&r&&C(n,e,r),r},N=(t,n,e)=>$(V(t),e,n);let o=class extends b{constructor(){super(...arguments),this.inputContainer=h(),this.dropdownContainer=h()}get phoneRegionIso(){if(this.countryCodeValue!=null&&this.countryCodeValue!=="")return this.countryCodeValue;if(this.countryCodeValue===null||this.countryCodeValue==="")return;const t=this.defaultCountry?.trim();return t?t.toUpperCase():void 0}render(){return l`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
${this.label?this.labelMarkup:null}
|
|
4
|
-
<div class="gator-phone-input-container" ${
|
|
4
|
+
<div class="gator-phone-input-container" ${p(this.inputContainer)}>
|
|
5
5
|
<div class="gator-phone-input-country-container">
|
|
6
6
|
<ngc-input-dropdown
|
|
7
|
-
${
|
|
7
|
+
${p(this.dropdownContainer)}
|
|
8
8
|
.value=${this.phoneRegionIso}
|
|
9
9
|
id="country-${this.id}"
|
|
10
10
|
?disabled="${this.disabled}"
|
|
@@ -24,6 +24,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
24
24
|
type="text"
|
|
25
25
|
id="phone-${this.id}"
|
|
26
26
|
inputmode="tel"
|
|
27
|
+
@input="${this.handlePhoneInput}"
|
|
27
28
|
@change="${this.handlePhoneInput}"
|
|
28
29
|
?readonly="${this.readonly}"
|
|
29
30
|
>
|
|
@@ -33,7 +34,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
33
34
|
</div>
|
|
34
35
|
${this.bottomText}
|
|
35
36
|
</div>
|
|
36
|
-
`}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(
|
|
37
|
+
`}updated(t){t.has("value")&&(this.lastRawPhoneValue=void 0),this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}get currentPhoneValue(){return this.lastRawPhoneValue??String(this.value??"")}handleSelected(t){const n=t.detail.value;n===""||n===null||n===void 0?this.countryCodeValue=null:this.countryCodeValue=typeof n=="string"?n.toUpperCase():String(n);const e=this.currentPhoneValue;e.trim()!==""&&this.emitPhoneChange(e)}isValidPhoneNumberForCurrentContext(t){if(t==="")return!0;const n=this.phoneRegionIso;if(n)return v(t,n);const e=d(t);return e?e.isValid():!0}buildChangeDetail(t){const n=this.isValidPhoneNumberForCurrentContext(t.trim()),e=d(t,this.phoneRegionIso);return e?(e.country&&(this.countryCodeValue=e.country),this.phoneNumberValue=e.nationalNumber,{value:t,countryCode:e.countryCallingCode,country:e.country,phoneNumber:e.nationalNumber,formattedPhoneNumber:e.formatInternational(),isValidPhoneNumber:n}):{value:t,isValidPhoneNumber:n}}emitPhoneChange(t){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.buildChangeDetail(t)}))}handlePhoneInput(t){t.preventDefault(),t.stopPropagation(),this.lastRawPhoneValue=String(t.detail.value??""),this.emitPhoneChange(this.lastRawPhoneValue)}get slotLabelMarkup(){return l`
|
|
37
38
|
<ngc-input-label
|
|
38
39
|
slot="label"
|
|
39
40
|
hide-label
|
|
@@ -41,4 +42,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
41
42
|
.required="${this.required}"
|
|
42
43
|
>
|
|
43
44
|
${this.label}
|
|
44
|
-
</ngc-input-label>`}};
|
|
45
|
+
</ngc-input-label>`}};o.styles=[...N(o,o,"styles"),y(g)];a([c()],o.prototype,"countryCodeValue",2);a([c()],o.prototype,"phoneNumberValue",2);a([m({type:String,attribute:"default-country"})],o.prototype,"defaultCountry",2);o=a([f("ngc-input-phone")],o);export{o as NgcInputPhone};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as u}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as I}from"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as n}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{property as r}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}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"../list-item/list-item.gator.js";import{NgcDivider as v}from"../../../divider/gator/divider.gator.js";import{KEY_CONSTANTS as d}from"../../../../consts/key-constants.js";import{NgcComponent as b}from"../../../../utils/components/ngc-component.js";var p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,a=(t,e,i,l)=>{for(var o=l>1?void 0:l?y(e,i):e,h=t.length-1,m;h>=0;h--)(m=t[h])&&(o=(l?m(e,i,o):m(o))||o);return l&&o&&p(e,i,o),o};let s=class extends b{constructor(){super(...arguments),this.id="",this.density="default",this.selectable=!1,this.multiselect=!1,this.ariaLabelledBy="",this.ariaLabelledByElements=null,this.ariaDescribedByElements=null,this.title="",this.fauxFocus=!1,this.hideCheckmarks=!1,this.ariaLabel=null,this.role=null,this._selectedListItem=null,this._activeIndex=0,this._totalListItems=0,this._listItemsWithEventListeners=new Set}updated(t){if(t.has("density")&&this.assignChildNodeDensity(),(t.has("selectable")||t.has("multiselect"))&&this.updateSlottedItems(),t.has("hideCheckmarks")&&this.assignChildNodeHideCheckmark(),t.has("ariaLabelledByElements")&&this.ariaLabelledByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaLabelledByElements=this.ariaLabelledByElements)}if(t.has("ariaDescribedByElements")&&this.ariaDescribedByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaDescribedByElements=this.ariaDescribedByElements)}t.has("_activeIndex")&&t.get("_activeIndex")!==this._activeIndex&&this._setFauxFocusToCurrentItem()}render(){return u`
|
|
2
2
|
<div
|
|
3
3
|
class="gator-list"
|
|
4
4
|
role="${this.listRole}"
|
|
@@ -10,4 +10,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
10
10
|
>
|
|
11
11
|
<slot @slotchange="${this.handleSlotChanged}"></slot>
|
|
12
12
|
</div>
|
|
13
|
-
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,e.variant==="header"?(e.selectable=!1,e.setAttribute("role","presentation")):this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",i=>{this._selectedListItem=i.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0),this.setCurrentListItem()}),this._listItemsWithEventListeners.add(e));this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}}isNavigableListItem(t){return!!t&&!t.isNonInteractive&&!t.hidden}moveActiveIndexToNavigableItem(t){if(!this.listItems?.length)return;if(t===0){if(this.isNavigableListItem(this.listItems[this._activeIndex]))return;for(let l=this._activeIndex;l>=0;l--)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}for(let l=this._activeIndex+1;l<this.listItems.length;l++)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}return}const e=this.listItems.length;let i=this._activeIndex;for(let l=0;l<e;l++)if(i=(i+t+e)%e,this.isNavigableListItem(this.listItems[i])){this._activeIndex=i;return}}setFalseFocusToValue(t){if(this.listItems){for(const[e,i]of this.listItems.entries())if(i.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1,this.moveActiveIndexToNavigableItem(0)),this._activeIndex>=this._totalListItems&&(this._activeIndex=0,this.moveActiveIndexToNavigableItem(0)),this.isNavigableListItem(this.listItems[this._activeIndex])||this.moveActiveIndexToNavigableItem(1);for(const[e,i]of this.listItems.entries())i.currentListItem=e===this._activeIndex&&this.isNavigableListItem(i),i.currentListItem&&(t=i);return t}_setFauxFocusToCurrentItem(){this.listItems?.forEach(t=>{t.currentListItem?this.fauxFocus?t.falseFocus():t.focus():this.fauxFocus&&t.removeFalseFocus()})}falseFocusFirstItem(){return this._activeIndex=0,this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}falseFocusPreviousItem(){return this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem()}falseFocusNextItem(){return this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem()}selectFalseFocusedItem(){if(this.listItems)for(const
|
|
13
|
+
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,e.variant==="header"?(e.selectable=!1,e.setAttribute("role","presentation")):this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",i=>{this._selectedListItem=i.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0),this.setCurrentListItem()}),this._listItemsWithEventListeners.add(e));this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}}isNavigableListItem(t){return!!t&&!t.isNonInteractive&&!t.hidden}moveActiveIndexToNavigableItem(t){if(!this.listItems?.length)return;if(t===0){if(this.isNavigableListItem(this.listItems[this._activeIndex]))return;for(let l=this._activeIndex;l>=0;l--)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}for(let l=this._activeIndex+1;l<this.listItems.length;l++)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}return}const e=this.listItems.length;let i=this._activeIndex;for(let l=0;l<e;l++)if(i=(i+t+e)%e,this.isNavigableListItem(this.listItems[i])){this._activeIndex=i;return}}setFalseFocusToValue(t){if(this.listItems){for(const[e,i]of this.listItems.entries())if(i.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1,this.moveActiveIndexToNavigableItem(0)),this._activeIndex>=this._totalListItems&&(this._activeIndex=0,this.moveActiveIndexToNavigableItem(0)),this.isNavigableListItem(this.listItems[this._activeIndex])||this.moveActiveIndexToNavigableItem(1);for(const[e,i]of this.listItems.entries())i.currentListItem=e===this._activeIndex&&this.isNavigableListItem(i),i.currentListItem&&(t=i);return t}_setFauxFocusToCurrentItem(){this.listItems?.forEach(t=>{t.currentListItem?this.fauxFocus?t.falseFocus():t.focus():this.fauxFocus&&t.removeFalseFocus()})}falseFocusFirstItem(){return this._activeIndex=0,this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}falseFocusPreviousItem(){return this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem()}falseFocusNextItem(){return this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem()}selectFalseFocusedItem(){if(!this.listItems)return!1;let t=!1;for(const e of this.listItems)e.falseFocusing&&!e.isNonInteractive&&(e.selectItem(),t=!0);return t}unselectAllListItems(){if(this.listItems)for(const t of this.listItems)t.selected=!1}handleKeyUp(t){switch(t.key){case d.UP:this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem(),t.preventDefault();break;case d.DOWN:this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem(),t.preventDefault();break}}get nodes(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})}get listItems(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0}).filter(t=>t.nodeName==="NGC-LIST-ITEM")}assignChildNodeDensity(){if(this.nodes)for(const t of this.nodes)(t.nodeName=="NGC-LIST-ITEM"||t.nodeName=="NGC-DIVIDER")&&((t||v).density=this.density)}assignChildNodeHideCheckmark(){if(this.listItems)for(const t of this.listItems)t.hasAttribute("hide-checkmark")||(t.hideCheckmark=this.hideCheckmarks)}};s.shadowRootOptions={...I.shadowRootOptions,mode:"open"};a([r()],s.prototype,"id",2);a([r()],s.prototype,"density",2);a([r({type:Boolean})],s.prototype,"selectable",2);a([r({type:Boolean})],s.prototype,"multiselect",2);a([r({attribute:"aria-labelledby"})],s.prototype,"ariaLabelledBy",2);a([r({type:Array,attribute:"aria-labelled-by-elements"})],s.prototype,"ariaLabelledByElements",2);a([r({type:Array,attribute:"aria-described-by-elements"})],s.prototype,"ariaDescribedByElements",2);a([r({attribute:"aria-describedby"})],s.prototype,"ariaDescribedby",2);a([r()],s.prototype,"title",2);a([r({type:Boolean,attribute:"faux-focus"})],s.prototype,"fauxFocus",2);a([r({type:Boolean,attribute:"hide-checkmarks"})],s.prototype,"hideCheckmarks",2);a([r({attribute:"aria-label"})],s.prototype,"ariaLabel",2);a([r({type:String})],s.prototype,"role",2);a([c()],s.prototype,"_selectedListItem",2);a([c()],s.prototype,"_activeIndex",2);s=a([f("ngc-list")],s);export{s as NgcList};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a,nothing as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as d}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 g}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/popover/gator/popover.gator.scss.js";import b from"../../../packages/web-components/src/components/popover/popover.scss.js";import _ from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import y from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as P,computePosition as E,autoPlacement as O}from"../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as p}from"../../../consts/key-constants.js";import{msg as k}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{unsafeCSS as l}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var w=Object.getOwnPropertyDescriptor,$=(t,e,i,
|
|
1
|
+
import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a,nothing as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as d}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 g}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/popover/gator/popover.gator.scss.js";import b from"../../../packages/web-components/src/components/popover/popover.scss.js";import _ from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import y from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as P,computePosition as E,autoPlacement as O}from"../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as p}from"../../../consts/key-constants.js";import{msg as k}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{unsafeCSS as l}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var w=Object.getOwnPropertyDescriptor,$=(t,e,i,r)=>{for(var o=r>1?void 0:r?w(e,i):e,s=t.length-1,n;s>=0;s--)(n=t[s])&&(o=n(o)||o);return o};let c=class extends f{render(){return a`
|
|
2
2
|
<div
|
|
3
3
|
${m(this._popoverRef)}
|
|
4
4
|
id="${this.popoverId}"
|
|
@@ -46,4 +46,4 @@ import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@l
|
|
|
46
46
|
${this.errorText?a`<ngc-help-text icon error>${this.errorText}</ngc-help-text>`:u}
|
|
47
47
|
<slot name="footer"></slot>
|
|
48
48
|
</div>
|
|
49
|
-
`}get _computedPlacement(){return this.placement||this._placement}get _xPositionOffset(){return this.hideTippet?this.xOffset:this._computedPlacement.includes("left")?-12+this.xOffset:this._computedPlacement.includes("right")?12+this.xOffset:0}get _yPositionOffset(){return this.hideTippet?this.yOffset:this._computedPlacement.includes("top")?-12+this.yOffset:this._computedPlacement.includes("bottom")?12+this.yOffset:0}get _nubbinPositionClass(){return this.hideTippet?"":{"top-start":"gator-popover-nubbin_bottom-start",top:"gator-popover-nubbin_bottom-center","top-end":"gator-popover-nubbin_bottom-end","right-start":"gator-popover-nubbin_left-start",right:"gator-popover-nubbin_left-center","right-end":"gator-popover-nubbin_left-end","bottom-start":"gator-popover-nubbin_top-start",bottom:"gator-popover-nubbin_top-center","bottom-end":"gator-popover-nubbin_top-end","left-start":"gator-popover-nubbin_right-start",left:"gator-popover-nubbin_right-center","left-end":"gator-popover-nubbin_right-end"}[this._computedPlacement]}connectedCallback(){super.connectedCallback(),this.addTrackedEventListener(this.referenceElement,"keydown",t=>{(t.key===p.SPACE||t.key===p.ENTER)&&(t.preventDefault(),t.stopPropagation(),this.showPopover(!0))})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot?.querySelector('slot[name="footer"]'),e=this.shadowRoot?.querySelector(".gator-popover-footer"),i=!!t&&t.assignedNodes().length>0,
|
|
49
|
+
`}get _computedPlacement(){return this.placement||this._placement}get _xPositionOffset(){return this.hideTippet?this.xOffset:this._computedPlacement.includes("left")?-12+this.xOffset:this._computedPlacement.includes("right")?12+this.xOffset:0}get _yPositionOffset(){return this.hideTippet?this.yOffset:this._computedPlacement.includes("top")?-12+this.yOffset:this._computedPlacement.includes("bottom")?12+this.yOffset:0}get _nubbinPositionClass(){return this.hideTippet?"":{"top-start":"gator-popover-nubbin_bottom-start",top:"gator-popover-nubbin_bottom-center","top-end":"gator-popover-nubbin_bottom-end","right-start":"gator-popover-nubbin_left-start",right:"gator-popover-nubbin_left-center","right-end":"gator-popover-nubbin_left-end","bottom-start":"gator-popover-nubbin_top-start",bottom:"gator-popover-nubbin_top-center","bottom-end":"gator-popover-nubbin_top-end","left-start":"gator-popover-nubbin_right-start",left:"gator-popover-nubbin_right-center","left-end":"gator-popover-nubbin_right-end"}[this._computedPlacement]}connectedCallback(){super.connectedCallback(),this.addTrackedEventListener(this.referenceElement,"keydown",t=>{(t.key===p.SPACE||t.key===p.ENTER)&&(t.preventDefault(),t.stopPropagation(),this.showPopover(!0))})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot?.querySelector('slot[name="footer"]'),e=this.shadowRoot?.querySelector(".gator-popover-footer"),i=!!t&&t.assignedNodes().length>0,r=!!this.errorText;e&&(e.style.display=i||r?"flex":"none")}updated(t){super.updated(t),t.has("placement")&&(this._cleanup&&this._cleanup(),this.assignPosition(),this.requestUpdate())}assignPosition(){const t=this.referenceElement;if(!this._popoverRef||!this._popoverRef.value||!t)return;const e={placement:this.placement},i={middleware:[O({allowedPlacements:["top-start","top","top-end","right-start","right","right-end","bottom-start","bottom","bottom-end","left-start","left","left-end"],padding:5})]},o=!!this.placement?e:i;this._cleanup=P(t,this._popoverRef.value,async()=>{if(!this._popoverRef||!this._popoverRef.value||!t)return;const{x:s,y:n,placement:h}=await E(t,this._popoverRef.value,o);this._placement!==h&&(this._placement=h,this.requestUpdate()),this._popoverRef.value&&Object.assign(this._popoverRef.value.style,{left:`${s+this._xPositionOffset}px`,top:`${n+this._yPositionOffset}px`})})}showPopover(t=!1){super.showPopover(t),this.addEventListener("keydown",this._handleKeyDown)}hidePopover(){super.hidePopover(),this.shadowRoot?.querySelector("#gator-popover-close")?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible")}_handleKeyDown(t){const i=(t.key===p.SPACE||t.key===p.ENTER)&&t.target?.id==="gator-popover-close";if((t.key===p.ESCAPE||i)&&(t.preventDefault(),this.hidePopover(),this.referenceElement.focus()),t.key===p.TAB){const r=this._getKeyboardFocusableElements(),o=this.shadowRoot?.activeElement??document.activeElement,s=r[0],n=r[r.length-1];o?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible"),t.shiftKey?o===s&&(t.preventDefault(),t.stopPropagation(),n.focus()):o===n&&(t.preventDefault(),t.stopPropagation(),s.focus())}}};c.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0,mode:"open"};c.styles=[l(v),l(b),l(_),l(y)];c=$([g("ngc-popover")],c);export{c as NgcPopover};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Withdrawal",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Withdrawal",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Withdrawal",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Payment",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Withdrawal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}function n(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",status:"Active",initials:"AL",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/1",longText:"Account details",tooltipContent:"Account in good standing",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/2",longText:"Account details",tooltipContent:"Pending review",account:"12225144"},{isTableHeader:!0,headerText:"Some Category"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",status:"Inactive",initials:"SA",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/3",longText:"Account details",tooltipContent:"Requires attention",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",status:"Active",initials:"MM",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/4",longText:"Account details",tooltipContent:"In good standing",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/5",longText:"Account details",tooltipContent:"Pending",account:"02532136"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/6",longText:"Account details",tooltipContent:"Needs review",account:"26728093"},{isTableHeader:!0,headerText:"Some Other Category"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Active",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/7",longText:"Account details",tooltipContent:"Active",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Pending",initials:"CC",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/8",longText:"Account details",tooltipContent:"Pending",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/9",longText:"Account details",tooltipContent:"nCino account",account:"10052192"}]}export{t as getTestData,n as getTestDataWithHeader};
|
|
1
|
+
function t(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Withdrawal",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Withdrawal",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Withdrawal",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Payment",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Withdrawal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}function n(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",status:"Active",initials:"AL",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/1",longText:"Account details",tooltipContent:"Account in good standing",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/2",longText:"Account details",tooltipContent:"Pending review",account:"12225144"},{isTableHeader:!0,headerText:"Some Category"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",status:"Inactive",initials:"SA",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/3",longText:"Account details",tooltipContent:"Requires attention",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",status:"Active",initials:"MM",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/4",longText:"Account details",tooltipContent:"In good standing",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/5",longText:"Account details",tooltipContent:"Pending",account:"02532136"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/6",longText:"Account details",tooltipContent:"Needs review",account:"26728093"},{isTableHeader:!0,headerText:"Some Other Category"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Active",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/7",longText:"Account details",tooltipContent:"Active",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Pending",initials:"CC",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/8",longText:"Account details",tooltipContent:"Pending",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/9",longText:"Account details",tooltipContent:"nCino account",account:"10052192"}]}function e(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Cash",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Transfer",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Refund",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Fee",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Interest",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Wire Transfer",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Direct Deposit",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Reversal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Adjustment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}export{e as getSortableFilterableTestData,t as getTestData,n as getTestDataWithHeader};
|
|
@@ -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
|
|
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 A 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 E=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&&E(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}"
|
|
@@ -20,23 +20,27 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
20
20
|
<ngc-input-search
|
|
21
21
|
placeholder="${u("Search")}"
|
|
22
22
|
.value="${this._filterSearchQuery[e.field]??""}"
|
|
23
|
-
@input="${
|
|
23
|
+
@input="${p=>this.handleFilterSearchInput(p,e)}"
|
|
24
24
|
class="gator-table-filter-popover-search"
|
|
25
25
|
></ngc-input-search>
|
|
26
26
|
`:f}
|
|
27
|
-
${
|
|
27
|
+
${d?o`
|
|
28
28
|
<ngc-checkbox-group
|
|
29
|
-
.options="${
|
|
29
|
+
.options="${c}"
|
|
30
30
|
.value="${b}"
|
|
31
31
|
aria-label="${u("Filter by")} ${e.name}"
|
|
32
|
-
@change="${
|
|
32
|
+
@change="${p=>this.handleFilterCheckboxGroupChange(p,e)}"
|
|
33
|
+
class="gator-table-filter-options"
|
|
34
|
+
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
33
35
|
></ngc-checkbox-group>
|
|
34
36
|
`:o`
|
|
35
37
|
<ngc-radio-group
|
|
36
|
-
.options="${
|
|
37
|
-
.value="${
|
|
38
|
+
.options="${c}"
|
|
39
|
+
.value="${m}"
|
|
38
40
|
aria-label="${u("Filter by")} ${e.name}"
|
|
39
|
-
@change="${
|
|
41
|
+
@change="${p=>this.handleFilterRadioGroupChange(p,e)}"
|
|
42
|
+
class="gator-table-filter-options"
|
|
43
|
+
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
40
44
|
></ngc-radio-group>
|
|
41
45
|
`}
|
|
42
46
|
</div>
|
|
@@ -46,7 +50,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
46
50
|
</div>
|
|
47
51
|
</ngc-popover>
|
|
48
52
|
</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))}getColumnCellStyle(e){const t=e.width??(e.cellType==="icon-button"?"5%":void 0),l=e.minWidth,i=[];if(t&&i.push(`width: ${t}`),l&&i.push(`min-width: ${l}`),e.cellConfig?.truncate){const s=t??l;s&&i.push(`max-width: ${s}`)}return i.length===0?"":(i.push("box-sizing: border-box"),i.join("; "))}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){
|
|
53
|
+
`},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){if(super.updated(e),e.has("data")&&queueMicrotask(()=>{this.selectedRows=this.data.filter(t=>t.selected&&!t.isTableHeader)}),e.has("columns")||e.has("filterValues")||e.has("skeleton")){this._filterChipResizeObserver.disconnect();const t=this.renderRoot.querySelector(".gator-table-filter-chips");t&&(this._filterChipResizeObserver.observe(t),requestAnimationFrame(()=>this.calculateFilterChipOverflow()))}}disconnectedCallback(){this._filterChipResizeObserver.disconnect(),super.disconnectedCallback()}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),l=e.minWidth,i=[];if(t&&i.push(`width: ${t}`),l&&i.push(`min-width: ${l}`),e.cellConfig?.truncate){const s=t??l;s&&i.push(`max-width: ${s}`)}return i.length===0?"":(i.push("box-sizing: border-box"),i.join("; "))}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){let l=this.getActiveFilterChips();const i=l.length>0,s=l.slice(this._visibleFilterChipCount);l=l.slice(0,this._visibleFilterChipCount);const r=this.emptyStateTitle||u("No results found"),a=i?this.emptyStateBodyFiltered||u("No data matches the current filters."):this.emptyStateBody||u("Start by adding some data."),d=this.emptyStateIllustration||"empty-box";return o`
|
|
50
54
|
<ngc-table-bulk-controls
|
|
51
55
|
?visible="${this.showBulkControls}"
|
|
52
56
|
.selectedRows="${this.selectedRows.length}"
|
|
@@ -56,14 +60,36 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
56
60
|
</ngc-table-bulk-controls>
|
|
57
61
|
${!this.skeleton&&i?o`
|
|
58
62
|
<div class="gator-table-filter-chips" role="region" aria-label="${u("Active filters")}">
|
|
59
|
-
${l.map(({column:
|
|
63
|
+
${l.map(({column:n,value:c,label:b})=>o`
|
|
60
64
|
<ngc-chip
|
|
65
|
+
class="gator-table-filter-chip"
|
|
61
66
|
dismissible
|
|
62
67
|
size="small"
|
|
63
|
-
@dismiss="${()=>this.handleFilterChipDismiss(c
|
|
64
|
-
>${
|
|
68
|
+
@dismiss="${()=>this.handleFilterChipDismiss(n,c)}"
|
|
69
|
+
>${n.name}: ${b}</ngc-chip>
|
|
65
70
|
`)}
|
|
66
|
-
${
|
|
71
|
+
${s.length>0?o`
|
|
72
|
+
<ngc-chip id="filter-chips-overflow-trigger" size="small" end-icon="sort-arrow-solid-down">+${s.length}</ngc-chip>
|
|
73
|
+
<ngc-popover
|
|
74
|
+
reference-id="filter-chips-overflow-trigger"
|
|
75
|
+
class="gator-table-filter-chips-popover"
|
|
76
|
+
size="small"
|
|
77
|
+
placement="bottom-start"
|
|
78
|
+
y-offset="8"
|
|
79
|
+
.hideTippet=${!0}
|
|
80
|
+
>
|
|
81
|
+
<div slot="content" class="gator-table-filter-chips-popover-content">
|
|
82
|
+
${s.map(({column:n,value:c,label:b})=>o`
|
|
83
|
+
<ngc-chip
|
|
84
|
+
dismissible
|
|
85
|
+
size="small"
|
|
86
|
+
@dismiss="${()=>this.handleFilterChipDismiss(n,c)}"
|
|
87
|
+
>${n.name}: ${b}</ngc-chip>
|
|
88
|
+
`)}
|
|
89
|
+
</div>
|
|
90
|
+
</ngc-popover>
|
|
91
|
+
`:f}
|
|
92
|
+
${l.length+s.length>1?o`
|
|
67
93
|
<button
|
|
68
94
|
type="button"
|
|
69
95
|
class="gator-table-filter-chips-clear-all"
|
|
@@ -76,9 +102,9 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
76
102
|
<ngc-card class="gator-table-empty-state-card">
|
|
77
103
|
<div class="gator-table-empty-state">
|
|
78
104
|
<ngc-illustration
|
|
79
|
-
name="${
|
|
80
|
-
title-text="${
|
|
81
|
-
.bodyText="${
|
|
105
|
+
name="${d}"
|
|
106
|
+
title-text="${r}"
|
|
107
|
+
.bodyText="${a}"
|
|
82
108
|
size="medium"
|
|
83
109
|
>${this.renderEmptyStateIllustrationActions(i)}</ngc-illustration>
|
|
84
110
|
</div>
|
|
@@ -105,7 +131,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
105
131
|
@itemsperpagechanged="${this.handleItemsPerPageChanged}"
|
|
106
132
|
></ngc-table-pagination>
|
|
107
133
|
`:f}
|
|
108
|
-
`}renderEmptyStateIllustrationActions(e){return e?o`
|
|
134
|
+
`}calculateFilterChipOverflow(){const e=this.renderRoot.querySelector(".gator-table-filter-chips");if(!e)return;const t=[...e.querySelectorAll(".gator-table-filter-chip, .gator-table-filter-chips-popover-content ngc-chip")].slice(0,k),l=parseFloat(getComputedStyle(e).columnGap)||0,i=e.querySelector(".gator-table-filter-chips-clear-all")?.getBoundingClientRect().width??0,s=t.reduce((n,c)=>n+c.getBoundingClientRect().width+l,i);let r=V+i+l*2;const a=t.findIndex(n=>(r+=n.getBoundingClientRect().width+l)>e.clientWidth),d=this.getActiveFilterChips().length<=k&&s<=e.clientWidth?t.length:Math.max(1,a<0?t.length:a);this._visibleFilterChipCount!==d&&(this._visibleFilterChipCount=d)}renderEmptyStateIllustrationActions(e){return e?o`
|
|
109
135
|
<ngc-button @click="${this.handleClearAllFilters}">${u("Clear filters")}</ngc-button>
|
|
110
136
|
`:o`<slot name="empty-state-actions"></slot>`}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`
|
|
111
137
|
<th id="col-select" scope="col">
|
|
@@ -127,7 +153,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
127
153
|
height="24"
|
|
128
154
|
rounded
|
|
129
155
|
></ngc-skeleton-loader>
|
|
130
|
-
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,
|
|
156
|
+
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,d=r?this.getSortAriaSort(e):void 0,n=r&&this.effectiveSortField===e.field,c=a&&this.hasActiveFilter(e),b=r||a,m=r?o`
|
|
131
157
|
<div
|
|
132
158
|
class="gator-table-header-sort-trigger"
|
|
133
159
|
role="button"
|
|
@@ -141,32 +167,32 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
141
167
|
<ngc-icon name="${this.getSortIcon(e)}" class="gator-table-sort-icon" size="x-small"></ngc-icon>
|
|
142
168
|
</span>
|
|
143
169
|
</div>
|
|
144
|
-
`:o`<span class="gator-table-header-label">${e.name}</span>`,
|
|
170
|
+
`:o`<span class="gator-table-header-label">${e.name}</span>`,p=!!(a&&(this._hoveredHeaderColumnField===e.field||c||this.isFilterPopoverOpen(e))),S=l?i:o`
|
|
145
171
|
<div class="gator-table-header-cell-inner">
|
|
146
|
-
${
|
|
147
|
-
${a?this.renderHeaderFilterPopover(e,
|
|
172
|
+
${m}
|
|
173
|
+
${a?this.renderHeaderFilterPopover(e,p,t):f}
|
|
148
174
|
</div>
|
|
149
|
-
`,
|
|
175
|
+
`,F=[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`
|
|
150
176
|
<th
|
|
151
177
|
id="${s}"
|
|
152
178
|
scope="col"
|
|
153
|
-
aria-sort="${
|
|
154
|
-
class="${
|
|
179
|
+
aria-sort="${d??f}"
|
|
180
|
+
class="${F}"
|
|
155
181
|
style="${w||f}"
|
|
156
182
|
@mouseenter="${a||r?()=>this._hoveredHeaderColumnField=e.field:f}"
|
|
157
183
|
@mouseleave="${a||r?()=>this._hoveredHeaderColumnField=null:f}"
|
|
158
184
|
>
|
|
159
|
-
${
|
|
185
|
+
${S}
|
|
160
186
|
</th>
|
|
161
|
-
`}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
|
|
187
|
+
`}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`
|
|
162
188
|
${l.map(s=>this.getCategoryBody(s,e))}
|
|
163
|
-
`}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(
|
|
189
|
+
`}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`
|
|
164
190
|
<tbody role="rowgroup" ${i?o`aria-labelledby="${i}"`:""}>
|
|
165
191
|
${r}
|
|
166
192
|
${a}
|
|
167
193
|
${n}
|
|
168
194
|
</tbody>
|
|
169
|
-
`}getTotalRow(e,t,l){const i={};t.forEach(n=>{i[n.field]=0,n.includedInTotals&&e.forEach(
|
|
195
|
+
`}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`
|
|
170
196
|
<th
|
|
171
197
|
id="${s}"
|
|
172
198
|
scope="row"
|
|
@@ -174,7 +200,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
174
200
|
>
|
|
175
201
|
Total
|
|
176
202
|
</th>
|
|
177
|
-
`,a=t.map(n=>{const
|
|
203
|
+
`,a=t.map(n=>{const c=`col-${n.field}`,b=[s,l,c].filter(Boolean).join(" ");return n.includedInTotals?o`
|
|
178
204
|
<td
|
|
179
205
|
role="gridcell"
|
|
180
206
|
headers="${b}"
|
|
@@ -191,11 +217,11 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
191
217
|
>
|
|
192
218
|
|
|
193
219
|
</td>
|
|
194
|
-
`}),
|
|
220
|
+
`}),d=this.selectable?[r,...a]:[r,...a.slice(1)];return o`
|
|
195
221
|
<tr role="row" class="gator-table-total-row">
|
|
196
|
-
${
|
|
222
|
+
${d}
|
|
197
223
|
</tr>
|
|
198
|
-
`}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
|
|
224
|
+
`}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`
|
|
199
225
|
<td role="gridcell" class="gator-table-checkbox-column" headers="${r}">
|
|
200
226
|
<ngc-checkbox
|
|
201
227
|
label="test"
|
|
@@ -221,13 +247,13 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
221
247
|
height="24"
|
|
222
248
|
rounded
|
|
223
249
|
></ngc-skeleton-loader>
|
|
224
|
-
`,a=`col-${t.field}`,
|
|
250
|
+
`,a=`col-${t.field}`,d=l?`${a} ${l}`:a,n=s?this.getCellAlignClass(t):"",c=s?r:this.renderCellByType(e,t,i,l??"");return o`
|
|
225
251
|
<td
|
|
226
252
|
role="gridcell"
|
|
227
|
-
headers="${
|
|
253
|
+
headers="${d}"
|
|
228
254
|
class="${n}"
|
|
229
255
|
style="${this.getColumnCellStyle(t)||f}"
|
|
230
256
|
>
|
|
231
|
-
${
|
|
257
|
+
${c}
|
|
232
258
|
</td>
|
|
233
|
-
`}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=[
|
|
259
|
+
`}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(A),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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const r='.gator-table-filter-chips{display:flex;flex-wrap:
|
|
1
|
+
const r=':host{--ngc-table-filter-options-max-height: 14rem}.gator-table-filter-chips{display:flex;flex-wrap:nowrap;gap:var(--spacing-8);padding:0 0 var(--spacing-8);align-items:center;overflow:hidden}.gator-table-filter-chips-clear-all{flex:0 0 auto;font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-2);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-2);letter-spacing:var(--letter-spacing-default, 0);color:var(--color-text-brand, var(--color-text-primary));background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.gator-table-filter-chips-clear-all:hover{color:var(--color-feedback-brand-secondary)}.gator-table-filter-chips-clear-all:focus{outline:none}.gator-table-filter-chips-clear-all:focus-visible{outline:2px solid var(--color-border-focus, currentColor);outline-offset:2px}.gator-table-filter-chips-popover-content{display:grid;grid-template-columns:repeat(2,max-content);gap:var(--spacing-5)}.gator-table-filter-chips-popover{--ngc-popover-width: max-content}.gator-table-scroll{width:100%;overflow-x:auto}.gator-table{font-family:var(--font-family-body, "Open Sans"),sans-serif;border-spacing:0;width:100%;border-radius:var(--ngc-table-border-radius, var(--border-radius-medium));background-color:var(--ngc-table-row-background-color, var(--color-surface-primary))}.gator-table thead>th,.gator-table thead>tr{height:3rem;min-height:3rem}.gator-table thead>th :first-child,.gator-table thead>tr :first-child{border-top-left-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table thead>th :last-child,.gator-table thead>tr :last-child{border-top-right-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table tbody>tr,.gator-table tfoot>tr{min-height:3rem;height:3rem}.gator-table th{background:var(--ngc-table-header-background-color, var(--color-surface-brand));text-align:left;padding:var(--spacing-5) var(--spacing-8);border-bottom:1px solid var(--ngc-table-header-border-bottom-color, var(--color-border-tertiary))}.gator-table th:hover{background:var(--ngc-table-header-background-color-hover, var(--color-surface-brand-secondary))}.gator-table .gator-table-header-cell-interactive{cursor:default}.gator-table .gator-table-header-cell-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-5);width:100%;min-width:0}.gator-table .gator-table-header-sort-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;cursor:pointer;flex:1}.gator-table .gator-table-header-sort-trigger:focus{outline:none}.gator-table .gator-table-header-sort-trigger:focus-visible{outline:2px solid var(--color-border-focus, currentColor);outline-offset:2px;border-radius:0}.gator-table .gator-table-header-label{min-width:0}.gator-table .gator-table-sort-icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.gator-table .gator-table-sort-icon{flex-shrink:0}.gator-table th:not(.gator-table-header-cell-sort-active) .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon{opacity:0}.gator-table th:hover .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon,.gator-table th.gator-table-header-cell-sort-active .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon{opacity:1}.gator-table .gator-table-header-filter-trigger-wrap{flex-shrink:0;display:inline-flex;align-items:center;width:2rem;margin-left:var(--spacing-5);opacity:0;pointer-events:none;transition:opacity .15s ease}.gator-table .gator-table-header-filter-trigger-wrap.gator-table-header-filter-trigger-visible{opacity:1;pointer-events:auto}.gator-table .gator-table-header-filter-icon-active{color:var(--color-text-brand, currentColor)}.gator-table .gator-table-header-filter-trigger-wrap,.gator-table .gator-table-header-filter-trigger-wrap ngc-popover{font-weight:var(--font-weight-regular)}.gator-table .gator-table-header-filter-trigger-wrap ngc-popover{--ngc-popover-width: max-content}.gator-table .gator-table-filter-popover-content{min-width:0;display:flex;flex-direction:column;gap:var(--spacing-5)}.gator-table .gator-table-filter-popover-search{--ngc-input-search-margin-bottom: 0}.gator-table .gator-table-filter-popover-footer{display:flex;gap:var(--spacing-5);justify-content:flex-start;width:100%}.gator-table .gator-table-filter-options{max-height:var(--ngc-table-filter-options-max-height);overflow-y:auto}.gator-table [dir=rtl] th.mat-header-cell{text-align:right}.gator-table td{padding:var(--spacing-5) var(--spacing-8);border-bottom:1px solid var(--ngc-table-row-border-bottom-color, var(--color-border-tertiary))}.gator-table tr:has(td:hover){background:var(--ngc-table-row-background-color-hover, var(--color-surface-secondary))}.gator-table tbody:last-child>tr:last-child th:first-child,.gator-table tbody:last-child>tr:last-child td:first-child{border-bottom-left-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table tbody:last-child>tr:last-child td:last-child{border-bottom-right-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table th:first-of-type,.gator-table td:first-of-type{padding-left:24px}.gator-table [dir=rtl] th:first-of-type,.gator-table [dir=rtl] td:first-of-type{padding-left:0;padding-right:24px}.gator-table th:last-of-type,.gator-table td:last-of-type{padding-right:24px}.gator-table [dir=rtl] th:last-of-type,.gator-table [dir=rtl] td:last-of-type{padding-right:0;padding-left:24px}.gator-table ngc-checkbox{--ngc-input-margin-bottom: 0}.gator-table ngc-input-dropdown,.gator-table ngc-input-text{--ngc-input-margin-bottom: 0}.gator-table .gator-table-cell-left{text-align:left}.gator-table .gator-table-cell-center{text-align:center}.gator-table .gator-table-cell-right{text-align:right}.gator-table .gator-table-cell-avatar{display:flex;align-items:center;gap:var(--spacing-4, 8px)}.gator-table .gator-table-cell-avatar .gator-table-cell-avatar-label{flex:1}.gator-table-empty-state-card{display:block;width:100%;border-radius:var(--border-radius-x-large, 16px);background:var(--color-surface-secondary, #F7F7F7);--ngc-card-border-radius: var(--border-radius-x-large, 16px);--ngc-card-background-color: var(--color-surface-secondary, #F7F7F7);--ngc-card-width: 100%;--ngc-card-max-width: none}.gator-table-empty-state{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--spacing-10) 0}.gator-table-checkbox-column{width:1%}.gator-table-row-selected{background-color:var(--ngc-table-row-background-color-selected, var(--color-surface-brand))}.gator-table-elevated{box-shadow:var(--shadow-1-card)}.gator-table-category-header{background-color:var(--ngc-table-header-background-color, var(--color-surface-brand))}.gator-table-category-header:hover{background-color:var(--ngc-table-header-hover-background-color, var(--color-surface-brand-secondary))!important}.gator-table-category-header th{border-bottom:none!important;font-weight:var(--font-weight-bold);background-color:var(--ngc-table-header-background-color, var(--color-surface-brand));color:var(--color-text-primary);line-height:var(--line-height-subtitle-2);letter-spacing:var(--letter-spacing-default)}.gator-table-total-row{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-secondary))!important;font-weight:var(--font-weight-bold)}.gator-table-total-row:hover{background-color:var(--ngc-table-total-row-hover-background-color, var(--color-surface-tertiary))!important}.gator-table-total-row td,.gator-table-total-row th{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-secondary))!important;border-top:1px solid var(--ngc-table-total-row-border-bottom-color, var(--color-border-tertiary));border-bottom:none!important}.gator-table-total-row th:hover{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-tertiary))!important}.gator-table-total-label{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}';export{r as default};
|
|
@@ -32,6 +32,11 @@ export declare class NjcChip extends TestableLitElement {
|
|
|
32
32
|
@type {String}
|
|
33
33
|
**/
|
|
34
34
|
startIcon: string;
|
|
35
|
+
/**
|
|
36
|
+
@property endIcon - The icon to display at the end of the chip.
|
|
37
|
+
@type {String}
|
|
38
|
+
**/
|
|
39
|
+
endIcon: string;
|
|
35
40
|
/**
|
|
36
41
|
@property dismissible - If true, the chip displays a dismiss button and emits a "dismiss" event when clicked.
|
|
37
42
|
@type {boolean}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
1
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
2
3
|
import { CountryCode } from 'libphonenumber-js';
|
|
3
4
|
import { NgcInputBase } from '../../base/input-base.gator.ts';
|
|
@@ -14,6 +15,11 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
14
15
|
defaultCountry?: string;
|
|
15
16
|
inputContainer: Ref<HTMLDivElement>;
|
|
16
17
|
dropdownContainer: Ref<NgcInputDropdown>;
|
|
18
|
+
/**
|
|
19
|
+
* Latest raw text typed into the number field. `value` is not written back on input — that
|
|
20
|
+
* would feed `ngc-input-text`'s `live()` directive and reset the caret mid-typing.
|
|
21
|
+
*/
|
|
22
|
+
private lastRawPhoneValue;
|
|
17
23
|
/**
|
|
18
24
|
* ISO region for the calling-code control and libphonenumber default: explicit dropdown
|
|
19
25
|
* selection, otherwise `default-country` (normalized). Not the same as `countryCodeValue`
|
|
@@ -21,7 +27,8 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
21
27
|
*/
|
|
22
28
|
get phoneRegionIso(): CountryCode | undefined;
|
|
23
29
|
render(): import('lit').TemplateResult<1>;
|
|
24
|
-
updated(): void;
|
|
30
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
31
|
+
private get currentPhoneValue();
|
|
25
32
|
handleSelected(e: CustomEvent): void;
|
|
26
33
|
/**
|
|
27
34
|
* Validity for the selected/default region when known; otherwise only when the library
|
|
@@ -29,6 +36,9 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
29
36
|
* validated and is treated as valid (`true`).
|
|
30
37
|
*/
|
|
31
38
|
private isValidPhoneNumberForCurrentContext;
|
|
39
|
+
/** Builds the `change` detail and applies the parse-derived state, for every emit path. */
|
|
40
|
+
private buildChangeDetail;
|
|
41
|
+
private emitPhoneChange;
|
|
32
42
|
handlePhoneInput(e: CustomEvent): void;
|
|
33
43
|
get slotLabelMarkup(): import('lit').TemplateResult<1>;
|
|
34
44
|
}
|
|
@@ -71,7 +71,7 @@ export declare class NgcList extends NgcComponent {
|
|
|
71
71
|
falseFocusFirstItem(): Element | undefined;
|
|
72
72
|
falseFocusPreviousItem(): Element | undefined;
|
|
73
73
|
falseFocusNextItem(): Element | undefined;
|
|
74
|
-
selectFalseFocusedItem():
|
|
74
|
+
selectFalseFocusedItem(): boolean;
|
|
75
75
|
unselectAllListItems(): void;
|
|
76
76
|
handleKeyUp(e: KeyboardEvent): void;
|
|
77
77
|
get nodes(): Element[] | undefined;
|
|
@@ -73,3 +73,20 @@ export declare function getTestDataWithHeader(): ({
|
|
|
73
73
|
account?: undefined;
|
|
74
74
|
selected?: undefined;
|
|
75
75
|
})[];
|
|
76
|
+
export declare function getSortableFilterableTestData(): ({
|
|
77
|
+
amount: string;
|
|
78
|
+
date: string;
|
|
79
|
+
business: string;
|
|
80
|
+
name: string;
|
|
81
|
+
type: string;
|
|
82
|
+
account: string;
|
|
83
|
+
selected: boolean;
|
|
84
|
+
} | {
|
|
85
|
+
amount: string;
|
|
86
|
+
date: string;
|
|
87
|
+
business: string;
|
|
88
|
+
name: string;
|
|
89
|
+
type: string;
|
|
90
|
+
account: string;
|
|
91
|
+
selected?: undefined;
|
|
92
|
+
})[];
|
|
@@ -25,13 +25,18 @@ export declare class NgcTable extends NjcTable {
|
|
|
25
25
|
_hoveredHeaderColumnField: string | null;
|
|
26
26
|
_pendingFilterValues: Record<string, string | string[]>;
|
|
27
27
|
_filterSearchQuery: Record<string, string>;
|
|
28
|
+
private _visibleFilterChipCount;
|
|
29
|
+
private previousFilterOptionsScrollTop;
|
|
30
|
+
private _filterChipResizeObserver;
|
|
28
31
|
protected updated(_changedProperties: PropertyValues): void;
|
|
32
|
+
disconnectedCallback(): void;
|
|
29
33
|
render(): TemplateResult<1> | null;
|
|
30
34
|
private getColumnCellStyle;
|
|
31
35
|
private get _skeletonLoaderColumns();
|
|
32
36
|
get tableElevatedClass(): "" | "gator-table-elevated";
|
|
33
37
|
get showBulkControls(): boolean;
|
|
34
38
|
renderWrapper(header: unknown, body: unknown): TemplateResult<1>;
|
|
39
|
+
private calculateFilterChipOverflow;
|
|
35
40
|
/**
|
|
36
41
|
* Content for `ngc-illustration`'s default actions slot (must be light-DOM children of the illustration).
|
|
37
42
|
* Clear filters is rendered here when filters are active; otherwise the table's
|
|
@@ -62,6 +67,7 @@ export declare class NgcTable extends NjcTable {
|
|
|
62
67
|
private getActiveFilterChips;
|
|
63
68
|
private handleFilterChipDismiss;
|
|
64
69
|
private handleClearAllFilters;
|
|
70
|
+
private onFilterOptionsScroll;
|
|
65
71
|
private getTableBody;
|
|
66
72
|
private getCategoryBody;
|
|
67
73
|
private getTotalRow;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.0.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": "
|
|
103
|
+
"@ncino/styles": "16.0.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "
|
|
106
|
+
"@ncino/styles": "16.0.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": "15.
|
|
4
|
+
"version": "15.7.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -159,6 +159,10 @@
|
|
|
159
159
|
"name": "start-icon",
|
|
160
160
|
"value": { "type": "String", "default": "''" }
|
|
161
161
|
},
|
|
162
|
+
{
|
|
163
|
+
"name": "end-icon",
|
|
164
|
+
"value": { "type": "String", "default": "''" }
|
|
165
|
+
},
|
|
162
166
|
{
|
|
163
167
|
"name": "dismissible",
|
|
164
168
|
"value": { "type": "boolean", "default": "false" }
|
|
@@ -193,6 +197,7 @@
|
|
|
193
197
|
{ "name": "size", "type": " | 'small'" },
|
|
194
198
|
{ "name": "hideBorder", "type": "boolean" },
|
|
195
199
|
{ "name": "startIcon", "type": "String" },
|
|
200
|
+
{ "name": "endIcon", "type": "String" },
|
|
196
201
|
{ "name": "dismissible", "type": "boolean" },
|
|
197
202
|
{ "name": "ariaHidden", "type": "'true' | 'false'" },
|
|
198
203
|
{ "name": "dataTestid", "type": "string | undefined" },
|
|
@@ -8227,7 +8232,7 @@
|
|
|
8227
8232
|
},
|
|
8228
8233
|
{
|
|
8229
8234
|
"name": "ngc-table",
|
|
8230
|
-
"description": "Gator data table.\n---\n\n\n### **Events:**\n - **selectall**\n- **sort**\n- **filter**\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.",
|
|
8235
|
+
"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.",
|
|
8231
8236
|
"doc-url": "",
|
|
8232
8237
|
"attributes": [
|
|
8233
8238
|
{
|
|
@@ -8328,6 +8333,7 @@
|
|
|
8328
8333
|
{ "name": "selectall", "type": "CustomEvent" },
|
|
8329
8334
|
{ "name": "sort", "type": "CustomEvent" },
|
|
8330
8335
|
{ "name": "filter", "type": "CustomEvent" },
|
|
8336
|
+
{ "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
|
|
8331
8337
|
{ "name": "rowselected", "type": "CustomEvent" },
|
|
8332
8338
|
{ "name": "cellchange", "type": "CustomEvent" },
|
|
8333
8339
|
{ "name": "cellclick", "type": "CustomEvent" }
|
|
@@ -8397,6 +8403,7 @@
|
|
|
8397
8403
|
{ "name": "selectall", "type": "CustomEvent" },
|
|
8398
8404
|
{ "name": "sort", "type": "CustomEvent" },
|
|
8399
8405
|
{ "name": "filter", "type": "CustomEvent" },
|
|
8406
|
+
{ "name": "filteroptionsreachedbottom", "type": "CustomEvent" },
|
|
8400
8407
|
{ "name": "rowselected", "type": "CustomEvent" },
|
|
8401
8408
|
{ "name": "cellchange", "type": "CustomEvent" },
|
|
8402
8409
|
{ "name": "cellclick", "type": "CustomEvent" }
|