@ncino/web-components 10.5.3 → 11.0.0

package/dist/components/input/gator/dropdown/input-dropdown.gator.js

@@ -1,4 +1,4 @@
-import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as m}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 x}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{msg as y}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as E}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 R}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as f}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as O,computePosition as D,flip as V}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 I}from"../../../../utils/industry-utils.js";import{flagIconNameByDialCode as C,formattedPhoneCountryCodes as L}from"../../../../utils/phone-utils.js";import S 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 B}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var T=Object.defineProperty,F=Object.getOwnPropertyDescriptor,N=Object.getPrototypeOf,q=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?F(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&&T(t,s,o),o},W=(e,t,s)=>q(N(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`
+import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as m}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{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as E}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 R}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as f}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as O,computePosition as V,flip as D}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 I}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as M}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as L,formattedPhoneCountryCodes as S,phoneCountryDropdownOptionMatchesQuery as B}from"../../../../utils/phone-utils.js";import F 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 T}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var N=Object.defineProperty,P=Object.getOwnPropertyDescriptor,q=Object.getPrototypeOf,W=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?P(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&&N(t,s,o),o},z=(e,t,s)=>W(q(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`
             <div class="gator-form-element">
                 <slot name="label">
                     ${this.label?this.labelMarkup:null}
@@ -6,7 +6,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 <div
                     ${f(this.controlRef)}
                     class=${w(this.controlClasses)}
-                    data-testid=${x(this.dataTestid)}-listbox
+                    data-testid=${y(this.dataTestid)}-listbox
                     aria-disabled="${this.disabled}"
                     id="listbox-control-${this.id}"
                     tabindex="${this.tabIndexForControl}"
@@ -31,7 +31,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 ${this.bottomText}
                 ${this.listboxMarkup}
             </div>
-        `}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"}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("value")||e.has("dataType"))&&this.dataType==="phoneCodes"){const t=typeof this.value=="string"?this.value:"";this.startIcon=C(t)||""}e.has("_searchValue")&&this._searchValue===""&&(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`
+        `}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 C(e)||""}get shouldHaveStartMarkup(){return this.phoneCodesFlagIconName()||super.shouldHaveStartMarkup}get startIconMarkup(){const e=this.phoneCodesFlagIconName();return e?r`<ngc-icon
+                id="${this.startIconId}"
+                label="${y(this.iconAsLabel?this.label:void 0)}"
+                .name="${e}"
+            ></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?(this.setAriaActiveDescendant(),this.autocomplete&&!this.multiselect&&e.get("_expanded")!==!0&&this._searchValue===""&&(this._searchValue=this.displayedValue)):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._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`
             <input ${f(this.inputRef)}
                 type="${this.type}"
                 .id="${this.id}"
@@ -42,7 +46,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 class="gator-input"
                 autocomplete="one-time-code"
                 data-1p-ignore
-                .value="${this.displayedValue}"
+                .value="${this.autocompleteEditorValue}"
                 @input="${this.handleInput}"
                 @keydown="${this.handleInputKeydown}"
                 @focusin="${this.handleInputFocusIn}"
@@ -82,11 +86,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                     </ngc-chip>
                 `:m}
             </div>
-        `}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,b)=>{b<u?p.classList.remove("gator-visually-hidden"):p.classList.add("gator-visually-hidden")});const $=e.scrollWidth,g=u===this.selectedValues.length;if($+(!g?i+o:0)>s){const p=Math.max(1,u-1);this._visibleChipCount=p,this._showOverflowChip=p<this.selectedValues.length,c.forEach((b,A)=>{A<p?b.classList.remove("gator-visually-hidden"):b.classList.add("gator-visually-hidden")});return}if(g){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`
+        `}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,b)=>{b<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((b,A)=>{A<p?b.classList.remove("gator-visually-hidden"):b.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`
             <div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
                 ${this.displayedValue||this.placeholder}
             </div>
-        `}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.value:this.displayedOptions.find(t=>t.value===this.value)?.label??this.value}get showPlaceholder(){return this.placeholder&&!this.value}get listboxMarkup(){return r`
+        `}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?L(this.value)||this.value:this.value:this.displayedOptions.find(t=>t.value===this.value)?.label??String(this.value)}get autocompleteEditorValue(){return this.autocomplete?this.multiselect?this._searchValue:this._expanded?this._searchValue:this.displayedValue:this.displayedValue}get showPlaceholder(){return this.placeholder&&!this.value}get listboxMarkup(){return r`
             <div
                 ${f(this.listboxRef)}
                 popover="manual"
@@ -107,7 +111,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                             class="gator-dropdown-select-all"
                             hide-checkmark
                             start-icon="${this.selectAllIcon}"
-                            text="${y("Select All")}"
+                            text="${g("Select All")}"
                             value="all"
                             faux-focus
                             ?selected="${this.allSelected}"
@@ -120,7 +124,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                             .value="${e.value}"
                             ?selected="${this.getOptionSelected(e.value)}"
                             id="${this.id}-${e.value}"
-                            start-icon="${x(this.getStartIconForOption(e.value))}"
+                            start-icon="${y(this.getStartIconForOption(e.value))}"
                             faux-focus
                         ></ngc-list-item>
                     `)??m}
@@ -135,7 +139,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 >
                     ${e}
                 </div>
-            `: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 y(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return y("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=k():this.dataType==="state"&&this.countryCode?e=M(this.countryCode):this.dataType==="naics"?e=I():this.dataType==="phoneCodes"&&(e=L()),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&&(e==n.DOWN||!this.value)?this._activeDescendant=this.listRef.value?.falseFocusFirstItem():this.value&&this.listRef.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))}closeListbox(){this._expanded=!1,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
+            `: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=k():this.dataType==="state"&&this.countryCode?e=I(this.countryCode):this.dataType==="naics"?e=M():this.dataType==="phoneCodes"&&(e=S()),this._searchValue?this.dataType==="phoneCodes"?e.filter(s=>B(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;if(!t){const i=this._expanded;this._expanded=!this._expanded,this.autocomplete&&!this.multiselect&&this._expanded&&!i&&(this._searchValue=this.displayedValue)}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&&(e==n.DOWN||!this.value)?this._activeDescendant=this.listRef.value?.falseFocusFirstItem():this.value&&this.listRef.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
             class="gator-dropdown-chevron"
             name="${this.renderedEndIcon}"
             ?disabled="${this.disabled||this.readonly}"
@@ -148,4 +152,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 @click="${this.clearValue}"
                 ?disabled="${this.disabled||this.readonly}"
             ></ngc-icon-button>
-        `}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=O(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:[V()]});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=[...W(l,l,"styles"),B(S)];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([R("ngc-input-dropdown"),E()],l);export{l as NgcInputDropdown};
+        `}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=O(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await V(e,this.listboxRef.value,{placement:"bottom-start",middleware:[D()]});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=[...z(l,l,"styles"),T(F)];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([R("ngc-input-dropdown"),E()],l);export{l as NgcInputDropdown};

package/dist/components/input/gator/input-phone/input-phone.gator.js

@@ -1,11 +1,11 @@
-import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{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{state as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as c}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as p,ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import m from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{NgcInputBase as v}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{parsePhoneNumber as b}from"../../../../node_modules/.pnpm/libphonenumber-js@1.12.37/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as f}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,C=Object.getPrototypeOf,$=Reflect.get,u=(e,t,r,i)=>{for(var n=i>1?void 0:i?g(t,r):t,a=e.length-1,l;a>=0;a--)(l=e[a])&&(n=(i?l(t,r,n):l(n))||n);return i&&n&&y(t,r,n),n},P=(e,t,r)=>$(C(e),r,t);let o=class extends v{constructor(){super(...arguments),this.inputContainer=p(),this.dropdownContainer=p()}render(){return s`
+import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{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{property as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as m}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as p,ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import v from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{NgcInputBase as f}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{parsePhoneNumber as y}from"../../../../node_modules/.pnpm/libphonenumber-js@1.12.37/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as b}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var g=Object.defineProperty,C=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,P=Reflect.get,a=(e,t,r,i)=>{for(var n=i>1?void 0:i?C(t,r):t,u=e.length-1,l;u>=0;u--)(l=e[u])&&(n=(i?l(t,r,n):l(n))||n);return i&&n&&g(t,r,n),n},_=(e,t,r)=>P($(e),r,t);let o=class extends f{constructor(){super(...arguments),this.inputContainer=p(),this.dropdownContainer=p()}get phoneRegionIso(){if(this.countryCodeValue!=null&&this.countryCodeValue!=="")return this.countryCodeValue;if(this.countryCodeValue===null||this.countryCodeValue==="")return;const e=this.defaultCountry?.trim();return e?e.toUpperCase():void 0}render(){return s`
             <div class="gator-form-element">
                 ${this.label?this.labelMarkup:null}
                 <div class="gator-phone-input-container" ${d(this.inputContainer)}>
                     <div class="gator-phone-input-country-container">
                         <ngc-input-dropdown
                             ${d(this.dropdownContainer)}
-                            value="${this.countryCodeValue}"
+                            .value=${this.phoneRegionIso}
                             id="country-${this.id}"
                             ?disabled="${this.disabled}"
                             autocomplete
@@ -33,7 +33,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 </div>
                 ${this.bottomText}
             </div>
-        `}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(e){this.countryCodeValue=e.detail.value}handlePhoneInput(e){e.preventDefault(),e.stopPropagation();const t=b(e.detail.value,this.countryCodeValue);if(t){!this.countryCodeValue&&t.countryCallingCode&&(this.countryCodeValue="+"+t.countryCallingCode),this.phoneNumberValue=t.nationalNumber,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value,countryCode:t.countryCallingCode,country:t.country,phoneNumber:t.nationalNumber,formattedPhoneNumber:t.formatInternational()}}));return}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value}}))}get slotLabelMarkup(){return s`
+        `}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(e){const t=e.detail.value;if(t===""||t===null||t===void 0){this.countryCodeValue=null;return}this.countryCodeValue=typeof t=="string"?t.toUpperCase():String(t)}handlePhoneInput(e){e.preventDefault(),e.stopPropagation();const t=y(e.detail.value,this.phoneRegionIso);if(t){t.country&&(this.countryCodeValue=t.country),this.phoneNumberValue=t.nationalNumber,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value,countryCode:t.countryCallingCode,country:t.country,phoneNumber:t.nationalNumber,formattedPhoneNumber:t.formatInternational()}}));return}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value}}))}get slotLabelMarkup(){return s`
             <ngc-input-label
                 slot="label"
                 hide-label
@@ -41,4 +41,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
                 .required="${this.required}"
             >
                 ${this.label}
-            </ngc-input-label>`}};o.styles=[...P(o,o,"styles"),f(m)];u([h()],o.prototype,"countryCodeValue",2);u([h()],o.prototype,"phoneNumberValue",2);o=u([c("ngc-input-phone")],o);export{o as NgcInputPhone};
+            </ngc-input-label>`}};o.styles=[..._(o,o,"styles"),b(v)];a([h()],o.prototype,"countryCodeValue",2);a([h()],o.prototype,"phoneNumberValue",2);a([c({type:String,attribute:"default-country"})],o.prototype,"defaultCountry",2);o=a([m("ngc-input-phone")],o);export{o as NgcInputPhone};

package/dist/index.data.js

@@ -1 +1 @@
-import{formattedNaicsCodes as e}from"./utils/industry-utils.js";import{flagIconName as a,flagIconNameByDialCode as d,formattedPhoneCountryCodes as f}from"./utils/phone-utils.js";import{formattedCountriesForDropdown as n,formattedStatesForDropdown as p}from"./utils/places-utils.js";export{a as flagIconName,d as flagIconNameByDialCode,n as formattedCountriesForDropdown,e as formattedNaicsCodes,f as formattedPhoneCountryCodes,p as formattedStatesForDropdown};
+import{formattedNaicsCodes as r}from"./utils/industry-utils.js";import{dialCodeForPhoneCountryCode as n,flagIconName as a,flagIconNameByDialCode as d,flagIconNameByPhoneCountryCode as C,formattedPhoneCountryCodes as f,phoneCountryDropdownOptionMatchesQuery as m}from"./utils/phone-utils.js";import{formattedCountriesForDropdown as y,formattedStatesForDropdown as s}from"./utils/places-utils.js";export{n as dialCodeForPhoneCountryCode,a as flagIconName,d as flagIconNameByDialCode,C as flagIconNameByPhoneCountryCode,y as formattedCountriesForDropdown,r as formattedNaicsCodes,f as formattedPhoneCountryCodes,s as formattedStatesForDropdown,m as phoneCountryDropdownOptionMatchesQuery};

