@ncino/web-components 14.2.0 → 14.4.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/input/gator/dropdown/input-dropdown.gator.js +10 -7
- package/dist/packages/web-components/src/components/panel/gator/panel.gator.scss.js +1 -1
- package/dist/types/components/input/gator/dropdown/input-dropdown.gator.d.ts +5 -0
- package/package.json +3 -3
- package/web-types.json +1 -1
|
@@ -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 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 $}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 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 V}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as g,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as O,computePosition as I,flip 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 $}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 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 V}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as g,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as O,computePosition as I,flip as L}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 k,formattedStatesForDropdown as M}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as D}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as _,dialCodeForPhoneCountryCode as S,formattedPhoneCountryCodes as T,phoneCountryDropdownOptionMatchesQuery as F}from"../../../../utils/phone-utils.js";import B from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as C}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,u=e.length-1,c;u>=0;u--)(c=e[u])&&(o=(i?c(t,s,o):c(o))||o);return i&&o&&P(t,s,o),o},H=(e,t,s)=>z(W(e),s,t);let l=class extends C{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._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?.()}render(){return r`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
@@ -12,7 +12,10 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
12
12
|
tabindex="${this.tabIndexForControl}"
|
|
13
13
|
@click="${this.toggleListbox}"
|
|
14
14
|
@keydown="${this.handleComboboxKeydown}"
|
|
15
|
+
@focusin="${this._topLevelFocusIn}"
|
|
15
16
|
@focusout="${this._topLevelFocusOut}"
|
|
17
|
+
@mouseenter="${this._handleMouseEnter}"
|
|
18
|
+
@mouseleave="${this._handleMouseLeave}"
|
|
16
19
|
>
|
|
17
20
|
<div class="gator-input-container">
|
|
18
21
|
${this.shouldHaveStartMarkup?r`
|
|
@@ -31,11 +34,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
31
34
|
${this.bottomText}
|
|
32
35
|
${this.listboxMarkup}
|
|
33
36
|
</div>
|
|
34
|
-
`}get controlClasses(){return{...super.controlClasses,"gator-cursor-pointer":!this.disabled&&!this.readonly}}_topLevelFocusOut(e){const t=e.relatedTarget;(!t||!this.shadowRoot?.contains(t))&&this.closeListbox()}get tabIndexForControl(){return this.disabled||this.autocomplete?"-1":"0"}phoneCodesFlagIconName(){if(this.dataType!=="phoneCodes")return"";const e=typeof this.value=="string"?this.value:"";return
|
|
37
|
+
`}get controlClasses(){return{...super.controlClasses,"gator-cursor-pointer":!this.disabled&&!this.readonly}}_topLevelFocusIn(){this._focused=!0}_handleMouseEnter(){this._hovered=!0}_handleMouseLeave(){this._hovered=!1}_topLevelFocusOut(e){const t=e.relatedTarget;(!t||!this.shadowRoot?.contains(t))&&(this._focused=!1,this.closeListbox())}get tabIndexForControl(){return this.disabled||this.autocomplete?"-1":"0"}phoneCodesFlagIconName(){if(this.dataType!=="phoneCodes")return"";const e=typeof this.value=="string"?this.value:"";return _(e)||""}get shouldHaveStartMarkup(){return this.phoneCodesFlagIconName()||super.shouldHaveStartMarkup}get startIconMarkup(){const e=this.phoneCodesFlagIconName();return e?r`<ngc-icon
|
|
35
38
|
id="${this.startIconId}"
|
|
36
39
|
label="${y(this.iconAsLabel?this.label:void 0)}"
|
|
37
40
|
.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){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,
|
|
41
|
+
></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
42
|
<input ${m(this.inputRef)}
|
|
40
43
|
type="${this.type}"
|
|
41
44
|
.id="${this.id}"
|
|
@@ -86,7 +89,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
86
89
|
</ngc-chip>
|
|
87
90
|
`:b}
|
|
88
91
|
</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,
|
|
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 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,u=e.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((p,f)=>{f<c?p.classList.remove("gator-visually-hidden"):p.classList.add("gator-visually-hidden")});const E=e.scrollWidth,x=c===this.selectedValues.length;if(E+(!x?i+o:0)>s){const p=Math.max(1,c-1);this._visibleChipCount=p,this._showOverflowChip=p<this.selectedValues.length,u.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
93
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
91
94
|
${this.displayedValue||this.placeholder}
|
|
92
95
|
</div>
|
|
@@ -139,11 +142,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
139
142
|
>
|
|
140
143
|
${e}
|
|
141
144
|
</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 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.isTagInputMode&&this._searchValue.trim()===""&&this.filteredOptions.length===0}get tagInputHintMessage(){const e=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>${e}</strong>"`)}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=
|
|
145
|
+
`: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 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.isTagInputMode&&this._searchValue.trim()===""&&this.filteredOptions.length===0}get tagInputHintMessage(){const e=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>${e}</strong>"`)}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=k():this.dataType==="state"&&this.countryCode?e=M(this.countryCode):this.dataType==="naics"?e=D():this.dataType==="phoneCodes"&&(e=T()),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 _(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 u=s==="number"?Number(e.detail.value):e.detail.value;return o===u});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){if(e.key===n.ENTER||e.key===n.SPACE){if(e.key===n.ENTER&&this.tryAddTagFromKeyboard(e))return;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.ESCAPE||e.key===n.TAB)&&this.closeListbox()}toggleListbox(e,t){if(this.disabled||this.readonly)return;if(!t){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):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
146
|
class="gator-dropdown-chevron"
|
|
144
147
|
name="${this.renderedEndIcon}"
|
|
145
148
|
?disabled="${this.disabled||this.readonly}"
|
|
146
|
-
></ngc-icon>`}get renderedEndIcon(){return this.endIcon?this.endIcon:this._expanded?"chevron-up":"chevron-down"}get clearIconButtonMarkup(){return!this.autocomplete||this.hideClear||!this.value&&!this.inputRef.value?.value?null:r`
|
|
149
|
+
></ngc-icon>`}get renderedEndIcon(){return this.endIcon?this.endIcon:this._expanded?"chevron-up":"chevron-down"}get clearIconButtonMarkup(){return!this.autocomplete||this.hideClear||!this._focused&&!this._hovered||!this.value&&!this.inputRef.value?.value?null:r`
|
|
147
150
|
<ngc-icon-button
|
|
148
151
|
data-testid="${this.dataTestid}-clear-button"
|
|
149
152
|
icon-name="exit"
|
|
@@ -152,4 +155,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
152
155
|
@click="${this.clearValue}"
|
|
153
156
|
?disabled="${this.disabled||this.readonly}"
|
|
154
157
|
></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?.(),this._cleanup=O(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await I(e,this.listboxRef.value,{strategy:"fixed",placement:"bottom-start",middleware:[
|
|
158
|
+
`}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?.(),this._cleanup=O(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await I(e,this.listboxRef.value,{strategy:"fixed",placement:"bottom-start",middleware:[L()]});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`})},{animationFrame:!0}))}handleInput(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=t.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:t.value}}))}handleInputKeydown(e){if((e.key===n.DOWN||e.key===n.UP)&&e.preventDefault(),e.key===n.SPACE){e.stopPropagation();return}this.tryAddTagFromKeyboard(e)||e.key===n.BACKSPACE&&this.tryRemoveLastChipFromBackspace(e)}tryRemoveLastChipFromBackspace(e){if(!this.autocomplete||!this.multiselect||this._searchValue.trim()!=="")return;e.preventDefault(),e.stopPropagation(),this._searchValue!==""&&this.clearSearchInput();const t=this.selectedValues||[];t.length>0&&(t.pop(),this.emitChangeEvent(t))}tryAddTagFromKeyboard(e){if(!this.isTagInputMode)return!1;const t=e.key===n.ENTER,s=e.key===n.TAB;return!t&&!s||!this._searchValue.trim()||t&&this._expanded&&this.displayedOptions.length>0&&this.listRef.value&&this.listRef.value.listItems.some(u=>u.falseFocusing)?!1:(e.preventDefault(),e.stopPropagation(),this.addTagFromInput(),this.inputRef.value?.focus(),!0)}showListboxPopover(){const e=this.listboxRef.value;if(e)try{e.showPopover()}catch{}}get valueArrayType(){return this.selectedValues.length>0?typeof this.selectedValues[0]=="number"?"number":"string":this.options?.length&&typeof this.options[0].value=="number"?"number":"string"}addTagFromInput(){const e=this._searchValue.trim();if(!e||!this.isTagInputMode)return;const t=[...this.selectedValues],s=this.valueArrayType,i=s==="number"?Number(e):e;if(!(s==="number"&&Number.isNaN(i))){if(t.some(o=>o===i)){this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox();return}t.push(i),this.emitChangeEvent(t),this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox()}}clearSearchInput(){this._searchValue="",this.inputRef.value&&(this.inputRef.value.value="")}emitChangeEvent(e){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(e)?[...e]:e}}))}};l.shadowRootOptions={...C.shadowRootOptions,delegatesFocus:!0};l.styles=[...H(l,l,"styles"),N(B)];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,attribute:"hide-clear"})],l.prototype,"hideClear",2);a([h({type:Boolean})],l.prototype,"loading",2);a([h({type:Boolean,attribute:"tag-input"})],l.prototype,"tagInput",2);a([d()],l.prototype,"_activeDescendant",2);a([d()],l.prototype,"_expanded",2);a([d()],l.prototype,"_searchValue",2);a([d()],l.prototype,"_focused",2);a([d()],l.prototype,"_hovered",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([V("ngc-input-dropdown"),R()],l);export{l as NgcInputDropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=".gator-panel{display:flex;width:var(--ngc-panel-width, 29.5rem);height:100vh;flex-direction:column;flex:1 0 0;align-items:flex-start;background:var(--color-surface-primary)}.gator-panel-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-left.gator-panel-outlined{border-right:1px solid var(--color-border-tertiary)}.gator-panel-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-right.gator-panel-outlined{border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom{width:100%;height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom.gator-panel-elevated{box-shadow:var(--shadow-panel-bottom)}.gator-panel-bottom.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom-left{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-bottom-left.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary)}.gator-panel-bottom-right{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-bottom-right.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}:focus-visible{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:-2px}.gator-panel-header{border-bottom:var(--ngc-panel-header-border-bottom, 1px solid var(--color-border-tertiary));padding:var(--spacing-8);align-self:stretch;height:var(--ngc-panel-header-height, max-content)}.gator-panel-content{display:flex;flex-direction:column;padding:var(--ngc-panel-body-padding, var(--spacing-8));flex:1 0 0;align-self:stretch;gap:var(--spacing-8)}.gator-panel-footer{padding:var(--spacing-8);align-self:stretch;border-top:var(--ngc-panel-footer-border-top, none);background:var(--ngc-panel-footer-background-color, var(--color-surface-secondary));height:var(--ngc-panel-footer-height, max-content)}.gator-panel-footer-loading{display:flex;gap:var(--spacing-8);justify-content:center;align-items:center;height:100%}.gator-panel:not(.gator-panel-open,.gator-panel-close){display:none}.gator-panel .gator-panel-open{display:flex}.gator-panel-overlay{position:absolute;z-index:1}.gator-panel-overlay.gator-panel-open.gator-panel-left{top:0;left:var(--anchor-element-offset, 0);animation:slideInFromLeft .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-right{top:0;right:var(--anchor-element-offset, 0);animation:slideInFromRight .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom,.gator-panel-overlay.gator-panel-open.gator-panel-bottom-left{bottom:0;left:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom-right{bottom:0;right:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-left{animation:slideOutToLeft .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-right{animation:slideOutToRight .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-bottom,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-left,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-right{animation:slideOutToBottom .3s forwards}@keyframes slideInFromLeft{0%{display:none;transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(-100%);display:none;opacity:0}}@keyframes slideInFromRight{0%{display:none;transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(100%);display:none;opacity:0}}@keyframes slideInFromBottom{0%{display:none;transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutToBottom{0%{transform:translateY(0)}25%{opacity:1}to{transform:translateY(100%);display:none;opacity:0}}";export{a as default};
|
|
1
|
+
const a=".gator-panel{display:flex;width:var(--ngc-panel-width, 29.5rem);height:100vh;flex-direction:column;flex:1 0 0;align-items:flex-start;background:var(--color-surface-primary)}.gator-panel-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-left.gator-panel-outlined{border-right:1px solid var(--color-border-tertiary)}.gator-panel-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-right.gator-panel-outlined{border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom{width:100%;height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom.gator-panel-elevated{box-shadow:var(--shadow-panel-bottom)}.gator-panel-bottom.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom-left{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-bottom-left.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary)}.gator-panel-bottom-right{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-bottom-right.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}:focus-visible{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:-2px}.gator-panel-header{border-bottom:var(--ngc-panel-header-border-bottom, 1px solid var(--color-border-tertiary));padding:var(--spacing-8);align-self:stretch;height:var(--ngc-panel-header-height, max-content)}.gator-panel-content{display:flex;flex-direction:column;padding:var(--ngc-panel-body-padding, var(--spacing-8));flex:1 0 0;align-self:stretch;gap:var(--spacing-8);overflow-y:auto;flex-shrink:1;min-height:0}.gator-panel-footer{padding:var(--spacing-8);align-self:stretch;border-top:var(--ngc-panel-footer-border-top, none);background:var(--ngc-panel-footer-background-color, var(--color-surface-secondary));height:var(--ngc-panel-footer-height, max-content)}.gator-panel-footer-loading{display:flex;gap:var(--spacing-8);justify-content:center;align-items:center;height:100%}.gator-panel:not(.gator-panel-open,.gator-panel-close){display:none}.gator-panel .gator-panel-open{display:flex}.gator-panel-overlay{position:absolute;z-index:1}.gator-panel-overlay.gator-panel-open.gator-panel-left{top:0;left:var(--anchor-element-offset, 0);animation:slideInFromLeft .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-right{top:0;right:var(--anchor-element-offset, 0);animation:slideInFromRight .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom,.gator-panel-overlay.gator-panel-open.gator-panel-bottom-left{bottom:0;left:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom-right{bottom:0;right:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-left{animation:slideOutToLeft .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-right{animation:slideOutToRight .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-bottom,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-left,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-right{animation:slideOutToBottom .3s forwards}@keyframes slideInFromLeft{0%{display:none;transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(-100%);display:none;opacity:0}}@keyframes slideInFromRight{0%{display:none;transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(100%);display:none;opacity:0}}@keyframes slideInFromBottom{0%{display:none;transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutToBottom{0%{transform:translateY(0)}25%{opacity:1}to{transform:translateY(100%);display:none;opacity:0}}";export{a as default};
|
|
@@ -81,6 +81,8 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
81
81
|
private _activeDescendant;
|
|
82
82
|
_expanded: boolean;
|
|
83
83
|
_searchValue: string;
|
|
84
|
+
private _focused;
|
|
85
|
+
private _hovered;
|
|
84
86
|
private _visibleChipCount;
|
|
85
87
|
private _showOverflowChip;
|
|
86
88
|
private _truncateChips;
|
|
@@ -100,6 +102,9 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
100
102
|
'gator-disabled': boolean;
|
|
101
103
|
'gator-readonly': boolean;
|
|
102
104
|
};
|
|
105
|
+
private _topLevelFocusIn;
|
|
106
|
+
private _handleMouseEnter;
|
|
107
|
+
private _handleMouseLeave;
|
|
103
108
|
private _topLevelFocusOut;
|
|
104
109
|
private get tabIndexForControl();
|
|
105
110
|
/** Flag icon for `phoneCodes`; derived from `value` each render (host-bound value is reliable here). */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.4.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "14.
|
|
103
|
+
"@ncino/styles": "14.4.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "14.
|
|
106
|
+
"@ncino/styles": "14.4.0"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED