@ncino/web-components 2.1.0-preview.9 → 2.1.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as m,x as
|
|
1
|
+
import{a as m,x as d}from"../../../../assets/index-chunk2.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/arrow-left.js";import"../../../icon/gator/templates/arrow-right.js";import"../../../icon/gator/templates/calendar.js";import"../../../icon/gator/templates/check-circle.js";import"../../../icon/gator/templates/check.js";import"../../../icon/gator/templates/checkbox.js";import"../../../icon/gator/templates/checkbox-selected.js";import"../../../icon/gator/templates/chevron-down.js";import"../../../icon/gator/templates/chevron-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.js";import"../../../icon/gator/templates/exit.js";import"../../../icon/gator/templates/exit-circle.js";import"../../../icon/gator/templates/eye-crossed.js";import"../../../icon/gator/templates/info.js";import"../../../icon/gator/templates/link.js";import"../../../icon/gator/templates/overflow-menu.js";import"../../../icon/gator/templates/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import{t as b}from"../../../../assets/index-chunk3.js";import{n}from"../../../../assets/index-chunk.js";import{r as f}from"../../../../assets/index-chunk4.js";import{e as c,n as p}from"../../../../assets/index-chunk8.js";import{a as x,c as y,b as g}from"../../../../assets/index-chunk12.js";import{K as o}from"../../../../consts/key-constants.js";import{N as w}from"../../base/input-base.gator.js";import{f as $,a as _}from"../../../../utils/places-utils.js";import{f as R}from"../../../../utils/industry-utils.js";import{f as D}from"../../../../utils/phone-utils.js";import{o as v}from"../../../../assets/index-chunk7.js";import"../../../../assets/index-chunk5.js";import"../../../../assets/index-chunk6.js";import"../../../../utils/mixins/attribute-deletion.js";import"../../../icon/icon-registry.js";import"../../../../utils/components/testable-lit-element/testable-lit-element.js";import"../../../divider/gator/divider.gator.js";import"../../../divider/divider.js";import"../../../../assets/index-chunk9.js";import"../../base/input-base.js";const C=':root,:host{--ngc-input-dropdown-list-max-height: 14rem}.gator-dropdown-listbox{position:absolute;width:max-content;top:0;left:0;display:none;max-height:var(--ngc-input-dropdown-list-max-height);overflow-y:scroll;overflow-x:hidden;border-radius:var(--radius-card-medium, .5rem);padding:var(--spacing-padding-margin-8, .5rem) 2px;background:var(--color-surface-primary-white, #FFF);box-shadow:var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-1-y-offset, 7px) var(--shadow-shadow-3-dropdown-property-1-blur, 12px) var(--shadow-shadow-3-dropdown-property-1-spread, 0px) var(--shadow-color-10, rgba(31, 31, 31, .1)),var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-2-y-offset, 8px) var(--shadow-shadow-3-dropdown-property-2-blur, 16px) var(--shadow-shadow-3-dropdown-property-2-spread, 0px) var(--shadow-color-8, rgba(31, 31, 31, .08)),var(--shadow-x-offset-0, 0px) var(--shadow-shadow-3-dropdown-property-3-y-offset, 9px) var(--shadow-shadow-3-dropdown-property-3-blur, 18px) var(--shadow-shadow-3-dropdown-property-3-spread, 0px) var(--shadow-color-8, rgba(31, 31, 31, .08))}.gator-form-element-control:focus-visible:not(.gator-disabled){outline:2px solid var(--ngc-input-border-color-focused, #1F1F1F)!important;border:1px solid transparent!important}.gator-dropdown-listbox_expanded{display:block;z-index:1}.gator-faux-input-placeholder{color:var(--text-color-placeholder, #6D6D6D);font-family:var(--text-family-body, "Open Sans");font-size:var(--text-size-body-1, 1.0625rem);line-height:var(--text-line-height-body-1, 1.5rem);letter-spacing:var(--text-letter-spacing-default, 0rem)}';var F=Object.defineProperty,k=Object.getOwnPropertyDescriptor,I=Object.getPrototypeOf,P=Reflect.get,r=(t,e,i,s)=>{for(var l=s>1?void 0:s?k(e,i):e,h=t.length-1,u;h>=0;h--)(u=t[h])&&(l=(s?u(e,i,l):u(l))||l);return s&&l&&F(e,i,l),l},O=(t,e,i)=>P(I(t),i,e);let a=class extends w{constructor(){super(...arguments),this.options=[],this.autocomplete=!1,this.valueDisplayed=!1,this._expanded=!1,this._searchValue="",this.listboxRef=c(),this.listRef=c(),this.inputRef=c()}render(){return d`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
@@ -15,18 +15,18 @@ import{a as m,x as l}from"../../../../assets/index-chunk2.js";import"../input-la
|
|
|
15
15
|
id="listbox-control-${this.id}"
|
|
16
16
|
tabindex="${this.disabled?"-1":"0"}"
|
|
17
17
|
role="combobox"
|
|
18
|
-
title="${this.
|
|
18
|
+
title="${this.label||this.placeholder}"
|
|
19
19
|
@click="${this.toggleListbox}"
|
|
20
20
|
@keydown="${this.handleComboboxKeydown}"
|
|
21
21
|
@focusin="${this._handleControlFocusIn}"
|
|
22
22
|
@focusout="${this._topLevelFocusOut}"
|
|
23
23
|
>
|
|
24
24
|
<div class="gator-input-container">
|
|
25
|
-
${this.shouldHaveStartMarkup?
|
|
25
|
+
${this.shouldHaveStartMarkup?d`
|
|
26
26
|
<div class="gator-input-start">
|
|
27
27
|
${this.startIconMarkup}
|
|
28
28
|
</div>`:null}
|
|
29
|
-
${this.autocomplete?
|
|
29
|
+
${this.autocomplete?d`
|
|
30
30
|
<input
|
|
31
31
|
${p(this.inputRef)}
|
|
32
32
|
type="${this.type}"
|
|
@@ -56,11 +56,11 @@ import{a as m,x as l}from"../../../../assets/index-chunk2.js";import"../input-la
|
|
|
56
56
|
|
|
57
57
|
${this.listboxMarkup}
|
|
58
58
|
</div>
|
|
59
|
-
`}_topLevelFocusOut(t){t.relatedTarget||(this._expanded=!1)}_handleControlFocusIn(){var t;this.disabled||this.autocomplete&&((t=this.inputRef.value)==null||t.focus())}firstUpdated(){this._expanded&&this.toggleListbox(o.ENTER,!0)}updated(){var t,e,i,s;this._expanded&&this.value&&((t=this.controlRef.value)==null||t.setAttribute("aria-activedescendant",this.replacedActiveDescendant)),this._expanded&&!this.value&&(this._activeDescendant=(i=(e=this.shadowRoot)==null?void 0:e.querySelector("ngc-list-item"))==null?void 0:i.id,(s=this.controlRef.value)==null||s.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}get fauxInputMarkup(){return
|
|
59
|
+
`}_topLevelFocusOut(t){t.relatedTarget||(this._expanded=!1)}_handleControlFocusIn(){var t;this.disabled||this.autocomplete&&((t=this.inputRef.value)==null||t.focus())}firstUpdated(){this._expanded&&this.toggleListbox(o.ENTER,!0)}updated(){var t,e,i,s;this._expanded&&this.value&&((t=this.controlRef.value)==null||t.setAttribute("aria-activedescendant",this.replacedActiveDescendant)),this._expanded&&!this.value&&(this._activeDescendant=(i=(e=this.shadowRoot)==null?void 0:e.querySelector("ngc-list-item"))==null?void 0:i.id,(s=this.controlRef.value)==null||s.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}get fauxInputMarkup(){return d`
|
|
60
60
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
61
61
|
${this.displayedValue||this.placeholder}
|
|
62
62
|
</div>
|
|
63
|
-
`}get displayedValue(){var t;return this.value?this.valueDisplayed?this.value:((t=this.displayedOptions.find(e=>e.value===this.value))==null?void 0:t.label)??this.value:""}get showPlaceholder(){return this.placeholder&&!this.value}get replacedActiveDescendant(){return this._activeDescendant?this._activeDescendant.replace(" ",""):""}get listboxMarkup(){return
|
|
63
|
+
`}get displayedValue(){var t;return this.value?this.valueDisplayed?this.value:((t=this.displayedOptions.find(e=>e.value===this.value))==null?void 0:t.label)??this.value:""}get showPlaceholder(){return this.placeholder&&!this.value}get replacedActiveDescendant(){return this._activeDescendant?this._activeDescendant.replace(" ",""):""}get listboxMarkup(){return d`
|
|
64
64
|
<div
|
|
65
65
|
${p(this.listboxRef)}
|
|
66
66
|
class="gator-dropdown-listbox ${this._expanded?"gator-dropdown-listbox_expanded":""}"
|
|
@@ -71,10 +71,10 @@ import{a as m,x as l}from"../../../../assets/index-chunk2.js";import"../input-la
|
|
|
71
71
|
selectable
|
|
72
72
|
@selected="${this.handleSelected}"
|
|
73
73
|
faux-focus
|
|
74
|
-
.title="${this.
|
|
74
|
+
.title="${this.label||this.placeholder} List"
|
|
75
75
|
.aria-labelledby="dropdown-label-${this.id}"
|
|
76
76
|
>
|
|
77
|
-
${this.displayedOptions.map(t=>
|
|
77
|
+
${this.displayedOptions.map(t=>d`
|
|
78
78
|
<ngc-list-item
|
|
79
79
|
text="${t.label}"
|
|
80
80
|
value="${t.value}"
|
|
@@ -85,11 +85,11 @@ import{a as m,x as l}from"../../../../assets/index-chunk2.js";import"../input-la
|
|
|
85
85
|
`)}
|
|
86
86
|
</ngc-list>
|
|
87
87
|
</div>
|
|
88
|
-
`}get displayedOptions(){let t=this.options;return this.dataType==="country"?t=$():this.dataType==="state"&&this.countryCode?t=_(this.countryCode):this.dataType==="naics"?t=R():this.dataType==="phoneCodes"&&(t=D()),this._searchValue?[...t.filter(e=>e.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:t}handleSelected(){var t;this._expanded=!1,this._activeDescendant=void 0,(t=this.controlRef.value)==null||t.removeAttribute("aria-activedescendant")}handleComboboxKeydown(t){var e,i;!this._expanded&&(t.key===o.ENTER||t.key===o.SPACE||t.key===o.DOWN)?this.toggleListbox(t.key,!1):this._expanded&&this.listRef.value&&((t.key===o.ENTER||t.key===o.SPACE)&&this.listRef.value.selectFalseFocusedItem(),t.key===o.DOWN&&(this._activeDescendant=this.listRef.value.falseFocusNextItem(),(e=this.controlRef.value)==null||e.setAttribute("aria-activedescendant",this.replacedActiveDescendant)),t.key===o.UP&&(this._activeDescendant=this.listRef.value.falseFocusPreviousItem(),(i=this.controlRef.value)==null||i.setAttribute("aria-activedescendant",this.replacedActiveDescendant))),t.key===o.ESCAPE&&(this._expanded=!1)}get errorClass(){return this.errorText?"gator-has-error":""}get disabledClass(){return this.disabled?"gator-disabled":"gator-cursor-pointer"}get labelMarkup(){return
|
|
88
|
+
`}get displayedOptions(){let t=this.options;return this.dataType==="country"?t=$():this.dataType==="state"&&this.countryCode?t=_(this.countryCode):this.dataType==="naics"?t=R():this.dataType==="phoneCodes"&&(t=D()),this._searchValue?[...t.filter(e=>e.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:t}handleSelected(){var t;this._expanded=!1,this._activeDescendant=void 0,(t=this.controlRef.value)==null||t.removeAttribute("aria-activedescendant")}handleComboboxKeydown(t){var e,i;!this._expanded&&(t.key===o.ENTER||t.key===o.SPACE||t.key===o.DOWN)?this.toggleListbox(t.key,!1):this._expanded&&this.listRef.value&&((t.key===o.ENTER||t.key===o.SPACE)&&this.listRef.value.selectFalseFocusedItem(),t.key===o.DOWN&&(this._activeDescendant=this.listRef.value.falseFocusNextItem(),(e=this.controlRef.value)==null||e.setAttribute("aria-activedescendant",this.replacedActiveDescendant)),t.key===o.UP&&(this._activeDescendant=this.listRef.value.falseFocusPreviousItem(),(i=this.controlRef.value)==null||i.setAttribute("aria-activedescendant",this.replacedActiveDescendant))),t.key===o.ESCAPE&&(this._expanded=!1)}get errorClass(){return this.errorText?"gator-has-error":""}get disabledClass(){return this.disabled?"gator-disabled":"gator-cursor-pointer"}get labelMarkup(){return d`
|
|
89
89
|
<ngc-input-label
|
|
90
90
|
.for="dropdown-label-${this.id}"
|
|
91
91
|
.required="${this.required}"
|
|
92
92
|
type="div"
|
|
93
93
|
>
|
|
94
94
|
${this.label}
|
|
95
|
-
</ngc-input-label>`}toggleListbox(t,e){var i;this.disabled||(e||(this._expanded=!this._expanded),setTimeout(()=>{var s;this.assignPosition(),this.listRef.value&&(t==o.DOWN||!this.value)?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&this.listRef.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value)),this._expanded&&((s=this.controlRef.value)==null||s.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}),this._expanded||(this._activeDescendant=void 0,(i=this.controlRef.value)==null||i.removeAttribute("aria-activedescendant")))}get endIconMarkup(){return
|
|
95
|
+
</ngc-input-label>`}toggleListbox(t,e){var i;this.disabled||(e||(this._expanded=!this._expanded),setTimeout(()=>{var s;this.assignPosition(),this.listRef.value&&(t==o.DOWN||!this.value)?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&this.listRef.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value)),this._expanded&&((s=this.controlRef.value)==null||s.setAttribute("aria-activedescendant",this.replacedActiveDescendant))}),this._expanded||(this._activeDescendant=void 0,(i=this.controlRef.value)==null||i.removeAttribute("aria-activedescendant")))}get endIconMarkup(){return d`<ngc-icon .name="${this.endIcon||"chevron-down"}"></ngc-icon>`}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup=x(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:i,placement:s}=await y(t,this.listboxRef.value,{placement:"bottom-start",middleware:[g({alignment:"start"})]});let l=s==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${i+l}px`,width:`${this.listWidth??t.clientWidth}px`})}))}handleInput(t){let e=t.target;this._searchValue=e.value,this._expanded=!0}handleInputKeydown(t){if((t.key===o.DOWN||t.key===o.UP)&&t.preventDefault(),t.key===o.SPACE){t.stopPropagation();return}}};a.styles=[...O(a,a,"styles"),m(C)];r([n({type:Array})],a.prototype,"options",2);r([n({type:Boolean})],a.prototype,"autocomplete",2);r([n({type:String,attribute:"data-type"})],a.prototype,"dataType",2);r([n({type:String,attribute:"country-code"})],a.prototype,"countryCode",2);r([n({type:String,attribute:"list-width"})],a.prototype,"listWidth",2);r([n({type:Boolean,attribute:"value-displayed"})],a.prototype,"valueDisplayed",2);r([f()],a.prototype,"_activeDescendant",2);r([f()],a.prototype,"_expanded",2);r([f()],a.prototype,"_searchValue",2);a=r([b("ngc-input-dropdown")],a);
|
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "2.1.0-preview.
|
|
4
|
+
"version": "2.1.0-preview.15",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -4088,8 +4088,8 @@
|
|
|
4088
4088
|
}
|
|
4089
4089
|
},
|
|
4090
4090
|
{
|
|
4091
|
-
"name": "ngc-toast-
|
|
4092
|
-
"description": "\n---\n\n\n### **Slots:**\n - _default_ - The
|
|
4091
|
+
"name": "ngc-toast-subtitle",
|
|
4092
|
+
"description": "\n---\n\n\n### **Slots:**\n - _default_ - The subtitle content",
|
|
4093
4093
|
"doc-url": "",
|
|
4094
4094
|
"attributes": [
|
|
4095
4095
|
{
|
|
@@ -4121,7 +4121,7 @@
|
|
|
4121
4121
|
"value": { "type": "string", "default": "''" }
|
|
4122
4122
|
}
|
|
4123
4123
|
],
|
|
4124
|
-
"slots": [{ "name": "", "description": "The
|
|
4124
|
+
"slots": [{ "name": "", "description": "The subtitle content" }],
|
|
4125
4125
|
"events": [],
|
|
4126
4126
|
"js": {
|
|
4127
4127
|
"properties": [
|
|
@@ -4140,8 +4140,8 @@
|
|
|
4140
4140
|
}
|
|
4141
4141
|
},
|
|
4142
4142
|
{
|
|
4143
|
-
"name": "ngc-toast-
|
|
4144
|
-
"description": "\n---\n\n\n### **Slots:**\n - _default_ - The
|
|
4143
|
+
"name": "ngc-toast-title",
|
|
4144
|
+
"description": "\n---\n\n\n### **Slots:**\n - _default_ - The title content",
|
|
4145
4145
|
"doc-url": "",
|
|
4146
4146
|
"attributes": [
|
|
4147
4147
|
{
|
|
@@ -4173,7 +4173,7 @@
|
|
|
4173
4173
|
"value": { "type": "string", "default": "''" }
|
|
4174
4174
|
}
|
|
4175
4175
|
],
|
|
4176
|
-
"slots": [{ "name": "", "description": "The
|
|
4176
|
+
"slots": [{ "name": "", "description": "The title content" }],
|
|
4177
4177
|
"events": [],
|
|
4178
4178
|
"js": {
|
|
4179
4179
|
"properties": [
|