@ncino/web-components 13.1.2 → 13.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +17 -17
- package/dist/components/list/gator/list/list.gator.js +1 -1
- package/dist/types/components/input/gator/dropdown/input-dropdown.gator.d.ts +5 -1
- package/dist/types/components/list/gator/list/list.gator.d.ts +1 -1
- package/package.json +3 -3
- package/web-types.json +1 -1
|
@@ -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 r,nothing 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 b}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 E}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as R}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 w}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 O}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as V,computePosition as D,flip as k}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as I,formattedStatesForDropdown as M}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as L}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as S,formattedPhoneCountryCodes as B,phoneCountryDropdownOptionMatchesQuery as F}from"../../../../utils/phone-utils.js";import T from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as _}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 N}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var P=Object.defineProperty,q=Object.getOwnPropertyDescriptor,W=Object.getPrototypeOf,z=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?q(t,s):t,c=e.length-1,u;c>=0;c--)(u=e[c])&&(o=(i?u(t,s,o):u(o))||o);return i&&o&&P(t,s,o),o},H=(e,t,s)=>z(W(e),s,t);let l=class extends _{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.loading=!1,this._expanded=!1,this._searchValue="",this._visibleChipCount=1/0,this._showOverflowChip=!1,this._truncateChips=!0,this._calculationPending=!1,this.listboxRef=v(),this.listRef=v(),this.inputRef=v(),this.listboxMessageRef=v(),this.multiselectValueDelimiter=", ",this._selectedValues=[]}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._cleanup?.()}render(){return r`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
5
5
|
</slot>
|
|
6
6
|
<div
|
|
7
|
-
${
|
|
7
|
+
${m(this.controlRef)}
|
|
8
8
|
class=${w(this.controlClasses)}
|
|
9
9
|
data-testid=${y(this.dataTestid)}-listbox
|
|
10
10
|
aria-disabled="${this.disabled}"
|
|
@@ -35,8 +35,8 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
35
35
|
id="${this.startIconId}"
|
|
36
36
|
label="${y(this.iconAsLabel?this.label:void 0)}"
|
|
37
37
|
.name="${e}"
|
|
38
|
-
></ngc-icon>`:super.startIconMarkup}firstUpdated(){this.setComboboxAriaAttributes(),this._expanded&&this.toggleListbox(n.ENTER,!0),this.wrapChips&&(this._truncateChips=!1),this.multiselect&&this._truncateChips&&(this.setupResizeObserver(),this.scheduleOverflowCalculation()),this.multiselect&&Array.isArray(this.value)&&this.value?.length&&(this._selectedValues=[...this.value])}updated(e){e.has("autocomplete")&&this.setComboboxAriaAttributes(),e.has("_expanded")&&(this._expanded?
|
|
39
|
-
<input ${
|
|
38
|
+
></ngc-icon>`:super.startIconMarkup}firstUpdated(){this.setComboboxAriaAttributes(),this._expanded&&this.toggleListbox(n.ENTER,!0),this.wrapChips&&(this._truncateChips=!1),this.multiselect&&this._truncateChips&&(this.setupResizeObserver(),this.scheduleOverflowCalculation()),this.multiselect&&Array.isArray(this.value)&&this.value?.length&&(this._selectedValues=[...this.value])}updated(e){if(e.has("autocomplete")&&this.setComboboxAriaAttributes(),e.has("_expanded")&&(this._expanded?this.setAriaActiveDescendant():this.clearAriaActiveDescendant(),this.comboboxElement?.setAttribute("aria-expanded",`${this._expanded}`)),e.has("required")&&this.comboboxElement?.setAttribute("aria-required",`${this.required}`),e.has("readonly")&&this.comboboxElement?.setAttribute("aria-readonly",`${this.readonly}`),(e.has("helpText")||e.has("errorText"))&&this.comboboxElement?.setAttribute("aria-describedby",this.ariaDescribedby),(e.has("ariaLabelledby")||e.has("ariaLabelledByElements")||e.has("label"))&&this.setComboboxAriaLabelledByElements(),e.has("multiselect")&&(this.setMultiselectAriaLabelledbyElements(),this._truncateChips&&this.setupResizeObserver()),e.has("value")&&this.multiselect&&this._truncateChips&&this.scheduleOverflowCalculation(),e.has("wrapChips")&&(this.wrapChips?(this._truncateChips=!1,this._resizeObserver?.disconnect()):(this._truncateChips=!0,this.setupResizeObserver())),e.has("_truncateChips")&&this._truncateChips&&this.scheduleOverflowCalculation(),e.has("_searchValue")&&this._searchValue===""&&this._expanded){const t=this.autocomplete&&!this.multiselect&&this.value!==void 0&&this.value!==null&&this.value!=="",s=this.value;this.updateComplete.then(()=>{!this._expanded||this._searchValue!==""||!this.listRef.value||(t?this._activeDescendant=this.listRef.value.setFalseFocusToValue(s):this._activeDescendant=this.listRef.value.falseFocusFirstItem(),this.listRef.value._setFauxFocusToCurrentItem(),this.setAriaActiveDescendant())})}e.has("value")&&this.multiselect&&(Array.isArray(this.value)?this._selectedValues=[...this.value]:this._selectedValues=[])}get comboboxElement(){return this.autocomplete?this.inputRef.value:this.controlRef.value}setComboboxAriaAttributes(){const e=this.comboboxElement,t=this.autocomplete?this.controlRef.value:this.inputRef.value,s={role:"combobox","aria-autocomplete":"list","aria-expanded":`${this._expanded}`,"aria-describedby":this.ariaDescribedby,"aria-required":`${this.required}`,"aria-readonly":`${this.readonly}`};Object.entries(s).forEach(([i,o])=>{e?.setAttribute(i,o),t?.removeAttribute(i)}),e&&(e.ariaControlsElements=[this.listRef.value],this.setComboboxAriaLabelledByElements()),t&&(t.ariaControlsElements=null,t.ariaLabelledByElements=null)}setComboboxAriaLabelledByElements(){const e=this.shadowRoot?.getElementById(this.labelId),t=this.shadowRoot?.getElementById(this.ariaLabelledbyValue),s=this.ariaLabelledByElements||[],i=this.multiselect?this.shadowRoot?.getElementById(`multiselect-label-${this.id}`):void 0;this.comboboxElement&&(this.comboboxElement.ariaLabelledByElements=[i,e,t,...s].filter(Boolean))}setMultiselectAriaLabelledbyElements(){if(!this.multiselect)return;const e=this.shadowRoot?.getElementById(`multiselect-label-${this.id}`);if(this.comboboxElement&&e){const t=this.comboboxElement.ariaLabelledByElements||null;this.comboboxElement.ariaLabelledByElements=t?[e,...t]:[e]}}setAriaActiveDescendant(){const e=this.comboboxElement;e&&(e.ariaActiveDescendantElement=this._activeDescendant||null)}clearAriaActiveDescendant(){const e=this.comboboxElement;e&&(e.ariaActiveDescendantElement=null)}get inputMarkup(){return r`
|
|
39
|
+
<input ${m(this.inputRef)}
|
|
40
40
|
type="${this.type}"
|
|
41
41
|
.id="${this.id}"
|
|
42
42
|
.placeholder="${this.placeholder}"
|
|
@@ -51,11 +51,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
51
51
|
@keydown="${this.handleInputKeydown}"
|
|
52
52
|
@focusin="${this.handleInputFocusIn}"
|
|
53
53
|
@focusout="${this.handleInputFocusOut}"
|
|
54
|
-
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:
|
|
54
|
+
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:b}get multiselectSelectionsMarkup(){return r`
|
|
55
55
|
<div class="gator-multiselect-selections">
|
|
56
56
|
${this.multiselectLabel}
|
|
57
57
|
${this._truncateChips?this.truncatedChipsMarkup:this.chipsMarkup}
|
|
58
|
-
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:
|
|
58
|
+
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:b}
|
|
59
59
|
</div>
|
|
60
60
|
`}get chipsMarkup(){return this.selectedValues.map(e=>r`
|
|
61
61
|
<ngc-chip
|
|
@@ -84,21 +84,21 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
84
84
|
>
|
|
85
85
|
+${this.selectedValues.length-this._visibleChipCount}
|
|
86
86
|
</ngc-chip>
|
|
87
|
-
`:
|
|
87
|
+
`:b}
|
|
88
88
|
</div>
|
|
89
|
-
`}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 e=this.shadowRoot?.querySelector(".gator-chips-container"),t=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!e||!t)return;const s=this.autocomplete?t.clientWidth/3*2:t.clientWidth,i=50,o=8,c=e.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");c.forEach(u=>u.classList.add("gator-visually-hidden"));for(let u=1;u<=this.selectedValues.length;u++){c.forEach((p,
|
|
89
|
+
`}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 e=this.shadowRoot?.querySelector(".gator-chips-container"),t=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!e||!t)return;const s=this.autocomplete?t.clientWidth/3*2:t.clientWidth,i=50,o=8,c=e.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");c.forEach(u=>u.classList.add("gator-visually-hidden"));for(let u=1;u<=this.selectedValues.length;u++){c.forEach((p,f)=>{f<u?p.classList.remove("gator-visually-hidden"):p.classList.add("gator-visually-hidden")});const $=e.scrollWidth,x=u===this.selectedValues.length;if($+(!x?i+o:0)>s){const p=Math.max(1,u-1);this._visibleChipCount=p,this._showOverflowChip=p<this.selectedValues.length,c.forEach((f,A)=>{A<p?f.classList.remove("gator-visually-hidden"):f.classList.add("gator-visually-hidden")});return}if(x){this._visibleChipCount=this.selectedValues.length,this._showOverflowChip=!1;return}}}setupResizeObserver(){this.multiselect&&(this._resizeObserver=new ResizeObserver(()=>{this.scheduleOverflowCalculation()}),requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".gator-multiselect-selections");e&&this._resizeObserver?.observe(e)}))}removeSelection(e){let t=this.selectedValues;t=t.filter(s=>s!==e),this.emitChangeEvent(t)}get fauxInputMarkup(){return r`
|
|
90
90
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
91
91
|
${this.displayedValue||this.placeholder}
|
|
92
92
|
</div>
|
|
93
|
-
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?
|
|
93
|
+
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?S(this.value)||this.value:this.value:this.displayedOptions.find(t=>t.value===this.value)?.label??String(this.value)}get autocompleteEditorValue(){if(!this.autocomplete)return this.displayedValue;if(this.multiselect)return this._searchValue;if(this._expanded){const e=this.value!==void 0&&this.value!==null&&this.value!=="";return this._searchValue===""&&e?this.displayedValue:this._searchValue}return this.displayedValue}get showPlaceholder(){return this.placeholder&&!this.value}get listboxMarkup(){return r`
|
|
94
94
|
<div
|
|
95
|
-
${
|
|
95
|
+
${m(this.listboxRef)}
|
|
96
96
|
popover="manual"
|
|
97
97
|
class="gator-dropdown-listbox ${this._expanded?"gator-dropdown-listbox_expanded":""}"
|
|
98
98
|
>
|
|
99
99
|
${this.listboxMessageMarkup}
|
|
100
100
|
<ngc-list
|
|
101
|
-
${
|
|
101
|
+
${m(this.listRef)}
|
|
102
102
|
id="listbox-${this.id}"
|
|
103
103
|
selectable
|
|
104
104
|
faux-focus
|
|
@@ -116,8 +116,8 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
116
116
|
faux-focus
|
|
117
117
|
?selected="${this.allSelected}"
|
|
118
118
|
></ngc-list-item>
|
|
119
|
-
`:
|
|
120
|
-
${this.displayedOptions
|
|
119
|
+
`:b}
|
|
120
|
+
${E(this.displayedOptions??[],e=>e.value,e=>r`
|
|
121
121
|
<ngc-list-item
|
|
122
122
|
class="gator-dropdown-option"
|
|
123
123
|
text="${e.label}"
|
|
@@ -127,7 +127,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
127
127
|
start-icon="${y(this.getStartIconForOption(e.value))}"
|
|
128
128
|
faux-focus
|
|
129
129
|
></ngc-list-item>
|
|
130
|
-
`)
|
|
130
|
+
`)}
|
|
131
131
|
</ngc-list>
|
|
132
132
|
</div>
|
|
133
133
|
`}get selectAllIcon(){return this.allSelected?"checkbox-selected":this.selectedValues.length===0?"checkbox":"checkbox-indeterminate"}get allSelected(){return this.selectedValues.length===this.displayedOptions.length}selectAllOptions(){this.emitChangeEvent(this.displayedOptions.map(e=>e.value))}deselectAllOptions(){this.emitChangeEvent([])}getOptionSelected(e){return this.multiselect?this.selectedValues.some(t=>t===e):this.value===e}get listboxMessageMarkup(){let e;if(this.listboxHelpText)e=this.listboxHelpText;else{if(!this.autocomplete)return null;this.displayedOptions.length===0&&(e=this.noResultsMessage),this.resultsExceedMax&&(e=this.resultsExceedMaxMessage)}return this.setListboxMessageAriaDescribedByElements(),e?r`
|
|
@@ -135,11 +135,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
135
135
|
class="gator-dropdown-listbox-message"
|
|
136
136
|
id="listbox-message-${this.id}"
|
|
137
137
|
data-testid="${this.dataTestid}-listbox-message"
|
|
138
|
-
${
|
|
138
|
+
${m(this.listboxMessageRef)}
|
|
139
139
|
>
|
|
140
140
|
${e}
|
|
141
141
|
</div>
|
|
142
|
-
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const e=this.listboxMessageRef.value;if(!this.inputRef.value)return;const t=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(e){t.includes(e)||(this.inputRef.value.ariaDescribedByElements=[e,...t]),s.includes(e)||(this.listRef.value.ariaDescribedByElements=[e,...s]);return}this.inputRef.value.ariaDescribedByElements=t.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return g(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return g("No results found. Refine your search.")}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=
|
|
142
|
+
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const e=this.listboxMessageRef.value;if(!this.inputRef.value)return;const t=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(e){t.includes(e)||(this.inputRef.value.ariaDescribedByElements=[e,...t]),s.includes(e)||(this.listRef.value.ariaDescribedByElements=[e,...s]);return}this.inputRef.value.ariaDescribedByElements=t.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return g(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return g("No results found. Refine your search.")}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=I():this.dataType==="state"&&this.countryCode?e=M(this.countryCode):this.dataType==="naics"?e=L():this.dataType==="phoneCodes"&&(e=B()),this._searchValue?this.dataType==="phoneCodes"?e.filter(s=>F(s,this._searchValue)):[...e.filter(s=>s.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:e}get limitedOptions(){const e=this.filteredOptions,t=this.maxAutocompleteResults??e.length;if(!this.multiselect)return e.filter((i,o)=>o<t||i.value===this.value);const s=new Set(this.selectedValues);return e.filter((i,o)=>o<t||s.has(i.value))}get resultsExceedMax(){return!this.autocomplete||!this.maxAutocompleteResults?!1:this.filteredOptions.length>this.maxAutocompleteResults}getStartIconForOption(e){if(typeof e=="string"&&this.dataType==="phoneCodes")return C(e)||void 0}handleSelected(e){if(e.stopImmediatePropagation(),this.clearAriaActiveDescendant(),this.multiselect){if(e.detail.value==="all"){this.allSelected?this.deselectAllOptions():this.selectAllOptions();return}const t=this.selectedValues,s=typeof this.options?.[0]?.value=="number"?"number":"string",i=t.findIndex(o=>{const c=s==="number"?Number(e.detail.value):e.detail.value;return o===c});i>-1?t.splice(i,1):s==="number"?t.push(Number(e.detail.value)):t.push(e.detail.value),t&&this.emitChangeEvent(t)}else this.closeListbox(),this.emitChangeEvent(e.detail.value)}get selectedValues(){return this.multiselect&&Array.isArray(this.value)?this._selectedValues:[]}handleComboboxKeydown(e){if(!this._expanded&&(e.key===n.ENTER||e.key===n.SPACE||e.key===n.DOWN))this.toggleListbox(e.key,!1);else if(this._expanded&&this.listRef.value&&((e.key===n.ENTER||e.key===n.SPACE)&&this.listRef.value?.selectFalseFocusedItem(),e.key===n.DOWN&&(e.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusNextItem(),this.setAriaActiveDescendant()),e.key===n.UP&&(e.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusPreviousItem(),this.setAriaActiveDescendant()),e.key===n.BACKSPACE&&this.autocomplete&&this.multiselect&&this.inputRef.value.value==="")){e.preventDefault();const t=this.selectedValues||[];t.length>0&&(t.pop(),this.emitChangeEvent(t))}(e.key===n.ESCAPE||e.key===n.TAB)&&this.closeListbox()}toggleListbox(e,t){if(this.disabled||this.readonly)return;t||(this._expanded=!this._expanded);const s=this.listboxRef.value;if(this._expanded&&s)try{s.showPopover()}catch{}else if(!this._expanded&&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):e==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 e=this.listboxRef.value;if(e)try{e.hidePopover()}catch{}}get endIconMarkup(){return r`<ngc-icon
|
|
143
143
|
class="gator-dropdown-chevron"
|
|
144
144
|
name="${this.renderedEndIcon}"
|
|
145
145
|
?disabled="${this.disabled||this.readonly}"
|
|
@@ -152,4 +152,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
152
152
|
@click="${this.clearValue}"
|
|
153
153
|
?disabled="${this.disabled||this.readonly}"
|
|
154
154
|
></ngc-icon-button>
|
|
155
|
-
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const e=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!e||(this._cleanup=
|
|
155
|
+
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const e=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!e||(this._cleanup=V(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await D(e,this.listboxRef.value,{placement:"bottom-start",middleware:[k()]});let o=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${t}px`,top:`${s+o}px`,width:`${this.listWidth??e.clientWidth}px`})}))}handleInput(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=t.value,this._expanded=!0,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:t.value}}))}handleInputKeydown(e){if((e.key===n.DOWN||e.key===n.UP)&&e.preventDefault(),e.key===n.SPACE){e.stopPropagation();return}}emitChangeEvent(e){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(e)?[...e]:e}}))}};l.shadowRootOptions={..._.shadowRootOptions,delegatesFocus:!0};l.styles=[...H(l,l,"styles"),N(T)];a([h({type:Boolean})],l.prototype,"multiselect",2);a([h({type:Array})],l.prototype,"options",2);a([h({type:Boolean})],l.prototype,"autocomplete",2);a([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);a([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);a([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);a([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);a([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);a([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);a([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);a([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);a([h({type:Boolean})],l.prototype,"loading",2);a([d()],l.prototype,"_activeDescendant",2);a([d()],l.prototype,"_expanded",2);a([d()],l.prototype,"_searchValue",2);a([d()],l.prototype,"_visibleChipCount",2);a([d()],l.prototype,"_showOverflowChip",2);a([d()],l.prototype,"_truncateChips",2);a([d()],l.prototype,"_selectedValues",2);l=a([O("ngc-input-dropdown"),R()],l);export{l as NgcInputDropdown};
|
|
@@ -11,4 +11,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
11
11
|
>
|
|
12
12
|
<slot @slotchange="${this.handleSlotChanged}"></slot>
|
|
13
13
|
</div>
|
|
14
|
-
`}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++,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",r=>{this._selectedListItem=r.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0)}),this._listItemsWithEventListeners.add(e));this.setCurrentListItem()}}setFalseFocusToValue(t){if(this.listItems){for(const[e,r]of this.listItems.entries())if(r.value==t)return this._activeIndex=e,
|
|
14
|
+
`}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++,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",r=>{this._selectedListItem=r.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.setCurrentListItem()}}setFalseFocusToValue(t){if(this.listItems){for(const[e,r]of this.listItems.entries())if(r.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1),this._activeIndex>=this._totalListItems&&(this._activeIndex=0);for(const[e,r]of this.listItems.entries())r.currentListItem=e===this._activeIndex,r.currentListItem&&(t=r);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.setCurrentListItem()}falseFocusPreviousItem(){return this._activeIndex--,this.setCurrentListItem()}falseFocusNextItem(){return this._activeIndex++,this.setCurrentListItem()}selectFalseFocusedItem(){if(this.listItems)for(const t of this.listItems)t.falseFocusing&&t.selectItem()}unselectAllListItems(){if(this.listItems)for(const t of this.listItems)t.selected=!1}handleKeyUp(t){switch(t.key){case m.UP:this._activeIndex--,this.setCurrentListItem(),t.preventDefault();break;case m.DOWN:this._activeIndex++,this.setCurrentListItem(),t.preventDefault();break}}get nodes(){return this.shadowRoot?.querySelector("slot")?.assignedElements()}get listItems(){return this.shadowRoot?.querySelector("slot")?.assignedElements().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||p).density=this.density)}assignChildNodeHideCheckmark(){if(this.listItems)for(const t of this.listItems)t.hasAttribute("hide-checkmark")||(t.hideCheckmark=this.hideCheckmarks)}};s.shadowRootOptions={...f.shadowRootOptions,mode:"open"};i([l()],s.prototype,"id",2);i([l()],s.prototype,"density",2);i([l({type:Boolean})],s.prototype,"selectable",2);i([l({type:Boolean})],s.prototype,"multiselect",2);i([l({attribute:"aria-labelledby"})],s.prototype,"ariaLabelledBy",2);i([l({type:Array,attribute:"aria-labelled-by-elements"})],s.prototype,"ariaLabelledByElements",2);i([l({type:Array,attribute:"aria-described-by-elements"})],s.prototype,"ariaDescribedByElements",2);i([l({attribute:"aria-describedby"})],s.prototype,"ariaDescribedby",2);i([l()],s.prototype,"title",2);i([l({type:Boolean,attribute:"faux-focus"})],s.prototype,"fauxFocus",2);i([l({type:Boolean,attribute:"hide-checkmarks"})],s.prototype,"hideCheckmarks",2);i([l({attribute:"aria-label"})],s.prototype,"ariaLabel",2);i([l({type:String})],s.prototype,"role",2);i([c()],s.prototype,"_selectedListItem",2);i([c()],s.prototype,"_activeIndex",2);s=i([I("ngc-list")],s);export{s as NgcList};
|
|
@@ -116,7 +116,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
116
116
|
removeSelection(value: string | number): void;
|
|
117
117
|
get fauxInputMarkup(): import('lit').TemplateResult<1>;
|
|
118
118
|
get displayedValue(): string;
|
|
119
|
-
/**
|
|
119
|
+
/**
|
|
120
|
+
* Combobox text: multiselect autocomplete uses `_searchValue` only.
|
|
121
|
+
* Single-select autocomplete: while expanded, show `displayedValue` until the user types
|
|
122
|
+
* (`_searchValue` empty) so the list is not filtered by the committed selection on open.
|
|
123
|
+
*/
|
|
120
124
|
private get autocompleteEditorValue();
|
|
121
125
|
get showPlaceholder(): boolean | "";
|
|
122
126
|
get listboxMarkup(): import('lit').TemplateResult<1>;
|
|
@@ -63,7 +63,7 @@ export declare class NgcList extends NgcComponent {
|
|
|
63
63
|
get listRole(): 'listbox' | 'list' | 'group';
|
|
64
64
|
handleSlotChanged(): void;
|
|
65
65
|
updateSlottedItems(): void;
|
|
66
|
-
setFalseFocusToValue(value: string | number | File | File[] | Date):
|
|
66
|
+
setFalseFocusToValue(value: string | number | File | File[] | Date): Element | undefined;
|
|
67
67
|
setCurrentListItem(): Element | undefined;
|
|
68
68
|
_setFauxFocusToCurrentItem(): void;
|
|
69
69
|
falseFocusFirstItem(): Element | undefined;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "13.1.
|
|
4
|
+
"version": "13.1.3",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "13.1.
|
|
103
|
+
"@ncino/styles": "13.1.3"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "13.1.
|
|
106
|
+
"@ncino/styles": "13.1.3"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED