@ncino/web-components 13.4.2 → 13.5.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 b}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{repeat as E}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as R}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{classMap as w}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as O}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as V,computePosition as D,flip as k}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as I,formattedStatesForDropdown as M}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as L}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as S,formattedPhoneCountryCodes as B,phoneCountryDropdownOptionMatchesQuery as F}from"../../../../utils/phone-utils.js";import T from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as _}from"../../base/input-base.gator.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import{unsafeCSS as N}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var P=Object.defineProperty,q=Object.getOwnPropertyDescriptor,W=Object.getPrototypeOf,z=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?q(t,s):t,c=e.length-1,u;c>=0;c--)(u=e[c])&&(o=(i?u(t,s,o):u(o))||o);return i&&o&&P(t,s,o),o},H=(e,t,s)=>z(W(e),s,t);let l=class extends _{constructor(){super(...arguments),this.multiselect=!1,this.options=[],this.autocomplete=!1,this.selectAll=!1,this.listboxHelpText="",this.valueDisplayed=!1,this.maxAutocompleteResults=250,this.wrapChips=!1,this.loading=!1,this._expanded=!1,this._searchValue="",this._visibleChipCount=1/0,this._showOverflowChip=!1,this._truncateChips=!0,this._calculationPending=!1,this.listboxRef=v(),this.listRef=v(),this.inputRef=v(),this.listboxMessageRef=v(),this.multiselectValueDelimiter=", ",this._selectedValues=[]}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._cleanup?.()}render(){return r`
+import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as b}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{repeat as E}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as R}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{classMap as w}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as O}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as V,computePosition as D,flip as k}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as I,formattedStatesForDropdown as M}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as L}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as S,formattedPhoneCountryCodes as B,phoneCountryDropdownOptionMatchesQuery as F}from"../../../../utils/phone-utils.js";import T from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as _}from"../../base/input-base.gator.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import{unsafeCSS as N}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var P=Object.defineProperty,q=Object.getOwnPropertyDescriptor,W=Object.getPrototypeOf,z=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?q(t,s):t,c=e.length-1,u;c>=0;c--)(u=e[c])&&(o=(i?u(t,s,o):u(o))||o);return i&&o&&P(t,s,o),o},H=(e,t,s)=>z(W(e),s,t);let l=class extends _{constructor(){super(...arguments),this.multiselect=!1,this.options=[],this.autocomplete=!1,this.selectAll=!1,this.listboxHelpText="",this.valueDisplayed=!1,this.maxAutocompleteResults=250,this.wrapChips=!1,this.hideClear=!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}
@@ -143,7 +143,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
             class="gator-dropdown-chevron"
             name="${this.renderedEndIcon}"
             ?disabled="${this.disabled||this.readonly}"
-        ></ngc-icon>`}get renderedEndIcon(){return this.endIcon?this.endIcon:this._expanded?"chevron-up":"chevron-down"}get clearIconButtonMarkup(){return!this.autocomplete||!this.value&&!this.inputRef.value?.value?null:r`
+        ></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`
             <ngc-icon-button
                 data-testid="${this.dataTestid}-clear-button"
                 icon-name="exit"
@@ -152,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=V(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await D(e,this.listboxRef.value,{placement:"bottom-start",middleware:[k()]});let o=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${t}px`,top:`${s+o}px`,width:`${this.listWidth??e.clientWidth}px`})}))}handleInput(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=t.value,this._expanded=!0,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:t.value}}))}handleInputKeydown(e){if((e.key===n.DOWN||e.key===n.UP)&&e.preventDefault(),e.key===n.SPACE){e.stopPropagation();return}}emitChangeEvent(e){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(e)?[...e]:e}}))}};l.shadowRootOptions={..._.shadowRootOptions,delegatesFocus:!0};l.styles=[...H(l,l,"styles"),N(T)];a([h({type:Boolean})],l.prototype,"multiselect",2);a([h({type:Array})],l.prototype,"options",2);a([h({type:Boolean})],l.prototype,"autocomplete",2);a([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);a([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);a([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);a([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);a([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);a([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);a([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);a([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);a([h({type:Boolean})],l.prototype,"loading",2);a([d()],l.prototype,"_activeDescendant",2);a([d()],l.prototype,"_expanded",2);a([d()],l.prototype,"_searchValue",2);a([d()],l.prototype,"_visibleChipCount",2);a([d()],l.prototype,"_showOverflowChip",2);a([d()],l.prototype,"_truncateChips",2);a([d()],l.prototype,"_selectedValues",2);l=a([O("ngc-input-dropdown"),R()],l);export{l as NgcInputDropdown};
+        `}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const e=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!e||(this._cleanup=V(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await D(e,this.listboxRef.value,{placement:"bottom-start",middleware:[k()]});let o=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${t}px`,top:`${s+o}px`,width:`${this.listWidth??e.clientWidth}px`})}))}handleInput(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=t.value,this._expanded=!0,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:t.value}}))}handleInputKeydown(e){if((e.key===n.DOWN||e.key===n.UP)&&e.preventDefault(),e.key===n.SPACE){e.stopPropagation();return}}emitChangeEvent(e){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(e)?[...e]:e}}))}};l.shadowRootOptions={..._.shadowRootOptions,delegatesFocus:!0};l.styles=[...H(l,l,"styles"),N(T)];a([h({type:Boolean})],l.prototype,"multiselect",2);a([h({type:Array})],l.prototype,"options",2);a([h({type:Boolean})],l.prototype,"autocomplete",2);a([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);a([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);a([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);a([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);a([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);a([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);a([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);a([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);a([h({type:Boolean,attribute:"hide-clear"})],l.prototype,"hideClear",2);a([h({type:Boolean})],l.prototype,"loading",2);a([d()],l.prototype,"_activeDescendant",2);a([d()],l.prototype,"_expanded",2);a([d()],l.prototype,"_searchValue",2);a([d()],l.prototype,"_visibleChipCount",2);a([d()],l.prototype,"_showOverflowChip",2);a([d()],l.prototype,"_truncateChips",2);a([d()],l.prototype,"_selectedValues",2);l=a([O("ngc-input-dropdown"),R()],l);export{l as NgcInputDropdown};

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

@@ -60,6 +60,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
      * @description When in multiselect mode, this will allow the chips to wrap to new lines instead of truncating to fit on a single line
      */
     wrapChips: boolean;
+    /**
+     * @property {boolean} hide-clear
+     * @description When set to true, the clear (X) icon button will not be rendered in autocomplete dropdowns
+     */
+    hideClear: boolean;
     /**
      * @property {boolean} loading
      * @description When set to true, a loading spinner will be displayed in the input

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.0",
     "yaml-eslint-parser": "^2.0.0",
-    "@ncino/styles": "13.4.2"
+    "@ncino/styles": "13.5.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "13.4.2"
+    "@ncino/styles": "13.5.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": "13.4.1",
+  "version": "13.4.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4927,6 +4927,10 @@
               "name": "wrap-chips",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "hide-clear",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "loading",
               "value": { "type": "boolean", "default": "false" }
@@ -5033,6 +5037,7 @@
                 "type": "number | undefined"
               },
               { "name": "wrapChips", "type": "boolean" },
+              { "name": "hideClear", "type": "boolean" },
               { "name": "loading", "type": "boolean" },
               { "name": "value", "type": "string | number | undefined | null" },
               { "name": "_cleanup", "type": "(() => void) | undefined" },