@ncino/web-components 15.5.0 → 15.7.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/chip/chip.js +1 -1
- package/dist/components/chip/gator/chip.gator.js +9 -7
- package/dist/components/guided-nav/gator/guided-nav-step/guided-nav-step.gator.js +3 -3
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +42 -35
- package/dist/components/input/gator/input-phone/input-phone.gator.js +6 -5
- package/dist/components/list/gator/list/list.gator.js +2 -2
- package/dist/components/menu/base/gator/menu.gator.js +3 -3
- package/dist/components/menu/menu-item/gator/menu-item.gator.js +10 -4
- package/dist/components/menu/menu-item/menu-item.js +1 -1
- package/dist/components/popover/gator/popover.gator.js +2 -2
- package/dist/components/table/gator/__tests__/test-table-data.js +1 -1
- package/dist/components/table/gator/table-cells/table-cell-icon-button.gator.js +11 -8
- package/dist/components/table/gator/table.gator.js +62 -36
- package/dist/packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/table/gator/table.gator.scss.js +1 -1
- package/dist/types/src/components/chip/chip.d.ts +5 -0
- package/dist/types/src/components/input/gator/dropdown/input-dropdown.gator.d.ts +56 -1
- package/dist/types/src/components/input/gator/input-phone/input-phone.gator.d.ts +11 -1
- package/dist/types/src/components/list/gator/list/list.gator.d.ts +1 -1
- package/dist/types/src/components/menu/base/gator/menu.gator.d.ts +4 -0
- package/dist/types/src/components/menu/menu-item/gator/menu-item.gator.d.ts +10 -1
- package/dist/types/src/components/menu/menu-item/menu-item.d.ts +14 -2
- package/dist/types/src/components/table/gator/__tests__/test-table-data.d.ts +17 -0
- package/dist/types/src/components/table/gator/table.gator.d.ts +6 -0
- package/dist/types/src/components/table/table-cell-config.d.ts +6 -0
- package/package.json +3 -3
- package/web-types.json +78 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as d}from"../../utils/components/testable-lit-element/testable-lit-element.js";var
|
|
1
|
+
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as d}from"../../utils/components/testable-lit-element/testable-lit-element.js";var l=Object.defineProperty,e=(o,p,a,y)=>{for(var i=void 0,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=n(p,a,i)||i);return i&&l(p,a,i),i};class r extends d{constructor(){super(...arguments),this.disabled=!1,this.readonly=!1,this.type=null,this.size=null,this.hideBorder=!1,this.startIcon="",this.endIcon="",this.dismissible=!1,this.ariaHidden="false"}}e([t({type:Boolean})],r.prototype,"disabled");e([t({type:Boolean})],r.prototype,"readonly");e([t()],r.prototype,"type");e([t()],r.prototype,"size");e([t({type:Boolean,attribute:"hide-border"})],r.prototype,"hideBorder");e([t({type:String,attribute:"start-icon"})],r.prototype,"startIcon");e([t({type:String,attribute:"end-icon"})],r.prototype,"endIcon");e([t({type:Boolean,attribute:"dismissible"})],r.prototype,"dismissible");e([t({type:String,attribute:"aria-hidden"})],r.prototype,"ariaHidden");export{r as NjcChip};
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as t,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{customElement as m}from"../../../utils/decorators/custom-element-decorator.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import u from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import g from"../../../packages/web-components/src/components/chip/gator/chip.gator.scss.js";import{NjcChip as d}from"../chip.js";import{classMap as h}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as r}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var $=Object.getOwnPropertyDescriptor,v=(i,o,p,l)=>{for(var e=l>1?void 0:l?$(o,p):o,n=i.length-1,c;n>=0;n--)(c=i[n])&&(e=c(e)||e);return e};let a=class extends d{render(){return this.readonly||this.dismissible?this.readonlyChipMarkup:this.chipMarkup}get chipMarkup(){return s`
|
|
2
2
|
<button
|
|
3
3
|
aria-hidden="${this.ariaHidden}"
|
|
4
|
-
class=${
|
|
4
|
+
class=${h(this.classes)}
|
|
5
5
|
?disabled="${this.disabled}"
|
|
6
6
|
@click=${this.handleClick}
|
|
7
7
|
>
|
|
8
|
-
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:
|
|
8
|
+
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:t}
|
|
9
9
|
<div class="chip-label"><slot></slot></div>
|
|
10
|
+
${this.endIcon?s`<ngc-icon name="${this.endIcon}" size="x-small"></ngc-icon>`:t}
|
|
10
11
|
</button>
|
|
11
12
|
`}get readonlyChipMarkup(){return s`
|
|
12
13
|
<div
|
|
13
14
|
aria-hidden="${this.ariaHidden}"
|
|
14
|
-
class="gator-chip__read-only ${
|
|
15
|
+
class="gator-chip__read-only ${h(this.classes)}"
|
|
15
16
|
aria-disabled="${this.disabled}"
|
|
16
17
|
@click=${this.handleClick}
|
|
17
18
|
>
|
|
18
|
-
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:
|
|
19
|
+
${this.startIcon?s`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:t}
|
|
19
20
|
<div class="chip-label"><slot></slot></div>
|
|
21
|
+
${this.endIcon?s`<ngc-icon name="${this.endIcon}" size="x-small"></ngc-icon>`:t}
|
|
20
22
|
${this.dismissible?s`
|
|
21
23
|
<ngc-icon-button
|
|
22
24
|
icon-name="exit-circle"
|
|
@@ -24,6 +26,6 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
24
26
|
@click=${this.handleDismiss}
|
|
25
27
|
?disabled="${this.disabled}"
|
|
26
28
|
.ariaLabel="Remove ${this.textContent?.trim()}"
|
|
27
|
-
></ngc-icon-button>`:
|
|
29
|
+
></ngc-icon-button>`:t}
|
|
28
30
|
</div>
|
|
29
|
-
`}handleClick(i){i.stopPropagation(),i.preventDefault(),!(this.disabled||this.readonly||this.dismissible)&&this.dispatchEvent(new Event("click",{bubbles:!0}))}handleDismiss(i){i.stopPropagation(),i.preventDefault(),!this.disabled&&this.dispatchEvent(new Event("dismiss",{bubbles:!0}))}get classes(){return{"gator-chip":!0,"gator-chip_small":this.size==="small","gator-chip_disabled":this.disabled,"hide-border":this.hideBorder,[`gator-chip_${this.type}`]:this.type!==null}}};
|
|
31
|
+
`}handleClick(i){i.stopPropagation(),i.preventDefault(),!(this.disabled||this.readonly||this.dismissible)&&this.dispatchEvent(new Event("click",{bubbles:!0}))}handleDismiss(i){i.stopPropagation(),i.preventDefault(),!this.disabled&&this.dispatchEvent(new Event("dismiss",{bubbles:!0}))}get classes(){return{"gator-chip":!0,"gator-chip_small":this.size==="small","gator-chip_disabled":this.disabled,"hide-border":this.hideBorder,[`gator-chip_${this.type}`]:this.type!==null}}};a.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0};a.styles=[r(g),r(b),r(u)];a=v([m("ngc-chip")],a);export{a as NgcChip};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as h,html as c}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 a}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as g}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as b}from"../../../../utils/decorators/custom-element-decorator.js";import{classMap as o}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as h,html as c}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 a}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as g}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as b}from"../../../../utils/decorators/custom-element-decorator.js";import{classMap as o}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import m from"../../../../packages/web-components/src/components/guided-nav/gator/guided-nav-step/guided-nav-step.gator.scss.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import{NgcComponent as _}from"../../../../utils/components/ngc-component.js";import{ifDefined as S}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{unsafeCSS as f}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var $=Object.defineProperty,v=Object.getOwnPropertyDescriptor,x=Object.getPrototypeOf,y=Reflect.get,p=(e,s,r,n)=>{for(var i=n>1?void 0:n?v(s,r):s,d=e.length-1,l;d>=0;d--)(l=e[d])&&(i=(n?l(s,r,i):l(i))||i);return n&&i&&$(s,r,i),i},u=(e,s,r)=>y(x(e),r,s);let t=class extends _{constructor(){super(...arguments),this.step={id:"",value:"",text:""},this.selectedStep={step:"",substep:null},this.state="complete",this.onStepSelected=()=>{},this.onSubstepSelected=()=>{},this.badgeContent=null,this._substepsExpanded=!1}updated(e){(e.has("_isSelected")||e.has("selectedStep"))&&(this._substepsExpanded=this._hasSubsteps&&this._isSelected||!1)}render(){return c`
|
|
2
2
|
<div class="${o(this._stepClasses)}" role="listitem">
|
|
3
3
|
<ngc-list-item
|
|
4
4
|
id="${this.step.id}"
|
|
5
5
|
class="${o(this._stepListItemClasses)}"
|
|
6
6
|
text="${this.step.text}"
|
|
7
7
|
value="${this.step.value}"
|
|
8
|
-
start-icon="${this._stepProgressIcon}"
|
|
9
8
|
hide-checkmark
|
|
10
9
|
.tabindex="${0}"
|
|
11
10
|
?current-list-item="${this.state==="current"}"
|
|
@@ -16,6 +15,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
16
15
|
aria-current="${!this._hasSubsteps&&this._isSelected?"step":"false"}"
|
|
17
16
|
aria-expanded=${S(this._hasSubsteps?this._substepsExpanded:void 0)}
|
|
18
17
|
>
|
|
18
|
+
<ngc-icon slot="start" name="${this._stepProgressIcon}"></ngc-icon>
|
|
19
19
|
${this.badgeContent?c`<ngc-badge slot="end">${this.badgeContent}</ngc-badge>`:h}
|
|
20
20
|
</ngc-list-item>
|
|
21
21
|
${this._substepElementsMarkup}
|
|
@@ -40,4 +40,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
40
40
|
></ngc-guided-nav-substep>
|
|
41
41
|
`})}
|
|
42
42
|
</ngc-list>
|
|
43
|
-
`}handleSelected(e){if(e.detail.interactionType==="keyboard"&&this._hasSubsteps){this._substepsExpanded=!this._substepsExpanded;return}this.onStepSelected(e,this.step)}get _isSelected(){return this.selectedStep?.step===this.step.id}get _substeps(){return this.step.substeps??[]}_getSubstepState(e,s){return e.complete?"complete":s?.complete||!s?"current":"incomplete"}};t.shadowRootOptions={...u(t,t,"shadowRootOptions"),delegatesFocus:!0};t.styles=[...u(t,t,"styles"),f(
|
|
43
|
+
`}handleSelected(e){if(e.detail.interactionType==="keyboard"&&this._hasSubsteps){this._substepsExpanded=!this._substepsExpanded;return}this.onStepSelected(e,this.step)}get _isSelected(){return this.selectedStep?.step===this.step.id}get _substeps(){return this.step.substeps??[]}_getSubstepState(e,s){return e.complete?"complete":s?.complete||!s?"current":"incomplete"}};t.shadowRootOptions={...u(t,t,"shadowRootOptions"),delegatesFocus:!0};t.styles=[...u(t,t,"styles"),f(m)];p([a()],t.prototype,"step",2);p([a()],t.prototype,"selectedStep",2);p([a()],t.prototype,"state",2);p([a({type:Function})],t.prototype,"onStepSelected",2);p([a({type:Function})],t.prototype,"onSubstepSelected",2);p([a({type:String})],t.prototype,"badgeContent",2);p([g()],t.prototype,"_substepsExpanded",2);t=p([b("ngc-guided-nav-step")],t);export{t as NgcGuidedNavStep};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as p}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 L}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 $}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 V}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 g,ref as f}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as S,computePosition as w,flip as O}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as M,formattedStatesForDropdown as D}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as k}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as T,formattedPhoneCountryCodes as F,phoneCountryDropdownOptionMatchesQuery as B}from"../../../../utils/phone-utils.js";import N from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as A}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 P}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var q=Object.defineProperty,W=Object.getOwnPropertyDescriptor,z=Object.getPrototypeOf,H=Reflect.get,o=(t,e,s,i)=>{for(var a=i>1?void 0:i?W(e,s):e,u=t.length-1,c;u>=0;u--)(c=t[u])&&(a=(i?c(e,s,a):c(a))||a);return i&&a&&q(e,s,a),a},K=(t,e,s)=>H(z(t),s,e);const I="__ngc_select_all__";let l=class extends A{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._hasSlottedListItems=!1,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?.()}willUpdate(t){super.willUpdate(t),this.refreshSlottedMode()}render(){return r`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
5
5
|
</slot>
|
|
6
6
|
<div
|
|
7
|
-
${
|
|
8
|
-
class=${
|
|
7
|
+
${f(this.controlRef)}
|
|
8
|
+
class=${V(this.controlClasses)}
|
|
9
9
|
data-testid=${y(this.dataTestid)}-listbox
|
|
10
10
|
aria-disabled="${this.disabled}"
|
|
11
11
|
id="listbox-control-${this.id}"
|
|
@@ -34,12 +34,12 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
34
34
|
${this.bottomText}
|
|
35
35
|
${this.listboxMarkup}
|
|
36
36
|
</div>
|
|
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(
|
|
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(t){const e=t.relatedTarget;(!e||!this.shadowRoot?.contains(e))&&(this._focused=!1,this.closeListbox())}get tabIndexForControl(){return this.disabled||this.autocomplete?"-1":"0"}phoneCodesFlagIconName(){if(this.dataType!=="phoneCodes")return"";const t=typeof this.value=="string"?this.value:"";return C(t)||""}get shouldHaveStartMarkup(){return this.phoneCodesFlagIconName()||super.shouldHaveStartMarkup}get startIconMarkup(){const t=this.phoneCodesFlagIconName();return t?r`<ngc-icon
|
|
38
38
|
id="${this.startIconId}"
|
|
39
39
|
label="${y(this.iconAsLabel?this.label:void 0)}"
|
|
40
|
-
.name="${
|
|
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(
|
|
42
|
-
<input ${
|
|
40
|
+
.name="${t}"
|
|
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(t){if(t.has("autocomplete")&&this.setComboboxAriaAttributes(),t.has("_expanded")&&(this._expanded?this.setAriaActiveDescendant():this.clearAriaActiveDescendant(),this.comboboxElement?.setAttribute("aria-expanded",`${this._expanded}`)),t.has("required")&&this.comboboxElement?.setAttribute("aria-required",`${this.required}`),t.has("readonly")&&this.comboboxElement?.setAttribute("aria-readonly",`${this.readonly}`),(t.has("helpText")||t.has("errorText"))&&this.comboboxElement?.setAttribute("aria-describedby",this.ariaDescribedby),(t.has("ariaLabelledby")||t.has("ariaLabelledByElements")||t.has("label"))&&this.setComboboxAriaLabelledByElements(),t.has("multiselect")&&(this.setMultiselectAriaLabelledbyElements(),this._truncateChips&&this.setupResizeObserver()),t.has("value")&&this.multiselect&&this._truncateChips&&this.scheduleOverflowCalculation(),t.has("wrapChips")&&(this.wrapChips?(this._truncateChips=!1,this._resizeObserver?.disconnect()):(this._truncateChips=!0,this.setupResizeObserver())),t.has("_truncateChips")&&this._truncateChips&&this.scheduleOverflowCalculation(),t.has("_searchValue")&&this._searchValue===""&&this._expanded){const e=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||(e?this._activeDescendant=this.listRef.value.setFalseFocusToValue(s):this._activeDescendant=this.listRef.value.falseFocusFirstItem(),this.listRef.value._setFauxFocusToCurrentItem(),this.setAriaActiveDescendant())})}t.has("value")&&this.multiselect&&(Array.isArray(this.value)?this._selectedValues=[...this.value]:this._selectedValues=[]),this._hasSlottedListItems&&(t.has("value")||t.has("_selectedValues")||t.has("_searchValue")||t.has("multiselect")||t.has("autocomplete")||t.has("_hasSlottedListItems"))&&this.syncSlottedListItems()}get comboboxElement(){return this.autocomplete?this.inputRef.value:this.controlRef.value}setComboboxAriaAttributes(){const t=this.comboboxElement,e=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,a])=>{t?.setAttribute(i,a),e?.removeAttribute(i)}),t&&(t.ariaControlsElements=[this.listRef.value],this.setComboboxAriaLabelledByElements()),e&&(e.ariaControlsElements=null,e.ariaLabelledByElements=null)}setComboboxAriaLabelledByElements(){const t=this.shadowRoot?.getElementById(this.labelId),e=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,t,e,...s].filter(Boolean))}setMultiselectAriaLabelledbyElements(){if(!this.multiselect)return;const t=this.shadowRoot?.getElementById(`multiselect-label-${this.id}`);if(this.comboboxElement&&t){const e=this.comboboxElement.ariaLabelledByElements||null;this.comboboxElement.ariaLabelledByElements=e?[t,...e]:[t]}}setAriaActiveDescendant(){const t=this.comboboxElement;t&&(t.ariaActiveDescendantElement=this._activeDescendant||null)}clearAriaActiveDescendant(){const t=this.comboboxElement;t&&(t.ariaActiveDescendantElement=null)}get inputMarkup(){return r`
|
|
42
|
+
<input ${f(this.inputRef)}
|
|
43
43
|
type="${this.type}"
|
|
44
44
|
.id="${this.id}"
|
|
45
45
|
.placeholder="${this.placeholder}"
|
|
@@ -54,13 +54,13 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
54
54
|
@keydown="${this.handleInputKeydown}"
|
|
55
55
|
@focusin="${this.handleInputFocusIn}"
|
|
56
56
|
@focusout="${this.handleInputFocusOut}"
|
|
57
|
-
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:
|
|
57
|
+
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:p}get multiselectSelectionsMarkup(){return r`
|
|
58
58
|
<div class="gator-multiselect-selections">
|
|
59
59
|
${this.multiselectLabel}
|
|
60
60
|
${this._truncateChips?this.truncatedChipsMarkup:this.chipsMarkup}
|
|
61
|
-
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:
|
|
61
|
+
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:p}
|
|
62
62
|
</div>
|
|
63
|
-
`}get chipsMarkup(){return this.selectedValues.map(
|
|
63
|
+
`}get chipsMarkup(){return this.selectedValues.map(t=>r`
|
|
64
64
|
<ngc-chip
|
|
65
65
|
readonly
|
|
66
66
|
aria-hidden="true"
|
|
@@ -68,10 +68,10 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
68
68
|
size="small"
|
|
69
69
|
?dismissible="${!this.readonly}"
|
|
70
70
|
?disabled="${this.disabled}"
|
|
71
|
-
@dismiss=${()=>this.removeSelection(
|
|
71
|
+
@dismiss=${()=>this.removeSelection(t)}
|
|
72
72
|
>
|
|
73
|
-
${this.getLabelFromValue(
|
|
74
|
-
</ngc-chip>`)}getLabelFromValue(
|
|
73
|
+
${this.getLabelFromValue(t)}
|
|
74
|
+
</ngc-chip>`)}getLabelFromValue(t){if(this._hasSlottedListItems){const s=this.slottedListItems.find(i=>this.isSameOptionValue(i.value,t));if(s)return s.text||String(t)}const e=this.options.find(s=>this.isSameOptionValue(s.value,t));return e?e.label:t}get truncatedChipsMarkup(){return r`
|
|
75
75
|
<div class="gator-chips-container ${this.autocomplete?"gator-chips-container-autocomplete":""}">
|
|
76
76
|
${this.chipsMarkup}
|
|
77
77
|
${this._showOverflowChip?r`
|
|
@@ -87,21 +87,21 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
87
87
|
>
|
|
88
88
|
+${this.selectedValues.length-this._visibleChipCount}
|
|
89
89
|
</ngc-chip>
|
|
90
|
-
`:
|
|
90
|
+
`:p}
|
|
91
91
|
</div>
|
|
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
|
|
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 t=this.shadowRoot?.querySelector(".gator-chips-container"),e=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!t||!e)return;const s=this.autocomplete?e.clientWidth/3*2:e.clientWidth,i=50,a=8,u=t.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((m,b)=>{b<c?m.classList.remove("gator-visually-hidden"):m.classList.add("gator-visually-hidden")});const x=t.scrollWidth,_=c===this.selectedValues.length;if(x+(!_?i+a:0)>s){const m=Math.max(1,c-1);this._visibleChipCount=m,this._showOverflowChip=m<this.selectedValues.length,u.forEach((b,E)=>{E<m?b.classList.remove("gator-visually-hidden"):b.classList.add("gator-visually-hidden")});return}if(_){this._visibleChipCount=this.selectedValues.length,this._showOverflowChip=!1;return}}}setupResizeObserver(){this.multiselect&&(this._resizeObserver=new ResizeObserver(()=>{this.scheduleOverflowCalculation()}),requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".gator-multiselect-selections");t&&this._resizeObserver?.observe(t)}))}removeSelection(t){let e=this.selectedValues;e=e.filter(s=>s!==t),this.emitChangeEvent(e)}get fauxInputMarkup(){return r`
|
|
93
93
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
94
94
|
${this.displayedValue||this.placeholder}
|
|
95
95
|
</div>
|
|
96
|
-
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?
|
|
96
|
+
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?T(this.value)||this.value:this.value:this._hasSlottedListItems?this.slottedListItems.find(s=>this.isSameOptionValue(s.value,this.value))?.text??String(this.value):this.displayedOptions.find(e=>this.isSameOptionValue(e.value,this.value))?.label??String(this.value)}get autocompleteEditorValue(){if(!this.autocomplete)return this.displayedValue;if(this.multiselect)return this._searchValue;if(this._expanded){const t=this.value!==void 0&&this.value!==null&&this.value!=="";return this._searchValue===""&&t?this.displayedValue:this._searchValue}return this.displayedValue}get showPlaceholder(){return this.placeholder&&!this.value}get listboxMarkup(){return r`
|
|
97
97
|
<div
|
|
98
|
-
${
|
|
98
|
+
${f(this.listboxRef)}
|
|
99
99
|
popover="manual"
|
|
100
100
|
class="gator-dropdown-listbox ${this._expanded?"gator-dropdown-listbox_expanded":""}"
|
|
101
101
|
>
|
|
102
102
|
${this.listboxMessageMarkup}
|
|
103
103
|
<ngc-list
|
|
104
|
-
${
|
|
104
|
+
${f(this.listRef)}
|
|
105
105
|
id="listbox-${this.id}"
|
|
106
106
|
selectable
|
|
107
107
|
faux-focus
|
|
@@ -112,37 +112,44 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
112
112
|
${this.selectAll&&this.multiselect?r`
|
|
113
113
|
<ngc-list-item
|
|
114
114
|
class="gator-dropdown-select-all"
|
|
115
|
+
data-select-all-icon="${this.selectAllIcon}"
|
|
115
116
|
hide-checkmark
|
|
116
|
-
start-icon="${this.selectAllIcon}"
|
|
117
117
|
text="${v("Select All")}"
|
|
118
|
-
value="
|
|
118
|
+
value="${I}"
|
|
119
119
|
faux-focus
|
|
120
120
|
?selected="${this.allSelected}"
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
>
|
|
122
|
+
<ngc-icon slot="start" name="${this.selectAllIcon}"></ngc-icon>
|
|
123
|
+
</ngc-list-item>
|
|
124
|
+
`:p}
|
|
125
|
+
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
126
|
+
${this._hasSlottedListItems?p:L(this.displayedOptions??[],t=>t.value,t=>{const e=this.getStartIconForOption(t);return r`
|
|
124
127
|
<ngc-list-item
|
|
125
128
|
class="gator-dropdown-option"
|
|
126
|
-
text="${
|
|
127
|
-
.value="${
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
text="${t.label}"
|
|
130
|
+
.value="${t.value}"
|
|
131
|
+
subtitle="${y(t.subtitle)}"
|
|
132
|
+
?selected="${this.getOptionSelected(t.value)}"
|
|
133
|
+
?disabled="${!!t.disabled}"
|
|
134
|
+
id="${this.id}-${t.value}"
|
|
131
135
|
faux-focus
|
|
132
|
-
|
|
133
|
-
|
|
136
|
+
>
|
|
137
|
+
${e?r`<ngc-icon slot="start" name="${e}"></ngc-icon>`:p}
|
|
138
|
+
${t.endIcon?r`<ngc-icon slot="end" name="${t.endIcon}"></ngc-icon>`:p}
|
|
139
|
+
</ngc-list-item>
|
|
140
|
+
`})}
|
|
134
141
|
</ngc-list>
|
|
135
142
|
</div>
|
|
136
|
-
`}get selectAllIcon(){return this.allSelected?"checkbox-selected":this.selectedValues.length===0?"checkbox":"checkbox-indeterminate"}get allSelected(){return this.selectedValues.
|
|
143
|
+
`}get slottedListItems(){return Array.from(this.children).filter(t=>t.tagName==="NGC-LIST-ITEM")}refreshSlottedMode(){const t=this.slottedListItems.length>0;t!==this._hasSlottedListItems&&(this._hasSlottedListItems=t)}handleDefaultSlotChange(){this.refreshSlottedMode(),this._hasSlottedListItems&&this.syncSlottedListItems()}isSameOptionValue(t,e){return t===e}syncSlottedListItems(){const t=this.autocomplete?this._searchValue.trim().toLowerCase():"",e=this.autocomplete&&this.maxAutocompleteResults!=null?this.maxAutocompleteResults:1/0;let s=0;for(const i of this.slottedListItems){i.fauxFocus=!0;const a=this.getOptionSelected(i.value);i.selected=a;const u=(i.text||"").toLowerCase(),c=(i.subtitle||"").toLowerCase();if(!(!t||u.includes(t)||c.includes(t))){i.hidden=!0;continue}if(s>=e&&!a){i.hidden=!0;continue}i.hidden=!1,s+=1}this._expanded&&this.listRef.value&&(this._activeDescendant=this.listRef.value.setCurrentListItem()??void 0,this.listRef.value._setFauxFocusToCurrentItem(),this.setAriaActiveDescendant())}get visibleSlottedListItemCount(){return this.slottedListItems.filter(t=>!t.hidden).length}get hasVisibleListOptions(){return this._hasSlottedListItems?this.visibleSlottedListItemCount>0:this.displayedOptions.length>0}get selectableOptionValues(){return this._hasSlottedListItems?this.slottedListItems.filter(t=>!t.disabled&&!t.hidden).map(t=>t.value):this.displayedOptions.filter(t=>!t.disabled).map(t=>t.value)}get selectAllIcon(){return this.allSelected?"checkbox-selected":this.selectedValues.length===0?"checkbox":"checkbox-indeterminate"}get allSelected(){const t=this.selectableOptionValues;return t.length>0&&t.every(e=>this.selectedValues.some(s=>this.isSameOptionValue(s,e)))}selectAllOptions(){this.emitChangeEvent([...this.selectableOptionValues])}deselectAllOptions(){this.emitChangeEvent([])}getOptionSelected(t){return this.multiselect?this.selectedValues.some(e=>this.isSameOptionValue(e,t)):this.isSameOptionValue(this.value,t)}get listboxMessageMarkup(){let t;const e=this._hasSlottedListItems?this.visibleSlottedListItemCount:this.displayedOptions.length;if(this.listboxHelpText)t=this.listboxHelpText;else if(this.isTagInputMode&&this._searchValue.trim()&&e===0)t=this.tagInputHintMessage;else{if(!this.autocomplete)return null;e===0&&(t=this.noResultsMessage),this.resultsExceedMax&&(t=this.resultsExceedMaxMessage)}return this.setListboxMessageAriaDescribedByElements(),t?r`
|
|
137
144
|
<div
|
|
138
145
|
class="gator-dropdown-listbox-message"
|
|
139
146
|
id="listbox-message-${this.id}"
|
|
140
147
|
data-testid="${this.dataTestid}-listbox-message"
|
|
141
|
-
${
|
|
148
|
+
${f(this.listboxMessageRef)}
|
|
142
149
|
>
|
|
143
|
-
${
|
|
150
|
+
${t}
|
|
144
151
|
</div>
|
|
145
|
-
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const
|
|
152
|
+
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const t=this.listboxMessageRef.value;if(!this.inputRef.value)return;const e=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(t){e.includes(t)||(this.inputRef.value.ariaDescribedByElements=[t,...e]),s.includes(t)||(this.listRef.value.ariaDescribedByElements=[t,...s]);return}this.inputRef.value.ariaDescribedByElements=e.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._hasSlottedListItems?this.isTagInputMode&&this._searchValue.trim()===""&&this.slottedListItems.length===0:this.isTagInputMode&&this._searchValue.trim()===""&&this.filteredOptions.length===0}get tagInputHintMessage(){const t=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>${t}</strong>"`)}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let t=this.options??[];return this.dataType==="country"?t=M():this.dataType==="state"&&this.countryCode?t=D(this.countryCode):this.dataType==="naics"?t=k():this.dataType==="phoneCodes"&&(t=F()),this._searchValue?this.dataType==="phoneCodes"?t.filter(s=>B(s,this._searchValue)):[...t.filter(s=>s.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:t}get limitedOptions(){const t=this.filteredOptions,e=this.maxAutocompleteResults??t.length;if(!this.multiselect)return t.filter((i,a)=>a<e||i.value===this.value);const s=new Set(this.selectedValues);return t.filter((i,a)=>a<e||s.has(i.value))}get resultsExceedMax(){if(!this.autocomplete||!this.maxAutocompleteResults)return!1;if(this._hasSlottedListItems){const t=this._searchValue.trim().toLowerCase();return this.slottedListItems.filter(s=>{if(!t)return!0;const i=(s.text||"").toLowerCase(),a=(s.subtitle||"").toLowerCase();return i.includes(t)||a.includes(t)}).length>this.maxAutocompleteResults}return this.filteredOptions.length>this.maxAutocompleteResults}getStartIconForOption(t){if(t.startIcon)return t.startIcon;if(typeof t.value=="string"&&this.dataType==="phoneCodes")return C(t.value)||void 0}handleSelected(t){if(t.stopImmediatePropagation(),this.clearAriaActiveDescendant(),this.multiselect){if(t.detail.value===I){this.allSelected?this.deselectAllOptions():this.selectAllOptions();return}const e=this.selectedValues,s=this.valueArrayType,i=e.findIndex(a=>{const u=s==="number"?Number(t.detail.value):t.detail.value;return a===u});i>-1?e.splice(i,1):s==="number"?e.push(Number(t.detail.value)):e.push(t.detail.value),e&&this.emitChangeEvent(e)}else this.closeListbox(),this.emitChangeEvent(t.detail.value)}get selectedValues(){return this.multiselect&&Array.isArray(this.value)?this._selectedValues:[]}handleComboboxKeydown(t){if(!this._expanded&&(t.key===n.ENTER||t.key===n.SPACE||t.key===n.DOWN))this.toggleListbox(t.key,!1);else if(this._expanded&&this.listRef.value){if(t.key===n.ENTER||t.key===n.SPACE){if(t.key===n.ENTER&&this.tryAddTagFromKeyboard(t))return;const e=this.listRef.value?.selectFalseFocusedItem();t.key===n.ENTER&&e&&(t.preventDefault(),t.stopPropagation())}t.key===n.DOWN&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusNextItem(),this.setAriaActiveDescendant()),t.key===n.UP&&(t.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusPreviousItem(),this.setAriaActiveDescendant())}(t.key===n.ESCAPE||t.key===n.TAB)&&this.closeListbox()}toggleListbox(t,e){if(this.disabled||this.readonly)return;if(!e){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):t==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 t=this.listboxRef.value;if(t)try{t.hidePopover()}catch{}}get endIconMarkup(){return r`<ngc-icon
|
|
146
153
|
class="gator-dropdown-chevron"
|
|
147
154
|
name="${this.renderedEndIcon}"
|
|
148
155
|
?disabled="${this.disabled||this.readonly}"
|
|
@@ -155,4 +162,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
155
162
|
@click="${this.clearValue}"
|
|
156
163
|
?disabled="${this.disabled||this.readonly}"
|
|
157
164
|
></ngc-icon-button>
|
|
158
|
-
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const
|
|
165
|
+
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const t=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!t||(this._cleanup?.(),this._cleanup=S(t,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!t)return;const{x:e,y:s,placement:i}=await w(t,this.listboxRef.value,{strategy:"fixed",placement:"bottom-start",middleware:[O()]});let a=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${e}px`,top:`${s+a}px`,width:`${this.listWidth??t.clientWidth}px`})},{animationFrame:!0}))}handleInput(t){t.preventDefault(),t.stopPropagation();let e=t.target;e.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=e.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:e.value}}))}handleInputKeydown(t){if((t.key===n.DOWN||t.key===n.UP)&&t.preventDefault(),t.key===n.SPACE){t.stopPropagation();return}this.tryAddTagFromKeyboard(t)||t.key===n.BACKSPACE&&this.tryRemoveLastChipFromBackspace(t)}tryRemoveLastChipFromBackspace(t){if(!this.autocomplete||!this.multiselect||this._searchValue.trim()!=="")return;t.preventDefault(),t.stopPropagation(),this._searchValue!==""&&this.clearSearchInput();const e=this.selectedValues||[];e.length>0&&(e.pop(),this.emitChangeEvent(e))}tryAddTagFromKeyboard(t){if(!this.isTagInputMode)return!1;const e=t.key===n.ENTER,s=t.key===n.TAB;return!e&&!s||!this._searchValue.trim()||e&&this._expanded&&this.hasVisibleListOptions&&this.listRef.value&&this.listRef.value.listItems.some(u=>u.falseFocusing)?!1:(t.preventDefault(),t.stopPropagation(),this.addTagFromInput(),this.inputRef.value?.focus(),!0)}showListboxPopover(){const t=this.listboxRef.value;if(t)try{t.showPopover()}catch{}}get valueArrayType(){return this.selectedValues.length>0?typeof this.selectedValues[0]=="number"?"number":"string":this._hasSlottedListItems&&this.slottedListItems.length>0?typeof this.slottedListItems[0].value=="number"?"number":"string":this.options?.length&&typeof this.options[0].value=="number"?"number":"string"}addTagFromInput(){const t=this._searchValue.trim();if(!t||!this.isTagInputMode)return;const e=[...this.selectedValues],s=this.valueArrayType,i=s==="number"?Number(t):t;if(!(s==="number"&&Number.isNaN(i))){if(e.some(a=>a===i)){this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox();return}e.push(i),this.emitChangeEvent(e),this.clearSearchInput(),this.shouldSuppressEmptyListbox&&this.closeListbox()}}clearSearchInput(){this._searchValue="",this.inputRef.value&&(this.inputRef.value.value="")}emitChangeEvent(t){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(t)?[...t]:t}}))}};l.shadowRootOptions={...A.shadowRootOptions,delegatesFocus:!0};l.styles=[...K(l,l,"styles"),P(N)];o([h({type:Boolean})],l.prototype,"multiselect",2);o([h({type:Array})],l.prototype,"options",2);o([h({type:Boolean})],l.prototype,"autocomplete",2);o([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);o([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);o([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);o([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);o([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);o([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);o([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);o([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);o([h({type:Boolean,attribute:"hide-clear"})],l.prototype,"hideClear",2);o([h({type:Boolean})],l.prototype,"loading",2);o([h({type:Boolean,attribute:"tag-input"})],l.prototype,"tagInput",2);o([d()],l.prototype,"_activeDescendant",2);o([d()],l.prototype,"_expanded",2);o([d()],l.prototype,"_searchValue",2);o([d()],l.prototype,"_focused",2);o([d()],l.prototype,"_hovered",2);o([d()],l.prototype,"_visibleChipCount",2);o([d()],l.prototype,"_showOverflowChip",2);o([d()],l.prototype,"_truncateChips",2);o([d()],l.prototype,"_hasSlottedListItems",2);o([d()],l.prototype,"_selectedValues",2);l=o([R("ngc-input-dropdown"),$()],l);export{I as NGC_DROPDOWN_SELECT_ALL_VALUE,l as NgcInputDropdown};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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 m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l}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 m}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as h,ref as p}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import g from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{NgcInputBase as b}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{isValidPhoneNumber as v}from"../../../../node_modules/.pnpm/libphonenumber-js@1.13.8/node_modules/libphonenumber-js/min/exports/isValidPhoneNumber.js";import{parsePhoneNumber as d}from"../../../../node_modules/.pnpm/libphonenumber-js@1.13.8/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as y}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var C=Object.defineProperty,P=Object.getOwnPropertyDescriptor,V=Object.getPrototypeOf,$=Reflect.get,a=(t,n,e,i)=>{for(var r=i>1?void 0:i?P(n,e):n,u=t.length-1,s;u>=0;u--)(s=t[u])&&(r=(i?s(n,e,r):s(r))||r);return i&&r&&C(n,e,r),r},N=(t,n,e)=>$(V(t),e,n);let o=class extends b{constructor(){super(...arguments),this.inputContainer=h(),this.dropdownContainer=h()}get phoneRegionIso(){if(this.countryCodeValue!=null&&this.countryCodeValue!=="")return this.countryCodeValue;if(this.countryCodeValue===null||this.countryCodeValue==="")return;const t=this.defaultCountry?.trim();return t?t.toUpperCase():void 0}render(){return l`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
${this.label?this.labelMarkup:null}
|
|
4
|
-
<div class="gator-phone-input-container" ${
|
|
4
|
+
<div class="gator-phone-input-container" ${p(this.inputContainer)}>
|
|
5
5
|
<div class="gator-phone-input-country-container">
|
|
6
6
|
<ngc-input-dropdown
|
|
7
|
-
${
|
|
7
|
+
${p(this.dropdownContainer)}
|
|
8
8
|
.value=${this.phoneRegionIso}
|
|
9
9
|
id="country-${this.id}"
|
|
10
10
|
?disabled="${this.disabled}"
|
|
@@ -24,6 +24,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
24
24
|
type="text"
|
|
25
25
|
id="phone-${this.id}"
|
|
26
26
|
inputmode="tel"
|
|
27
|
+
@input="${this.handlePhoneInput}"
|
|
27
28
|
@change="${this.handlePhoneInput}"
|
|
28
29
|
?readonly="${this.readonly}"
|
|
29
30
|
>
|
|
@@ -33,7 +34,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
33
34
|
</div>
|
|
34
35
|
${this.bottomText}
|
|
35
36
|
</div>
|
|
36
|
-
`}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(
|
|
37
|
+
`}updated(t){t.has("value")&&(this.lastRawPhoneValue=void 0),this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}get currentPhoneValue(){return this.lastRawPhoneValue??String(this.value??"")}handleSelected(t){const n=t.detail.value;n===""||n===null||n===void 0?this.countryCodeValue=null:this.countryCodeValue=typeof n=="string"?n.toUpperCase():String(n);const e=this.currentPhoneValue;e.trim()!==""&&this.emitPhoneChange(e)}isValidPhoneNumberForCurrentContext(t){if(t==="")return!0;const n=this.phoneRegionIso;if(n)return v(t,n);const e=d(t);return e?e.isValid():!0}buildChangeDetail(t){const n=this.isValidPhoneNumberForCurrentContext(t.trim()),e=d(t,this.phoneRegionIso);return e?(e.country&&(this.countryCodeValue=e.country),this.phoneNumberValue=e.nationalNumber,{value:t,countryCode:e.countryCallingCode,country:e.country,phoneNumber:e.nationalNumber,formattedPhoneNumber:e.formatInternational(),isValidPhoneNumber:n}):{value:t,isValidPhoneNumber:n}}emitPhoneChange(t){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.buildChangeDetail(t)}))}handlePhoneInput(t){t.preventDefault(),t.stopPropagation(),this.lastRawPhoneValue=String(t.detail.value??""),this.emitPhoneChange(this.lastRawPhoneValue)}get slotLabelMarkup(){return l`
|
|
37
38
|
<ngc-input-label
|
|
38
39
|
slot="label"
|
|
39
40
|
hide-label
|
|
@@ -41,4 +42,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
41
42
|
.required="${this.required}"
|
|
42
43
|
>
|
|
43
44
|
${this.label}
|
|
44
|
-
</ngc-input-label>`}};
|
|
45
|
+
</ngc-input-label>`}};o.styles=[...N(o,o,"styles"),y(g)];a([c()],o.prototype,"countryCodeValue",2);a([c()],o.prototype,"phoneNumberValue",2);a([m({type:String,attribute:"default-country"})],o.prototype,"defaultCountry",2);o=a([f("ngc-input-phone")],o);export{o as NgcInputPhone};
|
|
@@ -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
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as u}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as I}from"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as n}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{property as r}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import"../list-item/list-item.gator.js";import{NgcDivider as v}from"../../../divider/gator/divider.gator.js";import{KEY_CONSTANTS as d}from"../../../../consts/key-constants.js";import{NgcComponent as b}from"../../../../utils/components/ngc-component.js";var p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,a=(t,e,i,l)=>{for(var o=l>1?void 0:l?y(e,i):e,h=t.length-1,m;h>=0;h--)(m=t[h])&&(o=(l?m(e,i,o):m(o))||o);return l&&o&&p(e,i,o),o};let s=class extends b{constructor(){super(...arguments),this.id="",this.density="default",this.selectable=!1,this.multiselect=!1,this.ariaLabelledBy="",this.ariaLabelledByElements=null,this.ariaDescribedByElements=null,this.title="",this.fauxFocus=!1,this.hideCheckmarks=!1,this.ariaLabel=null,this.role=null,this._selectedListItem=null,this._activeIndex=0,this._totalListItems=0,this._listItemsWithEventListeners=new Set}updated(t){if(t.has("density")&&this.assignChildNodeDensity(),(t.has("selectable")||t.has("multiselect"))&&this.updateSlottedItems(),t.has("hideCheckmarks")&&this.assignChildNodeHideCheckmark(),t.has("ariaLabelledByElements")&&this.ariaLabelledByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaLabelledByElements=this.ariaLabelledByElements)}if(t.has("ariaDescribedByElements")&&this.ariaDescribedByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaDescribedByElements=this.ariaDescribedByElements)}t.has("_activeIndex")&&t.get("_activeIndex")!==this._activeIndex&&this._setFauxFocusToCurrentItem()}render(){return u`
|
|
2
2
|
<div
|
|
3
3
|
class="gator-list"
|
|
4
4
|
role="${this.listRole}"
|
|
@@ -10,4 +10,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
10
10
|
>
|
|
11
11
|
<slot @slotchange="${this.handleSlotChanged}"></slot>
|
|
12
12
|
</div>
|
|
13
|
-
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,e.variant==="header"?(e.selectable=!1,e.setAttribute("role","presentation")):this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",i=>{this._selectedListItem=i.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0),this.setCurrentListItem()}),this._listItemsWithEventListeners.add(e));this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}}isNavigableListItem(t){return!!t&&!t.isNonInteractive}moveActiveIndexToNavigableItem(t){if(!this.listItems?.length)return;if(t===0){if(this.isNavigableListItem(this.listItems[this._activeIndex]))return;for(let l=this._activeIndex;l>=0;l--)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}for(let l=this._activeIndex+1;l<this.listItems.length;l++)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}return}const e=this.listItems.length;let i=this._activeIndex;for(let l=0;l<e;l++)if(i=(i+t+e)%e,this.isNavigableListItem(this.listItems[i])){this._activeIndex=i;return}}setFalseFocusToValue(t){if(this.listItems){for(const[e,i]of this.listItems.entries())if(i.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1,this.moveActiveIndexToNavigableItem(0)),this._activeIndex>=this._totalListItems&&(this._activeIndex=0,this.moveActiveIndexToNavigableItem(0)),this.isNavigableListItem(this.listItems[this._activeIndex])||this.moveActiveIndexToNavigableItem(1);for(const[e,i]of this.listItems.entries())i.currentListItem=e===this._activeIndex&&this.isNavigableListItem(i),i.currentListItem&&(t=i);return t}_setFauxFocusToCurrentItem(){this.listItems?.forEach(t=>{t.currentListItem?this.fauxFocus?t.falseFocus():t.focus():this.fauxFocus&&t.removeFalseFocus()})}falseFocusFirstItem(){return this._activeIndex=0,this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}falseFocusPreviousItem(){return this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem()}falseFocusNextItem(){return this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem()}selectFalseFocusedItem(){if(this.listItems)for(const
|
|
13
|
+
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,e.variant==="header"?(e.selectable=!1,e.setAttribute("role","presentation")):this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",i=>{this._selectedListItem=i.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0),this.setCurrentListItem()}),this._listItemsWithEventListeners.add(e));this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}}isNavigableListItem(t){return!!t&&!t.isNonInteractive&&!t.hidden}moveActiveIndexToNavigableItem(t){if(!this.listItems?.length)return;if(t===0){if(this.isNavigableListItem(this.listItems[this._activeIndex]))return;for(let l=this._activeIndex;l>=0;l--)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}for(let l=this._activeIndex+1;l<this.listItems.length;l++)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}return}const e=this.listItems.length;let i=this._activeIndex;for(let l=0;l<e;l++)if(i=(i+t+e)%e,this.isNavigableListItem(this.listItems[i])){this._activeIndex=i;return}}setFalseFocusToValue(t){if(this.listItems){for(const[e,i]of this.listItems.entries())if(i.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1,this.moveActiveIndexToNavigableItem(0)),this._activeIndex>=this._totalListItems&&(this._activeIndex=0,this.moveActiveIndexToNavigableItem(0)),this.isNavigableListItem(this.listItems[this._activeIndex])||this.moveActiveIndexToNavigableItem(1);for(const[e,i]of this.listItems.entries())i.currentListItem=e===this._activeIndex&&this.isNavigableListItem(i),i.currentListItem&&(t=i);return t}_setFauxFocusToCurrentItem(){this.listItems?.forEach(t=>{t.currentListItem?this.fauxFocus?t.falseFocus():t.focus():this.fauxFocus&&t.removeFalseFocus()})}falseFocusFirstItem(){return this._activeIndex=0,this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}falseFocusPreviousItem(){return this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem()}falseFocusNextItem(){return this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem()}selectFalseFocusedItem(){if(!this.listItems)return!1;let t=!1;for(const e of this.listItems)e.falseFocusing&&!e.isNonInteractive&&(e.selectItem(),t=!0);return t}unselectAllListItems(){if(this.listItems)for(const t of this.listItems)t.selected=!1}handleKeyUp(t){switch(t.key){case d.UP:this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem(),t.preventDefault();break;case d.DOWN:this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem(),t.preventDefault();break}}get nodes(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})}get listItems(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0}).filter(t=>t.nodeName==="NGC-LIST-ITEM")}assignChildNodeDensity(){if(this.nodes)for(const t of this.nodes)(t.nodeName=="NGC-LIST-ITEM"||t.nodeName=="NGC-DIVIDER")&&((t||v).density=this.density)}assignChildNodeHideCheckmark(){if(this.listItems)for(const t of this.listItems)t.hasAttribute("hide-checkmark")||(t.hideCheckmark=this.hideCheckmarks)}};s.shadowRootOptions={...I.shadowRootOptions,mode:"open"};a([r()],s.prototype,"id",2);a([r()],s.prototype,"density",2);a([r({type:Boolean})],s.prototype,"selectable",2);a([r({type:Boolean})],s.prototype,"multiselect",2);a([r({attribute:"aria-labelledby"})],s.prototype,"ariaLabelledBy",2);a([r({type:Array,attribute:"aria-labelled-by-elements"})],s.prototype,"ariaLabelledByElements",2);a([r({type:Array,attribute:"aria-described-by-elements"})],s.prototype,"ariaDescribedByElements",2);a([r({attribute:"aria-describedby"})],s.prototype,"ariaDescribedby",2);a([r()],s.prototype,"title",2);a([r({type:Boolean,attribute:"faux-focus"})],s.prototype,"fauxFocus",2);a([r({type:Boolean,attribute:"hide-checkmarks"})],s.prototype,"hideCheckmarks",2);a([r({attribute:"aria-label"})],s.prototype,"ariaLabel",2);a([r({type:String})],s.prototype,"role",2);a([c()],s.prototype,"_selectedListItem",2);a([c()],s.prototype,"_activeIndex",2);s=a([f("ngc-list")],s);export{s as NgcList};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html 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{customElement as p}from"../../../../utils/decorators/custom-element-decorator.js";import{autoUpdate as f,computePosition as g,flip as b,shift as v}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{ref as h}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{handleDataTestid as d}from"../../../../utils/datatestid-utils.js";import{NjcMenu as _}from"../menu.js";import{NgcMenuItem as c}from"../../menu-item/gator/menu-item.gator.js";import w from"../../../../packages/styles/dist/tokens/primitive.tokens.css.js";import I from"../../../../packages/styles/dist/tokens/semantic.tokens.css.js";import A from"../../../../packages/web-components/src/components/menu/base/gator/menu.gator.scss.js";import{unsafeCSS as l}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.getOwnPropertyDescriptor,x=(e,t,o,s)=>{for(var n=s>1?void 0:s?y(t,o):t,i=e.length-1,a;i>=0;i--)(a=e[i])&&(n=a(n)||n);return n};let r=class extends _{constructor(){super(...arguments),this._dropdownRef=h(),this._wasOpenAtPointerDown=!1,this._handlePopoverToggle=e=>{const t=e.newState==="open";this.open=t,this._button?.setAttribute("aria-expanded",t?"true":"false"),t?this.assignPosition():(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0,this._dropdownRef.value?.removeAttribute("data-positioned"))},this.handleMenuItemDisabledChange=()=>{const e=this.shadowRoot?.querySelector('ul[role="menu"] > slot');e&&this.syncMenuItemTabIndexes(e.assignedElements())}}render(){return m`
|
|
2
2
|
<div class="gator-dropdown-trigger">
|
|
3
3
|
<slot @slotchange="${this.handleTriggerSlotChange}" name="trigger"></slot>
|
|
4
4
|
<div
|
|
5
5
|
class="gator-dropdown"
|
|
6
6
|
popover="auto"
|
|
7
|
-
${
|
|
7
|
+
${h(this._dropdownRef)}
|
|
8
8
|
@toggle=${this._handlePopoverToggle}
|
|
9
9
|
>
|
|
10
10
|
<ul class="gator_dropdown__list" role="menu" aria-label="${this.menuAriaLabel}" @keydown=${this.handleMenuKeydown}>
|
|
@@ -12,4 +12,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
12
12
|
</ul>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`}updated(){const
|
|
15
|
+
`}updated(){const e=this.shadowRoot?.querySelector("[role=menu]");d(e,this.dataTestid,"dropdown");const t=this._dropdownRef.value;if(!t)return;const o=t.matches(":popover-open");this.open&&!o?(this._closeOtherMenus(),t.showPopover()):!this.open&&o&&t.hidePopover()}connectedCallback(){super.connectedCallback(),r._instances.add(this),this.addEventListener("menuitemdisabledchange",this.handleMenuItemDisabledChange)}disconnectedCallback(){this.removeEventListener("menuitemdisabledchange",this.handleMenuItemDisabledChange),r._instances.delete(this),super.disconnectedCallback(),this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0}_openPopover(){const e=this._dropdownRef.value;!e||e.matches(":popover-open")||(this._closeOtherMenus(),e.showPopover(),this.focusFirstMenuItem())}_closeOtherMenus(){for(const e of r._instances)e!==this&&e._hidePopover()}_hidePopover(){this._dropdownRef.value?.matches(":popover-open")&&this._dropdownRef.value.hidePopover()}handleTriggerSlotChange(e){const o=e.target.assignedElements(),s='button, [role="button"]';o.forEach(n=>{const i=n.shadowRoot??n;this._button=i.querySelector(s),this._button||(n.matches(s)?this._button=n:(this._button=i.firstElementChild,this._button||(this._button=n),this._button.role="button")),this._button?.getAttribute("tabindex")||this._button?.setAttribute("tabindex","0"),this._button?.setAttribute("aria-haspopup","true"),this._button?.setAttribute("aria-expanded",this.open?"true":"false"),d(this._button,this.dataTestid,"button"),this._button?.addEventListener("pointerdown",()=>{this._wasOpenAtPointerDown=!!this._dropdownRef.value?.matches(":popover-open")}),this._button?.addEventListener("click",()=>{this._wasOpenAtPointerDown||this._openPopover()});const a=this._button.tagName.toLowerCase()==="button";this._button?.addEventListener("keydown",u=>{(u.key==="ArrowDown"||!a&&(u.key==="Enter"||u.key===" "))&&this._openPopover()})})}focusMenuItem(e){e?.focus({preventScroll:!0})}isNavigableMenuItem(e){return e instanceof c&&!e.disabled}getNavigableMenuItems(){return Array.from(this.menuItems).filter(e=>this.isNavigableMenuItem(e))}focusFirstMenuItem(){setTimeout(()=>{this.focusMenuItem(this.getNavigableMenuItems()[0])})}focusTriggerButton(){requestAnimationFrame(()=>{this._button?.focus({preventScroll:!0})})}handleItemSlotChange(e){const o=e.target.assignedElements();for(let[s,n]of o.entries()){const i=n.tagName.toLowerCase();(i==="ngc-menu-item"||i==="ngc-submenu")&&(n.addEventListener("menuitemclick",()=>{this.handleClose()}),d(n,this.dataTestid,`menu-item-${s}`))}this.syncMenuItemTabIndexes(o)}syncMenuItemTabIndexes(e){let t=!1;for(const o of e){const s=o.tagName.toLowerCase();if(s!=="ngc-menu-item"&&s!=="ngc-submenu")continue;const n=o instanceof c&&o.disabled;!t&&!n?(o.setAttribute("tabindex","0"),t=!0):o.setAttribute("tabindex","-1")}}handleMenuKeydown(e){e.key==="ArrowDown"||e.key==="ArrowRight"?this.handleArrowDown(e):e.key==="ArrowUp"||e.key==="ArrowLeft"?this.handleArrowUp(e):e.key==="Tab"?this.handleClose():e.key==="Escape"&&(this.handleClose(),this._button?.focus())}handleArrowDown(e){e.preventDefault();const t=this.getNavigableMenuItems();if(t.length===0)return;const o=this.activeMenuItemIndex,s=t.findIndex(i=>Array.from(this.menuItems).indexOf(i)===o),n=s<0?0:(s+1)%t.length;this.focusMenuItem(t[n])}handleArrowUp(e){e.preventDefault();const t=this.getNavigableMenuItems();if(t.length===0)return;const o=this.activeMenuItemIndex,s=t.findIndex(i=>Array.from(this.menuItems).indexOf(i)===o),n=s<0?t.length-1:(s-1+t.length)%t.length;this.focusMenuItem(t[n])}get activeMenuItemIndex(){const e=this.querySelector(":focus-within");return Array.from(this.menuItems).indexOf(e)}get menuItems(){return this.querySelectorAll("ngc-menu-item")}handleClose(){this._hidePopover(),this.focusTriggerButton()}assignPosition(){const e=this._button,t=this._dropdownRef.value;!t||!e||(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=f(e,t,async()=>{const{x:o,y:s,placement:n}=await g(e,t,{placement:this.placement,strategy:"fixed",middleware:[b({padding:8}),v({padding:8})]}),i=4,a=n.startsWith("bottom")?i:n.startsWith("top")?-i:0;Object.assign(t.style,{left:`${o}px`,top:`${s+a}px`}),t.setAttribute("data-positioned","")}))}};r._instances=new Set;r.styles=[l(A),l(w),l(I)];r=x([p("ngc-menu")],r);export{r as NgcMenu};
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as a,html as i}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 h}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{customElement as m}from"../../../../utils/decorators/custom-element-decorator.js";import{NjcMenuItem as u}from"../menu-item.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import{KEY_CONSTANTS as c}from"../../../../consts/key-constants.js";var p=Object.getOwnPropertyDescriptor,b=(e,n,l,o)=>{for(var t=o>1?void 0:o?p(n,l):n,s=e.length-1,r;s>=0;s--)(r=e[s])&&(t=r(t)||t);return t};let d=class extends u{constructor(){super(),this._startIconWarned=!1,this._endIconWarned=!1,this.handleKeydown=e=>{this.disabled||(e.key===c.SPACE||e.key===c.ENTER)&&(this.handleItemKeydown(e),this.shadowRoot?.querySelector("ngc-list-item")?.click())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.syncAriaDisabled(),this.addEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("disabled")&&(this.syncAriaDisabled(),this.dispatchEvent(new CustomEvent("menuitemdisabledchange",{bubbles:!0,composed:!0}))),this.warnDeprecatedIconProps()}syncAriaDisabled(){this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}warnDeprecatedIconProps(){this.startIcon&&!this._startIconWarned&&(this._startIconWarned=!0,console.warn('ngc-menu-item: `start-icon` is deprecated. Use the `start` slot instead, e.g. `<ngc-icon slot="start" name="…">`.')),this.endIcon&&!this._endIconWarned&&(this._endIconWarned=!0,console.warn('ngc-menu-item: `end-icon` is deprecated. Use the `end` slot instead, e.g. `<ngc-icon slot="end" name="…">`.'))}render(){return i`
|
|
2
2
|
<ngc-list-item
|
|
3
3
|
@click="${this.handleItemClick}"
|
|
4
4
|
text="${this.value}"
|
|
5
|
+
subtitle="${h(this.subtitle??void 0)}"
|
|
6
|
+
?disabled="${this.disabled}"
|
|
5
7
|
selectable
|
|
6
8
|
hide-checkmark
|
|
7
9
|
role="presentation"
|
|
8
10
|
faux-focus
|
|
9
11
|
>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
<slot name="start" slot="start">
|
|
13
|
+
${this.startIcon?i`<ngc-icon name="${this.startIcon}"></ngc-icon>`:a}
|
|
14
|
+
</slot>
|
|
15
|
+
<slot name="end" slot="end">
|
|
16
|
+
${this.endIcon?i`<ngc-icon name="${this.endIcon}"></ngc-icon>`:a}
|
|
17
|
+
</slot>
|
|
12
18
|
</ngc-list-item>
|
|
13
|
-
`}focus(
|
|
19
|
+
`}focus(e){this.shadowRoot?.querySelector("ngc-list-item")?.focus(e)}click(){this.disabled||this.shadowRoot?.querySelector("ngc-list-item")?.click()}};d=b([m("ngc-menu-item")],d);export{d as NgcMenuItem};
|