package/dist/types/components/input/gator/dropdown/input-dropdown.gator.d.ts

@@ -91,6 +91,10 @@ export declare class NgcInputDropdown extends NgcInputBase {
     };
     private _topLevelFocusOut;
     private get tabIndexForControl();
+    /** Flag icon for `phoneCodes`; derived from `value` each render (host-bound value is reliable here). */
+    private phoneCodesFlagIconName;
+    get shouldHaveStartMarkup(): string | undefined;
+    get startIconMarkup(): import('lit').TemplateResult<1> | null;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     get comboboxElement(): HTMLElement | undefined;
@@ -111,7 +115,9 @@ export declare class NgcInputDropdown extends NgcInputBase {
     private setupResizeObserver;
     removeSelection(value: string | number): void;
     get fauxInputMarkup(): import('lit').TemplateResult<1>;
-    get displayedValue(): string | number | number[] | string[];
+    get displayedValue(): string;
+    /** Combobox text: while expanded (single-select) or always for multiselect search, edit buffer is `_searchValue`. */
+    private get autocompleteEditorValue();
     get showPlaceholder(): boolean | "";
     get listboxMarkup(): import('lit').TemplateResult<1>;
     get selectAllIcon(): "checkbox-selected" | "checkbox" | "checkbox-indeterminate";

package/dist/types/components/input/gator/input-phone/input-phone.gator.d.ts

@@ -1,12 +1,25 @@
 import { Ref } from 'lit/directives/ref.js';
+import { CountryCode } from 'libphonenumber-js';
 import { NgcInputBase } from '../../base/input-base.gator.ts';
 import { NgcInputDropdown } from '../dropdown/input-dropdown.gator.ts';
 export declare class NgcInputPhone extends NgcInputBase {
     static styles: import('lit').CSSResult[];
-    countryCodeValue: string | undefined;
+    /**
+     * ISO region from the dropdown: `undefined` = never touched (use `default-country`),
+     * `null` = user cleared the field, non-empty string = explicit choice.
+     */
+    countryCodeValue: string | undefined | null;
     phoneNumberValue: string | undefined;
+    /** ISO 3166-1 alpha-2 default for the calling-code dropdown (e.g. `US`). */
+    defaultCountry?: string;
     inputContainer: Ref<HTMLDivElement>;
     dropdownContainer: Ref<NgcInputDropdown>;
+    /**
+     * ISO region for the calling-code control and libphonenumber default: explicit dropdown
+     * selection, otherwise `default-country` (normalized). Not the same as `countryCodeValue`
+     * when only a default is in effect.
+     */
+    get phoneRegionIso(): CountryCode | undefined;
     render(): import('lit').TemplateResult<1>;
     updated(): void;
     handleSelected(e: CustomEvent): void;

package/dist/types/utils/data/data-models.d.ts

@@ -48,5 +48,5 @@ export interface IPhoneCountryCode {
     name: string;
     dial_code: string;
     code: string;
-    iconOverride: string;
+    iconOverride?: string;
 }

package/dist/types/utils/phone-utils.d.ts

@@ -1,3 +1,4 @@
+/** Option values are ISO 3166-1 alpha-2 codes so shared dial codes (e.g. +1) stay distinct. */
 export declare function formattedPhoneCountryCodes(): {
     value: string;
     label: string;
@@ -9,6 +10,19 @@ export declare function formattedPhoneCountryCodes(): {
 export declare function flagIconName(code: string, name: string, iconOverride?: string): string;
 /**
  * Given a dial code (e.g., "+1"), returns its corresponding flag icon name.
- * If not found, returns an empty string so consumers can safely bind it.
+ * If several countries share the dial code, the first match in the dataset is used.
  */
 export declare function flagIconNameByDialCode(dialCode: string | undefined | null): string;
+/**
+ * Flag icon for an ISO country code (matches `formattedPhoneCountryCodes` option values).
+ */
+export declare function flagIconNameByPhoneCountryCode(isoCode: string | undefined | null): string;
+export declare function dialCodeForPhoneCountryCode(isoCode: string | undefined | null): string;
+/**
+ * Whether a phone country dropdown option matches a free-typed combobox query
+ * (label, ISO code, dial code with or without "+").
+ */
+export declare function phoneCountryDropdownOptionMatchesQuery(option: {
+    value: string | number;
+    label: string;
+}, rawQuery: string): boolean;

package/dist/utils/phone-utils.js

@@ -1 +1 @@
-import n from"../packages/web-components/src/utils/data/phone-country-codes.json.js";function l(){return n.map(e=>({value:e.dial_code,label:e.dial_code+" "+e.name}))}function c(o,e,r){const a=t=>t.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return`flag-${o.toLowerCase()}-${r??a(e)}`}function u(o){if(!o)return"";const e=n.find(r=>r.dial_code===o);return e?c(e.code,e.name,e.iconOverride):""}export{c as flagIconName,u as flagIconNameByDialCode,l as formattedPhoneCountryCodes};
+import o from"../packages/web-components/src/utils/data/phone-country-codes.json.js";function C(){return o.map(e=>({value:e.code,label:e.dial_code+" "+e.name}))}function u(r,e,t){const a=n=>n.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");return`flag-${r.toLowerCase()}-${t??a(e)}`}function p(r){if(!r)return"";const e=o.find(t=>t.dial_code===r);return e?u(e.code,e.name,e.iconOverride):""}function m(r){if(!r)return"";const e=o.find(t=>t.code.toUpperCase()===r.toUpperCase());return e?u(e.code,e.name,e.iconOverride):""}function s(r){return r?o.find(t=>t.code.toUpperCase()===r.toUpperCase())?.dial_code??"":""}function i(r){return r.replace(/\D/g,"")}function g(r,e){const t=e.trim().toLowerCase();if(!t||r.label.toLowerCase().includes(t)||String(r.value).toLowerCase().includes(t))return!0;const n=s(String(r.value));if(!n)return!1;if(n.toLowerCase().includes(t))return!0;const c=i(t);return!!(c.length>0&&i(n).includes(c))}export{s as dialCodeForPhoneCountryCode,u as flagIconName,p as flagIconNameByDialCode,m as flagIconNameByPhoneCountryCode,C as formattedPhoneCountryCodes,g as phoneCountryDropdownOptionMatchesQuery};

package/dist/utils/vitest-a11y-utils.js

@@ -1 +1 @@
-import{page as s}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_15ce015fd735d7fcd4ba9834ac746834/node_modules/vitest/browser/context.js";import n from"../_virtual/axe.js";import{g as o}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_15ce015fd735d7fcd4ba9834ac746834/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function g(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function h(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{h as expectComponentFocusStyle,g as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};
+import{page as s}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/browser/context.js";import n from"../_virtual/axe.js";import{g as o}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function g(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function h(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{h as expectComponentFocusStyle,g as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "10.5.3",
+  "version": "11.0.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -79,7 +79,7 @@
     "@vitest/ui": "4.1.0",
     "axe-core": "^4.11.1",
     "cem-plugin-expanded-types": "^1.4.0",
-    "chromatic": "^15.3.0",
+    "chromatic": "^16.1.0",
     "conventional-changelog-conventionalcommits": "^9.3.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-elements-manifest": "^2.1.0",
@@ -88,10 +88,10 @@
     "eslint-plugin-yml": "3.3.0",
     "glob": "^13.0.6",
     "jsdom": "29.0.1",
-    "playwright": "1.58.2",
+    "playwright": "1.59.1",
     "postcss": "^8.5.6",
     "rimraf": "^6.1.3",
-    "sass": "1.98.0",
+    "sass": "1.99.0",
     "storybook": "^10.3.0",
     "storybook-addon-code-editor": "^6.1.3",
     "typescript": "^5.9.3",
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.0",
     "yaml-eslint-parser": "^2.0.0",
-    "@ncino/styles": "10.5.3"
+    "@ncino/styles": "11.0.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "10.5.3"
+    "@ncino/styles": "11.0.0"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "10.5.2",
+  "version": "10.5.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -5033,6 +5033,8 @@
               { "name": "inputRef", "type": "Ref<HTMLInputElement>" },
               { "name": "listboxMessageRef", "type": "Ref<HTMLElement>" },
               { "name": "controlClasses" },
+              { "name": "shouldHaveStartMarkup" },
+              { "name": "startIconMarkup" },
               { "name": "comboboxElement", "type": "HTMLElement | undefined" },
               { "name": "inputMarkup" },
               { "name": "multiselectLabel" },
@@ -5057,9 +5059,7 @@
               { "name": "renderedEndIcon" },
               { "name": "clearIconButtonMarkup" },
               { "name": "controlRef", "type": "Ref<HTMLDivElement>" },
-              { "name": "shouldHaveStartMarkup" },
               { "name": "shouldHaveEndMarkup" },
-              { "name": "startIconMarkup" },
               { "name": "startIconId" },
               { "name": "labelMarkup" },
               { "name": "labelId" },
@@ -5111,6 +5111,11 @@
           "description": "\n---\n\n\n### **Events:**\n - **change**\n- **input**",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "default-country",
+              "description": "ISO 3166-1 alpha-2 default for the calling-code dropdown (e.g. `US`).",
+              "value": { "type": "string | undefined" }
+            },
             { "name": "id", "value": { "type": "string", "default": "''" } },
             {
               "name": "required",
@@ -5199,10 +5204,24 @@
           ],
           "js": {
             "properties": [
-              { "name": "countryCodeValue", "type": "string | undefined" },
+              {
+                "name": "countryCodeValue",
+                "description": "ISO region from the dropdown: `undefined` = never touched (use `default-country`),\n`null` = user cleared the field, non-empty string = explicit choice.",
+                "type": "string | undefined | null"
+              },
               { "name": "phoneNumberValue", "type": "string | undefined" },
+              {
+                "name": "defaultCountry",
+                "description": "ISO 3166-1 alpha-2 default for the calling-code dropdown (e.g. `US`).",
+                "type": "string | undefined"
+              },
               { "name": "inputContainer", "type": "Ref<HTMLDivElement>" },
               { "name": "dropdownContainer", "type": "Ref<NgcInputDropdown>" },
+              {
+                "name": "phoneRegionIso",
+                "description": "ISO region for the calling-code control and libphonenumber default: explicit dropdown\nselection, otherwise `default-country` (normalized). Not the same as `countryCodeValue`\nwhen only a default is in effect.",
+                "type": "CountryCode | undefined"
+              },
               { "name": "slotLabelMarkup" },
               { "name": "controlRef", "type": "Ref<HTMLDivElement>" },
               { "name": "shouldHaveStartMarkup" },